@educarehq/solaris-components 0.2.3 → 0.2.5

package/fesm2022/educarehq-solaris-components.mjs

@@ -1,14 +1,378 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, HostBinding, Input, ChangeDetectionStrategy, Component, signal, ContentChildren, HostListener, Optional, viewChild, inject, DestroyRef, input, booleanAttribute, numberAttribute, computed, afterNextRender, effect, Directive, ContentChild, ElementRef, InjectionToken, Renderer2, forwardRef, ViewChild, Injectable, Injector } from '@angular/core';
+import { inject, ElementRef, Renderer2, Directive, TemplateRef, Injectable, ViewContainerRef, DestroyRef, Input, ContentChild, ViewEncapsulation, Component, EventEmitter, Output, HostBinding, ChangeDetectionStrategy, ApplicationRef, signal, computed, effect, ContentChildren, HostListener, Optional, viewChild, input, booleanAttribute, numberAttribute, afterNextRender, ViewChild, output, forwardRef, Host, InjectionToken, Injector } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { fromEvent, merge } from 'rxjs';
+import { filter } from 'rxjs/operators';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
 import { RouterLink } from '@angular/router';
-import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
+import { NgClass, NgTemplateOutlet, NgStyle, DOCUMENT, NgOptimizedImage } from '@angular/common';
+import { SolarisTranslationPipe } from '@educarehq/solaris-services';
+import * as i1 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';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { SolarisTranslationPipe } from '@educarehq/solaris-services';
-import { merge } from 'rxjs';
+
+class SolarisDropdownContentTriggerDirective {
+    elementRef = inject((ElementRef));
+    solarisRenderer = inject(Renderer2);
+    ensureFocusable() {
+        const solarisEl = this.elementRef.nativeElement;
+        const solarisTag = solarisEl.tagName.toLowerCase();
+        const solarisIsNaturallyFocusable = solarisTag === 'button' || solarisTag === 'a' ||
+            solarisEl.hasAttribute('tabindex');
+        if (!solarisIsNaturallyFocusable) {
+            this.solarisRenderer.setAttribute(solarisEl, 'tabindex', '0');
+            this.solarisRenderer.setAttribute(solarisEl, 'role', 'button');
+        }
+        this.solarisRenderer.setAttribute(solarisEl, 'aria-haspopup', 'true');
+    }
+    setExpanded(isExpanded, panelId) {
+        const solarisEl = this.elementRef.nativeElement;
+        this.solarisRenderer.setAttribute(solarisEl, 'aria-expanded', String(isExpanded));
+        this.solarisRenderer.setAttribute(solarisEl, 'aria-controls', panelId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContentTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisDropdownContentTriggerDirective, isStandalone: true, selector: "[solaris-dropdown-content-trigger]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContentTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-dropdown-content-trigger]',
+                    standalone: true
+                }]
+        }] });
+
+class SolarisDropdownContentPanelDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContentPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisDropdownContentPanelDirective, isStandalone: true, selector: "ng-template[solaris-dropdown-content-panel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContentPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[solaris-dropdown-content-panel]',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisDropdownContentRegistry {
+    solarisInstances = new Set();
+    register(instance) {
+        this.solarisInstances.add(instance);
+    }
+    unregister(instance) {
+        this.solarisInstances.delete(instance);
+    }
+    notifyOpen(openingInstance) {
+        for (const solarisInstance of this.solarisInstances) {
+            if (solarisInstance !== openingInstance) {
+                solarisInstance.closeFromRegistry();
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContentRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContentRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContentRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SolarisDropdownContent {
+    solarisRegistry = inject(SolarisDropdownContentRegistry);
+    solarisVcr = inject(ViewContainerRef);
+    solarisDestroyRef = inject(DestroyRef);
+    solarisOverlay = inject(Overlay);
+    trigger;
+    panel;
+    container;
+    widthMode = 'auto';
+    maxWidth = '72rem';
+    closeDelay = 120;
+    openDelay = 60;
+    solarisPanelId = `solaris-dropdown-panel-${Math.random().toString(16).slice(2)}`;
+    solarisIsHoveringTrigger = false;
+    solarisPortal;
+    solarisIsHoveringPanel = false;
+    solarisOutsideClickSub;
+    solarisIsPinned = false;
+    solarisOverlayRef;
+    solarisIsOpen = false;
+    solarisCloseTimer;
+    solarisOpenTimer;
+    ngAfterContentInit() {
+        if (!this.trigger)
+            throw new Error('solaris-dropdown: missing [solaris-dropdown-trigger].');
+        if (!this.panel)
+            throw new Error('solaris-dropdown: missing <ng-template solaris-dropdown-content-panel>.');
+        this.solarisRegistry.register(this);
+        this.trigger.ensureFocusable();
+        this.trigger.setExpanded(false, this.solarisPanelId);
+        const solarisTriggerEl = this.trigger.elementRef.nativeElement;
+        fromEvent(solarisTriggerEl, 'mouseenter').pipe(takeUntilDestroyed(this.solarisDestroyRef))
+            .subscribe(() => this.solarisOnTriggerEnter());
+        fromEvent(solarisTriggerEl, 'mouseleave').pipe(takeUntilDestroyed(this.solarisDestroyRef))
+            .subscribe(() => this.solarisOnTriggerLeave());
+        fromEvent(solarisTriggerEl, 'click').pipe(takeUntilDestroyed(this.solarisDestroyRef))
+            .subscribe((solarisEvent) => {
+            solarisEvent.preventDefault();
+            this.solarisTogglePinned();
+        });
+        fromEvent(solarisTriggerEl, 'keydown').pipe(takeUntilDestroyed(this.solarisDestroyRef))
+            .subscribe((solarisEvent) => {
+            if (solarisEvent.key === 'Enter' || solarisEvent.key === ' ') {
+                solarisEvent.preventDefault();
+                this.solarisTogglePinned();
+            }
+            if (solarisEvent.key === 'Escape') {
+                solarisEvent.preventDefault();
+                this.close('escape');
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.solarisRegistry.unregister(this);
+        this.solarisUnbindOutsideClick();
+        this.solarisOverlayRef?.dispose();
+    }
+    closeFromRegistry() {
+        this.close('registry');
+    }
+    solarisOnTriggerEnter() {
+        this.solarisIsHoveringTrigger = true;
+        if (this.solarisIsPinned)
+            return;
+        this.solarisScheduleOpen('hover');
+    }
+    solarisOnTriggerLeave() {
+        this.solarisIsHoveringTrigger = false;
+        if (this.solarisIsPinned)
+            return;
+        this.solarisScheduleClose();
+    }
+    solarisOnPanelEnter() {
+        this.solarisIsHoveringPanel = true;
+        if (this.solarisIsPinned)
+            return;
+        this.solarisClearCloseTimer();
+    }
+    solarisOnPanelLeave() {
+        this.solarisIsHoveringPanel = false;
+        if (this.solarisIsPinned)
+            return;
+        this.solarisScheduleClose();
+    }
+    solarisTogglePinned() {
+        if (!this.solarisIsOpen) {
+            this.solarisIsPinned = true;
+            this.open('pinned');
+            return;
+        }
+        if (this.solarisIsPinned) {
+            this.close('toggle');
+            return;
+        }
+        this.solarisIsPinned = true;
+        this.solarisBindOutsideClick();
+    }
+    solarisScheduleOpen(reason) {
+        this.solarisClearOpenTimer();
+        this.solarisOpenTimer = globalThis.setTimeout(() => this.open(reason), this.openDelay);
+    }
+    solarisScheduleClose() {
+        this.solarisClearCloseTimer();
+        this.solarisCloseTimer = globalThis.setTimeout(() => {
+            if (this.solarisIsPinned)
+                return;
+            if (this.solarisIsHoveringTrigger || this.solarisIsHoveringPanel)
+                return;
+            this.close('hover-leave');
+        }, this.closeDelay);
+    }
+    solarisClearOpenTimer() {
+        if (this.solarisOpenTimer)
+            globalThis.clearTimeout(this.solarisOpenTimer);
+        this.solarisOpenTimer = undefined;
+    }
+    solarisClearCloseTimer() {
+        if (this.solarisCloseTimer)
+            globalThis.clearTimeout(this.solarisCloseTimer);
+        this.solarisCloseTimer = undefined;
+    }
+    open(reason) {
+        if (!this.trigger || !this.panel)
+            return;
+        if (reason === 'hover')
+            this.solarisIsPinned = false;
+        this.solarisRegistry.notifyOpen(this);
+        const solarisTriggerEl = this.trigger.elementRef.nativeElement;
+        const solarisOriginRect = solarisTriggerEl.getBoundingClientRect();
+        const solarisContainerEl = this.solarisGetContainerEl();
+        const solarisContainerRect = solarisContainerEl?.getBoundingClientRect();
+        const solarisIsFull = this.widthMode === 'full';
+        const solarisViewportMargin = solarisIsFull ? 0 : 8;
+        const solarisOffsetX = this.solarisComputeOffsetX(solarisOriginRect, solarisContainerRect);
+        const solarisPositionStrategy = this.solarisOverlay
+            .position().flexibleConnectedTo(solarisTriggerEl)
+            .withFlexibleDimensions(false).withPush(!solarisIsFull)
+            .withViewportMargin(solarisViewportMargin).withDefaultOffsetX(solarisOffsetX)
+            .withDefaultOffsetY(8).withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+        ]);
+        if (this.solarisOverlayRef) {
+            this.solarisOverlayRef.updatePositionStrategy(solarisPositionStrategy);
+        }
+        else {
+            this.solarisOverlayRef = this.solarisOverlay.create({
+                positionStrategy: solarisPositionStrategy,
+                scrollStrategy: this.solarisOverlay.scrollStrategies.reposition(),
+                panelClass: ['solaris-dropdown-content-overlay']
+            });
+            this.solarisOverlayRef.detachments().pipe(takeUntilDestroyed(this.solarisDestroyRef))
+                .subscribe(() => this.solarisResetState());
+        }
+        this.solarisApplyOverlaySize(solarisOriginRect, solarisContainerRect);
+        this.solarisPortal ??= new TemplatePortal(this.panel.templateRef, this.solarisVcr);
+        if (!this.solarisOverlayRef.hasAttached()) {
+            this.solarisOverlayRef.attach(this.solarisPortal);
+            this.solarisWirePanelEvents();
+        }
+        this.solarisIsOpen = true;
+        this.trigger.setExpanded(true, this.solarisPanelId);
+        if (this.solarisIsPinned) {
+            this.solarisBindOutsideClick();
+        }
+        else {
+            this.solarisUnbindOutsideClick();
+        }
+        this.solarisClearCloseTimer();
+    }
+    close(reason) {
+        this.solarisClearOpenTimer();
+        this.solarisClearCloseTimer();
+        this.solarisIsPinned = false;
+        this.solarisUnbindOutsideClick();
+        if (this.solarisOverlayRef?.hasAttached()) {
+            this.solarisOverlayRef.detach();
+        }
+        this.solarisIsOpen = false;
+        this.trigger?.setExpanded(false, this.solarisPanelId);
+    }
+    solarisResetState() {
+        this.solarisIsOpen = false;
+        this.solarisIsPinned = false;
+        this.solarisIsHoveringPanel = false;
+        this.solarisIsHoveringTrigger = false;
+        this.solarisUnbindOutsideClick();
+        this.trigger?.setExpanded(false, this.solarisPanelId);
+    }
+    solarisWirePanelEvents() {
+        if (!this.solarisOverlayRef)
+            return;
+        const solarisPanelHost = this.solarisOverlayRef.overlayElement;
+        solarisPanelHost.id = this.solarisPanelId;
+        fromEvent(solarisPanelHost, 'mouseenter').pipe(takeUntilDestroyed(this.solarisDestroyRef))
+            .subscribe(() => this.solarisOnPanelEnter());
+        fromEvent(solarisPanelHost, 'mouseleave').pipe(takeUntilDestroyed(this.solarisDestroyRef))
+            .subscribe(() => this.solarisOnPanelLeave());
+        fromEvent(solarisPanelHost, 'keydown').pipe(takeUntilDestroyed(this.solarisDestroyRef))
+            .subscribe((solarisEvent) => {
+            if (solarisEvent.key === 'Escape') {
+                solarisEvent.preventDefault();
+                this.close('escape');
+                this.trigger?.elementRef.nativeElement.focus();
+            }
+        });
+    }
+    solarisBindOutsideClick() {
+        if (!this.solarisIsPinned)
+            return;
+        if (this.solarisOutsideClickSub)
+            return;
+        const solarisTriggerEl = this.trigger?.elementRef.nativeElement;
+        const solarisOverlayEl = this.solarisOverlayRef?.overlayElement;
+        if (!solarisTriggerEl || !solarisOverlayEl)
+            return;
+        this.solarisOutsideClickSub = fromEvent(document, 'mousedown')
+            .pipe(filter(() => this.solarisIsPinned), filter((solarisEvent) => {
+            const solarisTarget = solarisEvent.target;
+            if (!solarisTarget)
+                return false;
+            const solarisInsideTrigger = solarisTriggerEl.contains(solarisTarget);
+            const solarisInsidePanel = solarisOverlayEl.contains(solarisTarget);
+            return !solarisInsideTrigger && !solarisInsidePanel;
+        }), takeUntilDestroyed(this.solarisDestroyRef))
+            .subscribe(() => this.close('outside'));
+    }
+    solarisUnbindOutsideClick() {
+        this.solarisOutsideClickSub?.unsubscribe();
+        this.solarisOutsideClickSub = undefined;
+    }
+    solarisGetContainerEl() {
+        const solarisContainer = this.container;
+        if (!solarisContainer)
+            return undefined;
+        return solarisContainer instanceof ElementRef ? solarisContainer.nativeElement : solarisContainer;
+    }
+    solarisComputeOffsetX(solarisOriginRect, solarisContainerRect) {
+        if (this.widthMode === 'full') {
+            return -solarisOriginRect.left;
+        }
+        if (this.widthMode === 'container' && solarisContainerRect) {
+            return solarisContainerRect.left - solarisOriginRect.left;
+        }
+        return 0;
+    }
+    solarisApplyOverlaySize(solarisOriginRect, solarisContainerRect) {
+        if (!this.solarisOverlayRef)
+            return;
+        if (this.widthMode === 'match-trigger') {
+            this.solarisOverlayRef.updateSize({ width: solarisOriginRect.width });
+            return;
+        }
+        if (this.widthMode === 'full') {
+            const solarisViewportWidth = document.documentElement.clientWidth;
+            this.solarisOverlayRef.updateSize({
+                width: solarisViewportWidth,
+                maxWidth: solarisViewportWidth
+            });
+            return;
+        }
+        if (this.widthMode === 'container' && solarisContainerRect) {
+            this.solarisOverlayRef.updateSize({
+                width: solarisContainerRect.width,
+                maxWidth: solarisContainerRect.width,
+            });
+            return;
+        }
+        this.solarisOverlayRef.updateSize({ maxWidth: this.maxWidth });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisDropdownContent, isStandalone: true, selector: "solaris-dropdown-content", inputs: { container: "container", widthMode: "widthMode", maxWidth: "maxWidth", closeDelay: "closeDelay", openDelay: "openDelay" }, queries: [{ propertyName: "trigger", first: true, predicate: SolarisDropdownContentTriggerDirective, descendants: true }, { propertyName: "panel", first: true, predicate: SolarisDropdownContentPanelDirective, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [".solaris-dropdown-content-overlay{width:100%;display:block;z-index:var(--solaris-z-dropdown);padding:var(--solaris-dropdown-content-padding, var(--solaris-space-6));box-shadow:var(--solaris-dropdown-content-shadow, var(--solaris-shadow-md));background:var(--solaris-dropdown-content-bg, var(--solaris-color-surface));border-radius:var(--solaris-dropdown-content-radius, var(--solaris-radius-lg));border:1px solid var(--solaris-dropdown-content-border, var(--solaris-color-border))}.solaris-dropdown-content-overlay:focus{outline:none}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDropdownContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-dropdown-content', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\r\n", styles: [".solaris-dropdown-content-overlay{width:100%;display:block;z-index:var(--solaris-z-dropdown);padding:var(--solaris-dropdown-content-padding, var(--solaris-space-6));box-shadow:var(--solaris-dropdown-content-shadow, var(--solaris-shadow-md));background:var(--solaris-dropdown-content-bg, var(--solaris-color-surface));border-radius:var(--solaris-dropdown-content-radius, var(--solaris-radius-lg));border:1px solid var(--solaris-dropdown-content-border, var(--solaris-color-border))}.solaris-dropdown-content-overlay:focus{outline:none}\n"] }]
+        }], propDecorators: { trigger: [{
+                type: ContentChild,
+                args: [SolarisDropdownContentTriggerDirective]
+            }], panel: [{
+                type: ContentChild,
+                args: [SolarisDropdownContentPanelDirective]
+            }], container: [{
+                type: Input
+            }], widthMode: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], closeDelay: [{
+                type: Input
+            }], openDelay: [{
+                type: Input
+            }] } });
 
 class SolarisBreadcrumb {
     minItems = 2;
@@ -89,6 +453,332 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Output
             }] } });
 
+class SolarisPopoverTriggerDirective {
+    elementRef = inject((ElementRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPopoverTriggerDirective, isStandalone: true, selector: "[solaris-popover-trigger]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPopoverTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-popover-trigger]',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisPopoverPanelDirective {
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPopoverPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPopoverPanelDirective, isStandalone: true, selector: "ng-template[solaris-popover-panel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPopoverPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[solaris-popover-panel]',
+                    standalone: true,
+                }]
+        }] });
+
+function clamp$1(v, min, max) {
+    return Math.max(min, Math.min(max, v));
+}
+function initialXY(anchor, panel, placement, offset) {
+    const axMid = anchor.left + anchor.width / 2;
+    const ayMid = anchor.top + anchor.height / 2;
+    switch (placement) {
+        case 'bottom-start': return { x: anchor.left, y: anchor.bottom + offset };
+        case 'bottom': return { x: axMid - panel.width / 2, y: anchor.bottom + offset };
+        case 'bottom-end': return { x: anchor.right - panel.width, y: anchor.bottom + offset };
+        case 'top-start': return { x: anchor.left, y: anchor.top - panel.height - offset };
+        case 'top': return { x: axMid - panel.width / 2, y: anchor.top - panel.height - offset };
+        case 'top-end': return { x: anchor.right - panel.width, y: anchor.top - panel.height - offset };
+        case 'right-start': return { x: anchor.right + offset, y: anchor.top };
+        case 'right': return { x: anchor.right + offset, y: ayMid - panel.height / 2 };
+        case 'right-end': return { x: anchor.right + offset, y: anchor.bottom - panel.height };
+        case 'left-start': return { x: anchor.left - panel.width - offset, y: anchor.top };
+        case 'left': return { x: anchor.left - panel.width - offset, y: ayMid - panel.height / 2 };
+        case 'left-end': return { x: anchor.left - panel.width - offset, y: anchor.bottom - panel.height };
+    }
+}
+function flipPlacement(p) {
+    if (p.startsWith('bottom'))
+        return p.replace('bottom', 'top');
+    if (p.startsWith('top'))
+        return p.replace('top', 'bottom');
+    if (p.startsWith('left'))
+        return p.replace('left', 'right');
+    if (p.startsWith('right'))
+        return p.replace('right', 'left');
+    return p;
+}
+function computePopoverPosition(anchorRect, panelRect, configuration) {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let applied = configuration.placement;
+    const fits = (x, y) => {
+        const pad = configuration.viewportPadding;
+        const left = x;
+        const top = y;
+        const right = x + panelRect.width;
+        const bottom = y + panelRect.height;
+        return left >= pad && top >= pad && right <= vw - pad && bottom <= vh - pad;
+    };
+    let pos = initialXY(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);
+        if (fits(flippedPos.x, flippedPos.y)) {
+            applied = flipped;
+            pos = flippedPos;
+        }
+    }
+    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);
+    }
+    return { x: pos.x, y: pos.y, appliedPlacement: applied };
+}
+
+class SolarisPopover {
+    appRef = inject(ApplicationRef);
+    destroyRef = inject(DestroyRef);
+    offset = 8;
+    panelClass = '';
+    autoFlip = true;
+    autoShift = true;
+    matchWidth = false;
+    viewportPadding = 8;
+    closeOnEscape = true;
+    closeOnOutsideClick = true;
+    anchorElement = null;
+    matchWidthElement = null;
+    placement = 'bottom-start';
+    openChange = new EventEmitter();
+    _internalOpen = signal(false, ...(ngDevMode ? [{ debugName: "_internalOpen" }] : []));
+    _openInput = signal(null, ...(ngDevMode ? [{ debugName: "_openInput" }] : []));
+    isOpen = computed(() => {
+        const v = this._openInput();
+        return typeof v === 'boolean' ? v : this._internalOpen();
+    }, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    set open(v) {
+        console.log(`[Popover#${this._id} ${this.panelClass}] input open=`, v);
+        this._openInput.set(v);
+    }
+    get open() {
+        return this._openInput();
+    }
+    panelDir;
+    triggerDir;
+    raf = 0;
+    static seq = 0;
+    _setting = false;
+    panelHost;
+    panelView;
+    _id = ++SolarisPopover.seq;
+    get dataOpen() {
+        return this.isOpen() ? 'true' : null;
+    }
+    constructor() {
+        effect(() => {
+            if (this.isOpen())
+                this.show();
+            else
+                this.hide();
+        });
+        effect((onCleanup) => {
+            if (!this.isOpen())
+                return;
+            const onResize = () => this.scheduleReposition();
+            const onScroll = () => this.scheduleReposition();
+            const onPointerDown = (ev) => {
+                if (!this.closeOnOutsideClick)
+                    return;
+                const t = ev.target;
+                const triggerEl = this.triggerDir?.elementRef.nativeElement;
+                if (!t || !triggerEl || !this.panelHost)
+                    return;
+                const clickedInsidePanel = this.panelHost.contains(t);
+                const clickedOnTrigger = triggerEl.contains(t);
+                if (!clickedInsidePanel && !clickedOnTrigger) {
+                    console.log(`[Popover#${this._id} ${this.panelClass}] outside -> close`);
+                    this.setOpen(false);
+                }
+            };
+            const onKeyDown = (ev) => {
+                if (!this.closeOnEscape)
+                    return;
+                if (ev.key === 'Escape')
+                    this.setOpen(false);
+            };
+            window.addEventListener('resize', onResize, { passive: true });
+            window.addEventListener('scroll', onScroll, { passive: true, capture: true });
+            document.addEventListener('pointerdown', onPointerDown, { capture: true });
+            document.addEventListener('keydown', onKeyDown, { capture: true });
+            onCleanup(() => {
+                window.removeEventListener('resize', onResize);
+                window.removeEventListener('scroll', onScroll, true);
+                document.removeEventListener('pointerdown', onPointerDown, true);
+                document.removeEventListener('keydown', onKeyDown, true);
+            });
+        });
+        this.destroyRef.onDestroy(() => this.unmountHard());
+    }
+    toggle() {
+        this.setOpen(!this.isOpen());
+    }
+    setOpen(next) {
+        const current = this.isOpen();
+        if (next === current)
+            return;
+        if (this._setting)
+            return;
+        this._setting = true;
+        try {
+            this.openChange.emit(next);
+            if (typeof this._openInput() !== 'boolean') {
+                this._internalOpen.set(next);
+            }
+        }
+        finally {
+            queueMicrotask(() => (this._setting = false));
+        }
+    }
+    ensureMounted() {
+        if (this.panelHost || !this.triggerDir || !this.panelDir)
+            return;
+        const host = document.createElement('div');
+        host.style.top = '0px';
+        host.style.left = '0px';
+        host.style.display = 'none';
+        host.style.position = 'fixed';
+        host.style.zIndex = 'var(--solaris-z-dropdown)';
+        host.className = `solaris-popover-panel ${this.panelClass || ''}`.trim();
+        const view = this.panelDir.templateRef.createEmbeddedView({});
+        this.appRef.attachView(view);
+        view.detectChanges();
+        for (const node of view.rootNodes)
+            host.appendChild(node);
+        document.body.appendChild(host);
+        this.panelHost = host;
+        this.panelView = view;
+    }
+    show() {
+        this.ensureMounted();
+        if (!this.panelHost)
+            return;
+        this.panelHost.style.display = '';
+        this.scheduleReposition(true);
+    }
+    hide() {
+        if (!this.panelHost)
+            return;
+        this.panelHost.style.display = 'none';
+    }
+    unmountHard() {
+        if (this.raf)
+            cancelAnimationFrame(this.raf);
+        this.raf = 0;
+        if (this.panelView) {
+            this.appRef.detachView(this.panelView);
+            this.panelView.destroy();
+            this.panelView = undefined;
+        }
+        if (this.panelHost) {
+            this.panelHost.remove();
+            this.panelHost = undefined;
+        }
+    }
+    scheduleReposition(immediate = false) {
+        if (!this.panelHost || !this.triggerDir)
+            return;
+        if (immediate) {
+            this.reposition();
+            return;
+        }
+        if (this.raf)
+            return;
+        this.raf = requestAnimationFrame(() => {
+            this.raf = 0;
+            this.reposition();
+        });
+    }
+    reposition() {
+        const triggerEl = this.triggerDir?.elementRef.nativeElement;
+        const host = this.panelHost;
+        if (!triggerEl || !host)
+            return;
+        const anchorEl = this.anchorElement ?? triggerEl;
+        const anchorRect = anchorEl.getBoundingClientRect();
+        const widthEl = this.matchWidthElement ?? (this.matchWidth ? anchorEl : null);
+        if (this.matchWidth && widthEl) {
+            const w = widthEl.getBoundingClientRect().width;
+            host.style.boxSizing = 'border-box';
+            host.style.width = `${w}px`;
+            host.style.minWidth = `${w}px`;
+            host.style.maxWidth = `${w}px`;
+        }
+        else {
+            host.style.width = '';
+            host.style.minWidth = '';
+            host.style.maxWidth = '';
+        }
+        if (getComputedStyle(host).display === 'none')
+            return;
+        const panelRect = host.getBoundingClientRect();
+        const { x, y } = computePopoverPosition(anchorRect, panelRect, {
+            placement: this.placement,
+            offset: this.offset,
+            viewportPadding: this.viewportPadding,
+            autoFlip: this.autoFlip,
+            autoShift: this.autoShift,
+            matchWidth: this.matchWidth,
+        });
+        host.style.transform = `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPopover, isStandalone: true, selector: "solaris-popover", inputs: { offset: "offset", panelClass: "panelClass", autoFlip: "autoFlip", autoShift: "autoShift", matchWidth: "matchWidth", viewportPadding: "viewportPadding", closeOnEscape: "closeOnEscape", closeOnOutsideClick: "closeOnOutsideClick", anchorElement: "anchorElement", matchWidthElement: "matchWidthElement", placement: "placement", open: "open" }, outputs: { openChange: "openChange" }, host: { properties: { "attr.data-open": "this.dataOpen" } }, queries: [{ propertyName: "panelDir", first: true, predicate: SolarisPopoverPanelDirective, descendants: true }, { propertyName: "triggerDir", first: true, predicate: SolarisPopoverTriggerDirective, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:contents}.solaris-popover-panel{overflow:hidden;transform-origin:top left;box-shadow:var(--solaris-shadow-md);border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface);animation:solaris-popover-in .12s ease;border:1px solid var(--solaris-color-border)}@keyframes solaris-popover-in{0%{opacity:0;filter:blur(1px)}to{opacity:1;filter:blur(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPopover, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-popover', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\r\n", styles: [":host{display:contents}.solaris-popover-panel{overflow:hidden;transform-origin:top left;box-shadow:var(--solaris-shadow-md);border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface);animation:solaris-popover-in .12s ease;border:1px solid var(--solaris-color-border)}@keyframes solaris-popover-in{0%{opacity:0;filter:blur(1px)}to{opacity:1;filter:blur(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { offset: [{
+                type: Input
+            }], panelClass: [{
+                type: Input
+            }], autoFlip: [{
+                type: Input
+            }], autoShift: [{
+                type: Input
+            }], matchWidth: [{
+                type: Input
+            }], viewportPadding: [{
+                type: Input
+            }], closeOnEscape: [{
+                type: Input
+            }], closeOnOutsideClick: [{
+                type: Input
+            }], anchorElement: [{
+                type: Input
+            }], matchWidthElement: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }], open: [{
+                type: Input
+            }], panelDir: [{
+                type: ContentChild,
+                args: [SolarisPopoverPanelDirective]
+            }], triggerDir: [{
+                type: ContentChild,
+                args: [SolarisPopoverTriggerDirective]
+            }], dataOpen: [{
+                type: HostBinding,
+                args: ['attr.data-open']
+            }] } });
+
 class SolarisTabs {
     size = 'md';
     disabled = false;
@@ -290,10 +980,10 @@ class SolarisLoadingOverlay {
         }
     }
     get overlayStyle() {
-        return this.zIndex != null ? { 'z-index': String(this.zIndex) } : null;
+        return this.zIndex == null ? null : { 'z-index': String(this.zIndex) };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisLoadingOverlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisLoadingOverlay, isStandalone: true, selector: "solaris-loading-overlay", inputs: { zIndex: ["z-index", "zIndex"], backdrop: "backdrop", appearance: "appearance", blur: ["blur", "blur", coerceBoolean$1], open: ["open", "open", coerceBoolean$1], lockScroll: ["lock-scroll", "lockScroll", coerceBoolean$1] }, host: { properties: { "attr.solaris-loading-overlay": "this.marker" } }, usesOnChanges: true, ngImport: i0, template: "@if (open) {\r\n  <div class=\"solaris-loading-overlay\" [class.backdrop-soft]=\"backdrop === 'soft'\"\r\n       [class.backdrop-strong]=\"backdrop === 'strong'\" [class.is-blur]=\"blur\"\r\n       [class.appearance-card]=\"appearance === 'card'\" [class.appearance-minimal]=\"appearance === 'minimal'\"\r\n       [ngStyle]=\"overlayStyle\" role=\"presentation\">\r\n    <div class=\"solaris-loading-overlay__backdrop\" aria-hidden=\"true\"></div>\r\n\r\n    <div class=\"solaris-loading-overlay__content\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.solaris-loading-overlay{--solaris-overlay-z: var(--solaris-z-overlay, 2000);position:fixed;inset:0;z-index:var(--solaris-overlay-z);display:grid;place-items:center;pointer-events:auto}.solaris-loading-overlay__backdrop{position:absolute;inset:0;background:#00000059}.solaris-loading-overlay.backdrop-strong .solaris-loading-overlay__backdrop{background:#0000008c}.solaris-loading-overlay.is-blur .solaris-loading-overlay__backdrop{-webkit-backdrop-filter:blur(.8rem);backdrop-filter:blur(.8rem)}.solaris-loading-overlay__content{position:relative;z-index:1;display:grid;place-items:center;gap:var(--solaris-space-3);color:var(--solaris-color-text);outline:none}.solaris-loading-overlay.appearance-card .solaris-loading-overlay__content{min-width:18rem;max-width:min(42rem,100vw - 4rem);padding:var(--solaris-space-6);border-radius:var(--solaris-radius-md);border:1px solid color-mix(in srgb,var(--solaris-color-border) 70%,transparent);background:color-mix(in srgb,var(--solaris-color-surface) 88%,transparent);box-shadow:var(--solaris-shadow-md)}.solaris-loading-overlay.appearance-minimal .solaris-loading-overlay__content{padding:0;border:0;background:transparent;box-shadow:none}:host ::ng-deep [solaris-loading-overlay-text]{font-size:var(--solaris-fs-14);color:color-mix(in srgb,var(--solaris-color-text) 85%,transparent);text-align:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisLoadingOverlay, isStandalone: true, selector: "solaris-loading-overlay", inputs: { zIndex: ["z-index", "zIndex"], backdrop: "backdrop", appearance: "appearance", blur: ["blur", "blur", coerceBoolean$2], open: ["open", "open", coerceBoolean$2], lockScroll: ["lock-scroll", "lockScroll", coerceBoolean$2] }, host: { properties: { "attr.solaris-loading-overlay": "this.marker" } }, usesOnChanges: true, ngImport: i0, template: "@if (open) {\r\n  <div class=\"solaris-loading-overlay\" [class.backdrop-soft]=\"backdrop === 'soft'\"\r\n       [class.backdrop-strong]=\"backdrop === 'strong'\" [class.is-blur]=\"blur\"\r\n       [class.appearance-card]=\"appearance === 'card'\" [class.appearance-minimal]=\"appearance === 'minimal'\"\r\n       [ngStyle]=\"overlayStyle\" role=\"presentation\">\r\n    <div class=\"solaris-loading-overlay__backdrop\" aria-hidden=\"true\"></div>\r\n\r\n    <div class=\"solaris-loading-overlay__content\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.solaris-loading-overlay{--solaris-overlay-z: var(--solaris-z-overlay, 2000);position:fixed;inset:0;z-index:var(--solaris-overlay-z);display:grid;place-items:center;pointer-events:auto}.solaris-loading-overlay__backdrop{position:absolute;inset:0;background:#00000059}.solaris-loading-overlay.backdrop-strong .solaris-loading-overlay__backdrop{background:#0000008c}.solaris-loading-overlay.is-blur .solaris-loading-overlay__backdrop{-webkit-backdrop-filter:blur(.8rem);backdrop-filter:blur(.8rem)}.solaris-loading-overlay__content{position:relative;z-index:1;display:grid;place-items:center;gap:var(--solaris-space-3);color:var(--solaris-color-text);outline:none}.solaris-loading-overlay.appearance-card .solaris-loading-overlay__content{min-width:18rem;max-width:min(42rem,100vw - 4rem);padding:var(--solaris-space-6);border-radius:var(--solaris-radius-md);border:1px solid color-mix(in srgb,var(--solaris-color-border) 70%,transparent);background:color-mix(in srgb,var(--solaris-color-surface) 88%,transparent);box-shadow:var(--solaris-shadow-md)}.solaris-loading-overlay.appearance-minimal .solaris-loading-overlay__content{padding:0;border:0;background:transparent;box-shadow:none}:host ::ng-deep [solaris-loading-overlay-text]{font-size:var(--solaris-fs-14);color:color-mix(in srgb,var(--solaris-color-text) 85%,transparent);text-align:center}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisLoadingOverlay, decorators: [{
             type: Component,
@@ -312,51 +1002,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Input
             }], blur: [{
                 type: Input,
-                args: [{ transform: coerceBoolean$1 }]
+                args: [{ transform: coerceBoolean$2 }]
             }], open: [{
                 type: Input,
-                args: [{ transform: coerceBoolean$1 }]
+                args: [{ transform: coerceBoolean$2 }]
             }], lockScroll: [{
                 type: Input,
-                args: [{ alias: 'lock-scroll', transform: coerceBoolean$1 }]
+                args: [{ alias: 'lock-scroll', transform: coerceBoolean$2 }]
             }] } });
-function coerceBoolean$1(v) {
+function coerceBoolean$2(v) {
     return v === '' || v === true || v === 'true' || v === 1 || v === '1';
 }
 
+const PRESET_COLORS$2 = ['primary', 'success', 'warning', 'error', 'surface'];
 class SolarisLoading {
     marker = '';
     label;
     value = null;
-    size = 'md';
     type = 'spinner';
+    size = 'md';
+    speed = 'md';
     color = 'primary';
+    easing = 'linear';
+    trail = 'forward';
+    dashDensity = 'md';
     indeterminate = false;
-    get ariaValueNow() {
-        if (this.type === 'progress' || this.type === 'bar') {
-            if (this.indeterminate)
-                return null;
-            if (this.value == null)
-                return null;
-            return clamp(this.value, 0, 100);
-        }
-        return null;
-    }
     get percent() {
         return clamp(this.value ?? 0, 0, 100);
     }
+    get ariaLabel() {
+        return this.label ?? 'Loading';
+    }
+    get dashedSpokes() {
+        return buildSpokes(this.dashedCount, 0.12);
+    }
+    get inlineColor() {
+        return isPresetColor(this.color) ? null : String(this.color);
+    }
+    get ariaValueNow() {
+        if (this.role !== 'progressbar')
+            return null;
+        if (this.indeterminate || this.value == null)
+            return null;
+        return clamp(this.value, 0, 100);
+    }
     get role() {
         return (this.type === 'progress' || this.type === 'bar') ? 'progressbar' : 'status';
     }
-    get ariaLabel() {
-        return this.label ?? 'Loading';
+    get dataColor() {
+        return isPresetColor(this.color) ? this.color : null;
+    }
+    get dashedCount() {
+        switch (this.dashDensity) {
+            case 'low': return 8;
+            case 'high': return 16;
+            case 'md':
+            default: return 12;
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisLoading, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisLoading, isStandalone: true, selector: "solaris-loading", inputs: { label: "label", value: "value", size: "size", type: "type", color: "color", indeterminate: ["indeterminate", "indeterminate", (v) => v === '' || v === true || v === 'true' || v === 1 || v === '1'] }, host: { properties: { "attr.solaris-loading": "this.marker" } }, ngImport: i0, template: "<div class=\"solaris-loading\" [class.type-spinner]=\"type === 'spinner'\"\r\n     [class.type-spinner-dashed]=\"type === 'spinner-dashed'\" [class.type-progress]=\"type === 'progress'\"\r\n     [class.type-bar]=\"type === 'bar'\" [class.is-indeterminate]=\"indeterminate || value === null\"\r\n     [class.size-xs]=\"size === 'xs'\" [class.size-sm]=\"size === 'sm'\" [class.size-md]=\"size === 'md'\"\r\n     [class.size-lg]=\"size === 'lg'\" [class.size-xl]=\"size === 'xl'\" [attr.data-color]=\"color\"\r\n     [attr.role]=\"role\" [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-valuemin]=\"role === 'progressbar' ? 0 : null\" [attr.aria-valuemax]=\"role === 'progressbar' ? 100 : null\"\r\n     [attr.aria-valuenow]=\"role === 'progressbar' ? ariaValueNow : null\">\r\n  @if (type === 'spinner' || type === 'spinner-dashed') {\r\n    <span class=\"solaris-loading__spinner\" aria-hidden=\"true\"></span>\r\n  }\r\n\r\n  @if (type === 'progress') {\r\n    <svg class=\"solaris-loading__ring\" viewBox=\"0 0 44 44\" aria-hidden=\"true\">\r\n      <circle class=\"ring-track\" cx=\"22\" cy=\"22\" r=\"18\"></circle>\r\n      <circle class=\"ring-value\" cx=\"22\" cy=\"22\" r=\"18\" [attr.stroke-dasharray]=\"113.097\"\r\n              [attr.stroke-dashoffset]=\"113.097 - (113.097 * percent / 100)\"></circle>\r\n    </svg>\r\n\r\n    <span class=\"solaris-loading__percent\" aria-hidden=\"true\">\r\n      {{ percent }}%\r\n    </span>\r\n  }\r\n\r\n  @if (type === 'bar') {\r\n    <span class=\"solaris-loading__bar\" aria-hidden=\"true\">\r\n      <span class=\"solaris-loading__bar-inner\" [style.width.%]=\"indeterminate || value === null ? 30 : percent\"></span>\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [":host{display:inline-flex;min-width:0}.solaris-loading{--solaris-loading-size: 2rem;--solaris-loading-stroke: 3px;--solaris-loading-color: var(--solaris-color-primary);display:inline-flex;align-items:center;justify-content:center;gap:var(--solaris-space-2);color:var(--solaris-loading-color)}.solaris-loading.size-xs{--solaris-loading-size: 1.4rem}.solaris-loading.size-sm{--solaris-loading-size: 1.8rem}.solaris-loading.size-md{--solaris-loading-size: 2.2rem}.solaris-loading.size-lg{--solaris-loading-size: 2.8rem}.solaris-loading.size-xl{--solaris-loading-size: 6.4rem}.solaris-loading[data-color=primary]{--solaris-loading-color: var(--solaris-color-primary)}.solaris-loading[data-color=success]{--solaris-loading-color: var(--solaris-color-success)}.solaris-loading[data-color=warning]{--solaris-loading-color: var(--solaris-color-warning)}.solaris-loading[data-color=error]{--solaris-loading-color: var(--solaris-color-error)}.solaris-loading[data-color=surface]{--solaris-loading-color: var(--solaris-color-text-muted)}.solaris-loading__spinner{width:var(--solaris-loading-size);height:var(--solaris-loading-size);border-radius:9999px;border:var(--solaris-loading-stroke) solid color-mix(in srgb,var(--solaris-loading-color) 22%,transparent);border-top-color:var(--solaris-loading-color);animation:solaris-spin .9s linear infinite}.solaris-loading.type-spinner-dashed .solaris-loading__spinner{border-style:dashed}.solaris-loading.type-progress{gap:var(--solaris-space-2)}.solaris-loading__ring{width:calc(var(--solaris-loading-size) * 1.2);height:calc(var(--solaris-loading-size) * 1.2);transform:rotate(-90deg)}.solaris-loading__ring .ring-track{fill:none;stroke:color-mix(in srgb,var(--solaris-loading-color) 18%,transparent);stroke-width:var(--solaris-loading-stroke)}.solaris-loading__ring .ring-value{fill:none;stroke:var(--solaris-loading-color);stroke-linecap:round;stroke-width:var(--solaris-loading-stroke);transition:stroke-dashoffset .16s ease}.solaris-loading.is-indeterminate.type-progress .ring-value{animation:solaris-ring 1.1s ease-in-out infinite}.solaris-loading__percent{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-loading.type-bar{width:min(28rem,100%)}.solaris-loading__bar{width:100%;height:.6rem;border-radius:var(--solaris-radius-full);background:color-mix(in srgb,var(--solaris-loading-color) 14%,transparent);overflow:hidden}.solaris-loading__bar-inner{display:block;height:100%;background:var(--solaris-loading-color);border-radius:var(--solaris-radius-full);transition:width .16s ease}.solaris-loading.is-indeterminate.type-bar .solaris-loading__bar-inner{width:30%;animation:solaris-bar 1.1s ease-in-out infinite}@keyframes solaris-spin{to{transform:rotate(360deg)}}@keyframes solaris-ring{0%{stroke-dashoffset:113.097;opacity:.55}50%{stroke-dashoffset:28;opacity:1}to{stroke-dashoffset:113.097;opacity:.55}}@keyframes solaris-bar{0%{transform:translate(-120%)}50%{transform:translate(70%)}to{transform:translate(240%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisLoading, isStandalone: true, selector: "solaris-loading", inputs: { label: "label", value: "value", type: "type", size: "size", speed: "speed", color: "color", easing: "easing", trail: "trail", dashDensity: "dashDensity", indeterminate: ["indeterminate", "indeterminate", coerceBoolean$1] }, host: { properties: { "attr.solaris-loading": "this.marker" } }, ngImport: i0, template: "<div class=\"solaris-loading\" [attr.data-type]=\"type\" [attr.data-size]=\"size\" [attr.data-color]=\"dataColor\"\r\n     [attr.data-speed]=\"speed\" [attr.data-easing]=\"easing\" [class.is-indeterminate]=\"indeterminate || value === null\"\r\n     [attr.role]=\"role\" [attr.aria-label]=\"ariaLabel\" [style.--solaris-loading-color]=\"inlineColor\"\r\n     [attr.aria-valuemin]=\"role === 'progressbar' ? 0 : null\" [attr.aria-valuemax]=\"role === 'progressbar' ? 100 : null\"\r\n     [attr.aria-valuenow]=\"role === 'progressbar' ? ariaValueNow : null\">\r\n\r\n  @if (type === 'spinner') {\r\n    <span class=\"solaris-loading__spinner\" aria-hidden=\"true\"></span>\r\n  }\r\n\r\n  @if (type === 'spinner-dashed') {\r\n    <svg class=\"solaris-loading__spinner-stacked\" viewBox=\"0 0 44 44\" aria-hidden=\"true\">\r\n      @for (spoke of dashedSpokes; track spoke.angle) {\r\n        <line x1=\"22\" y1=\"6\" x2=\"22\" y2=\"12\" [attr.opacity]=\"spoke.opacity\"\r\n              [attr.transform]=\"'rotate(' + spoke.angle + ' 22 22)'\">\r\n        </line>\r\n      }\r\n    </svg>\r\n  }\r\n\r\n  @if (type === 'progress') {\r\n    <svg class=\"solaris-loading__ring\" viewBox=\"0 0 44 44\" aria-hidden=\"true\">\r\n      <circle class=\"ring-track\" cx=\"22\" cy=\"22\" r=\"18\"></circle>\r\n      <circle class=\"ring-value\" cx=\"22\" cy=\"22\" r=\"18\" [attr.stroke-dasharray]=\"113.097\"\r\n              [attr.stroke-dashoffset]=\"113.097 - (113.097 * percent / 100)\"></circle>\r\n    </svg>\r\n\r\n    <span class=\"solaris-loading__percent\" aria-hidden=\"true\">\r\n      {{ percent }}%\r\n    </span>\r\n  }\r\n\r\n  @if (type === 'bar') {\r\n    <span class=\"solaris-loading__bar\" aria-hidden=\"true\">\r\n      <span class=\"solaris-loading__bar-inner\" [style.width.%]=\"indeterminate || value === null ? 30 : percent\"></span>\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [":host{display:inline-flex;min-width:0}.solaris-loading{--solaris-loading-size: 2rem;--solaris-loading-easing: linear;--solaris-loading-duration: .9s;--solaris-loading-color: var(--solaris-color-primary);--solaris-loading-stroke: clamp(.18rem, calc(var(--solaris-loading-size) * .13), .6rem);--solaris-loading-stacked-stroke: clamp(.14rem, calc(var(--solaris-loading-size) * .08), .32rem);display:inline-flex;align-items:center;justify-content:center;gap:var(--solaris-space-2);color:var(--solaris-loading-color)}.solaris-loading[data-size=xs]{--solaris-loading-size: 1.4rem}.solaris-loading[data-size=sm]{--solaris-loading-size: 1.8rem}.solaris-loading[data-size=md]{--solaris-loading-size: 2.2rem}.solaris-loading[data-size=lg]{--solaris-loading-size: 2.8rem}.solaris-loading[data-size=xl]{--solaris-loading-size: 6.4rem}.solaris-loading[data-color=primary]{--solaris-loading-color: var(--solaris-color-primary)}.solaris-loading[data-color=success]{--solaris-loading-color: var(--solaris-color-success)}.solaris-loading[data-color=warning]{--solaris-loading-color: var(--solaris-color-warning)}.solaris-loading[data-color=error]{--solaris-loading-color: var(--solaris-color-error)}.solaris-loading[data-color=surface]{--solaris-loading-color: var(--solaris-color-text-muted)}.solaris-loading[data-speed=slow]{--solaris-loading-duration: 1.4s}.solaris-loading[data-speed=md]{--solaris-loading-duration: .9s}.solaris-loading[data-speed=fast]{--solaris-loading-duration: .65s}.solaris-loading[data-easing=linear]{--solaris-loading-easing: linear}.solaris-loading[data-easing=smooth]{--solaris-loading-easing: cubic-bezier(.2, 0, 0, 1)}.solaris-loading[data-easing=snappy]{--solaris-loading-easing: cubic-bezier(.2, .9, .2, 1)}.solaris-loading__spinner{display:inline-block;width:var(--solaris-loading-size);height:var(--solaris-loading-size);border-radius:var(--solaris-radius-full);border:var(--solaris-loading-stroke) solid color-mix(in srgb,var(--solaris-loading-color) 22%,transparent);border-top-color:var(--solaris-loading-color);animation:solaris-spin var(--solaris-loading-duration) var(--solaris-loading-easing) infinite}.solaris-loading__spinner-stacked{transform-box:fill-box;transform-origin:50% 50%;width:var(--solaris-loading-size);height:var(--solaris-loading-size);animation:solaris-spin var(--solaris-loading-duration) var(--solaris-loading-easing) infinite}.solaris-loading__spinner-stacked line{stroke-linecap:round;stroke:var(--solaris-loading-color);stroke-width:var(--solaris-loading-stacked-stroke)}.solaris-loading[data-type=progress]{gap:var(--solaris-space-2)}.solaris-loading__ring{transform:rotate(-90deg);width:calc(var(--solaris-loading-size) * 1.2);height:calc(var(--solaris-loading-size) * 1.2)}.solaris-loading__ring .ring-track{fill:none;stroke-width:var(--solaris-loading-stroke);stroke:color-mix(in srgb,var(--solaris-loading-color) 18%,transparent)}.solaris-loading__ring .ring-value{fill:none;stroke-linecap:round;stroke:var(--solaris-loading-color);stroke-width:var(--solaris-loading-stroke);transition:stroke-dashoffset .16s var(--solaris-loading-easing)}.solaris-loading.is-indeterminate[data-type=progress] .ring-value{animation:solaris-ring var(--solaris-loading-duration) var(--solaris-loading-easing) infinite}.solaris-loading__percent{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-loading[data-type=bar]{max-width:100%;justify-content:stretch;width:clamp(12rem,35vw,28rem)}.solaris-loading__bar{width:100%;min-width:0;display:block;flex:1 1 auto;height:.6rem;overflow:hidden;border-radius:var(--solaris-radius-full);background:color-mix(in srgb,var(--solaris-loading-color) 14%,transparent)}.solaris-loading__bar-inner{height:100%;display:block;background:var(--solaris-loading-color);border-radius:var(--solaris-radius-full);transition:width .16s var(--solaris-loading-easing)}.solaris-loading.is-indeterminate[data-type=bar] .solaris-loading__bar-inner{width:30%;animation:solaris-bar var(--solaris-loading-duration) var(--solaris-loading-easing) infinite}.solaris-loading[data-trail=reverse] .solaris-loading__spinner-stacked{transform:scaleX(-1)}@keyframes solaris-spin{to{transform:rotate(360deg)}}@keyframes solaris-ring{0%{stroke-dashoffset:113.097;opacity:.55}50%{stroke-dashoffset:28;opacity:1}to{stroke-dashoffset:113.097;opacity:.55}}@keyframes solaris-bar{0%{transform:translate(-120%)}50%{transform:translate(70%)}to{transform:translate(240%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisLoading, decorators: [{
             type: Component,
-            args: [{ selector: 'solaris-loading', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-loading\" [class.type-spinner]=\"type === 'spinner'\"\r\n     [class.type-spinner-dashed]=\"type === 'spinner-dashed'\" [class.type-progress]=\"type === 'progress'\"\r\n     [class.type-bar]=\"type === 'bar'\" [class.is-indeterminate]=\"indeterminate || value === null\"\r\n     [class.size-xs]=\"size === 'xs'\" [class.size-sm]=\"size === 'sm'\" [class.size-md]=\"size === 'md'\"\r\n     [class.size-lg]=\"size === 'lg'\" [class.size-xl]=\"size === 'xl'\" [attr.data-color]=\"color\"\r\n     [attr.role]=\"role\" [attr.aria-label]=\"ariaLabel\"\r\n     [attr.aria-valuemin]=\"role === 'progressbar' ? 0 : null\" [attr.aria-valuemax]=\"role === 'progressbar' ? 100 : null\"\r\n     [attr.aria-valuenow]=\"role === 'progressbar' ? ariaValueNow : null\">\r\n  @if (type === 'spinner' || type === 'spinner-dashed') {\r\n    <span class=\"solaris-loading__spinner\" aria-hidden=\"true\"></span>\r\n  }\r\n\r\n  @if (type === 'progress') {\r\n    <svg class=\"solaris-loading__ring\" viewBox=\"0 0 44 44\" aria-hidden=\"true\">\r\n      <circle class=\"ring-track\" cx=\"22\" cy=\"22\" r=\"18\"></circle>\r\n      <circle class=\"ring-value\" cx=\"22\" cy=\"22\" r=\"18\" [attr.stroke-dasharray]=\"113.097\"\r\n              [attr.stroke-dashoffset]=\"113.097 - (113.097 * percent / 100)\"></circle>\r\n    </svg>\r\n\r\n    <span class=\"solaris-loading__percent\" aria-hidden=\"true\">\r\n      {{ percent }}%\r\n    </span>\r\n  }\r\n\r\n  @if (type === 'bar') {\r\n    <span class=\"solaris-loading__bar\" aria-hidden=\"true\">\r\n      <span class=\"solaris-loading__bar-inner\" [style.width.%]=\"indeterminate || value === null ? 30 : percent\"></span>\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [":host{display:inline-flex;min-width:0}.solaris-loading{--solaris-loading-size: 2rem;--solaris-loading-stroke: 3px;--solaris-loading-color: var(--solaris-color-primary);display:inline-flex;align-items:center;justify-content:center;gap:var(--solaris-space-2);color:var(--solaris-loading-color)}.solaris-loading.size-xs{--solaris-loading-size: 1.4rem}.solaris-loading.size-sm{--solaris-loading-size: 1.8rem}.solaris-loading.size-md{--solaris-loading-size: 2.2rem}.solaris-loading.size-lg{--solaris-loading-size: 2.8rem}.solaris-loading.size-xl{--solaris-loading-size: 6.4rem}.solaris-loading[data-color=primary]{--solaris-loading-color: var(--solaris-color-primary)}.solaris-loading[data-color=success]{--solaris-loading-color: var(--solaris-color-success)}.solaris-loading[data-color=warning]{--solaris-loading-color: var(--solaris-color-warning)}.solaris-loading[data-color=error]{--solaris-loading-color: var(--solaris-color-error)}.solaris-loading[data-color=surface]{--solaris-loading-color: var(--solaris-color-text-muted)}.solaris-loading__spinner{width:var(--solaris-loading-size);height:var(--solaris-loading-size);border-radius:9999px;border:var(--solaris-loading-stroke) solid color-mix(in srgb,var(--solaris-loading-color) 22%,transparent);border-top-color:var(--solaris-loading-color);animation:solaris-spin .9s linear infinite}.solaris-loading.type-spinner-dashed .solaris-loading__spinner{border-style:dashed}.solaris-loading.type-progress{gap:var(--solaris-space-2)}.solaris-loading__ring{width:calc(var(--solaris-loading-size) * 1.2);height:calc(var(--solaris-loading-size) * 1.2);transform:rotate(-90deg)}.solaris-loading__ring .ring-track{fill:none;stroke:color-mix(in srgb,var(--solaris-loading-color) 18%,transparent);stroke-width:var(--solaris-loading-stroke)}.solaris-loading__ring .ring-value{fill:none;stroke:var(--solaris-loading-color);stroke-linecap:round;stroke-width:var(--solaris-loading-stroke);transition:stroke-dashoffset .16s ease}.solaris-loading.is-indeterminate.type-progress .ring-value{animation:solaris-ring 1.1s ease-in-out infinite}.solaris-loading__percent{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-loading.type-bar{width:min(28rem,100%)}.solaris-loading__bar{width:100%;height:.6rem;border-radius:var(--solaris-radius-full);background:color-mix(in srgb,var(--solaris-loading-color) 14%,transparent);overflow:hidden}.solaris-loading__bar-inner{display:block;height:100%;background:var(--solaris-loading-color);border-radius:var(--solaris-radius-full);transition:width .16s ease}.solaris-loading.is-indeterminate.type-bar .solaris-loading__bar-inner{width:30%;animation:solaris-bar 1.1s ease-in-out infinite}@keyframes solaris-spin{to{transform:rotate(360deg)}}@keyframes solaris-ring{0%{stroke-dashoffset:113.097;opacity:.55}50%{stroke-dashoffset:28;opacity:1}to{stroke-dashoffset:113.097;opacity:.55}}@keyframes solaris-bar{0%{transform:translate(-120%)}50%{transform:translate(70%)}to{transform:translate(240%)}}\n"] }]
+            args: [{ selector: 'solaris-loading', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-loading\" [attr.data-type]=\"type\" [attr.data-size]=\"size\" [attr.data-color]=\"dataColor\"\r\n     [attr.data-speed]=\"speed\" [attr.data-easing]=\"easing\" [class.is-indeterminate]=\"indeterminate || value === null\"\r\n     [attr.role]=\"role\" [attr.aria-label]=\"ariaLabel\" [style.--solaris-loading-color]=\"inlineColor\"\r\n     [attr.aria-valuemin]=\"role === 'progressbar' ? 0 : null\" [attr.aria-valuemax]=\"role === 'progressbar' ? 100 : null\"\r\n     [attr.aria-valuenow]=\"role === 'progressbar' ? ariaValueNow : null\">\r\n\r\n  @if (type === 'spinner') {\r\n    <span class=\"solaris-loading__spinner\" aria-hidden=\"true\"></span>\r\n  }\r\n\r\n  @if (type === 'spinner-dashed') {\r\n    <svg class=\"solaris-loading__spinner-stacked\" viewBox=\"0 0 44 44\" aria-hidden=\"true\">\r\n      @for (spoke of dashedSpokes; track spoke.angle) {\r\n        <line x1=\"22\" y1=\"6\" x2=\"22\" y2=\"12\" [attr.opacity]=\"spoke.opacity\"\r\n              [attr.transform]=\"'rotate(' + spoke.angle + ' 22 22)'\">\r\n        </line>\r\n      }\r\n    </svg>\r\n  }\r\n\r\n  @if (type === 'progress') {\r\n    <svg class=\"solaris-loading__ring\" viewBox=\"0 0 44 44\" aria-hidden=\"true\">\r\n      <circle class=\"ring-track\" cx=\"22\" cy=\"22\" r=\"18\"></circle>\r\n      <circle class=\"ring-value\" cx=\"22\" cy=\"22\" r=\"18\" [attr.stroke-dasharray]=\"113.097\"\r\n              [attr.stroke-dashoffset]=\"113.097 - (113.097 * percent / 100)\"></circle>\r\n    </svg>\r\n\r\n    <span class=\"solaris-loading__percent\" aria-hidden=\"true\">\r\n      {{ percent }}%\r\n    </span>\r\n  }\r\n\r\n  @if (type === 'bar') {\r\n    <span class=\"solaris-loading__bar\" aria-hidden=\"true\">\r\n      <span class=\"solaris-loading__bar-inner\" [style.width.%]=\"indeterminate || value === null ? 30 : percent\"></span>\r\n    </span>\r\n  }\r\n</div>\r\n", styles: [":host{display:inline-flex;min-width:0}.solaris-loading{--solaris-loading-size: 2rem;--solaris-loading-easing: linear;--solaris-loading-duration: .9s;--solaris-loading-color: var(--solaris-color-primary);--solaris-loading-stroke: clamp(.18rem, calc(var(--solaris-loading-size) * .13), .6rem);--solaris-loading-stacked-stroke: clamp(.14rem, calc(var(--solaris-loading-size) * .08), .32rem);display:inline-flex;align-items:center;justify-content:center;gap:var(--solaris-space-2);color:var(--solaris-loading-color)}.solaris-loading[data-size=xs]{--solaris-loading-size: 1.4rem}.solaris-loading[data-size=sm]{--solaris-loading-size: 1.8rem}.solaris-loading[data-size=md]{--solaris-loading-size: 2.2rem}.solaris-loading[data-size=lg]{--solaris-loading-size: 2.8rem}.solaris-loading[data-size=xl]{--solaris-loading-size: 6.4rem}.solaris-loading[data-color=primary]{--solaris-loading-color: var(--solaris-color-primary)}.solaris-loading[data-color=success]{--solaris-loading-color: var(--solaris-color-success)}.solaris-loading[data-color=warning]{--solaris-loading-color: var(--solaris-color-warning)}.solaris-loading[data-color=error]{--solaris-loading-color: var(--solaris-color-error)}.solaris-loading[data-color=surface]{--solaris-loading-color: var(--solaris-color-text-muted)}.solaris-loading[data-speed=slow]{--solaris-loading-duration: 1.4s}.solaris-loading[data-speed=md]{--solaris-loading-duration: .9s}.solaris-loading[data-speed=fast]{--solaris-loading-duration: .65s}.solaris-loading[data-easing=linear]{--solaris-loading-easing: linear}.solaris-loading[data-easing=smooth]{--solaris-loading-easing: cubic-bezier(.2, 0, 0, 1)}.solaris-loading[data-easing=snappy]{--solaris-loading-easing: cubic-bezier(.2, .9, .2, 1)}.solaris-loading__spinner{display:inline-block;width:var(--solaris-loading-size);height:var(--solaris-loading-size);border-radius:var(--solaris-radius-full);border:var(--solaris-loading-stroke) solid color-mix(in srgb,var(--solaris-loading-color) 22%,transparent);border-top-color:var(--solaris-loading-color);animation:solaris-spin var(--solaris-loading-duration) var(--solaris-loading-easing) infinite}.solaris-loading__spinner-stacked{transform-box:fill-box;transform-origin:50% 50%;width:var(--solaris-loading-size);height:var(--solaris-loading-size);animation:solaris-spin var(--solaris-loading-duration) var(--solaris-loading-easing) infinite}.solaris-loading__spinner-stacked line{stroke-linecap:round;stroke:var(--solaris-loading-color);stroke-width:var(--solaris-loading-stacked-stroke)}.solaris-loading[data-type=progress]{gap:var(--solaris-space-2)}.solaris-loading__ring{transform:rotate(-90deg);width:calc(var(--solaris-loading-size) * 1.2);height:calc(var(--solaris-loading-size) * 1.2)}.solaris-loading__ring .ring-track{fill:none;stroke-width:var(--solaris-loading-stroke);stroke:color-mix(in srgb,var(--solaris-loading-color) 18%,transparent)}.solaris-loading__ring .ring-value{fill:none;stroke-linecap:round;stroke:var(--solaris-loading-color);stroke-width:var(--solaris-loading-stroke);transition:stroke-dashoffset .16s var(--solaris-loading-easing)}.solaris-loading.is-indeterminate[data-type=progress] .ring-value{animation:solaris-ring var(--solaris-loading-duration) var(--solaris-loading-easing) infinite}.solaris-loading__percent{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-loading[data-type=bar]{max-width:100%;justify-content:stretch;width:clamp(12rem,35vw,28rem)}.solaris-loading__bar{width:100%;min-width:0;display:block;flex:1 1 auto;height:.6rem;overflow:hidden;border-radius:var(--solaris-radius-full);background:color-mix(in srgb,var(--solaris-loading-color) 14%,transparent)}.solaris-loading__bar-inner{height:100%;display:block;background:var(--solaris-loading-color);border-radius:var(--solaris-radius-full);transition:width .16s var(--solaris-loading-easing)}.solaris-loading.is-indeterminate[data-type=bar] .solaris-loading__bar-inner{width:30%;animation:solaris-bar var(--solaris-loading-duration) var(--solaris-loading-easing) infinite}.solaris-loading[data-trail=reverse] .solaris-loading__spinner-stacked{transform:scaleX(-1)}@keyframes solaris-spin{to{transform:rotate(360deg)}}@keyframes solaris-ring{0%{stroke-dashoffset:113.097;opacity:.55}50%{stroke-dashoffset:28;opacity:1}to{stroke-dashoffset:113.097;opacity:.55}}@keyframes solaris-bar{0%{transform:translate(-120%)}50%{transform:translate(70%)}to{transform:translate(240%)}}\n"] }]
         }], propDecorators: { marker: [{
                 type: HostBinding,
                 args: ['attr.solaris-loading']
@@ -364,50 +1073,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Input
             }], value: [{
                 type: Input
+            }], type: [{
+                type: Input
             }], size: [{
                 type: Input
-            }], type: [{
+            }], speed: [{
                 type: Input
             }], color: [{
                 type: Input
+            }], easing: [{
+                type: Input
+            }], trail: [{
+                type: Input
+            }], dashDensity: [{
+                type: Input
             }], indeterminate: [{
                 type: Input,
-                args: [{ transform: (v) => v === '' || v === true || v === 'true' || v === 1 || v === '1' }]
+                args: [{ transform: coerceBoolean$1 }]
             }] } });
+function isPresetColor(v) {
+    return PRESET_COLORS$2.includes(v);
+}
+function coerceBoolean$1(v) {
+    return v === '' || v === true || v === 'true' || v === 1 || v === '1';
+}
 function clamp(n, min, max) {
     return Math.max(min, Math.min(max, n));
 }
+const SPOKE_CACHE = new Map();
+function buildSpokes(count, minOpacity = 0.12) {
+    const cached = SPOKE_CACHE.get(count);
+    if (cached)
+        return cached;
+    const res = [];
+    const step = 360 / count;
+    const span = 1 - minOpacity;
+    for (let i = 0; i < count; i++) {
+        const t = count === 1 ? 0 : i / (count - 1);
+        const opacity = 1 - span * t;
+        res.push({ angle: i * step, opacity: Number(opacity.toFixed(2)) });
+    }
+    SPOKE_CACHE.set(count, res);
+    return res;
+}
 
 class SolarisBadge {
-    hostClass = 'solaris-badge-host';
     pill = false;
-    size = 'md';
+    customTextColor;
     interactive = false;
-    color = 'surface';
+    size = 'md';
     variant = 'subtle';
+    color = 'surface';
     ariaHidden = null;
+    hostClass = 'solaris-badge-host';
+    presetColors = new Set([
+        'primary', 'success', 'warning', 'error', 'info', 'surface',
+    ]);
+    get colorClass() {
+        return this.isCustomColor ? 'color-custom' : `color-${this.color}`;
+    }
+    get isCustomColor() {
+        return !this.presetColors.has(this.color);
+    }
+    get customColorValue() {
+        return this.isCustomColor ? String(this.color) : null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisBadge, isStandalone: true, selector: "solaris-badge", inputs: { pill: "pill", size: "size", interactive: "interactive", color: "color", variant: "variant", ariaHidden: ["aria-hidden", "ariaHidden"] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span class=\"solaris-badge\" [attr.aria-hidden]=\"ariaHidden\"\r\n  [ngClass]=\"[\r\n    'variant-' + variant,\r\n    'color-' + color,\r\n    'size-' + size,\r\n    pill ? 'is-pill' : '',\r\n    interactive ? 'is-interactive' : ''\r\n  ]\">\r\n  <ng-content></ng-content>\r\n</span>\r\n", styles: [":host.solaris-badge-host{display:inline-flex}.solaris-badge{--solaris-badge-radius: var(--solaris-radius-md);line-height:1;font-weight:600;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;display:inline-flex;gap:var(--solaris-space-2);border:1px solid transparent;letter-spacing:var(--solaris-ls-sm);border-radius:var(--solaris-badge-radius)}.solaris-badge.size-sm{padding:.3rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge.size-md{padding:.4rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge.is-pill{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge.is-interactive{cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge.color-surface{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: var(--solaris-color-surface-2);--solaris-badge-border: var(--solaris-color-border)}.solaris-badge.color-primary{--solaris-badge-fg: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-primary) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-primary) 55%, var(--solaris-color-border))}.solaris-badge.color-success{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-success) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-success) 45%, var(--solaris-color-border))}.solaris-badge.color-warning{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-warning) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-warning) 45%, var(--solaris-color-border))}.solaris-badge.color-error{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-error) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-error) 45%, var(--solaris-color-border))}.solaris-badge.color-info{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-info) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-info) 45%, var(--solaris-color-border))}.solaris-badge.variant-solid{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-subtle{color:var(--solaris-color-text);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-outline{background:transparent;color:var(--solaris-color-text);border-color:var(--solaris-badge-border)}.solaris-badge.variant-solid.color-surface{color:var(--solaris-color-text);border-color:var(--solaris-color-border);background:var(--solaris-color-surface-2)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisBadge, isStandalone: true, selector: "solaris-badge", inputs: { pill: "pill", customTextColor: "customTextColor", interactive: "interactive", size: "size", variant: "variant", color: "color", ariaHidden: ["aria-hidden", "ariaHidden"] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span class=\"solaris-badge\" [attr.aria-hidden]=\"ariaHidden\"\r\n  [ngClass]=\"[ 'variant-' + variant, colorClass,\r\n  'size-' + size, pill ? 'is-pill' : '',\r\n  interactive ? 'is-interactive' : '' ]\"\r\n  [style.--solaris-badge-custom]=\"customColorValue\"\r\n  [style.--solaris-badge-custom-fg]=\"customTextColor\">\r\n  <ng-content></ng-content>\r\n</span>\r\n", styles: [":host.solaris-badge-host{display:inline-flex}.solaris-badge{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-radius: var(--solaris-radius-full);--solaris-badge-fg-solid: var(--solaris-badge-fg);line-height:1;font-weight:600;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;display:inline-flex;gap:var(--solaris-space-2);border:1px solid transparent;letter-spacing:var(--solaris-ls-sm);border-radius:var(--solaris-badge-radius)}.solaris-badge.size-sm{padding:.3rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge.size-md{padding:.4rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge.size-lg{padding:.5rem 1rem;font-size:var(--solaris-fs-14)}.solaris-badge.is-pill{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge.is-interactive{cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge.color-surface{--_base: var(--solaris-color-surface-2);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-primary{--_base: var(--solaris-color-primary);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-success{--_base: var(--solaris-color-success);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-warning{--_base: var(--solaris-color-warning);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-error{--_base: var(--solaris-color-error);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-info{--_base: var(--solaris-color-info);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-custom{--_base: var(--solaris-badge-custom, var(--solaris-color-surface-2));--solaris-badge-fg-solid: var(--solaris-badge-custom-fg, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-fg: var(--solaris-badge-custom-fg, var(--solaris-color-text));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.variant-solid{color:var(--solaris-badge-fg-solid);background:var(--solaris-badge-bg-solid, var(--solaris-badge-bg));border-color:var(--solaris-badge-border-solid, var(--solaris-badge-border))}.solaris-badge.variant-subtle{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-outline{border-color:var(--solaris-badge-border);color:color-mix(in srgb,var(--solaris-badge-border) 30%,white);background:color-mix(in srgb,var(--solaris-badge-border) 20%,transparent)}.solaris-badge.variant-solid.color-surface{color:var(--solaris-color-text);border-color:var(--solaris-color-border);background:var(--solaris-color-surface-2)}\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: SolarisBadge, decorators: [{
             type: Component,
-            args: [{ selector: 'solaris-badge', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"solaris-badge\" [attr.aria-hidden]=\"ariaHidden\"\r\n  [ngClass]=\"[\r\n    'variant-' + variant,\r\n    'color-' + color,\r\n    'size-' + size,\r\n    pill ? 'is-pill' : '',\r\n    interactive ? 'is-interactive' : ''\r\n  ]\">\r\n  <ng-content></ng-content>\r\n</span>\r\n", styles: [":host.solaris-badge-host{display:inline-flex}.solaris-badge{--solaris-badge-radius: var(--solaris-radius-md);line-height:1;font-weight:600;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;display:inline-flex;gap:var(--solaris-space-2);border:1px solid transparent;letter-spacing:var(--solaris-ls-sm);border-radius:var(--solaris-badge-radius)}.solaris-badge.size-sm{padding:.3rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge.size-md{padding:.4rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge.is-pill{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge.is-interactive{cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge.color-surface{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: var(--solaris-color-surface-2);--solaris-badge-border: var(--solaris-color-border)}.solaris-badge.color-primary{--solaris-badge-fg: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-primary) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-primary) 55%, var(--solaris-color-border))}.solaris-badge.color-success{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-success) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-success) 45%, var(--solaris-color-border))}.solaris-badge.color-warning{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-warning) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-warning) 45%, var(--solaris-color-border))}.solaris-badge.color-error{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-error) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-error) 45%, var(--solaris-color-border))}.solaris-badge.color-info{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-info) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-info) 45%, var(--solaris-color-border))}.solaris-badge.variant-solid{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-subtle{color:var(--solaris-color-text);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-outline{background:transparent;color:var(--solaris-color-text);border-color:var(--solaris-badge-border)}.solaris-badge.variant-solid.color-surface{color:var(--solaris-color-text);border-color:var(--solaris-color-border);background:var(--solaris-color-surface-2)}\n"] }]
-        }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], pill: [{
+            args: [{ selector: 'solaris-badge', standalone: true, imports: [
+                        NgClass
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"solaris-badge\" [attr.aria-hidden]=\"ariaHidden\"\r\n  [ngClass]=\"[ 'variant-' + variant, colorClass,\r\n  'size-' + size, pill ? 'is-pill' : '',\r\n  interactive ? 'is-interactive' : '' ]\"\r\n  [style.--solaris-badge-custom]=\"customColorValue\"\r\n  [style.--solaris-badge-custom-fg]=\"customTextColor\">\r\n  <ng-content></ng-content>\r\n</span>\r\n", styles: [":host.solaris-badge-host{display:inline-flex}.solaris-badge{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-radius: var(--solaris-radius-full);--solaris-badge-fg-solid: var(--solaris-badge-fg);line-height:1;font-weight:600;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;display:inline-flex;gap:var(--solaris-space-2);border:1px solid transparent;letter-spacing:var(--solaris-ls-sm);border-radius:var(--solaris-badge-radius)}.solaris-badge.size-sm{padding:.3rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge.size-md{padding:.4rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge.size-lg{padding:.5rem 1rem;font-size:var(--solaris-fs-14)}.solaris-badge.is-pill{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge.is-interactive{cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge.color-surface{--_base: var(--solaris-color-surface-2);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-primary{--_base: var(--solaris-color-primary);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-success{--_base: var(--solaris-color-success);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-warning{--_base: var(--solaris-color-warning);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 75%, black))}.solaris-badge.color-error{--_base: var(--solaris-color-error);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-info{--_base: var(--solaris-color-info);--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-fg-solid: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.color-custom{--_base: var(--solaris-badge-custom, var(--solaris-color-surface-2));--solaris-badge-fg-solid: var(--solaris-badge-custom-fg, #fff);--solaris-badge-bg: color-mix(in srgb, var(--_base) 30%, transparent);--solaris-badge-border-solid: color-mix(in srgb, var(--_base) 70%, black);--solaris-badge-fg: var(--solaris-badge-custom-fg, var(--solaris-color-text));--solaris-badge-border: color-mix(in srgb, var(--_base) 55%, var(--solaris-color-border));--solaris-badge-bg-solid: linear-gradient(180deg, color-mix(in srgb, var(--_base) 92%, white), color-mix(in srgb, var(--_base) 82%, black))}.solaris-badge.variant-solid{color:var(--solaris-badge-fg-solid);background:var(--solaris-badge-bg-solid, var(--solaris-badge-bg));border-color:var(--solaris-badge-border-solid, var(--solaris-badge-border))}.solaris-badge.variant-subtle{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-outline{border-color:var(--solaris-badge-border);color:color-mix(in srgb,var(--solaris-badge-border) 30%,white);background:color-mix(in srgb,var(--solaris-badge-border) 20%,transparent)}.solaris-badge.variant-solid.color-surface{color:var(--solaris-color-text);border-color:var(--solaris-color-border);background:var(--solaris-color-surface-2)}\n"] }]
+        }], propDecorators: { pill: [{
                 type: Input
-            }], size: [{
+            }], customTextColor: [{
                 type: Input
             }], interactive: [{
                 type: Input
-            }], color: [{
+            }], size: [{
                 type: Input
             }], variant: [{
                 type: Input
+            }], color: [{
+                type: Input
             }], ariaHidden: [{
                 type: Input,
                 args: [{ alias: 'aria-hidden' }]
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 class SolarisImageSliderComponent {
@@ -626,21 +1382,1541 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 args: ['attr.aria-orientation']
             }] } });
 
-class SolarisHeaderDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisHeaderDirective, isStandalone: true, selector: "[solaris-header]", ngImport: i0 });
+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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDrawerHeaderDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[solaris-header]',
+                    selector: '[solaris-drawer-header]',
                     standalone: true,
                 }]
         }] });
 
-class SolarisFooterDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisFooterDirective, isStandalone: true, selector: "[solaris-footer]", ngImport: i0 });
+class SolarisDrawerFooterDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDrawerFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisDrawerFooterDirective, isStandalone: true, selector: "[solaris-drawer-footer]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDrawerFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-drawer-footer]',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisDrawer {
+    doc = inject(DOCUMENT);
+    title = '';
+    titleKey = '';
+    panelClass = '';
+    backdrop = true;
+    showClose = true;
+    trapFocus = true;
+    backdropClass = '';
+    showHeader = true;
+    lockScroll = true;
+    restoreFocus = true;
+    closeOnEscape = true;
+    width = 'min(26rem, 92vw)';
+    side = 'right';
+    height = 'min(70vh, 40rem)';
+    closeOnOutsideClick = true;
+    _openInput = signal(null, ...(ngDevMode ? [{ debugName: "_openInput" }] : []));
+    _internalOpen = signal(false, ...(ngDevMode ? [{ debugName: "_internalOpen" }] : []));
+    set open(v) { this._openInput.set(v); }
+    get open() { return this._openInput(); }
+    isOpen = computed(() => {
+        const v = this._openInput();
+        return typeof v === 'boolean' ? v : this._internalOpen();
+    }, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    openChange = new EventEmitter();
+    headerSlot;
+    footerSlot;
+    panelEl;
+    static seq = 0;
+    _id = `solaris-drawer-${++SolarisDrawer.seq}`;
+    static scrollLockCount = 0;
+    static prevBodyOverflow = '';
+    titleId = `${this._id}-title`;
+    prevFocused = null;
+    static prevBodyPaddingRight = '';
+    get dataSide() { return this.side; }
+    get dataOpen() { return this.isOpen() ? 'true' : null; }
+    get hasCustomHeader() { return !!this.headerSlot; }
+    get hasCustomFooter() { return !!this.footerSlot; }
+    constructor() {
+        effect((onCleanup) => {
+            const open = this.isOpen();
+            if (open) {
+                this.onOpen();
+            }
+            else {
+                this.onClose();
+            }
+            const onKeyDown = (ev) => {
+                if (!this.isOpen())
+                    return;
+                if (this.closeOnEscape && ev.key === 'Escape') {
+                    ev.preventDefault();
+                    this.setOpen(false);
+                }
+            };
+            const onDocPointerDown = (ev) => {
+                if (!this.isOpen())
+                    return;
+                if (!this.closeOnOutsideClick)
+                    return;
+                if (this.backdrop)
+                    return;
+                const panel = this.panelEl?.nativeElement;
+                const t = ev.target;
+                if (!panel || !t)
+                    return;
+                if (!panel.contains(t))
+                    this.setOpen(false);
+            };
+            const onFocusIn = (ev) => {
+                if (!this.isOpen())
+                    return;
+                if (!this.trapFocus)
+                    return;
+                const panel = this.panelEl?.nativeElement;
+                const target = ev.target;
+                if (!panel || !target)
+                    return;
+                if (!panel.contains(target)) {
+                    this.focusFirst();
+                }
+            };
+            this.doc.addEventListener('keydown', onKeyDown, { capture: true });
+            this.doc.addEventListener('pointerdown', onDocPointerDown, { capture: true });
+            this.doc.addEventListener('focusin', onFocusIn, { capture: true });
+            onCleanup(() => {
+                this.doc.removeEventListener('keydown', onKeyDown, true);
+                this.doc.removeEventListener('pointerdown', onDocPointerDown, true);
+                this.doc.removeEventListener('focusin', onFocusIn, true);
+            });
+        });
+    }
+    toggle() {
+        this.setOpen(!this.isOpen());
+    }
+    setOpen(next) {
+        const cur = this.isOpen();
+        if (next === cur)
+            return;
+        this.openChange.emit(next);
+        if (typeof this._openInput() !== 'boolean') {
+            this._internalOpen.set(next);
+        }
+    }
+    onBackdropClick() {
+        if (!this.closeOnOutsideClick)
+            return;
+        this.setOpen(false);
+    }
+    onPanelKeydown(ev) {
+        if (!this.trapFocus)
+            return;
+        if (ev.key !== 'Tab')
+            return;
+        const panel = this.panelEl?.nativeElement;
+        if (!panel)
+            return;
+        const focusables = this.getFocusable(panel);
+        if (!focusables.length)
+            return;
+        const first = focusables[0];
+        const last = focusables.at(-1);
+        const active = this.doc.activeElement;
+        if (ev.shiftKey) {
+            if (!active || active === first) {
+                ev.preventDefault();
+                if (last) {
+                    last.focus();
+                }
+            }
+        }
+        else if (!active || active === last) {
+            ev.preventDefault();
+            first.focus();
+        }
+    }
+    onOpen() {
+        if (this.restoreFocus) {
+            this.prevFocused = this.doc.activeElement;
+        }
+        if (this.lockScroll)
+            this.lockBodyScroll();
+        queueMicrotask(() => {
+            requestAnimationFrame(() => this.focusFirst());
+        });
+    }
+    onClose() {
+        if (this.lockScroll)
+            this.unlockBodyScroll();
+        if (this.restoreFocus && this.prevFocused?.isConnected) {
+            queueMicrotask(() => this.prevFocused?.focus?.());
+        }
+        this.prevFocused = null;
+    }
+    focusFirst() {
+        const panel = this.panelEl?.nativeElement;
+        if (!panel)
+            return;
+        const focusables = this.getFocusable(panel);
+        if (focusables.length) {
+            focusables[0].focus();
+            return;
+        }
+        panel.focus?.();
+    }
+    getFocusable(root) {
+        const selector = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+        const all = Array.from(root.querySelectorAll(selector));
+        return all.filter(el => {
+            const style = getComputedStyle(el);
+            const visible = style.visibility !== 'hidden' && style.display !== 'none';
+            const inDom = el.offsetParent !== null || style.position === 'fixed';
+            return visible && inDom;
+        });
+    }
+    lockBodyScroll() {
+        const body = this.doc.body;
+        if (!body)
+            return;
+        if (SolarisDrawer.scrollLockCount === 0) {
+            SolarisDrawer.prevBodyOverflow = body.style.overflow;
+            SolarisDrawer.prevBodyPaddingRight = body.style.paddingRight;
+            const scrollbarW = Math.max(0, window.innerWidth - this.doc.documentElement.clientWidth);
+            body.style.overflow = 'hidden';
+            if (scrollbarW)
+                body.style.paddingRight = `${scrollbarW}px`;
+        }
+        SolarisDrawer.scrollLockCount++;
+    }
+    unlockBodyScroll() {
+        const body = this.doc.body;
+        if (!body)
+            return;
+        SolarisDrawer.scrollLockCount = Math.max(0, SolarisDrawer.scrollLockCount - 1);
+        if (SolarisDrawer.scrollLockCount === 0) {
+            body.style.overflow = SolarisDrawer.prevBodyOverflow;
+            body.style.paddingRight = SolarisDrawer.prevBodyPaddingRight;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisDrawer, isStandalone: true, selector: "solaris-drawer", inputs: { title: "title", titleKey: "titleKey", panelClass: "panelClass", backdrop: "backdrop", showClose: "showClose", trapFocus: "trapFocus", backdropClass: "backdropClass", showHeader: "showHeader", lockScroll: "lockScroll", restoreFocus: "restoreFocus", closeOnEscape: "closeOnEscape", width: "width", side: "side", height: "height", closeOnOutsideClick: "closeOnOutsideClick", open: "open" }, outputs: { openChange: "openChange" }, host: { properties: { "attr.data-side": "this.dataSide", "attr.data-open": "this.dataOpen" }, classAttribute: "solaris-drawer-host" }, queries: [{ propertyName: "headerSlot", first: true, predicate: SolarisDrawerHeaderDirective, descendants: true }, { propertyName: "footerSlot", first: true, predicate: SolarisDrawerFooterDirective, descendants: true }], viewQueries: [{ propertyName: "panelEl", first: true, predicate: ["panelEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (isOpen()) {\r\n  @if (backdrop) {\r\n    <div class=\"solaris-drawer__backdrop {{ backdropClass }}\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\r\n  }\r\n\r\n  <aside #panelEl class=\"solaris-drawer__panel {{ panelClass }}\" role=\"dialog\" aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"showHeader ? titleId : null\" [style.--solaris-drawer-width]=\"width\"\r\n    [style.--solaris-drawer-height]=\"height\" (keydown)=\"onPanelKeydown($event)\" tabindex=\"-1\">\r\n    @if (showHeader) {\r\n      <header class=\"solaris-drawer__header\">\r\n        @if (hasCustomHeader) {\r\n          <ng-content select=\"[solaris-drawer-header]\"></ng-content>\r\n        } @else {\r\n          <div class=\"solaris-drawer__title\" [id]=\"titleId\">{{ title }}</div>\r\n\r\n          @if (showClose) {\r\n            <button type=\"button\" class=\"solaris-drawer__close\" (click)=\"setOpen(false)\" aria-label=\"Close\">\r\n              <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          }\r\n        }\r\n      </header>\r\n    }\r\n\r\n    <div class=\"solaris-drawer__content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n\r\n    @if (hasCustomFooter) {\r\n      <footer class=\"solaris-drawer__footer\">\r\n        <ng-content select=\"[solaris-drawer-footer]\"></ng-content>\r\n      </footer>\r\n    }\r\n  </aside>\r\n}\r\n", styles: [":host{display:contents}.solaris-drawer__backdrop{inset:0;position:fixed;background:#00000073;z-index:var(--solaris-z-fixed)}.solaris-drawer__panel{display:grid;outline:none;height:100vh;position:fixed;grid-template-rows:auto 1fr auto;box-shadow:var(--solaris-shadow-lg);background:var(--solaris-color-surface);z-index:calc(var(--solaris-z-fixed) + 1);border-left:1px solid var(--solaris-color-border);width:var(--solaris-drawer-width, min(26rem, 92vw))}:host([data-side=right]) .solaris-drawer__panel{top:0;right:0;animation:solaris-drawer-in-right .16s ease}:host([data-side=left]) .solaris-drawer__panel{top:0;left:0;border-left:none;border-right:1px solid var(--solaris-color-border);animation:solaris-drawer-in-left .16s ease}:host([data-side=bottom]) .solaris-drawer__panel{left:0;right:0;bottom:0;width:100%;height:var(--solaris-drawer-height, min(70vh, 40rem));border-left:none;border-right:none;border-top:1px solid var(--solaris-color-border);animation:solaris-drawer-in-bottom .16s ease}@keyframes solaris-drawer-in-right{0%{transform:translate(14px);opacity:.75}to{transform:translate(0);opacity:1}}@keyframes solaris-drawer-in-left{0%{transform:translate(-14px);opacity:.75}to{transform:translate(0);opacity:1}}@keyframes solaris-drawer-in-bottom{0%{transform:translateY(14px);opacity:.75}to{transform:translateY(0);opacity:1}}.solaris-drawer__header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--solaris-space-4);border-bottom:1px solid var(--solaris-color-border)}.solaris-drawer__title{font-size:var(--solaris-fs-14);color:var(--solaris-color-text)}.solaris-drawer__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-drawer__close:hover{background:var(--solaris-color-surface-2)}.solaris-drawer__content{overflow:auto;padding:var(--solaris-space-4)}.solaris-drawer__footer{padding:var(--solaris-space-4);border-top:1px solid var(--solaris-color-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-drawer', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-drawer-host' }, template: "@if (isOpen()) {\r\n  @if (backdrop) {\r\n    <div class=\"solaris-drawer__backdrop {{ backdropClass }}\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\r\n  }\r\n\r\n  <aside #panelEl class=\"solaris-drawer__panel {{ panelClass }}\" role=\"dialog\" aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"showHeader ? titleId : null\" [style.--solaris-drawer-width]=\"width\"\r\n    [style.--solaris-drawer-height]=\"height\" (keydown)=\"onPanelKeydown($event)\" tabindex=\"-1\">\r\n    @if (showHeader) {\r\n      <header class=\"solaris-drawer__header\">\r\n        @if (hasCustomHeader) {\r\n          <ng-content select=\"[solaris-drawer-header]\"></ng-content>\r\n        } @else {\r\n          <div class=\"solaris-drawer__title\" [id]=\"titleId\">{{ title }}</div>\r\n\r\n          @if (showClose) {\r\n            <button type=\"button\" class=\"solaris-drawer__close\" (click)=\"setOpen(false)\" aria-label=\"Close\">\r\n              <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          }\r\n        }\r\n      </header>\r\n    }\r\n\r\n    <div class=\"solaris-drawer__content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n\r\n    @if (hasCustomFooter) {\r\n      <footer class=\"solaris-drawer__footer\">\r\n        <ng-content select=\"[solaris-drawer-footer]\"></ng-content>\r\n      </footer>\r\n    }\r\n  </aside>\r\n}\r\n", styles: [":host{display:contents}.solaris-drawer__backdrop{inset:0;position:fixed;background:#00000073;z-index:var(--solaris-z-fixed)}.solaris-drawer__panel{display:grid;outline:none;height:100vh;position:fixed;grid-template-rows:auto 1fr auto;box-shadow:var(--solaris-shadow-lg);background:var(--solaris-color-surface);z-index:calc(var(--solaris-z-fixed) + 1);border-left:1px solid var(--solaris-color-border);width:var(--solaris-drawer-width, min(26rem, 92vw))}:host([data-side=right]) .solaris-drawer__panel{top:0;right:0;animation:solaris-drawer-in-right .16s ease}:host([data-side=left]) .solaris-drawer__panel{top:0;left:0;border-left:none;border-right:1px solid var(--solaris-color-border);animation:solaris-drawer-in-left .16s ease}:host([data-side=bottom]) .solaris-drawer__panel{left:0;right:0;bottom:0;width:100%;height:var(--solaris-drawer-height, min(70vh, 40rem));border-left:none;border-right:none;border-top:1px solid var(--solaris-color-border);animation:solaris-drawer-in-bottom .16s ease}@keyframes solaris-drawer-in-right{0%{transform:translate(14px);opacity:.75}to{transform:translate(0);opacity:1}}@keyframes solaris-drawer-in-left{0%{transform:translate(-14px);opacity:.75}to{transform:translate(0);opacity:1}}@keyframes solaris-drawer-in-bottom{0%{transform:translateY(14px);opacity:.75}to{transform:translateY(0);opacity:1}}.solaris-drawer__header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--solaris-space-4);border-bottom:1px solid var(--solaris-color-border)}.solaris-drawer__title{font-size:var(--solaris-fs-14);color:var(--solaris-color-text)}.solaris-drawer__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-drawer__close:hover{background:var(--solaris-color-surface-2)}.solaris-drawer__content{overflow:auto;padding:var(--solaris-space-4)}.solaris-drawer__footer{padding:var(--solaris-space-4);border-top:1px solid var(--solaris-color-border)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{
+                type: Input
+            }], titleKey: [{
+                type: Input
+            }], panelClass: [{
+                type: Input
+            }], backdrop: [{
+                type: Input
+            }], showClose: [{
+                type: Input
+            }], trapFocus: [{
+                type: Input
+            }], backdropClass: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], lockScroll: [{
+                type: Input
+            }], restoreFocus: [{
+                type: Input
+            }], closeOnEscape: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], side: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], closeOnOutsideClick: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }], headerSlot: [{
+                type: ContentChild,
+                args: [SolarisDrawerHeaderDirective]
+            }], footerSlot: [{
+                type: ContentChild,
+                args: [SolarisDrawerFooterDirective]
+            }], panelEl: [{
+                type: ViewChild,
+                args: ['panelEl', { read: ElementRef }]
+            }], dataSide: [{
+                type: HostBinding,
+                args: ['attr.data-side']
+            }], dataOpen: [{
+                type: HostBinding,
+                args: ['attr.data-open']
+            }] } });
+
+class SolarisFilterPanelFooterDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFilterPanelFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisFilterPanelFooterDirective, isStandalone: true, selector: "[solaris-filter-panel-footer]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFilterPanelFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-filter-panel-footer]',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisTableFilters {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTableFilters, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisTableFilters, isStandalone: true, selector: "solaris-table-filters", host: { classAttribute: "solaris-table-filters" }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;margin-bottom:var(--solaris-space-4)}:host ::ng-deep .solaris-table-filters__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-space-3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTableFilters, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-table-filters', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-table-filters' }, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;margin-bottom:var(--solaris-space-4)}:host ::ng-deep .solaris-table-filters__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-space-3)}\n"] }]
+        }] });
+
+class SolarisFilterField {
+    label = '';
+    labelKey = '';
+    active = false;
+    resetLabel = 'Reset';
+    resetLabelKey = 'ui.solaris.common.reset';
+    reset = new EventEmitter();
+    get showReset() {
+        return this.reset.observed;
+    }
+    onResetClick(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.reset.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFilterField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisFilterField, isStandalone: true, selector: "solaris-filter-field", inputs: { label: "label", labelKey: "labelKey", active: "active", resetLabel: "resetLabel", resetLabelKey: "resetLabelKey" }, outputs: { reset: "reset" }, host: { classAttribute: "solaris-filter-field-host" }, ngImport: i0, template: "<div class=\"solaris-filter-field\">\r\n  <div class=\"solaris-filter-field__head\">\r\n    <span class=\"solaris-filter-field__label\">\r\n      @if (labelKey) { {{ labelKey | translate }} } @else { {{ label }} }\r\n    </span>\r\n\r\n    @if (showReset) {\r\n      <button type=\"button\" class=\"solaris-filter-field__reset\" (click)=\"onResetClick($event)\" [disabled]=\"!active\">\r\n        @if (resetLabelKey) { {{ resetLabelKey | translate }} } @else { {{ resetLabel }} }\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"solaris-filter-field__body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".solaris-filter-field{display:grid;gap:var(--solaris-space-2)}.solaris-filter-field__head{display:flex;align-items:center;gap:var(--solaris-space-3);justify-content:space-between}.solaris-filter-field__label{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-filter-field__reset{border:none;cursor:pointer;font-weight:400;background:transparent;font-size:var(--solaris-fs-12);border-radius:var(--solaris-radius-sm);padding:var(--solaris-space-1) var(--solaris-space-2);color:color-mix(in srgb,var(--solaris-color-primary) 90%,transparent)}.solaris-filter-field__reset:hover:not(:disabled){background:color-mix(in srgb,var(--solaris-color-primary) 10%,transparent)}.solaris-filter-field__reset:disabled{opacity:.5;cursor:not-allowed;color:color-mix(in srgb,var(--solaris-color-text) 60%,transparent)}.solaris-filter-field__body{min-width:0}\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: SolarisFilterField, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-filter-field', standalone: true, imports: [SolarisTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-filter-field-host' }, template: "<div class=\"solaris-filter-field\">\r\n  <div class=\"solaris-filter-field__head\">\r\n    <span class=\"solaris-filter-field__label\">\r\n      @if (labelKey) { {{ labelKey | translate }} } @else { {{ label }} }\r\n    </span>\r\n\r\n    @if (showReset) {\r\n      <button type=\"button\" class=\"solaris-filter-field__reset\" (click)=\"onResetClick($event)\" [disabled]=\"!active\">\r\n        @if (resetLabelKey) { {{ resetLabelKey | translate }} } @else { {{ resetLabel }} }\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"solaris-filter-field__body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".solaris-filter-field{display:grid;gap:var(--solaris-space-2)}.solaris-filter-field__head{display:flex;align-items:center;gap:var(--solaris-space-3);justify-content:space-between}.solaris-filter-field__label{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-filter-field__reset{border:none;cursor:pointer;font-weight:400;background:transparent;font-size:var(--solaris-fs-12);border-radius:var(--solaris-radius-sm);padding:var(--solaris-space-1) var(--solaris-space-2);color:color-mix(in srgb,var(--solaris-color-primary) 90%,transparent)}.solaris-filter-field__reset:hover:not(:disabled){background:color-mix(in srgb,var(--solaris-color-primary) 10%,transparent)}.solaris-filter-field__reset:disabled{opacity:.5;cursor:not-allowed;color:color-mix(in srgb,var(--solaris-color-text) 60%,transparent)}.solaris-filter-field__body{min-width:0}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], labelKey: [{
+                type: Input
+            }], active: [{
+                type: Input
+            }], resetLabel: [{
+                type: Input
+            }], resetLabelKey: [{
+                type: Input
+            }], reset: [{
+                type: Output
+            }] } });
+
+class SolarisFilterPanelChipsDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFilterPanelChipsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisFilterPanelChipsDirective, isStandalone: true, selector: "[solaris-filter-panel-chips]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFilterPanelChipsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-filter-panel-chips]',
+                    standalone: true,
+                }]
+        }] });
+
+const PRESET_COLORS$1 = new Set([
+    'primary',
+    'surface',
+    'success',
+    'warning',
+    'error',
+    'info',
+    'gradient',
+]);
+function resolveRadius$1(v) {
+    const s = String(v).trim();
+    switch (s) {
+        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 s;
+    }
+}
+class ButtonDirective {
+    elementRef = inject((ElementRef));
+    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _iconOnly = signal(false, ...(ngDevMode ? [{ debugName: "_iconOnly" }] : []));
+    _fullWidth = signal(false, ...(ngDevMode ? [{ debugName: "_fullWidth" }] : []));
+    _badgeOverlay = signal(false, ...(ngDevMode ? [{ debugName: "_badgeOverlay" }] : []));
+    _textColor = signal(null, ...(ngDevMode ? [{ debugName: "_textColor" }] : []));
+    _customColor = signal(null, ...(ngDevMode ? [{ debugName: "_customColor" }] : []));
+    _size = signal('md', ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _variant = signal('solid', ...(ngDevMode ? [{ debugName: "_variant" }] : []));
+    _radius = signal(null, ...(ngDevMode ? [{ debugName: "_radius" }] : []));
+    _color = signal('primary', ...(ngDevMode ? [{ debugName: "_color" }] : []));
+    isAnchor = computed(() => this.elementRef.nativeElement.tagName.toLowerCase() === 'a', ...(ngDevMode ? [{ debugName: "isAnchor" }] : []));
+    set size(v) {
+        if (v)
+            this._size.set(v);
+    }
+    set variant(v) {
+        if (v)
+            this._variant.set(v);
+    }
+    set color(v) {
+        if (v == null || String(v).trim() === '')
+            return;
+        const value = String(v).trim();
+        if (PRESET_COLORS$1.has(value)) {
+            this._color.set(value);
+            this._customColor.set(null);
+        }
+        else {
+            this._color.set('custom');
+            this._customColor.set(value);
+        }
+    }
+    set textColor(v) {
+        const value = v == null || String(v).trim() === '' ? null : String(v).trim();
+        this._textColor.set(value);
+    }
+    set radius(v) {
+        const value = v == null || String(v).trim() === '' ? null : (v);
+        this._radius.set(value);
+    }
+    set loading(v) {
+        this._loading.set(v);
+    }
+    set iconOnly(v) {
+        this._iconOnly.set(v);
+    }
+    set disabled(v) {
+        this._disabled.set(v);
+    }
+    set fullWidth(v) {
+        this._fullWidth.set(v);
+    }
+    set badgeOverlay(v) {
+        this._badgeOverlay.set(v);
+    }
+    attr = '';
+    get tabIndex() {
+        return this.isAnchor() && (this._disabled() || this._loading()) ? -1 : null;
+    }
+    get ariaBusy() {
+        return this._loading() ? 'true' : null;
+    }
+    get dataSize() {
+        return this._size();
+    }
+    get dataColor() {
+        return this._color();
+    }
+    get nativeDisabled() {
+        const isButton = !this.isAnchor();
+        return isButton && (this._disabled() || this._loading()) ? '' : null;
+    }
+    get dataVariant() {
+        return this._variant();
+    }
+    get ariaDisabled() {
+        return this.isAnchor() && (this._disabled() || this._loading()) ? 'true' : null;
+    }
+    get dataIconOnly() {
+        return this._iconOnly() ? 'true' : null;
+    }
+    get dataFullWidth() {
+        return this._fullWidth() ? 'true' : null;
+    }
+    get customColorValue() {
+        return this._customColor() ?? null;
+    }
+    get dataCustomInk() {
+        return this._textColor() ? 'true' : null;
+    }
+    get customInkValue() {
+        return this._textColor() ?? null;
+    }
+    get dataBadgeOverlay() {
+        return this._badgeOverlay() ? 'true' : null;
+    }
+    get buttonRadius() {
+        return this._radius() ? resolveRadius$1(this._radius()) : null;
+    }
+    onClick(ev) {
+        if (!this.isAnchor())
+            return;
+        if (this._disabled() || this._loading()) {
+            ev.preventDefault();
+            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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[solaris-button], a[solaris-button]',
+                    standalone: true,
+                }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], iconOnly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], fullWidth: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], badgeOverlay: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], attr: [{
+                type: HostBinding,
+                args: ['attr.solaris-button']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], ariaBusy: [{
+                type: HostBinding,
+                args: ['attr.aria-busy']
+            }], dataSize: [{
+                type: HostBinding,
+                args: ['attr.data-size']
+            }], dataColor: [{
+                type: HostBinding,
+                args: ['attr.data-color']
+            }], nativeDisabled: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }], dataVariant: [{
+                type: HostBinding,
+                args: ['attr.data-variant']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], dataIconOnly: [{
+                type: HostBinding,
+                args: ['attr.data-icon-only']
+            }], dataFullWidth: [{
+                type: HostBinding,
+                args: ['attr.data-full-width']
+            }], customColorValue: [{
+                type: HostBinding,
+                args: ['style.--sb-custom']
+            }], dataCustomInk: [{
+                type: HostBinding,
+                args: ['attr.data-custom-ink']
+            }], customInkValue: [{
+                type: HostBinding,
+                args: ['style.--sb-custom-ink']
+            }], dataBadgeOverlay: [{
+                type: HostBinding,
+                args: ['attr.data-badge-overlay']
+            }], buttonRadius: [{
+                type: HostBinding,
+                args: ['style.--solaris-button-radius']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class SolarisFilterPanel {
+    count = 0;
+    labelKey = '';
+    titleKey = '';
+    disabled = false;
+    drawerSide = 'right';
+    radius = 'sm';
+    drawerWidth = 'min(30rem, 92vw)';
+    label = 'ui.solaris.tables.filter.filters';
+    title = 'ui.solaris.tables.filter.filters';
+    _internalOpen = signal(false, ...(ngDevMode ? [{ debugName: "_internalOpen" }] : []));
+    _openInput = signal(null, ...(ngDevMode ? [{ debugName: "_openInput" }] : []));
+    _chipsSlot = signal(null, ...(ngDevMode ? [{ debugName: "_chipsSlot" }] : []));
+    set open(v) { this._openInput.set(v); }
+    get open() { return this._openInput(); }
+    isOpen = computed(() => {
+        const v = this._openInput();
+        return typeof v === 'boolean' ? v : this._internalOpen();
+    }, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+    apply = new EventEmitter();
+    clearAll = new EventEmitter();
+    openChange = new EventEmitter();
+    footerSlot;
+    set chipsSlot(v) {
+        this._chipsSlot.set(v ?? null);
+    }
+    hasChips = computed(() => !!this._chipsSlot(), ...(ngDevMode ? [{ debugName: "hasChips" }] : []));
+    get hasCustomFooter() { return !!this.footerSlot; }
+    setOpen(next) {
+        if (this.disabled)
+            return;
+        if (next === this.isOpen())
+            return;
+        this.openChange.emit(next);
+        if (typeof this._openInput() !== 'boolean')
+            this._internalOpen.set(next);
+    }
+    toggle() {
+        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 });
+}
+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,
+                        SolarisDrawerHeaderDirective,
+                        SolarisDrawerFooterDirective,
+                        SolarisDrawer
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-filter-panel-host' }, 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"] }]
+        }], propDecorators: { count: [{
+                type: Input
+            }], labelKey: [{
+                type: Input
+            }], titleKey: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], drawerSide: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], drawerWidth: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], apply: [{
+                type: Output
+            }], clearAll: [{
+                type: Output
+            }], openChange: [{
+                type: Output
+            }], footerSlot: [{
+                type: ContentChild,
+                args: [SolarisFilterPanelFooterDirective]
+            }], chipsSlot: [{
+                type: ContentChild,
+                args: [SolarisFilterPanelChipsDirective]
+            }] } });
+
+class SolarisFilterChip {
+    label = '';
+    value = '';
+    labelKey = '';
+    valueKey = '';
+    disabled = false;
+    removable = true;
+    radius = 'md';
+    remove = new EventEmitter();
+    chipClick = new EventEmitter();
+    onRemoveClick(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        if (!this.disabled)
+            this.remove.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFilterChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisFilterChip, isStandalone: true, selector: "solaris-filter-chip", inputs: { label: "label", value: "value", labelKey: "labelKey", valueKey: "valueKey", disabled: "disabled", removable: "removable", radius: "radius" }, outputs: { remove: "remove", chipClick: "chipClick" }, host: { classAttribute: "solaris-filter-chip-host" }, ngImport: i0, template: "<button type=\"button\" class=\"solaris-filter-chip\" [disabled]=\"disabled\"\r\n        (click)=\"chipClick.emit()\" [attr.data-radius]=\"radius\">\r\n  <span class=\"solaris-filter-chip__label\">\r\n    @if (labelKey) { {{ labelKey | translate }} } @else { {{ label }} }\r\n  </span>\r\n\r\n  <span class=\"solaris-filter-chip__value\">\r\n    @if (valueKey) { {{ valueKey | translate }} } @else { {{ value }} }\r\n  </span>\r\n\r\n  @if (removable) {\r\n    <span class=\"solaris-filter-chip__remove\"\r\n          role=\"button\"\r\n          tabindex=\"-1\"\r\n          (click)=\"onRemoveClick($event)\">\r\n      <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n    </span>\r\n  }\r\n</button>\r\n", styles: [".solaris-filter-chip{--solaris-filter-chip-radius: var(--solaris-radius-sm);max-width:100%;cursor:pointer;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text);padding:0 var(--solaris-space-3);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border);border-radius:var(--solaris-filter-chip-radius);height:var(--solaris-filter-bar-height, 3.8rem)}.solaris-filter-chip[data-radius=none]{--solaris-filter-chip-radius: var(--solaris-radius-none)}.solaris-filter-chip[data-radius=xs]{--solaris-filter-chip-radius: var(--solaris-radius-xs)}.solaris-filter-chip[data-radius=sm]{--solaris-filter-chip-radius: var(--solaris-radius-sm)}.solaris-filter-chip[data-radius=md]{--solaris-filter-chip-radius: var(--solaris-radius-md)}.solaris-filter-chip[data-radius=lg]{--solaris-filter-chip-radius: var(--solaris-radius-lg)}.solaris-filter-chip[data-radius=full]{--solaris-filter-chip-radius: var(--solaris-radius-full)}.solaris-filter-chip:disabled{opacity:.55;cursor:not-allowed}.solaris-filter-chip__label{white-space:nowrap;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-filter-chip__value{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-14)}.solaris-filter-chip__remove{align-items:center;display:inline-flex;justify-content:center;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);width:calc(var(--solaris-filter-bar-height, 3.8rem) - 1.2rem);height:calc(var(--solaris-filter-bar-height, 3.8rem) - 1.2rem)}.solaris-filter-chip:hover .solaris-filter-chip__remove{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}\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: SolarisFilterChip, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-filter-chip', standalone: true, imports: [
+                        SolarisTranslationPipe
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-filter-chip-host' }, template: "<button type=\"button\" class=\"solaris-filter-chip\" [disabled]=\"disabled\"\r\n        (click)=\"chipClick.emit()\" [attr.data-radius]=\"radius\">\r\n  <span class=\"solaris-filter-chip__label\">\r\n    @if (labelKey) { {{ labelKey | translate }} } @else { {{ label }} }\r\n  </span>\r\n\r\n  <span class=\"solaris-filter-chip__value\">\r\n    @if (valueKey) { {{ valueKey | translate }} } @else { {{ value }} }\r\n  </span>\r\n\r\n  @if (removable) {\r\n    <span class=\"solaris-filter-chip__remove\"\r\n          role=\"button\"\r\n          tabindex=\"-1\"\r\n          (click)=\"onRemoveClick($event)\">\r\n      <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n    </span>\r\n  }\r\n</button>\r\n", styles: [".solaris-filter-chip{--solaris-filter-chip-radius: var(--solaris-radius-sm);max-width:100%;cursor:pointer;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text);padding:0 var(--solaris-space-3);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border);border-radius:var(--solaris-filter-chip-radius);height:var(--solaris-filter-bar-height, 3.8rem)}.solaris-filter-chip[data-radius=none]{--solaris-filter-chip-radius: var(--solaris-radius-none)}.solaris-filter-chip[data-radius=xs]{--solaris-filter-chip-radius: var(--solaris-radius-xs)}.solaris-filter-chip[data-radius=sm]{--solaris-filter-chip-radius: var(--solaris-radius-sm)}.solaris-filter-chip[data-radius=md]{--solaris-filter-chip-radius: var(--solaris-radius-md)}.solaris-filter-chip[data-radius=lg]{--solaris-filter-chip-radius: var(--solaris-radius-lg)}.solaris-filter-chip[data-radius=full]{--solaris-filter-chip-radius: var(--solaris-radius-full)}.solaris-filter-chip:disabled{opacity:.55;cursor:not-allowed}.solaris-filter-chip__label{white-space:nowrap;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-filter-chip__value{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-14)}.solaris-filter-chip__remove{align-items:center;display:inline-flex;justify-content:center;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);width:calc(var(--solaris-filter-bar-height, 3.8rem) - 1.2rem);height:calc(var(--solaris-filter-bar-height, 3.8rem) - 1.2rem)}.solaris-filter-chip:hover .solaris-filter-chip__remove{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], labelKey: [{
+                type: Input
+            }], valueKey: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], remove: [{
+                type: Output
+            }], chipClick: [{
+                type: Output
+            }] } });
+
+class SolarisTableSkeleton {
+    rows = 10;
+    columns = 6;
+    selectable = false;
+    gridTemplateColumns = '';
+    rowsArray() { return Array.from({ length: this.rows }, (_, i) => i); }
+    colsArray() { return Array.from({ length: this.columns }, (_, i) => i); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTableSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisTableSkeleton, isStandalone: true, selector: "solaris-table-skeleton", inputs: { rows: "rows", columns: "columns", selectable: "selectable", gridTemplateColumns: "gridTemplateColumns" }, ngImport: i0, template: "<div class=\"solaris-table-skeleton\" role=\"status\" aria-live=\"polite\">\r\n  @for (r of rowsArray(); track r) {\r\n    <div class=\"solaris-table-skeleton__row\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n\r\n      @for (c of colsArray(); track c; let i = $index) {\r\n        <div class=\"solaris-table-skeleton__cell\" [class.is-first]=\"i === 0\">\r\n          @if (selectable && i === 0) {\r\n            <span class=\"solaris-table-skeleton__select-prefix\">\r\n              <span class=\"sk sk--circle\"></span>\r\n            </span>\r\n          }\r\n\r\n          <span class=\"sk sk--line\"></span>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".solaris-table-skeleton__row{display:grid;border-bottom:1px solid var(--solaris-color-border)}.solaris-table-skeleton__cell{min-width:0;display:flex;align-items:center;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.solaris-table-skeleton__select-prefix{flex:0 0 auto;align-items:center;display:inline-flex}.sk{display:block;animation:shimmer 1.1s linear infinite;border-radius:var(--solaris-radius-sm);background:linear-gradient(90deg,var(--solaris-color-surface-2),var(--solaris-color-surface),rgba(255,255,255,.06));background-size:200% 100%}.sk--line{height:1rem;width:100%}.sk--circle{height:1.1rem;width:1.1rem;border-radius:9999rem}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTableSkeleton, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-table-skeleton', standalone: true, template: "<div class=\"solaris-table-skeleton\" role=\"status\" aria-live=\"polite\">\r\n  @for (r of rowsArray(); track r) {\r\n    <div class=\"solaris-table-skeleton__row\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n\r\n      @for (c of colsArray(); track c; let i = $index) {\r\n        <div class=\"solaris-table-skeleton__cell\" [class.is-first]=\"i === 0\">\r\n          @if (selectable && i === 0) {\r\n            <span class=\"solaris-table-skeleton__select-prefix\">\r\n              <span class=\"sk sk--circle\"></span>\r\n            </span>\r\n          }\r\n\r\n          <span class=\"sk sk--line\"></span>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".solaris-table-skeleton__row{display:grid;border-bottom:1px solid var(--solaris-color-border)}.solaris-table-skeleton__cell{min-width:0;display:flex;align-items:center;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.solaris-table-skeleton__select-prefix{flex:0 0 auto;align-items:center;display:inline-flex}.sk{display:block;animation:shimmer 1.1s linear infinite;border-radius:var(--solaris-radius-sm);background:linear-gradient(90deg,var(--solaris-color-surface-2),var(--solaris-color-surface),rgba(255,255,255,.06));background-size:200% 100%}.sk--line{height:1rem;width:100%}.sk--circle{height:1.1rem;width:1.1rem;border-radius:9999rem}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+        }], propDecorators: { rows: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], gridTemplateColumns: [{
+                type: Input
+            }] } });
+
+class SolarisFilterBar {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFilterBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisFilterBar, isStandalone: true, selector: "solaris-filter-bar", host: { classAttribute: "solaris-filter-bar" }, ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{--solaris-filter-bar-height: 3.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-space-3);min-height:var(--solaris-filter-bar-height)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFilterBar, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-filter-bar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-filter-bar' }, template: "<ng-content></ng-content>\r\n", styles: [":host{--solaris-filter-bar-height: 3.8rem;display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-space-3);min-height:var(--solaris-filter-bar-height)}\n"] }]
+        }] });
+
+class SolarisColumnCellDef {
+    template;
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisColumnCellDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisColumnCellDef, isStandalone: true, selector: "ng-template[solaris-column-cell]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisColumnCellDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[solaris-column-cell]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class SolarisColumnHeaderDef {
+    template;
+    constructor(template) {
+        this.template = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisColumnHeaderDef, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisColumnHeaderDef, isStandalone: true, selector: "ng-template[solaris-column-header]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisColumnHeaderDef, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[solaris-column-header]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+class SolarisIdGenerator {
+    counters = new Map();
+    next(prefix = 'solaris') {
+        const current = this.counters.get(prefix) ?? 0;
+        const next = current + 1;
+        this.counters.set(prefix, next);
+        return `${prefix}-${next}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisIdGenerator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisIdGenerator, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisIdGenerator, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SolarisTableColumn {
+    ids = inject(SolarisIdGenerator);
+    id = this.ids.next('solaris-column');
+    field;
+    width;
+    header;
+    sortKey;
+    minWidth;
+    maxWidth;
+    headerKey;
+    headerIconClass;
+    align = 'start';
+    grow = false;
+    resizable = true;
+    sortable = false;
+    cellDef;
+    headerDef;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTableColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.1", type: SolarisTableColumn, isStandalone: true, selector: "solaris-column", inputs: { field: "field", width: "width", header: "header", sortKey: "sortKey", minWidth: "minWidth", maxWidth: "maxWidth", headerKey: "headerKey", headerIconClass: "headerIconClass", align: "align", grow: ["grow", "grow", booleanAttribute], resizable: ["resizable", "resizable", booleanAttribute], sortable: ["sortable", "sortable", booleanAttribute] }, queries: [{ propertyName: "cellDef", first: true, predicate: SolarisColumnCellDef, descendants: true }, { propertyName: "headerDef", first: true, predicate: SolarisColumnHeaderDef, descendants: true }], ngImport: i0, template: "", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTableColumn, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-column', standalone: true, template: "" }]
+        }], propDecorators: { field: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], header: [{
+                type: Input
+            }], sortKey: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], headerKey: [{
+                type: Input
+            }], headerIconClass: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], grow: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], resizable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], sortable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], cellDef: [{
+                type: ContentChild,
+                args: [SolarisColumnCellDef]
+            }], headerDef: [{
+                type: ContentChild,
+                args: [SolarisColumnHeaderDef]
+            }] } });
+
+function uniqueId(prefix) {
+    return inject(SolarisIdGenerator).next(prefix);
+}
+
+const PRESET_COLORS = new Set(['primary', 'success', 'warning', 'error', 'info']);
+class SolarisCheckbox {
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    variant = input('square', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    inputId = input(null, { ...(ngDevMode ? { debugName: "inputId" } : {}), alias: 'id' });
+    appearance = input('solid', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    checkColor = input(null, ...(ngDevMode ? [{ debugName: "checkColor" }] : []));
+    checked = signal(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    checkedChange = output();
+    indeterminateChange = output();
+    native;
+    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" }] : []));
+    autoId = uniqueId('solaris-checkbox');
+    id = computed(() => this.inputId() ?? this.autoId, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    ink = computed(() => resolveColor(this.checkColor(), null), ...(ngDevMode ? [{ debugName: "ink" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        effect(() => {
+            const el = this.native?.nativeElement;
+            if (!el)
+                return;
+            el.indeterminate = this.indeterminate();
+        });
+    }
+    onNativeChange(next) {
+        if (this.indeterminate())
+            this.indeterminateChange.emit(false);
+        this.checked.set(next);
+        this.onChange(next);
+        this.checkedChange.emit(next);
+        this.onTouched();
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisCheckbox, isStandalone: true, selector: "solaris-checkbox", inputs: { indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", 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 }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, checkColor: { classPropertyName: "checkColor", publicName: "checkColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange", indeterminateChange: "indeterminateChange" }, host: { properties: { "attr.data-size": "size()", "attr.data-color": "colorKey()", "attr.data-variant": "variant()", "attr.data-appearance": "appearance()", "style.--solaris-checkbox-ink": "ink()", "attr.data-disabled": "disabled() ? \"true\" : null", "style.--solaris-checkbox-custom": "customAccent()" }, classAttribute: "solaris-checkbox-host" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SolarisCheckbox),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "native", first: true, predicate: ["native"], descendants: true, static: true }], ngImport: i0, template: "<label class=\"solaris-checkbox\">\r\n  <input #native class=\"solaris-checkbox__native\" type=\"checkbox\" [attr.id]=\"id()\"\r\n         [checked]=\"checked()\" [disabled]=\"disabled()\" [attr.aria-label]=\"ariaLabel() ?? null\"\r\n         [attr.aria-checked]=\"indeterminate() ? 'mixed' : (checked() ? 'true' : 'false')\"\r\n         (change)=\"onNativeChange(native.checked)\" (blur)=\"onBlur()\"/>\r\n\r\n  <span class=\"solaris-checkbox__control\" aria-hidden=\"true\">\r\n    @if (variant() === 'icon') {\r\n      <span class=\"solaris-checkbox__dot\" aria-hidden=\"true\"></span>\r\n    } @else {\r\n      <i class=\"ph solaris-checkbox__icon\" [class.ph-check]=\"!indeterminate()\"\r\n         [class.ph-minus]=\"indeterminate()\" aria-hidden=\"true\"></i>\r\n    }\r\n  </span>\r\n\r\n  @if (variant() !== 'icon') {\r\n    <span class=\"solaris-checkbox__content\"><ng-content/></span>\r\n  }\r\n</label>\r\n", styles: [":host{--_hit: 2.4rem;--_size: 2rem;--_icon: 1.6rem;--_icon-ring: .5rem;--_text: var(--solaris-color-text);--_radius: var(--solaris-radius-sm);--_border: var(--solaris-color-border);--_muted: var(--solaris-color-text-muted);--solaris-checkbox-border: var(--_border);--solaris-checkbox-accent: var(--solaris-color-primary);--solaris-checkbox-on-accent: var(--solaris-color-primary-contrast, #fff)}:host([data-size=sm]){--_size: 1.8rem;--_icon: 1.4rem}:host([data-size=md]){--_size: 2rem;--_icon: 1.6rem}:host([data-size=lg]){--_size: 2.4rem;--_icon: 1.8rem}:host([data-variant=round]),:host([data-variant=icon]){--_radius: var(--solaris-radius-full)}:host([data-color=primary]){--solaris-checkbox-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-checkbox-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-checkbox-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-checkbox-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-checkbox-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-checkbox-accent: var(--solaris-checkbox-custom, var(--solaris-color-primary))}.solaris-checkbox{gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--_text);display:inline-flex;align-items:flex-start}.solaris-checkbox__native{opacity:0;width:1px;height:1px;position:absolute;pointer-events:none}.solaris-checkbox__control{line-height:0;flex:0 0 auto;color:transparent;align-items:center;display:inline-flex;box-sizing:border-box;justify-content:center;border-radius:var(--_radius);background-color:transparent;width:max(var(--_size),var(--_size));height:max(var(--_size),var(--_size));border:.1rem solid var(--solaris-checkbox-border)}.solaris-checkbox__content{gap:.2rem;line-height:1.3;display:inline-flex;flex-direction:column}.solaris-checkbox__icon{opacity:0;line-height:1;display:block;font-weight:bolder;pointer-events:none;font-size:var(--_icon)}.solaris-checkbox__native:checked+.solaris-checkbox__control .solaris-checkbox__icon,.solaris-checkbox__native:indeterminate+.solaris-checkbox__control .solaris-checkbox__icon{opacity:1}.solaris-checkbox__native:checked+.solaris-checkbox__control,.solaris-checkbox__native:indeterminate+.solaris-checkbox__control{border-color:var(--solaris-checkbox-accent)}:host([data-color=primary]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-color=primary]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{border-color:var(--solaris-color-primary-tint)}:host([data-appearance=outline]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-appearance=outline]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{background-color:transparent;color:var(--solaris-checkbox-ink, var(--solaris-checkbox-accent))}:host([data-appearance=solid]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-appearance=solid]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{background-color:var(--solaris-checkbox-accent);color:var(--solaris-checkbox-ink, var(--solaris-checkbox-on-accent))}:host([data-variant=icon]) .solaris-checkbox__control{padding:var(--_icon-ring);background-clip:content-box}.solaris-checkbox__native:focus-visible+.solaris-checkbox__control{outline-offset:.2rem;outline:.2rem solid var(--solaris-checkbox-accent)}:host([data-disabled=true]) .solaris-checkbox{opacity:.55;cursor:not-allowed}:host([data-disabled=true]) .solaris-checkbox__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: SolarisCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SolarisCheckbox),
+                            multi: true,
+                        },
+                    ], host: {
+                        class: 'solaris-checkbox-host',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-color]': 'colorKey()',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-appearance]': 'appearance()',
+                        '[style.--solaris-checkbox-ink]': 'ink()',
+                        '[attr.data-disabled]': 'disabled() ? "true" : null',
+                        '[style.--solaris-checkbox-custom]': 'customAccent()',
+                    }, template: "<label class=\"solaris-checkbox\">\r\n  <input #native class=\"solaris-checkbox__native\" type=\"checkbox\" [attr.id]=\"id()\"\r\n         [checked]=\"checked()\" [disabled]=\"disabled()\" [attr.aria-label]=\"ariaLabel() ?? null\"\r\n         [attr.aria-checked]=\"indeterminate() ? 'mixed' : (checked() ? 'true' : 'false')\"\r\n         (change)=\"onNativeChange(native.checked)\" (blur)=\"onBlur()\"/>\r\n\r\n  <span class=\"solaris-checkbox__control\" aria-hidden=\"true\">\r\n    @if (variant() === 'icon') {\r\n      <span class=\"solaris-checkbox__dot\" aria-hidden=\"true\"></span>\r\n    } @else {\r\n      <i class=\"ph solaris-checkbox__icon\" [class.ph-check]=\"!indeterminate()\"\r\n         [class.ph-minus]=\"indeterminate()\" aria-hidden=\"true\"></i>\r\n    }\r\n  </span>\r\n\r\n  @if (variant() !== 'icon') {\r\n    <span class=\"solaris-checkbox__content\"><ng-content/></span>\r\n  }\r\n</label>\r\n", styles: [":host{--_hit: 2.4rem;--_size: 2rem;--_icon: 1.6rem;--_icon-ring: .5rem;--_text: var(--solaris-color-text);--_radius: var(--solaris-radius-sm);--_border: var(--solaris-color-border);--_muted: var(--solaris-color-text-muted);--solaris-checkbox-border: var(--_border);--solaris-checkbox-accent: var(--solaris-color-primary);--solaris-checkbox-on-accent: var(--solaris-color-primary-contrast, #fff)}:host([data-size=sm]){--_size: 1.8rem;--_icon: 1.4rem}:host([data-size=md]){--_size: 2rem;--_icon: 1.6rem}:host([data-size=lg]){--_size: 2.4rem;--_icon: 1.8rem}:host([data-variant=round]),:host([data-variant=icon]){--_radius: var(--solaris-radius-full)}:host([data-color=primary]){--solaris-checkbox-accent: var(--solaris-color-primary)}:host([data-color=success]){--solaris-checkbox-accent: var(--solaris-color-success)}:host([data-color=warning]){--solaris-checkbox-accent: var(--solaris-color-warning)}:host([data-color=error]){--solaris-checkbox-accent: var(--solaris-color-error)}:host([data-color=info]){--solaris-checkbox-accent: var(--solaris-color-info)}:host([data-color=custom]){--solaris-checkbox-accent: var(--solaris-checkbox-custom, var(--solaris-color-primary))}.solaris-checkbox{gap:.8rem;cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--_text);display:inline-flex;align-items:flex-start}.solaris-checkbox__native{opacity:0;width:1px;height:1px;position:absolute;pointer-events:none}.solaris-checkbox__control{line-height:0;flex:0 0 auto;color:transparent;align-items:center;display:inline-flex;box-sizing:border-box;justify-content:center;border-radius:var(--_radius);background-color:transparent;width:max(var(--_size),var(--_size));height:max(var(--_size),var(--_size));border:.1rem solid var(--solaris-checkbox-border)}.solaris-checkbox__content{gap:.2rem;line-height:1.3;display:inline-flex;flex-direction:column}.solaris-checkbox__icon{opacity:0;line-height:1;display:block;font-weight:bolder;pointer-events:none;font-size:var(--_icon)}.solaris-checkbox__native:checked+.solaris-checkbox__control .solaris-checkbox__icon,.solaris-checkbox__native:indeterminate+.solaris-checkbox__control .solaris-checkbox__icon{opacity:1}.solaris-checkbox__native:checked+.solaris-checkbox__control,.solaris-checkbox__native:indeterminate+.solaris-checkbox__control{border-color:var(--solaris-checkbox-accent)}:host([data-color=primary]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-color=primary]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{border-color:var(--solaris-color-primary-tint)}:host([data-appearance=outline]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-appearance=outline]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{background-color:transparent;color:var(--solaris-checkbox-ink, var(--solaris-checkbox-accent))}:host([data-appearance=solid]) .solaris-checkbox__native:checked+.solaris-checkbox__control,:host([data-appearance=solid]) .solaris-checkbox__native:indeterminate+.solaris-checkbox__control{background-color:var(--solaris-checkbox-accent);color:var(--solaris-checkbox-ink, var(--solaris-checkbox-on-accent))}:host([data-variant=icon]) .solaris-checkbox__control{padding:var(--_icon-ring);background-clip:content-box}.solaris-checkbox__native:focus-visible+.solaris-checkbox__control{outline-offset:.2rem;outline:.2rem solid var(--solaris-checkbox-accent)}:host([data-disabled=true]) .solaris-checkbox{opacity:.55;cursor:not-allowed}:host([data-disabled=true]) .solaris-checkbox__control{border-color:color-mix(in srgb,var(--_border) 70%,transparent)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], checkColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkColor", required: false }] }], checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], indeterminateChange: [{ type: i0.Output, args: ["indeterminateChange"] }], native: [{
+                type: ViewChild,
+                args: ['native', { static: true }]
+            }] } });
+function resolveColor(v, fallback) {
+    const s = v == null ? '' : String(v).trim();
+    if (!s || s === 'custom')
+        return fallback;
+    if (PRESET_COLORS.has(s))
+        return `var(--solaris-color-${s})`;
+    return s;
+}
+
+class SolarisTable {
+    destroyRef = inject(DestroyRef);
+    length = 0;
+    pageIndex = 0;
+    pageSize = 10;
+    rowsCount = 0;
+    loading = false;
+    sort = [];
+    selectable = false;
+    tableDescription = '';
+    selection = [];
+    variant = 'grid';
+    emptyIconClass = 'ph ph-database';
+    pageSizeOptions = [10, 20, 50];
+    emptyTextKey = 'ui.solaris.table.empty';
+    sortChange = new EventEmitter();
+    pageChange = new EventEmitter();
+    selectionChange = new EventEmitter();
+    columnQuery;
+    tableRoot;
+    needsScroll = signal(false, ...(ngDevMode ? [{ debugName: "needsScroll" }] : []));
+    measuredReady = signal(false, ...(ngDevMode ? [{ debugName: "measuredReady" }] : []));
+    sortState = signal([], ...(ngDevMode ? [{ debugName: "sortState" }] : []));
+    measuredPx = signal([], ...(ngDevMode ? [{ debugName: "measuredPx" }] : []));
+    columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    selectionSig = signal([], ...(ngDevMode ? [{ debugName: "selectionSig" }] : []));
+    rowKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "rowKeys" }] : []));
+    manualPx = signal({}, ...(ngDevMode ? [{ debugName: "manualPx" }] : []));
+    selectionSetSig = computed(() => new Set(this.selectionSig()), ...(ngDevMode ? [{ debugName: "selectionSetSig" }] : []));
+    selectAllChecked = computed(() => {
+        const keys = Array.from(this.rowKeys());
+        if (!keys.length)
+            return false;
+        const sel = this.selectionSetSig();
+        return keys.every(k => sel.has(k));
+    }, ...(ngDevMode ? [{ debugName: "selectAllChecked" }] : []));
+    selectAllIndeterminate = computed(() => {
+        const keys = Array.from(this.rowKeys());
+        if (!keys.length)
+            return false;
+        const sel = this.selectionSetSig();
+        const any = keys.some(k => sel.has(k));
+        return any && !this.selectAllChecked();
+    }, ...(ngDevMode ? [{ debugName: "selectAllIndeterminate" }] : []));
+    selectedCount = computed(() => this.selectionSig().length, ...(ngDevMode ? [{ debugName: "selectedCount" }] : []));
+    gridTemplateColumns = computed(() => this.buildGridTemplateColumns(), ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : []));
+    rafId = null;
+    resizeObserver;
+    get rangeStart() {
+        if (!this.length)
+            return 0;
+        return this.pageIndex * this.pageSize + 1;
+    }
+    get rangeEnd() {
+        if (!this.length)
+            return 0;
+        return Math.min(this.length, (this.pageIndex + 1) * this.pageSize);
+    }
+    get totalPages() {
+        return Math.max(1, Math.ceil((this.length || 0) / (this.pageSize || 1)));
+    }
+    ngAfterContentInit() {
+        this.syncColumns();
+        this.selectionSig.set(this.selection ?? []);
+        this.sortState.set(this.sort ?? []);
+        this.columnQuery.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.syncColumns();
+            this.scheduleMeasure();
+        });
+        this.resizeObserver = new ResizeObserver(() => this.scheduleMeasure());
+        this.resizeObserver.observe(this.tableRoot.nativeElement);
+        this.destroyRef.onDestroy(() => this.resizeObserver?.disconnect());
+        const fonts = document.fonts;
+        if (fonts?.ready?.then)
+            fonts.ready.then(() => this.scheduleMeasure());
+        this.scheduleMeasure();
+    }
+    ngOnChanges(changes) {
+        if (changes['sort'])
+            this.sortState.set(this.sort ?? []);
+        if (changes['selection'])
+            this.selectionSig.set(this.selection ?? []);
+        if (changes['variant'] || changes['rowsCount'] || changes['pageIndex'] || changes['pageSize'] || changes['loading']) {
+            this.scheduleMeasure();
+        }
+    }
+    syncColumns() {
+        this.columns.set(this.columnQuery?.toArray() ?? []);
+    }
+    scheduleMeasure() {
+        if (this.loading)
+            return;
+        if (this.rafId != null)
+            cancelAnimationFrame(this.rafId);
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = null;
+            this.measureColumns();
+        });
+    }
+    measureColumns() {
+        const root = this.tableRoot?.nativeElement;
+        if (!root)
+            return;
+        const cols = this.columns();
+        if (!cols.length)
+            return;
+        const isGrid = this.variant === 'grid';
+        const borderPx = isGrid ? 2 : 0;
+        const safetyPx = isGrid ? 2 : 0;
+        const perColOverhead = borderPx + safetyPx;
+        const widths = [];
+        for (let i = 0; i < cols.length; i++) {
+            const col = cols[i];
+            if (col.width) {
+                widths[i] = -1;
+                continue;
+            }
+            const manual = this.manualPx()[i];
+            if (manual != null) {
+                widths[i] = manual;
+                continue;
+            }
+            const headerCell = root.querySelector(`.solaris-table__row--header [data-col-idx="${i}"]`);
+            const bodyCells = Array.from(root.querySelectorAll(`.solaris-table__body [data-col-idx="${i}"]`));
+            const headerW = headerCell ? this.measureHeaderCellWidth(headerCell) : 0;
+            const bodyW = this.measureBodyCellsWidth(bodyCells);
+            const cap = this.toPx(col.maxWidth ?? '18rem', root);
+            const ideal = Math.max(headerW, bodyW);
+            const withOverhead = ideal + perColOverhead;
+            const min = col.minWidth ? this.toPx(col.minWidth, root) : 40;
+            widths[i] = Math.max(min, Math.min(withOverhead, cap));
+        }
+        this.measuredPx.set(widths);
+        this.measuredReady.set(true);
+        this.updateScrollFlag();
+    }
+    measureHeaderCellWidth(cell) {
+        const root = this.tableRoot?.nativeElement;
+        if (!root)
+            return 0;
+        const clone = cell.cloneNode(true);
+        clone.style.position = 'absolute';
+        clone.style.left = '-99999px';
+        clone.style.top = '0';
+        clone.style.visibility = 'hidden';
+        clone.style.pointerEvents = 'none';
+        clone.style.width = 'max-content';
+        clone.style.maxWidth = 'none';
+        const resizer = clone.querySelector('.solaris-table__col-resizer');
+        if (resizer)
+            resizer.style.display = 'none';
+        const headerContent = clone.querySelector('.solaris-table__header-content');
+        if (headerContent) {
+            headerContent.style.width = 'max-content';
+            headerContent.style.justifyContent = 'flex-start';
+        }
+        const left = clone.querySelector('.solaris-table__header-left');
+        if (left) {
+            left.style.overflow = 'visible';
+            left.style.maxWidth = 'none';
+            left.style.minWidth = '0';
+        }
+        const text = clone.querySelector('.solaris-table__header-text');
+        if (text) {
+            text.style.maxWidth = 'none';
+            text.style.overflow = 'visible';
+            text.style.textOverflow = 'clip';
+            text.style.whiteSpace = 'nowrap';
+            text.style.display = 'inline-block';
+        }
+        const sortBtn = clone.querySelector('.solaris-table__sort-btn');
+        if (sortBtn)
+            sortBtn.style.width = 'max-content';
+        root.appendChild(clone);
+        const w = clone.getBoundingClientRect().width;
+        clone.remove();
+        return Math.ceil(w);
+    }
+    measureBodyCellsWidth(cells) {
+        let max = 0;
+        for (const cell of cells)
+            max = Math.max(max, this.measureBodyCellWidth(cell));
+        return max;
+    }
+    measureBodyCellWidth(cell) {
+        const style = getComputedStyle(cell);
+        const pad = Number.parseFloat(style.paddingLeft || '0') + Number.parseFloat(style.paddingRight || '0');
+        const prefix = cell.querySelector('.solaris-row__select-prefix');
+        const content = cell.querySelector('.solaris-row__content');
+        const prefixW = prefix?.scrollWidth ?? 0;
+        const contentW = content?.scrollWidth ?? cell.scrollWidth;
+        const gap = prefix ? 12 : 0;
+        return pad + prefixW + gap + contentW;
+    }
+    toPx(value, base) {
+        const v = value.trim();
+        if (v.endsWith('px'))
+            return Number.parseFloat(v);
+        if (v.endsWith('rem'))
+            return Number.parseFloat(v) * Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+        if (v.endsWith('em'))
+            return Number.parseFloat(v) * Number.parseFloat(getComputedStyle(base).fontSize);
+        const n = Number.parseFloat(v);
+        return Number.isFinite(n) ? n : 280;
+    }
+    updateScrollFlag() {
+        const root = this.tableRoot?.nativeElement;
+        if (!root)
+            return;
+        requestAnimationFrame(() => {
+            const needs = root.scrollWidth > root.clientWidth + 1;
+            this.needsScroll.set(needs);
+        });
+    }
+    clamp(n, min, max) {
+        return Math.max(min, Math.min(max, n));
+    }
+    clearManualWidth(i) {
+        const next = { ...this.manualPx() };
+        delete next[i];
+        this.manualPx.set(next);
+        this.scheduleMeasure();
+    }
+    onResizeStart(ev, i) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const root = this.tableRoot?.nativeElement;
+        if (!root)
+            return;
+        const headerCell = this.getHeaderCell(i);
+        if (!headerCell)
+            return;
+        const cols = this.columns();
+        const col = cols[i];
+        if (!col || col.width || !col.resizable)
+            return;
+        const startX = ev.clientX;
+        const startW = this.manualPx()[i] ?? Math.round(headerCell.getBoundingClientRect().width);
+        const min = col.minWidth ? this.toPx(col.minWidth, root) : 40;
+        const hardMax = col.maxWidth ? this.toPx(col.maxWidth, root) : 9999;
+        const maxSafe = this.computeResizeMax(i, min, hardMax, root);
+        root.classList.add('is-resizing');
+        ev.target.setPointerCapture?.(ev.pointerId);
+        const onMove = (e) => {
+            const dx = e.clientX - startX;
+            const nextW = this.clamp(Math.round(startW + dx), min, maxSafe);
+            const cur = this.manualPx();
+            if (cur[i] === nextW)
+                return;
+            this.manualPx.set({ ...cur, [i]: nextW });
+        };
+        const cleanup = () => {
+            root.classList.remove('is-resizing');
+            globalThis.removeEventListener('pointermove', onMove);
+            globalThis.removeEventListener('pointerup', cleanup);
+            globalThis.removeEventListener('pointercancel', cleanup);
+        };
+        globalThis.addEventListener('pointermove', onMove);
+        globalThis.addEventListener('pointerup', cleanup);
+        globalThis.addEventListener('pointercancel', cleanup);
+    }
+    getHeaderCell(i) {
+        const root = this.tableRoot?.nativeElement;
+        if (!root)
+            return null;
+        return root.querySelector(`.solaris-table__row--header [data-col-idx="${i}"]`);
+    }
+    pxMinWidth(c, root) {
+        return c.minWidth ? this.toPx(c.minWidth, root) : 0;
+    }
+    pxFixedWidth(c, root) {
+        if (!c.width)
+            return null;
+        const w = c.width.trim();
+        if (w.endsWith('px') || w.endsWith('rem') || w.endsWith('em'))
+            return this.toPx(w, root);
+        const n = Number.parseFloat(w);
+        return Number.isFinite(n) ? n : null;
+    }
+    reservedWidthExcept(i, root) {
+        const cols = this.columns();
+        const manualMap = this.manualPx();
+        let reserved = 0;
+        for (let j = 0; j < cols.length; j++) {
+            if (j === i)
+                continue;
+            const c = cols[j];
+            if (c.width) {
+                const px = this.pxFixedWidth(c, root);
+                if (px != null) {
+                    reserved += px;
+                    continue;
+                }
+                const cell = this.getHeaderCell(j);
+                reserved += Math.round(cell?.getBoundingClientRect().width ?? 48);
+                continue;
+            }
+            const manual = manualMap[j];
+            if (manual != null) {
+                reserved += manual;
+                continue;
+            }
+            if (c.grow) {
+                reserved += this.pxMinWidth(c, root);
+                continue;
+            }
+            reserved += 48;
+        }
+        return reserved;
+    }
+    readField(row, path) {
+        if (!path)
+            return '';
+        const parts = path.split('.');
+        let cur = row;
+        for (const p of parts) {
+            if (cur == null)
+                return '';
+            cur = cur[p];
+        }
+        return cur ?? '';
+    }
+    computeResizeMax(i, min, hardMax, root) {
+        const available = root.clientWidth;
+        const reserved = this.reservedWidthExcept(i, root);
+        const safety = 8;
+        const fitMax = Math.max(min, Math.floor(available - reserved - safety));
+        return Math.max(min, Math.min(hardMax, fitMax));
+    }
+    registerRowKey(key) {
+        const next = new Set(this.rowKeys());
+        next.add(key);
+        this.rowKeys.set(next);
+    }
+    unregisterRowKey(key) {
+        const next = new Set(this.rowKeys());
+        next.delete(key);
+        this.rowKeys.set(next);
+    }
+    onToggleSelectAll(checked) {
+        const keys = Array.from(this.rowKeys());
+        const sel = new Set(this.selectionSig());
+        if (checked)
+            keys.forEach(k => sel.add(k));
+        else
+            keys.forEach(k => sel.delete(k));
+        const out = Array.from(sel);
+        this.selectionSig.set(out);
+        this.selectionChange.emit(out);
+    }
+    toggleRow(key, checked) {
+        const sel = new Set(this.selectionSig());
+        if (checked)
+            sel.add(key);
+        else
+            sel.delete(key);
+        const out = Array.from(sel);
+        this.selectionSig.set(out);
+        this.selectionChange.emit(out);
+    }
+    isSelected(key) {
+        return this.selectionSetSig().has(key);
+    }
+    getSortFor(col) {
+        const key = col.sortKey ?? col.field;
+        if (!key)
+            return undefined;
+        return this.sortState().find(s => s.key === key);
+    }
+    onHeaderSortClick(ev, col) {
+        ev.stopPropagation();
+        if (!col.sortable)
+            return;
+        const key = col.sortKey ?? col.field;
+        if (!key)
+            return;
+        const multi = ev.shiftKey;
+        let next = [...this.sortState()];
+        if (!multi)
+            next = next.filter(s => s.key === key);
+        const idx = next.findIndex(s => s.key === key);
+        if (idx === -1)
+            next.push({ key, direction: 'asc', order: next.length + 1 });
+        else {
+            const cur = next[idx];
+            if (cur.direction === 'asc')
+                next[idx] = { ...cur, direction: 'desc' };
+            else
+                next.splice(idx, 1);
+        }
+        next = next.map((s, k) => ({ ...s, order: k + 1 }));
+        this.sortState.set(next);
+        this.sortChange.emit(next);
+    }
+    ariaSort(col) {
+        const s = this.getSortFor(col);
+        if (!s)
+            return 'none';
+        return s.direction === 'asc' ? 'ascending' : 'descending';
+    }
+    firstPage() { this.pageChange.emit({ pageIndex: 0, pageSize: this.pageSize }); }
+    prevPage() { this.pageChange.emit({ pageIndex: Math.max(0, this.pageIndex - 1), pageSize: this.pageSize }); }
+    nextPage() { this.pageChange.emit({ pageIndex: Math.min(this.totalPages - 1, this.pageIndex + 1), pageSize: this.pageSize }); }
+    lastPage() { this.pageChange.emit({ pageIndex: this.totalPages - 1, pageSize: this.pageSize }); }
+    changePageSize(size) { this.pageChange.emit({ pageIndex: 0, pageSize: size }); }
+    buildGridTemplateColumns() {
+        const cols = this.columns();
+        const measured = this.measuredPx();
+        const root = this.tableRoot?.nativeElement;
+        const minPx = (c) => root && c.minWidth ? this.toPx(c.minWidth, root) : 0;
+        const fixedWidthPx = (c) => {
+            if (!root || !c.width)
+                return null;
+            const w = c.width.trim();
+            if (w.endsWith('px') || w.endsWith('rem') || w.endsWith('em'))
+                return this.toPx(w, root);
+            const n = Number.parseFloat(w);
+            return Number.isFinite(n) ? n : null;
+        };
+        if (!measured.length || measured.length !== cols.length) {
+            return cols.map((c) => {
+                if (c.width)
+                    return c.width;
+                if (c.grow)
+                    return `minmax(${minPx(c)}px, 1fr)`;
+                if (root && c.maxWidth) {
+                    const cap = this.toPx(c.maxWidth, root);
+                    return `minmax(0px, ${cap}px)`;
+                }
+                return 'minmax(0px, 1fr)';
+            }).join(' ');
+        }
+        const available = root?.clientWidth ?? 0;
+        const rawPx = [];
+        const growMinSum = cols.reduce((acc, c) => acc + (c.grow ? minPx(c) : 0), 0);
+        let fixedSum = 0;
+        for (let i = 0; i < cols.length; i++) {
+            const c = cols[i];
+            if (c.width) {
+                const px = fixedWidthPx(c);
+                rawPx[i] = px ?? 0;
+                fixedSum += px ?? 0;
+                continue;
+            }
+            if (c.grow) {
+                rawPx[i] = 0;
+                continue;
+            }
+            const manual = this.manualPx()[i];
+            const px = manual ?? (measured[i] > 0 ? measured[i] : 180);
+            rawPx[i] = px;
+            fixedSum += px;
+        }
+        if (!available) {
+            return cols.map((c, i) => {
+                if (c.width)
+                    return c.width;
+                if (c.grow)
+                    return `minmax(${minPx(c)}px, 1fr)`;
+                return `${rawPx[i]}px`;
+            }).join(' ');
+        }
+        const fixedBudget = Math.max(0, available - growMinSum);
+        const scale = fixedSum > fixedBudget && fixedSum > 0 ? (fixedBudget / fixedSum) : 1;
+        return cols.map((c, i) => {
+            if (c.width) {
+                return c.width;
+            }
+            if (c.grow) {
+                const min = minPx(c);
+                return `minmax(${min}px, 1fr)`;
+            }
+            const px = Math.max(48, Math.floor(rawPx[i] * scale));
+            return `${px}px`;
+        }).join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisTable, isStandalone: true, selector: "solaris-table", inputs: { length: "length", pageIndex: "pageIndex", pageSize: "pageSize", rowsCount: "rowsCount", loading: "loading", sort: "sort", selectable: "selectable", tableDescription: "tableDescription", selection: "selection", variant: "variant", emptyIconClass: "emptyIconClass", pageSizeOptions: "pageSizeOptions", emptyTextKey: "emptyTextKey" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", selectionChange: "selectionChange" }, host: { properties: { "attr.data-scroll": "needsScroll() ? \"true\" : null" }, classAttribute: "solaris-table-host" }, queries: [{ propertyName: "columnQuery", predicate: SolarisTableColumn }], viewQueries: [{ propertyName: "tableRoot", first: true, predicate: ["tableRoot"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"solaris-table-filters\"></ng-content>\r\n\r\n<div class=\"solaris-table\" [class.solaris-table--grid]=\"variant === 'grid'\"\r\n     [class.solaris-table--zebra]=\"variant === 'zebra'\">\r\n  <div #tableRoot class=\"solaris-table__inner\" role=\"table\" [attr.aria-rowcount]=\"rowsCount\">\r\n    <div class=\"solaris-table__header\" role=\"rowgroup\">\r\n      <div class=\"solaris-table__row solaris-table__row--header\" role=\"row\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n        @for (col of columns(); track col.id; let i = $index) {\r\n          <div class=\"solaris-table__cell solaris-table__cell--header\" role=\"columnheader\" [attr.data-col-idx]=\"i\"\r\n               [attr.aria-sort]=\"ariaSort(col)\" [style.--solaris-col-max]=\"col.maxWidth || null\">\r\n\r\n            <div class=\"solaris-table__header-content\">\r\n              <span class=\"solaris-table__header-left\">\r\n                @if (selectable && i === 0) {\r\n                  <span class=\"solaris-table__select-prefix\" (click)=\"$event.stopPropagation()\">\r\n                    <solaris-checkbox variant=\"square\" color=\"primary\" size=\"sm\" [ngModel]=\"selectAllChecked()\"\r\n                      (ngModelChange)=\"onToggleSelectAll($event)\" [indeterminate]=\"selectAllIndeterminate()\">\r\n                    </solaris-checkbox>\r\n                  </span>\r\n                }\r\n\r\n                @if (col.headerIconClass) { <i [class]=\"col.headerIconClass\"></i> }\r\n\r\n                @if (col.headerDef?.template) {\r\n                  <ng-container [ngTemplateOutlet]=\"col.headerDef?.template\"></ng-container>\r\n                } @else {\r\n                  @if (col.headerKey) {\r\n                    <span class=\"solaris-table__header-text\">{{ col.headerKey | translate }}</span>\r\n                  } @else {\r\n                    <span class=\"solaris-table__header-text\">{{ col.header }}</span>\r\n                  }\r\n                }\r\n              </span>\r\n\r\n              @if (col.sortable) {\r\n                <button type=\"button\" class=\"solaris-table__sort-btn\" (click)=\"onHeaderSortClick($event, col)\">\r\n                  <span class=\"solaris-table__sort\">\r\n                    <i class=\"ph ph-arrow-up\" [class.is-active]=\"getSortFor(col)?.direction === 'asc'\"></i>\r\n                    <i class=\"ph ph-arrow-down\" [class.is-active]=\"getSortFor(col)?.direction === 'desc'\"></i>\r\n\r\n                    @if (getSortFor(col)?.order && sortState().length > 1) {\r\n                      <span class=\"solaris-table__sort-order\">{{ getSortFor(col)!.order }}</span>\r\n                    }\r\n                  </span>\r\n                </button>\r\n              }\r\n            </div>\r\n\r\n            @if (col.resizable && !col.width) {\r\n              <span class=\"solaris-table__col-resizer\" role=\"separator\" aria-orientation=\"vertical\"\r\n                    (pointerdown)=\"onResizeStart($event, i)\" (dblclick)=\"clearManualWidth(i)\"\r\n                    (click)=\"$event.stopPropagation()\">\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"solaris-table__body\" role=\"rowgroup\">\r\n      @if (loading) {\r\n        <solaris-table-skeleton [rows]=\"pageSize\" [columns]=\"columns().length\" [selectable]=\"selectable\"\r\n          [gridTemplateColumns]=\"gridTemplateColumns()\">\r\n        </solaris-table-skeleton>\r\n      } @else {\r\n        @if (rowsCount === 0) {\r\n          <div class=\"solaris-table__empty\" role=\"row\">\r\n            <i [class]=\"emptyIconClass\"></i>\r\n            <div class=\"solaris-table__empty-text\">{{ 'ui.solaris.tables.empty' | translate }}</div>\r\n          </div>\r\n        } @else {\r\n          <ng-content select=\"solaris-row\"></ng-content>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <div class=\"solaris-table__footer\" role=\"rowgroup\">\r\n      <div class=\"solaris-table__footer-left\">\r\n        @if (selectedCount() > 0) {\r\n          <div class=\"solaris-table__selected\">\r\n            {{ selectedCount() }} {{ 'ui.solaris.tables.selection.selected' | translate }}\r\n          </div>\r\n        } @else if (tableDescription != null) {\r\n          <div class=\"solaris-table__description\">\r\n            {{ tableDescription }}\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"solaris-table__footer-right\">\r\n        <div class=\"solaris-table__rows-per-page\">\r\n          <span>{{ 'ui.solaris.tables.pagination.rowsPerPage' | translate }}:</span>\r\n          <select [ngModel]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\">\r\n            @for (opt of pageSizeOptions; track opt) {\r\n              <option [ngValue]=\"opt\">{{ opt }}</option>\r\n            }\r\n          </select>\r\n        </div>\r\n\r\n        <div class=\"solaris-table__range\">\r\n          {{ rangeStart }}\u2013{{ rangeEnd }} {{ 'ui.solaris.common.of' | translate }} {{ length }}\r\n        </div>\r\n\r\n        <div class=\"solaris-table__pager\">\r\n          <button type=\"button\" (click)=\"firstPage()\" [disabled]=\"pageIndex === 0\">\r\n            <i class=\"ph ph-caret-line-left\"></i>\r\n          </button>\r\n          <button type=\"button\" (click)=\"prevPage()\" [disabled]=\"pageIndex === 0\">\r\n            <i class=\"ph ph-caret-left\"></i>\r\n          </button>\r\n          <button type=\"button\" (click)=\"nextPage()\" [disabled]=\"pageIndex >= totalPages - 1\">\r\n            <i class=\"ph ph-caret-right\"></i>\r\n          </button>\r\n          <button type=\"button\" (click)=\"lastPage()\" [disabled]=\"pageIndex >= totalPages - 1\">\r\n            <i class=\"ph ph-caret-line-right\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".solaris-table-host{display:block;color:var(--solaris-color-text);font-family:var(--solaris-font-sans-primary),system-ui}.solaris-table{--solaris-table-row-hover-bg: var(--solaris-color-surface-2);--solaris-table-row-selected-bg: var(--solaris-color-surface-2);overflow:hidden;box-shadow:var(--solaris-shadow-sm);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-table--grid{--solaris-table-cell-divider: 1px solid var(--solaris-color-border)}.solaris-table--zebra{--solaris-table-cell-divider: 0px solid transparent}.solaris-table__inner{overflow-x:hidden}:host([data-scroll=true]) .solaris-table__inner{overflow-x:auto}.solaris-table__inner.is-resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.solaris-table__row{width:100%;display:grid;min-height:3.25rem;align-items:stretch}.solaris-table__row--header{background:var(--solaris-color-surface-2);border-bottom:1px solid var(--solaris-color-border)}.solaris-table__cell{min-width:0;height:100%;display:flex;align-items:center;padding:var(--solaris-space-4);border-right:var(--solaris-table-cell-divider)}.solaris-table__cell,.solaris-row__cell{box-sizing:border-box}.solaris-table__cell:last-child{border-right:none}.solaris-table__cell--header{position:relative;padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-table__header-content{width:100%;min-width:0;align-items:center;display:inline-flex;gap:var(--solaris-space-2);justify-content:space-between}.solaris-table__header-left{min-width:0;overflow:hidden;align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-table__header-left i.ph{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table__select-prefix{flex:0 0 auto;align-items:center;display:inline-flex}.solaris-table__header-text{overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:ellipsis;font-size:var(--solaris-fs-14);letter-spacing:var(--solaris-ls-sm);color:var(--solaris-color-text-muted);max-width:var(--solaris-col-max, 100%)}.solaris-table__sort-btn{border:none;flex:0 0 auto;cursor:pointer;background:transparent;padding:var(--solaris-space-1);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm)}.solaris-table__sort-btn:hover{background:var(--solaris-color-surface-2)}.solaris-table__sort{display:inline-flex;align-items:center;gap:var(--solaris-space-1)}.solaris-table__sort i{opacity:.45;transition:opacity .14s ease,color .14s ease,transform .14s ease}.solaris-table__sort i.is-active{opacity:1;color:var(--solaris-color-primary)}.solaris-table__sort-order{font-size:var(--solaris-fs-10);margin-left:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-table__col-resizer{top:0;right:0;z-index:10;width:12px;height:100%;cursor:col-resize;touch-action:none;position:absolute;pointer-events:auto}.solaris-table__col-resizer:after{top:20%;left:50%;width:1px;content:\"\";height:60%;position:absolute;background:transparent;transform:translate(-50%);transition:background .12s ease}.solaris-table__cell--header:hover .solaris-table__col-resizer:after{background:color-mix(in srgb,var(--solaris-color-border) 65%,transparent)}.solaris-table__body{background:var(--solaris-color-surface)}.solaris-table__empty{display:grid;place-items:center;gap:var(--solaris-space-3);padding:var(--solaris-space-8);color:var(--solaris-color-text-muted);border-bottom:1px solid var(--solaris-color-border)}.solaris-table__empty i{font-size:2rem}.solaris-table__empty-text{font-size:var(--solaris-fs-14)}.solaris-table__footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-space-4);justify-content:space-between;background:var(--solaris-color-surface);padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-table__footer-left,.solaris-table__footer-right{display:inline-flex;align-items:center;gap:var(--solaris-space-4)}.solaris-table__description,.solaris-table__selected{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table__rows-per-page{display:inline-flex;align-items:center;gap:var(--solaris-space-2);margin-right:var(--solaris-space-8)}.solaris-table__rows-per-page span,.solaris-table__rows-per-page select{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table__rows-per-page select{border:none;background:transparent}.solaris-table__range{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table__pager{display:inline-flex;gap:var(--solaris-space-2)}.solaris-table__pager button{border:none;cursor:pointer;background:transparent;padding:var(--solaris-space-2);font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm);transition:background .14s ease,opacity .14s ease}.solaris-table__pager button:hover:not(:disabled){background:var(--solaris-color-surface-2)}.solaris-table__pager button:disabled{opacity:.4;cursor:not-allowed}@media(max-width:768px){.solaris-table__row--header{display:none}.solaris-table__footer-left,.solaris-table__footer-right{width:100%;justify-content:space-between}.solaris-table__col-resizer{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SolarisCheckbox, selector: "solaris-checkbox", inputs: ["indeterminate", "ariaLabel", "size", "variant", "color", "id", "appearance", "checkColor"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SolarisTableSkeleton, selector: "solaris-table-skeleton", inputs: ["rows", "columns", "selectable", "gridTemplateColumns"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-table', standalone: true, imports: [
+                        FormsModule,
+                        SolarisCheckbox,
+                        NgTemplateOutlet,
+                        SolarisTableSkeleton,
+                        SolarisTranslationPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'solaris-table-host',
+                        '[attr.data-scroll]': 'needsScroll() ? "true" : null',
+                    }, template: "<ng-content select=\"solaris-table-filters\"></ng-content>\r\n\r\n<div class=\"solaris-table\" [class.solaris-table--grid]=\"variant === 'grid'\"\r\n     [class.solaris-table--zebra]=\"variant === 'zebra'\">\r\n  <div #tableRoot class=\"solaris-table__inner\" role=\"table\" [attr.aria-rowcount]=\"rowsCount\">\r\n    <div class=\"solaris-table__header\" role=\"rowgroup\">\r\n      <div class=\"solaris-table__row solaris-table__row--header\" role=\"row\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\r\n        @for (col of columns(); track col.id; let i = $index) {\r\n          <div class=\"solaris-table__cell solaris-table__cell--header\" role=\"columnheader\" [attr.data-col-idx]=\"i\"\r\n               [attr.aria-sort]=\"ariaSort(col)\" [style.--solaris-col-max]=\"col.maxWidth || null\">\r\n\r\n            <div class=\"solaris-table__header-content\">\r\n              <span class=\"solaris-table__header-left\">\r\n                @if (selectable && i === 0) {\r\n                  <span class=\"solaris-table__select-prefix\" (click)=\"$event.stopPropagation()\">\r\n                    <solaris-checkbox variant=\"square\" color=\"primary\" size=\"sm\" [ngModel]=\"selectAllChecked()\"\r\n                      (ngModelChange)=\"onToggleSelectAll($event)\" [indeterminate]=\"selectAllIndeterminate()\">\r\n                    </solaris-checkbox>\r\n                  </span>\r\n                }\r\n\r\n                @if (col.headerIconClass) { <i [class]=\"col.headerIconClass\"></i> }\r\n\r\n                @if (col.headerDef?.template) {\r\n                  <ng-container [ngTemplateOutlet]=\"col.headerDef?.template\"></ng-container>\r\n                } @else {\r\n                  @if (col.headerKey) {\r\n                    <span class=\"solaris-table__header-text\">{{ col.headerKey | translate }}</span>\r\n                  } @else {\r\n                    <span class=\"solaris-table__header-text\">{{ col.header }}</span>\r\n                  }\r\n                }\r\n              </span>\r\n\r\n              @if (col.sortable) {\r\n                <button type=\"button\" class=\"solaris-table__sort-btn\" (click)=\"onHeaderSortClick($event, col)\">\r\n                  <span class=\"solaris-table__sort\">\r\n                    <i class=\"ph ph-arrow-up\" [class.is-active]=\"getSortFor(col)?.direction === 'asc'\"></i>\r\n                    <i class=\"ph ph-arrow-down\" [class.is-active]=\"getSortFor(col)?.direction === 'desc'\"></i>\r\n\r\n                    @if (getSortFor(col)?.order && sortState().length > 1) {\r\n                      <span class=\"solaris-table__sort-order\">{{ getSortFor(col)!.order }}</span>\r\n                    }\r\n                  </span>\r\n                </button>\r\n              }\r\n            </div>\r\n\r\n            @if (col.resizable && !col.width) {\r\n              <span class=\"solaris-table__col-resizer\" role=\"separator\" aria-orientation=\"vertical\"\r\n                    (pointerdown)=\"onResizeStart($event, i)\" (dblclick)=\"clearManualWidth(i)\"\r\n                    (click)=\"$event.stopPropagation()\">\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"solaris-table__body\" role=\"rowgroup\">\r\n      @if (loading) {\r\n        <solaris-table-skeleton [rows]=\"pageSize\" [columns]=\"columns().length\" [selectable]=\"selectable\"\r\n          [gridTemplateColumns]=\"gridTemplateColumns()\">\r\n        </solaris-table-skeleton>\r\n      } @else {\r\n        @if (rowsCount === 0) {\r\n          <div class=\"solaris-table__empty\" role=\"row\">\r\n            <i [class]=\"emptyIconClass\"></i>\r\n            <div class=\"solaris-table__empty-text\">{{ 'ui.solaris.tables.empty' | translate }}</div>\r\n          </div>\r\n        } @else {\r\n          <ng-content select=\"solaris-row\"></ng-content>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <div class=\"solaris-table__footer\" role=\"rowgroup\">\r\n      <div class=\"solaris-table__footer-left\">\r\n        @if (selectedCount() > 0) {\r\n          <div class=\"solaris-table__selected\">\r\n            {{ selectedCount() }} {{ 'ui.solaris.tables.selection.selected' | translate }}\r\n          </div>\r\n        } @else if (tableDescription != null) {\r\n          <div class=\"solaris-table__description\">\r\n            {{ tableDescription }}\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"solaris-table__footer-right\">\r\n        <div class=\"solaris-table__rows-per-page\">\r\n          <span>{{ 'ui.solaris.tables.pagination.rowsPerPage' | translate }}:</span>\r\n          <select [ngModel]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\">\r\n            @for (opt of pageSizeOptions; track opt) {\r\n              <option [ngValue]=\"opt\">{{ opt }}</option>\r\n            }\r\n          </select>\r\n        </div>\r\n\r\n        <div class=\"solaris-table__range\">\r\n          {{ rangeStart }}\u2013{{ rangeEnd }} {{ 'ui.solaris.common.of' | translate }} {{ length }}\r\n        </div>\r\n\r\n        <div class=\"solaris-table__pager\">\r\n          <button type=\"button\" (click)=\"firstPage()\" [disabled]=\"pageIndex === 0\">\r\n            <i class=\"ph ph-caret-line-left\"></i>\r\n          </button>\r\n          <button type=\"button\" (click)=\"prevPage()\" [disabled]=\"pageIndex === 0\">\r\n            <i class=\"ph ph-caret-left\"></i>\r\n          </button>\r\n          <button type=\"button\" (click)=\"nextPage()\" [disabled]=\"pageIndex >= totalPages - 1\">\r\n            <i class=\"ph ph-caret-right\"></i>\r\n          </button>\r\n          <button type=\"button\" (click)=\"lastPage()\" [disabled]=\"pageIndex >= totalPages - 1\">\r\n            <i class=\"ph ph-caret-line-right\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".solaris-table-host{display:block;color:var(--solaris-color-text);font-family:var(--solaris-font-sans-primary),system-ui}.solaris-table{--solaris-table-row-hover-bg: var(--solaris-color-surface-2);--solaris-table-row-selected-bg: var(--solaris-color-surface-2);overflow:hidden;box-shadow:var(--solaris-shadow-sm);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-table--grid{--solaris-table-cell-divider: 1px solid var(--solaris-color-border)}.solaris-table--zebra{--solaris-table-cell-divider: 0px solid transparent}.solaris-table__inner{overflow-x:hidden}:host([data-scroll=true]) .solaris-table__inner{overflow-x:auto}.solaris-table__inner.is-resizing{-webkit-user-select:none;user-select:none;cursor:col-resize}.solaris-table__row{width:100%;display:grid;min-height:3.25rem;align-items:stretch}.solaris-table__row--header{background:var(--solaris-color-surface-2);border-bottom:1px solid var(--solaris-color-border)}.solaris-table__cell{min-width:0;height:100%;display:flex;align-items:center;padding:var(--solaris-space-4);border-right:var(--solaris-table-cell-divider)}.solaris-table__cell,.solaris-row__cell{box-sizing:border-box}.solaris-table__cell:last-child{border-right:none}.solaris-table__cell--header{position:relative;padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-table__header-content{width:100%;min-width:0;align-items:center;display:inline-flex;gap:var(--solaris-space-2);justify-content:space-between}.solaris-table__header-left{min-width:0;overflow:hidden;align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-table__header-left i.ph{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table__select-prefix{flex:0 0 auto;align-items:center;display:inline-flex}.solaris-table__header-text{overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:ellipsis;font-size:var(--solaris-fs-14);letter-spacing:var(--solaris-ls-sm);color:var(--solaris-color-text-muted);max-width:var(--solaris-col-max, 100%)}.solaris-table__sort-btn{border:none;flex:0 0 auto;cursor:pointer;background:transparent;padding:var(--solaris-space-1);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm)}.solaris-table__sort-btn:hover{background:var(--solaris-color-surface-2)}.solaris-table__sort{display:inline-flex;align-items:center;gap:var(--solaris-space-1)}.solaris-table__sort i{opacity:.45;transition:opacity .14s ease,color .14s ease,transform .14s ease}.solaris-table__sort i.is-active{opacity:1;color:var(--solaris-color-primary)}.solaris-table__sort-order{font-size:var(--solaris-fs-10);margin-left:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-table__col-resizer{top:0;right:0;z-index:10;width:12px;height:100%;cursor:col-resize;touch-action:none;position:absolute;pointer-events:auto}.solaris-table__col-resizer:after{top:20%;left:50%;width:1px;content:\"\";height:60%;position:absolute;background:transparent;transform:translate(-50%);transition:background .12s ease}.solaris-table__cell--header:hover .solaris-table__col-resizer:after{background:color-mix(in srgb,var(--solaris-color-border) 65%,transparent)}.solaris-table__body{background:var(--solaris-color-surface)}.solaris-table__empty{display:grid;place-items:center;gap:var(--solaris-space-3);padding:var(--solaris-space-8);color:var(--solaris-color-text-muted);border-bottom:1px solid var(--solaris-color-border)}.solaris-table__empty i{font-size:2rem}.solaris-table__empty-text{font-size:var(--solaris-fs-14)}.solaris-table__footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--solaris-space-4);justify-content:space-between;background:var(--solaris-color-surface);padding:var(--solaris-space-3) var(--solaris-space-4)}.solaris-table__footer-left,.solaris-table__footer-right{display:inline-flex;align-items:center;gap:var(--solaris-space-4)}.solaris-table__description,.solaris-table__selected{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table__rows-per-page{display:inline-flex;align-items:center;gap:var(--solaris-space-2);margin-right:var(--solaris-space-8)}.solaris-table__rows-per-page span,.solaris-table__rows-per-page select{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table__rows-per-page select{border:none;background:transparent}.solaris-table__range{font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted)}.solaris-table__pager{display:inline-flex;gap:var(--solaris-space-2)}.solaris-table__pager button{border:none;cursor:pointer;background:transparent;padding:var(--solaris-space-2);font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-sm);transition:background .14s ease,opacity .14s ease}.solaris-table__pager button:hover:not(:disabled){background:var(--solaris-color-surface-2)}.solaris-table__pager button:disabled{opacity:.4;cursor:not-allowed}@media(max-width:768px){.solaris-table__row--header{display:none}.solaris-table__footer-left,.solaris-table__footer-right{width:100%;justify-content:space-between}.solaris-table__col-resizer{display:none}}\n"] }]
+        }], propDecorators: { length: [{
+                type: Input
+            }], pageIndex: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], rowsCount: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], tableDescription: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], emptyIconClass: [{
+                type: Input
+            }], pageSizeOptions: [{
+                type: Input
+            }], emptyTextKey: [{
+                type: Input
+            }], sortChange: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], columnQuery: [{
+                type: ContentChildren,
+                args: [SolarisTableColumn]
+            }], tableRoot: [{
+                type: ViewChild,
+                args: ['tableRoot', { static: true }]
+            }] } });
+
+class SolarisRowComponent {
+    table;
+    destroyRef = inject(DestroyRef);
+    rowKey;
+    value;
+    constructor(table) {
+        this.table = table;
+    }
+    ngOnInit() {
+        if (!this.table) {
+            throw new Error('<solaris-row> deve ser usado dentro de <solaris-table>.');
+        }
+        if (this.table.selectable && (this.rowKey === null || this.rowKey === undefined)) {
+            throw new Error('Quando selectable=true, <solaris-row> exige [rowKey].');
+        }
+        if (this.table.selectable) {
+            this.table.registerRowKey(this.rowKey);
+            this.destroyRef.onDestroy(() => this.table.unregisterRowKey(this.rowKey));
+        }
+    }
+    get isSelected() {
+        return this.table.isSelected(this.rowKey);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisRowComponent, deps: [{ token: SolarisTable, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisRowComponent, isStandalone: true, selector: "solaris-row", inputs: { rowKey: "rowKey", value: "value" }, host: { classAttribute: "solaris-row-host" }, ngImport: i0, template: "<div class=\"solaris-row\" role=\"row\" [attr.aria-selected]=\"isSelected\" [class.is-selected]=\"isSelected\"\r\n     [style.gridTemplateColumns]=\"table.gridTemplateColumns()\">\r\n\r\n  @for (col of table.columns(); track col.id; let i = $index) {\r\n    <div class=\"solaris-row__cell\" role=\"cell\" [attr.data-col-idx]=\"i\" [class.align-end]=\"col.align === 'end'\"\r\n         [class.align-center]=\"col.align === 'center'\" [style.--solaris-col-max]=\"col.maxWidth || null\">\r\n\r\n      @if (table.selectable && i === 0) {\r\n        <span class=\"solaris-row__select-prefix\">\r\n          <solaris-checkbox variant=\"square\" color=\"primary\" size=\"sm\" [ngModel]=\"isSelected\"\r\n            (ngModelChange)=\"table.toggleRow(rowKey, $event)\" [attr.aria-label]=\"'ui.solaris.tables.aria.selectRow' | translate\"/>\r\n        </span>\r\n      }\r\n\r\n      <span class=\"solaris-row__label\">\r\n        @if (col.headerKey) { {{ col.headerKey | translate }} } @else { {{ col.header }} }\r\n      </span>\r\n\r\n      <span class=\"solaris-row__content\">\r\n        @if (col.cellDef?.template) {\r\n          <ng-container [ngTemplateOutlet]=\"col.cellDef!.template\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: value, row: value, col: col }\"/>\r\n        } @else {\r\n          {{ table.readField(value, col.field) }}\r\n        }\r\n      </span>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;--solaris-table-row-bg: transparent;--solaris-table-row-bg-hover: var(--solaris-table-row-hover-bg, var(--solaris-color-surface-2))}:host-context(.solaris-table--zebra):nth-child(2n){--solaris-table-row-bg: var(--solaris-color-surface-2)}:host-context(.solaris-table--zebra):nth-child(odd){--solaris-table-row-bg: var(--solaris-color-surface)}@supports (color: color-mix(in srgb,black 50%,white)){:host-context(.solaris-table--zebra):nth-child(2n){--solaris-table-row-bg-hover: color-mix(in srgb, var(--solaris-color-surface-2) 40%, var(--solaris-color-surface))}:host-context(.solaris-table--zebra):nth-child(odd){--solaris-table-row-bg-hover: color-mix(in srgb, var(--solaris-color-surface) 40%, var(--solaris-color-surface-2))}}.solaris-row{display:grid;align-items:stretch;background:var(--solaris-table-row-bg);transition:background .3s ease-in-out;border-bottom:1px solid var(--solaris-color-border)}.solaris-row:hover{background:var(--solaris-table-row-bg-hover)}.solaris-row.is-selected,.solaris-row.is-selected:hover{background:var(--solaris-table-row-selected-bg)}.solaris-row__cell{min-width:0;display:flex;align-items:center;align-self:stretch;gap:var(--solaris-space-3);padding:var(--solaris-space-4);border-right:var(--solaris-table-cell-divider)}.solaris-row__cell:last-child{border-right:none}.solaris-row__cell--select{justify-content:center}.align-end{justify-content:flex-end;text-align:right}.align-center{justify-content:center;text-align:center}.solaris-row__label{display:none;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-row__content{overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:ellipsis;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);max-width:var(--solaris-col-max, 100%)}.solaris-row__select-prefix{flex:0 0 auto;align-items:center;display:inline-flex}@media(max-width:768px){.solaris-row{display:block;border-bottom:none;padding:var(--solaris-space-4)}.solaris-row__cell{border-right:none;padding:var(--solaris-space-2) 0;align-items:flex-start;justify-content:space-between}.solaris-row__cell--select{justify-content:flex-end;padding-top:0}.solaris-row__label{display:inline;min-width:9rem}.solaris-row__content{max-width:100%;overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:ellipsis}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SolarisCheckbox, selector: "solaris-checkbox", inputs: ["indeterminate", "ariaLabel", "size", "variant", "color", "id", "appearance", "checkColor"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-row', standalone: true, imports: [
+                        FormsModule,
+                        SolarisCheckbox,
+                        SolarisTranslationPipe,
+                        NgTemplateOutlet
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'solaris-row-host' }, template: "<div class=\"solaris-row\" role=\"row\" [attr.aria-selected]=\"isSelected\" [class.is-selected]=\"isSelected\"\r\n     [style.gridTemplateColumns]=\"table.gridTemplateColumns()\">\r\n\r\n  @for (col of table.columns(); track col.id; let i = $index) {\r\n    <div class=\"solaris-row__cell\" role=\"cell\" [attr.data-col-idx]=\"i\" [class.align-end]=\"col.align === 'end'\"\r\n         [class.align-center]=\"col.align === 'center'\" [style.--solaris-col-max]=\"col.maxWidth || null\">\r\n\r\n      @if (table.selectable && i === 0) {\r\n        <span class=\"solaris-row__select-prefix\">\r\n          <solaris-checkbox variant=\"square\" color=\"primary\" size=\"sm\" [ngModel]=\"isSelected\"\r\n            (ngModelChange)=\"table.toggleRow(rowKey, $event)\" [attr.aria-label]=\"'ui.solaris.tables.aria.selectRow' | translate\"/>\r\n        </span>\r\n      }\r\n\r\n      <span class=\"solaris-row__label\">\r\n        @if (col.headerKey) { {{ col.headerKey | translate }} } @else { {{ col.header }} }\r\n      </span>\r\n\r\n      <span class=\"solaris-row__content\">\r\n        @if (col.cellDef?.template) {\r\n          <ng-container [ngTemplateOutlet]=\"col.cellDef!.template\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: value, row: value, col: col }\"/>\r\n        } @else {\r\n          {{ table.readField(value, col.field) }}\r\n        }\r\n      </span>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;--solaris-table-row-bg: transparent;--solaris-table-row-bg-hover: var(--solaris-table-row-hover-bg, var(--solaris-color-surface-2))}:host-context(.solaris-table--zebra):nth-child(2n){--solaris-table-row-bg: var(--solaris-color-surface-2)}:host-context(.solaris-table--zebra):nth-child(odd){--solaris-table-row-bg: var(--solaris-color-surface)}@supports (color: color-mix(in srgb,black 50%,white)){:host-context(.solaris-table--zebra):nth-child(2n){--solaris-table-row-bg-hover: color-mix(in srgb, var(--solaris-color-surface-2) 40%, var(--solaris-color-surface))}:host-context(.solaris-table--zebra):nth-child(odd){--solaris-table-row-bg-hover: color-mix(in srgb, var(--solaris-color-surface) 40%, var(--solaris-color-surface-2))}}.solaris-row{display:grid;align-items:stretch;background:var(--solaris-table-row-bg);transition:background .3s ease-in-out;border-bottom:1px solid var(--solaris-color-border)}.solaris-row:hover{background:var(--solaris-table-row-bg-hover)}.solaris-row.is-selected,.solaris-row.is-selected:hover{background:var(--solaris-table-row-selected-bg)}.solaris-row__cell{min-width:0;display:flex;align-items:center;align-self:stretch;gap:var(--solaris-space-3);padding:var(--solaris-space-4);border-right:var(--solaris-table-cell-divider)}.solaris-row__cell:last-child{border-right:none}.solaris-row__cell--select{justify-content:center}.align-end{justify-content:flex-end;text-align:right}.align-center{justify-content:center;text-align:center}.solaris-row__label{display:none;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-row__content{overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:ellipsis;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);max-width:var(--solaris-col-max, 100%)}.solaris-row__select-prefix{flex:0 0 auto;align-items:center;display:inline-flex}@media(max-width:768px){.solaris-row{display:block;border-bottom:none;padding:var(--solaris-space-4)}.solaris-row__cell{border-right:none;padding:var(--solaris-space-2) 0;align-items:flex-start;justify-content:space-between}.solaris-row__cell--select{justify-content:flex-end;padding-top:0}.solaris-row__label{display:inline;min-width:9rem}.solaris-row__content{max-width:100%;overflow:hidden;white-space:nowrap;display:inline-block;text-overflow:ellipsis}}\n"] }]
+        }], ctorParameters: () => [{ type: SolarisTable, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }] }], propDecorators: { rowKey: [{
+                type: Input
+            }], value: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class SolarisHeaderDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisHeaderDirective, isStandalone: true, selector: "[solaris-header]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-header]',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisFooterDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisFooterDirective, isStandalone: true, selector: "[solaris-footer]", ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFooterDirective, decorators: [{
             type: Directive,
@@ -662,13 +2938,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 }]
         }] });
 
-class SolarisPageComponent {
+class SolarisPage {
     stickyHeader = false;
     container = 'contained';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisPageComponent, isStandalone: true, selector: "solaris-page", inputs: { stickyHeader: "stickyHeader", container: "container" }, host: { classAttribute: "solaris-page-host" }, ngImport: i0, template: "<div class=\"solaris-page\" [ngClass]=\"['container-' + container]\">\r\n  <header class=\"solaris-page__header\" [ngClass]=\"{ 'is-sticky': stickyHeader }\">\r\n    <ng-content select=\"[solaris-header]\"></ng-content>\r\n    @if (stickyHeader) { <solaris-divider class=\"solaris-page__header-divider\"/> }\r\n  </header>\r\n\r\n  <main class=\"solaris-page__body\">\r\n    <ng-content select=\"[solaris-body]\"></ng-content>\r\n  </main>\r\n\r\n  <footer class=\"solaris-page__footer\">\r\n    <solaris-divider class=\"solaris-page__footer-divider\"/>\r\n\r\n    <div class=\"solaris-page__footer-content\">\r\n      <ng-content select=\"[solaris-footer]\"></ng-content>\r\n    </div>\r\n  </footer>\r\n</div>\r\n", styles: [":host.solaris-page-host{display:block}.solaris-page{--solaris-page-gap: var(--solaris-space-8);--solaris-header-gap: var(--solaris-space-4);--solaris-footer-gap: var(--solaris-space-4);--solaris-page-padding-x: var(--solaris-space-8);--solaris-page-padding-y: var(--solaris-space-8);display:grid;min-height:100%;gap:var(--solaris-page-gap);color:var(--solaris-color-text);grid-template-rows:auto 1fr auto;padding:var(--solaris-page-padding-y) var(--solaris-page-padding-x)}.solaris-page.container-contained{margin-inline:auto}.solaris-page.container-fluid{max-width:none}.solaris-page__header{display:flex;flex-direction:column;gap:var(--solaris-header-gap)}.solaris-page__header.is-sticky{position:sticky;top:0;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);z-index:var(--solaris-z-sticky, 100);padding:var(--solaris-page-padding-y) var(--solaris-page-padding-x) var(--solaris-space-4)}.solaris-page__body{min-width:0;display:flex;flex-direction:column;gap:var(--solaris-space-8)}.solaris-page__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-footer-gap);padding-top:var(--solaris-space-4)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SolarisDivider, selector: "solaris-divider", inputs: ["label", "inset", "spacing", "variant", "strength", "orientation", "label-align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisPage, isStandalone: true, selector: "solaris-page", inputs: { stickyHeader: "stickyHeader", container: "container" }, host: { classAttribute: "solaris-page-host" }, ngImport: i0, template: "<div class=\"solaris-page\" [ngClass]=\"['container-' + container]\">\r\n  <header class=\"solaris-page__header\" [ngClass]=\"{ 'is-sticky': stickyHeader }\">\r\n    <ng-content select=\"[solaris-header]\"></ng-content>\r\n    @if (stickyHeader) { <solaris-divider class=\"solaris-page__header-divider\"/> }\r\n  </header>\r\n\r\n  <main class=\"solaris-page__body\">\r\n    <ng-content select=\"[solaris-body]\"></ng-content>\r\n  </main>\r\n\r\n  <footer class=\"solaris-page__footer\">\r\n    <solaris-divider class=\"solaris-page__footer-divider\"/>\r\n\r\n    <div class=\"solaris-page__footer-content\">\r\n      <ng-content select=\"[solaris-footer]\"></ng-content>\r\n    </div>\r\n  </footer>\r\n</div>\r\n", styles: [":host.solaris-page-host{display:block}.solaris-page{--solaris-page-gap: var(--solaris-space-8);--solaris-header-gap: var(--solaris-space-4);--solaris-footer-gap: var(--solaris-space-4);--solaris-page-padding-x: var(--solaris-space-8);--solaris-page-padding-y: var(--solaris-space-8);display:grid;min-height:100%;gap:var(--solaris-page-gap);color:var(--solaris-color-text);grid-template-rows:auto 1fr auto;padding:var(--solaris-page-padding-y) var(--solaris-page-padding-x)}.solaris-page.container-contained{margin-inline:auto}.solaris-page.container-fluid{max-width:none}.solaris-page__header{display:flex;flex-direction:column;gap:var(--solaris-header-gap)}.solaris-page__header.is-sticky{position:sticky;top:0;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);z-index:var(--solaris-z-sticky, 100);padding:var(--solaris-page-padding-y) var(--solaris-page-padding-x) var(--solaris-space-4)}.solaris-page__body{min-width:0;display:flex;flex-direction:column;gap:var(--solaris-space-8)}.solaris-page__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-footer-gap);padding-top:var(--solaris-space-4)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SolarisDivider, selector: "solaris-divider", inputs: ["label", "inset", "spacing", "variant", "strength", "orientation", "label-align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPage, decorators: [{
             type: Component,
             args: [{ selector: 'solaris-page', standalone: true, imports: [NgClass, SolarisDivider], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'solaris-page-host',
@@ -779,129 +3055,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 args: [SolarisPageHeaderDescriptionDirective]
             }] } });
 
-class SolarisButtonGroupDirective {
-    attr = '';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisButtonGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisButtonGroupDirective, isStandalone: true, selector: "[solaris-button-group]", host: { properties: { "attr.solaris-button-group": "this.attr" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisButtonGroupDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[solaris-button-group]',
-                    standalone: true,
-                }]
-        }], propDecorators: { attr: [{
-                type: HostBinding,
-                args: ['attr.solaris-button-group']
-            }] } });
-
-class SolarisButtonDirective {
-    el = inject((ElementRef));
-    isAnchor = computed(() => this.el.nativeElement.tagName.toLowerCase() === 'a', ...(ngDevMode ? [{ debugName: "isAnchor" }] : []));
-    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
-    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
-    _iconOnly = signal(false, ...(ngDevMode ? [{ debugName: "_iconOnly" }] : []));
-    _fullWidth = signal(false, ...(ngDevMode ? [{ debugName: "_fullWidth" }] : []));
-    _size = signal('md', ...(ngDevMode ? [{ debugName: "_size" }] : []));
-    _color = signal('primary', ...(ngDevMode ? [{ debugName: "_color" }] : []));
-    _variant = signal('solid', ...(ngDevMode ? [{ debugName: "_variant" }] : []));
-    set size(v) { if (v)
-        this._size.set(v); }
-    set color(v) { if (v)
-        this._color.set(v); }
-    set fullWidth(v) {
-        this._fullWidth.set(v);
-    }
-    set variant(v) { if (v)
-        this._variant.set(v); }
-    set loading(v) { this._loading.set(v); }
-    set disabled(v) { this._disabled.set(v); }
-    set iconOnly(v) { this._iconOnly.set(v); }
-    get tabIndex() {
-        return this.isAnchor() && (this._disabled() || this._loading()) ? -1 : null;
+function resolveRadius(v) {
+    const s = String(v).trim();
+    switch (s) {
+        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 s;
     }
-    get nativeDisabled() {
-        const isButton = !this.isAnchor();
-        return isButton && (this._disabled() || this._loading()) ? '' : null;
-    }
-    attr = '';
-    get ariaDisabled() {
-        return this.isAnchor() && (this._disabled() || this._loading()) ? 'true' : null;
-    }
-    get dataSize() { return this._size(); }
-    get dataColor() { return this._color(); }
-    get dataVariant() { return this._variant(); }
-    get ariaBusy() { return this._loading() ? 'true' : null; }
-    get dataIconOnly() { return this._iconOnly() ? 'true' : null; }
-    get dataFullWidth() { return this._fullWidth() ? 'true' : null; }
-    onClick(ev) {
-        if (!this.isAnchor())
-            return;
-        if (this._disabled() || this._loading()) {
-            ev.preventDefault();
-            ev.stopImmediatePropagation();
-        }
+}
+class ButtonGroupDirective {
+    _radius = null;
+    set radius(v) {
+        this._radius = v == null || String(v).trim() === '' ? null : (v);
     }
-    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", color: "color", fullWidth: ["fullWidth", "fullWidth", booleanAttribute], variant: "variant", loading: ["loading", "loading", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], iconOnly: ["iconOnly", "iconOnly", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.tabindex": "this.tabIndex", "attr.disabled": "this.nativeDisabled", "attr.solaris-button": "this.attr", "attr.aria-disabled": "this.ariaDisabled", "attr.data-size": "this.dataSize", "attr.data-color": "this.dataColor", "attr.data-variant": "this.dataVariant", "attr.aria-busy": "this.ariaBusy", "attr.data-icon-only": "this.dataIconOnly", "attr.data-full-width": "this.dataFullWidth" } }, ngImport: i0 });
+    attr = '';
+    get groupRadius() {
+        return this._radius ? resolveRadius(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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ButtonGroupDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'button[solaris-button], a[solaris-button]',
+                    selector: '[solaris-button-group]',
                     standalone: true,
                 }]
-        }], propDecorators: { size: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], fullWidth: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], variant: [{
+        }], propDecorators: { radius: [{
                 type: Input
-            }], loading: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], iconOnly: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], tabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], nativeDisabled: [{
-                type: HostBinding,
-                args: ['attr.disabled']
             }], attr: [{
                 type: HostBinding,
-                args: ['attr.solaris-button']
-            }], ariaDisabled: [{
-                type: HostBinding,
-                args: ['attr.aria-disabled']
-            }], dataSize: [{
-                type: HostBinding,
-                args: ['attr.data-size']
-            }], dataColor: [{
-                type: HostBinding,
-                args: ['attr.data-color']
-            }], dataVariant: [{
-                type: HostBinding,
-                args: ['attr.data-variant']
-            }], ariaBusy: [{
-                type: HostBinding,
-                args: ['attr.aria-busy']
-            }], dataIconOnly: [{
-                type: HostBinding,
-                args: ['attr.data-icon-only']
-            }], dataFullWidth: [{
+                args: ['attr.solaris-button-group']
+            }], groupRadius: [{
                 type: HostBinding,
-                args: ['attr.data-full-width']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
+                args: ['style.--solaris-button-group-radius']
             }] } });
 
 function sanitizePhoneInput(v) {
@@ -1519,7 +3715,7 @@ class SolarisPasswordDirective {
         this._onChange = fn;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPasswordDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPasswordDirective, isStandalone: true, selector: "input[solaris-password],input[solarisPassword]", inputs: { minLength: "minLength", requireUpper: "requireUpper", requireLower: "requireLower", requireNumber: "requireNumber", requireSpecial: "requireSpecial", requireUpperKebab: "requireUpperKebab", requireLowerKebab: "requireLowerKebab", requireNumberKebab: "requireNumberKebab", minLengthKebab: "minLengthKebab", requireSpecialKebab: "requireSpecialKebab" }, host: { properties: { "attr.type": "this.type", "attr.spellcheck": "this.spellcheck", "attr.solaris-password": "this.marker", "attr.solaris-input": "this.solarisInput", "attr.autocapitalize": "this.autocapitalize", "attr.autocomplete": "this.autocomplete" } }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPasswordDirective, isStandalone: true, selector: "input[solaris-password]", inputs: { minLength: "minLength", requireUpper: "requireUpper", requireLower: "requireLower", requireNumber: "requireNumber", requireSpecial: "requireSpecial", requireUpperKebab: "requireUpperKebab", requireLowerKebab: "requireLowerKebab", requireNumberKebab: "requireNumberKebab", minLengthKebab: "minLengthKebab", requireSpecialKebab: "requireSpecialKebab" }, host: { properties: { "attr.type": "this.type", "attr.spellcheck": "this.spellcheck", "attr.solaris-password": "this.marker", "attr.solaris-input": "this.solarisInput", "attr.autocapitalize": "this.autocapitalize", "attr.autocomplete": "this.autocomplete" } }, providers: [
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => SolarisPasswordDirective), multi: true },
             { provide: SOLARIS_FORM_FIELD_FEATURES, useValue: { kind: 'password' }, multi: true }
         ], ngImport: i0 });
@@ -1527,7 +3723,7 @@ class SolarisPasswordDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPasswordDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'input[solaris-password],input[solarisPassword]',
+                    selector: 'input[solaris-password]',
                     standalone: true,
                     providers: [
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => SolarisPasswordDirective), multi: true },
@@ -1745,6 +3941,8 @@ class FormField {
     hintKey = '';
     labelKey = '';
     invalid = null;
+    radius = 'sm';
+    appearance = 'filled';
     showErrors = 'dirtyOrTouched';
     _tick = signal(0, ...(ngDevMode ? [{ debugName: "_tick" }] : []));
     constructor() {
@@ -1821,17 +4019,17 @@ class FormField {
         return 'solaris.validation.invalid';
     }, ...(ngDevMode ? [{ debugName: "errorKey" }] : []));
     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: "hint", label: "label", hintKey: "hintKey", labelKey: "labelKey", invalid: "invalid", showErrors: "showErrors" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FormField, isStandalone: true, selector: "solaris-form-field", inputs: { hint: "hint", label: "label", hintKey: "hintKey", labelKey: "labelKey", invalid: "invalid", radius: "radius", appearance: "appearance", showErrors: "showErrors" }, 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\"\r\n     [attr.data-invalid]=\"invalidComputed() ? '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()) {\r\n        <span class=\"solaris-form-field__suffix\">\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        </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__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;border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-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;grid-template-columns:minmax(0,1fr) auto;align-items:center;position:relative;padding-left:var(--solaris-space-3);padding-right:0}.solaris-form-field__control-slot{width:100%;min-width:0;display:flex;align-items:center;flex:1 1 auto}.solaris-form-field__control-slot>*{flex:1 1 0;min-width:0;width:100%}.solaris-form-field__control-slot :is(input,textarea){margin:0;border:0;outline:none;width:100%;min-width:0;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text)}.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;padding-right:var(--solaris-space-3);gap:var(--solaris-space-2)}.solaris-form-field__suffix :is(button,a){align-self:stretch;display:inline-flex;align-items:center;height:3.6rem}.solaris-form-field__status{width:3.8rem;height:3.8rem;display:grid;place-items:center;color:var(--solaris-color-error);opacity:.95}.solaris-form-field__status i.ph{font-size:var(--solaris-fs-18);line-height:1}.solaris-form-field__hint{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:is(input,textarea)[disabled]){opacity:.45}.solaris-form-field__frame:has(:is(input,textarea)[disabled]) .solaris-form-field__prefix,.solaris-form-field__frame:has(:is(input,textarea)[disabled]) :is(.solaris-form-field__label,.solaris-form-field__hint){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}\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 });
+        ], 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  @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()) {\r\n        <span class=\"solaris-form-field__suffix\">\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        </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;padding-right:var(--solaris-space-3);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(:is(input,textarea,button)[disabled]){opacity:.45}.solaris-form-field__frame:has(:is(input,textarea,button)[disabled]) .solaris-form-field__prefix,.solaris-form-field__frame:has(:is(input,textarea,button)[disabled]) :is(.solaris-form-field__label,.solaris-form-field__hint){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}\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormField, decorators: [{
             type: Component,
             args: [{ selector: 'solaris-form-field', standalone: true, imports: [PasswordToggle, FieldErrorComponent, SolarisTranslationPipe], providers: [
                         SolarisFormFieldController,
                         { provide: SOLARIS_FORM_FIELD_CONTROLLER, useExisting: SolarisFormFieldController },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-form-field\" [class.solaris-form-field--has-prefix]=\"hasPrefix\"\r\n     [attr.data-invalid]=\"invalidComputed() ? '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()) {\r\n        <span class=\"solaris-form-field__suffix\">\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        </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__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;border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-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;grid-template-columns:minmax(0,1fr) auto;align-items:center;position:relative;padding-left:var(--solaris-space-3);padding-right:0}.solaris-form-field__control-slot{width:100%;min-width:0;display:flex;align-items:center;flex:1 1 auto}.solaris-form-field__control-slot>*{flex:1 1 0;min-width:0;width:100%}.solaris-form-field__control-slot :is(input,textarea){margin:0;border:0;outline:none;width:100%;min-width:0;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text)}.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;padding-right:var(--solaris-space-3);gap:var(--solaris-space-2)}.solaris-form-field__suffix :is(button,a){align-self:stretch;display:inline-flex;align-items:center;height:3.6rem}.solaris-form-field__status{width:3.8rem;height:3.8rem;display:grid;place-items:center;color:var(--solaris-color-error);opacity:.95}.solaris-form-field__status i.ph{font-size:var(--solaris-fs-18);line-height:1}.solaris-form-field__hint{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:is(input,textarea)[disabled]){opacity:.45}.solaris-form-field__frame:has(:is(input,textarea)[disabled]) .solaris-form-field__prefix,.solaris-form-field__frame:has(:is(input,textarea)[disabled]) :is(.solaris-form-field__label,.solaris-form-field__hint){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}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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  @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()) {\r\n        <span class=\"solaris-form-field__suffix\">\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        </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;padding-right:var(--solaris-space-3);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(:is(input,textarea,button)[disabled]){opacity:.45}.solaris-form-field__frame:has(:is(input,textarea,button)[disabled]) .solaris-form-field__prefix,.solaris-form-field__frame:has(:is(input,textarea,button)[disabled]) :is(.solaris-form-field__label,.solaris-form-field__hint){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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { prefix: [{
                 type: ContentChild,
                 args: [SolarisPrefixDirective]
@@ -1848,15 +4046,727 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                 type: Input
             }], invalid: [{
                 type: Input
+            }], radius: [{
+                type: Input
+            }], appearance: [{
+                type: Input
             }], showErrors: [{
                 type: Input
             }] } });
 
+class SolarisSelect {
+    destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    field = inject(SolarisFormFieldController, { optional: true });
+    tokenEl;
+    measureSlot;
+    triggerWrap;
+    triggerInput;
+    get dataOpen() {
+        return this.open() ? 'true' : null;
+    }
+    get dataCompact() {
+        return this.compactInput() ? 'true' : null;
+    }
+    _rootNodes = signal([], ...(ngDevMode ? [{ debugName: "_rootNodes" }] : []));
+    set items(v) {
+        console.count('[Select] items setter');
+        console.log('[Select] items length:', (v ?? []).length);
+        this._rootNodes.set(v ?? []);
+        this.resetStack();
+        const cur = this._value();
+        const next = this.sanitizeValue(cur);
+        const changed = !this.sameCvaValue(cur, next);
+        console.log('[Select] sanitize changed?', changed, 'cur:', cur, 'next:', next);
+        if (changed)
+            this._value.set(next);
+    }
+    sameCvaValue(a, b) {
+        if (this.multiple) {
+            const aa = Array.isArray(a) ? a : [];
+            const bb = Array.isArray(b) ? b : [];
+            if (aa.length !== bb.length)
+                return false;
+            for (let i = 0; i < aa.length; i++) {
+                if (!this.eq(aa[i], bb[i]))
+                    return false;
+            }
+            return true;
+        }
+        if (a == null && b == null)
+            return true;
+        if (a == null || b == null)
+            return false;
+        return this.eq(a, b);
+    }
+    _multiple = false;
+    set multiple(v) {
+        this._multiple = v;
+        const cur = this._value();
+        if (this._multiple && !Array.isArray(cur))
+            this._value.set([]);
+        if (!this._multiple && Array.isArray(cur))
+            this._value.set(null);
+    }
+    get multiple() { return this._multiple; }
+    valueKey;
+    backKey = '';
+    placeholder = '';
+    placeholderKey = '';
+    searchable = true;
+    selectedCountKey = '';
+    selectedFirst = true;
+    searchPlaceholder = '';
+    selectedCountText = '';
+    panelMaxHeight = '32rem';
+    searchPlaceholderKey = '';
+    selectionSeparator = ', ';
+    compareWith;
+    backText = 'ui.solaris.common.back';
+    selectionDisplay = 'auto';
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    set disabled(v) {
+        this._disabled.set(v);
+        if (v)
+            this.open.set(false);
+    }
+    get disabled() { return this._disabled(); }
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
+    showCount = signal(false, ...(ngDevMode ? [{ debugName: "showCount" }] : []));
+    showToken = computed(() => {
+        return this.selectedCount() > 0;
+    }, ...(ngDevMode ? [{ debugName: "showToken" }] : []));
+    selectedText = computed(() => {
+        const items = this.selectedItems();
+        if (!items.length)
+            return '';
+        return items.map(it => this.itemLabel(it)).filter(Boolean).join(this.selectionSeparator);
+    }, ...(ngDevMode ? [{ debugName: "selectedText" }] : []));
+    triggerValue = computed(() => {
+        if (this.isSearchMode())
+            return this.searchTerm();
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "triggerValue" }] : []));
+    activeOptionId = computed(() => {
+        const idx = this.activeIndex();
+        const row = this.itemRows()[idx];
+        return row?.id ?? null;
+    }, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : []));
+    inputPlaceholder = computed(() => {
+        if (this.selectedCount() > 0)
+            return '';
+        if (this.searchTerm().length > 0)
+            return '';
+        return this.searchPlaceholder || 'Search...';
+    }, ...(ngDevMode ? [{ debugName: "inputPlaceholder" }] : []));
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    selectedItems = computed(() => {
+        const all = [];
+        this.collectAllItems(this._rootNodes(), all);
+        const v = this._value();
+        if (this.multiple) {
+            const arr = Array.isArray(v) ? v : [];
+            return all.filter(it => arr.some(s => this.eq(s, it.value)));
+        }
+        return all.filter(it => v != null && this.eq(v, it.value));
+    }, ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    _stack = signal([], ...(ngDevMode ? [{ debugName: "_stack" }] : []));
+    viewModel = computed(() => {
+        const lvl = this.currentLevel();
+        const ordered = this.applySelectedFirst(lvl.nodes);
+        const filtered = this.filterNodes(ordered, this.searchTerm());
+        return this.buildRows(filtered);
+    }, ...(ngDevMode ? [{ debugName: "viewModel" }] : []));
+    rows = computed(() => this.viewModel().rows, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    canGoBack = computed(() => this._stack().length > 1, ...(ngDevMode ? [{ debugName: "canGoBack" }] : []));
+    selectedCount = computed(() => this.selectedItems().length, ...(ngDevMode ? [{ debugName: "selectedCount" }] : []));
+    isSearchMode = computed(() => this.open() && this.searchable, ...(ngDevMode ? [{ debugName: "isSearchMode" }] : []));
+    itemRows = computed(() => this.viewModel().itemRows, ...(ngDevMode ? [{ debugName: "itemRows" }] : []));
+    compactInput = computed(() => this.selectedCount() > 0 && this.searchTerm().length === 0, ...(ngDevMode ? [{ debugName: "compactInput" }] : []));
+    currentLevel = computed(() => this._stack().at(-1) ?? { nodes: this._rootNodes() }, ...(ngDevMode ? [{ debugName: "currentLevel" }] : []));
+    static seq = 0;
+    _measureNonce = 0;
+    resizeObs;
+    matchWidthEl = null;
+    propagateTouched = () => { };
+    propagateChange = () => { };
+    resolvedNgControl = undefined;
+    _id = `solaris-select-${++SolarisSelect.seq}`;
+    constructor() {
+        this.resetStack();
+        effect(() => {
+            this.selectedText();
+            this.compactInput();
+            this.scheduleAutoMeasure();
+        });
+        effect(() => {
+            const isOpen = this.open();
+            if (isOpen) {
+                this.activeIndex.set(0);
+                this.scheduleFocusTrigger();
+            }
+            else {
+                this.propagateTouched();
+                this.searchTerm.set('');
+                this.resetStack();
+            }
+        });
+    }
+    ngOnInit() {
+        this.resolveNgControlOnce();
+    }
+    ngAfterViewInit() {
+        const trigger = this.triggerWrap?.nativeElement;
+        if (trigger) {
+            this.matchWidthEl =
+                trigger.closest('.solaris-form-field')?.querySelector('.solaris-form-field__frame')
+                    ?? null;
+        }
+        const el = this.triggerWrap?.nativeElement;
+        if (!el)
+            return;
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        this.resizeObs = new ResizeObserver(() => this.scheduleAutoMeasure(true));
+        this.resizeObs.observe(el);
+        if (document.fonts?.ready) {
+            document.fonts.ready.then(() => this.scheduleAutoMeasure(true));
+        }
+        this.destroyRef.onDestroy(() => this.resizeObs?.disconnect());
+    }
+    writeValue(obj) {
+        console.count('[Select] writeValue');
+        console.log('[Select] writeValue obj:', obj);
+        this._value.set(this.sanitizeValue(obj));
+    }
+    registerOnChange(fn) {
+        console.count('[Select] registerOnChange');
+        this.propagateChange = fn;
+    }
+    registerOnTouched(fn) { this.propagateTouched = fn; }
+    setDisabledState(isDisabled) { this._disabled.set(isDisabled); }
+    eq(a, b) {
+        if (this.compareWith)
+            return this.compareWith(a, b);
+        if (this.valueKey)
+            return a?.[this.valueKey] === b?.[this.valueKey];
+        return Object.is(a, b);
+    }
+    resolveNgControlOnce() {
+        if (this.resolvedNgControl !== undefined)
+            return;
+        this.resolvedNgControl = this.injector.get(NgControl, null, {
+            self: true,
+            optional: true,
+        });
+        if (this.resolvedNgControl) {
+            this.field?.registerControl(this.resolvedNgControl);
+        }
+    }
+    itemLabel(item) {
+        return item.label ?? item.searchText ?? '';
+    }
+    collectAllItems(nodes, out) {
+        for (const n of nodes) {
+            if (n.kind === 'item') {
+                out.push(n);
+                if (n.children?.length)
+                    this.collectAllItems(n.children, out);
+            }
+            else if (n.kind === 'group') {
+                this.collectAllItems(n.items, out);
+            }
+        }
+    }
+    resetStack() {
+        this._stack.set([{ nodes: this._rootNodes() }]);
+    }
+    goBack() {
+        if (!this.canGoBack())
+            return;
+        const s = [...this._stack()];
+        s.pop();
+        this._stack.set(s);
+        this.activeIndex.set(0);
+        this.scheduleFocusTrigger();
+    }
+    enterChildren(item) {
+        if (!item.children?.length)
+            return;
+        this._stack.set([...this._stack(), { title: item.childrenTitle, titleKey: item.childrenTitleKey, nodes: item.children }]);
+        this.activeIndex.set(0);
+        this.scheduleFocusTrigger();
+    }
+    filterNodes(nodes, termRaw) {
+        const term = termRaw.trim().toLowerCase();
+        if (!term)
+            return nodes;
+        const matchItem = (it) => {
+            const hay = [it.searchText, it.label, it.description, it.endText].filter(Boolean).join(' ').toLowerCase();
+            return hay.includes(term);
+        };
+        const walk = (list) => {
+            const res = [];
+            for (const n of list) {
+                if (n.kind === 'divider') {
+                    res.push(n);
+                    continue;
+                }
+                if (n.kind === 'group') {
+                    const sub = walk(n.items);
+                    if (sub.some(x => x.kind !== 'divider'))
+                        res.push({ ...n, items: sub });
+                    continue;
+                }
+                if (n.children?.length) {
+                    const sub = walk(n.children);
+                    if (matchItem(n) || sub.some(x => x.kind !== 'divider'))
+                        res.push({ ...n, children: sub });
+                }
+                else if (matchItem(n)) {
+                    res.push(n);
+                }
+            }
+            return this.cleanupDividers(res);
+        };
+        return walk(nodes);
+    }
+    cleanupDividers(nodes) {
+        const out = [];
+        for (const n of nodes) {
+            if (n.kind === 'divider') {
+                if (!out.length)
+                    continue;
+                if (out.at(-1)?.kind === 'divider')
+                    continue;
+            }
+            out.push(n);
+        }
+        while (out.length && out[0].kind === 'divider')
+            out.shift();
+        while (out.length && out.at(-1)?.kind === 'divider')
+            out.pop();
+        return out;
+    }
+    applySelectedFirst(nodes) {
+        if (!this.multiple || !this.selectedFirst)
+            return nodes;
+        const selected = (it) => {
+            const v = this._value();
+            const arr = Array.isArray(v) ? v : [];
+            return arr.some(s => this.eq(s, it.value));
+        };
+        const reorderSegment = (segment) => {
+            const items = [];
+            const others = [];
+            for (const n of segment) {
+                if (n.kind === 'item')
+                    items.push(n);
+                else if (n.kind === 'group')
+                    others.push({ ...n, items: this.applySelectedFirst(n.items) });
+                else
+                    others.push(n);
+            }
+            const sel = [];
+            const non = [];
+            for (const it of items)
+                (selected(it) ? sel : non).push(it);
+            return [...sel, ...non, ...others];
+        };
+        const res = [];
+        let buf = [];
+        const flush = () => {
+            if (!buf.length)
+                return;
+            res.push(...reorderSegment(buf));
+            buf = [];
+        };
+        for (const n of nodes) {
+            if (n.kind === 'divider') {
+                flush();
+                res.push(n);
+            }
+            else
+                buf.push(n);
+        }
+        flush();
+        return this.cleanupDividers(res);
+    }
+    buildRows(nodes) {
+        const rows = [];
+        let optionIndex = 0;
+        const pushItem = (it) => {
+            const hasChildren = !!it.children?.length;
+            const selectable = !hasChildren;
+            const disabled = !!it.disabled;
+            const selected = selectable ? this.isSelected(it.value) : false;
+            rows.push({
+                kind: 'item',
+                key: `item-${optionIndex}-${this.itemLabel(it)}-${String(it.value)}`,
+                id: `${this._id}-opt-${optionIndex}`,
+                optionIndex,
+                item: it,
+                disabled,
+                selected,
+                hasChildren,
+                selectable,
+            });
+            optionIndex++;
+        };
+        const walk = (list) => {
+            for (const n of list) {
+                if (n.kind === 'divider') {
+                    rows.push({ kind: 'divider', key: `div-${rows.length}` });
+                    continue;
+                }
+                if (n.kind === 'group') {
+                    rows.push({
+                        kind: 'group',
+                        key: `grp-${rows.length}-${n.label ?? n.labelKey ?? ''}`,
+                        label: n.label,
+                        labelKey: n.labelKey,
+                    });
+                    walk(n.items);
+                    continue;
+                }
+                pushItem(n);
+            }
+        };
+        walk(nodes);
+        const itemRows = rows.filter(r => r.kind === 'item');
+        return { rows, itemRows };
+    }
+    isSelected(value) {
+        const v = this._value();
+        if (this.multiple) {
+            const arr = Array.isArray(v) ? v : [];
+            return arr.some(s => this.eq(s, value));
+        }
+        return v != null && this.eq(v, value);
+    }
+    setValue(next) {
+        console.count('[Select] setValue (user)');
+        const cur = this._value();
+        console.log('[Select] setValue cur:', cur, 'next:', next);
+        if (this.sameCvaValue(cur, next))
+            return;
+        this._value.set(next);
+        this.propagateChange(next);
+    }
+    toggleItem(value) {
+        if (!this.multiple)
+            return;
+        const cur = this._value();
+        const arr = Array.isArray(cur) ? [...cur] : [];
+        const idx = arr.findIndex(v => this.eq(v, value));
+        if (idx >= 0)
+            arr.splice(idx, 1);
+        else
+            arr.push(value);
+        this.setValue(arr);
+    }
+    selectSingle(value) {
+        if (this.multiple)
+            return;
+        this.setValue(value);
+        this.open.set(false);
+    }
+    onOptionClick(item) {
+        if (this.disabled)
+            return;
+        if (item.children?.length) {
+            this.enterChildren(item);
+            return;
+        }
+        if (this.multiple)
+            this.toggleItem(item.value);
+        else
+            this.selectSingle(item.value);
+    }
+    openFromTrigger() {
+        if (this.disabled)
+            return;
+        if (!this.open())
+            this.open.set(true);
+    }
+    toggleOpen() {
+        if (this.disabled)
+            return;
+        const next = !this.open();
+        if (next)
+            this.searchTerm.set('');
+        this.open.set(next);
+    }
+    onTriggerInput(v) {
+        if (this.disabled)
+            return;
+        if (!this.open())
+            this.open.set(true);
+        this.searchTerm.set(v);
+        this.activeIndex.set(0);
+    }
+    onTriggerKeydown(ev) {
+        if (this.disabled)
+            return;
+        if (!this.open()) {
+            if (ev.key === 'ArrowDown' || ev.key === 'Enter') {
+                ev.preventDefault();
+                this.searchTerm.set('');
+                this.open.set(true);
+                this.activeIndex.set(0);
+                return;
+            }
+            if (this.searchable && ev.key.length === 1 && !ev.ctrlKey && !ev.metaKey && !ev.altKey) {
+                ev.preventDefault();
+                this.searchTerm.set(ev.key);
+                this.open.set(true);
+                this.activeIndex.set(0);
+                return;
+            }
+            return;
+        }
+        if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp' || ev.key === 'Home' || ev.key === 'End' || ev.key === 'Enter' || ev.key === 'Escape') {
+            this.onPanelKeydown(ev);
+            return;
+        }
+        if ((ev.key === 'Backspace' || ev.key === 'ArrowLeft') && this.canGoBack() && !this.searchTerm()) {
+            ev.preventDefault();
+            this.goBack();
+        }
+    }
+    onPanelKeydown(ev) {
+        const items = this.itemRows();
+        if (!items.length)
+            return;
+        const max = items.length - 1;
+        const clamp = (n) => Math.max(0, Math.min(max, n));
+        switch (ev.key) {
+            case 'ArrowDown':
+                ev.preventDefault();
+                this.activeIndex.set(clamp(this.activeIndex() + 1));
+                break;
+            case 'ArrowUp':
+                ev.preventDefault();
+                this.activeIndex.set(clamp(this.activeIndex() - 1));
+                break;
+            case 'Home':
+                ev.preventDefault();
+                this.activeIndex.set(0);
+                break;
+            case 'End':
+                ev.preventDefault();
+                this.activeIndex.set(max);
+                break;
+            case 'Enter':
+                ev.preventDefault();
+                this.onOptionClick(items[this.activeIndex()].item);
+                break;
+            case 'ArrowRight': {
+                const row = items[this.activeIndex()];
+                if (row?.hasChildren) {
+                    ev.preventDefault();
+                    this.enterChildren(row.item);
+                }
+                break;
+            }
+            case 'Escape':
+                ev.preventDefault();
+                this.open.set(false);
+                break;
+        }
+    }
+    scheduleAutoMeasure(force = false) {
+        if (!this.multiple) {
+            this.showCount.set(false);
+            return;
+        }
+        if (this.selectionDisplay === 'count') {
+            this.showCount.set(true);
+            return;
+        }
+        if (this.selectionDisplay === 'list') {
+            this.showCount.set(false);
+            return;
+        }
+        const nonce = ++this._measureNonce;
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                if (nonce !== this._measureNonce)
+                    return;
+                this.measureAuto(force);
+            });
+        });
+    }
+    measureAuto(_force) {
+        if (!this.multiple) {
+            this.showCount.set(false);
+            return;
+        }
+        if (this.selectionDisplay === 'count') {
+            this.showCount.set(true);
+            return;
+        }
+        if (this.selectionDisplay === 'list') {
+            this.showCount.set(false);
+            return;
+        }
+        if (!this.compactInput()) {
+            if (this.showCount())
+                this.showCount.set(false);
+            return;
+        }
+        const wrap = this.triggerWrap?.nativeElement;
+        const inputEl = this.triggerInput?.nativeElement;
+        const measureEl = this.measureSlot?.nativeElement;
+        if (!wrap || !inputEl || !measureEl)
+            return;
+        const text = this.selectedText();
+        if (!text) {
+            if (this.showCount())
+                this.showCount.set(false);
+        }
+        const ws = getComputedStyle(wrap);
+        const padL = this.px(ws.paddingLeft);
+        const padR = this.px(ws.paddingRight);
+        const gap = this.px(ws.columnGap || ws.gap);
+        const contentWidth = wrap.clientWidth - padL - padR;
+        const inputWidth = inputEl.getBoundingClientRect().width;
+        const tokenMaxWidth = Math.max(0, contentWidth - gap - inputWidth);
+        const needed = Math.ceil(measureEl.scrollWidth);
+        const available = Math.floor(tokenMaxWidth);
+        const current = this.showCount();
+        const marginForward = 1;
+        const marginBack = 3;
+        const next = current ? (needed > (available - marginBack)) : (needed > (available + marginForward));
+        if (next !== current)
+            this.showCount.set(next);
+    }
+    px(v) {
+        const first = (v ?? '0').split(' ')[0];
+        const n = Number.parseFloat(first);
+        return Number.isFinite(n) ? n : 0;
+    }
+    scheduleFocusTrigger() {
+        requestAnimationFrame(() => {
+            this.triggerInput?.nativeElement?.focus?.();
+            if (this.searchable)
+                this.triggerInput?.nativeElement?.select?.();
+        });
+    }
+    isSelectableValue(v) {
+        if (v == null)
+            return false;
+        let selectable = false;
+        const walk = (nodes) => {
+            for (const n of nodes) {
+                if (n.kind === 'group') {
+                    walk(n.items);
+                    continue;
+                }
+                if (n.kind === 'item') {
+                    if (this.eq(n.value, v)) {
+                        selectable = !n.children?.length;
+                        return;
+                    }
+                    if (n.children?.length)
+                        walk(n.children);
+                }
+            }
+        };
+        walk(this._rootNodes());
+        return selectable;
+    }
+    sanitizeValue(next) {
+        if (this.multiple) {
+            const arr = Array.isArray(next) ? next : [];
+            return arr.filter(v => this.isSelectableValue(v));
+        }
+        return this.isSelectableValue(next) ? next : null;
+    }
+    selectedCountLabel() {
+        const count = this.selectedCount();
+        if (this.selectedCountText)
+            return this.selectedCountText.replace('{count}', String(count));
+        return `${count} selecionados`;
+    }
+    trackRow = (_, r) => r.key;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisSelect, isStandalone: true, selector: "solaris-select", inputs: { items: "items", multiple: "multiple", valueKey: "valueKey", backKey: "backKey", placeholder: "placeholder", placeholderKey: "placeholderKey", searchable: "searchable", selectedCountKey: "selectedCountKey", selectedFirst: "selectedFirst", searchPlaceholder: "searchPlaceholder", selectedCountText: "selectedCountText", panelMaxHeight: "panelMaxHeight", searchPlaceholderKey: "searchPlaceholderKey", selectionSeparator: "selectionSeparator", compareWith: "compareWith", backText: "backText", selectionDisplay: "selectionDisplay", disabled: "disabled" }, host: { properties: { "attr.data-open": "this.dataOpen", "attr.data-compact": "this.dataCompact" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SolarisSelect), multi: true }], viewQueries: [{ propertyName: "tokenEl", first: true, predicate: ["tokenEl"], descendants: true, read: ElementRef }, { propertyName: "measureSlot", first: true, predicate: ["measureSlot"], descendants: true, read: ElementRef }, { propertyName: "triggerWrap", first: true, predicate: ["triggerWrap"], descendants: true, read: ElementRef }, { propertyName: "triggerInput", first: true, predicate: ["triggerInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<solaris-popover [open]=\"open()\" (openChange)=\"open.set($event)\" placement=\"bottom-start\" [offset]=\"6\"\r\n  [matchWidth]=\"true\" [anchorElement]=\"matchWidthEl\" [matchWidthElement]=\"matchWidthEl\"\r\n  [closeOnOutsideClick]=\"true\" [closeOnEscape]=\"true\" panelClass=\"solaris-select__popover\">\r\n  <div #triggerWrap solaris-popover-trigger class=\"solaris-select__trigger\" (click)=\"openFromTrigger()\">\r\n    @if (showToken()) {\r\n      <span #tokenEl class=\"solaris-select__token\" aria-hidden=\"true\">\r\n        @if (multiple && showCount()) {\r\n          @if (selectedCountKey) { {{ selectedCountKey | translate:{ count: selectedCount() } }} }\r\n          @else { {{ selectedCountLabel() }} }\r\n        } @else {\r\n          {{ selectedText() }}\r\n        }\r\n      </span>\r\n    }\r\n\r\n    <input #triggerInput type=\"text\" class=\"solaris-select__input\" [disabled]=\"disabled\"\r\n      [attr.aria-activedescendant]=\"open() ? activeOptionId() : null\" (click)=\"openFromTrigger()\"\r\n      [readonly]=\"!isSearchMode()\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\"\r\n      aria-controls=\"{{ _id }}-listbox\" aria-expanded=\"false\" [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\r\n      [attr.placeholder]=\"inputPlaceholder()\" (focus)=\"openFromTrigger()\" (input)=\"onTriggerInput(triggerInput.value)\"\r\n      [value]=\"triggerValue()\" (keydown)=\"onTriggerKeydown($event)\"/>\r\n\r\n    <button type=\"button\" class=\"solaris-select__chevron-btn\" [disabled]=\"disabled\" (click)=\"toggleOpen()\"\r\n      [attr.aria-label]=\"('ui.solaris.aria.toggleOptions' | translate)\">\r\n      <i class=\"ph ph-caret-down\" aria-hidden=\"true\"></i>\r\n    </button>\r\n\r\n    <span class=\"solaris-select__measure solaris-select__token\" #measureSlot aria-hidden=\"true\">\r\n      {{ selectedText() }}\r\n    </span>\r\n  </div>\r\n\r\n  <ng-template solaris-popover-panel>\r\n    <div class=\"solaris-select__panel\" (keydown)=\"onPanelKeydown($event)\" [style.max-height]=\"panelMaxHeight\">\r\n      @if (canGoBack()) {\r\n        <div class=\"solaris-select__nav\">\r\n          <button type=\"button\" class=\"solaris-select__back\" (click)=\"goBack()\">\r\n            <i class=\"ph ph-arrow-left\"></i>\r\n            <span>\r\n              @if (backKey) { {{ backKey | translate }} }\r\n              @else { {{ backText | translate }} }\r\n            </span>\r\n          </button>\r\n\r\n          <div class=\"solaris-select__title\">\r\n            @if (currentLevel().titleKey) { {{ currentLevel().titleKey! | translate }} }\r\n            @else { {{ currentLevel().title ?? '' }} }\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"solaris-select__list\" role=\"listbox\" [id]=\"_id + '-listbox'\"\r\n        [attr.aria-multiselectable]=\"multiple ? 'true' : null\"\r\n        [attr.aria-activedescendant]=\"activeOptionId()\">\r\n        @for (row of rows(); track trackRow($index, row)) {\r\n          @if (row.kind === 'group') {\r\n            <div class=\"solaris-select__group\">\r\n              @if (row.labelKey) { {{ row.labelKey | translate }} }\r\n              @else { {{ row.label }} }\r\n            </div>\r\n          }\r\n\r\n          @if (row.kind === 'divider') {\r\n            <div class=\"solaris-select__divider\" aria-hidden=\"true\"></div>\r\n          }\r\n\r\n          @if (row.kind === 'item') {\r\n            <button type=\"button\" class=\"solaris-select__option\" [id]=\"row.id\" [disabled]=\"row.disabled\"\r\n              [attr.aria-selected]=\"row.selected ? 'true' : 'false'\" [class.is-active]=\"row.optionIndex === activeIndex()\"\r\n              [class.is-selected]=\"row.selected\" [class.is-navigable]=\"row.hasChildren\" (click)=\"onOptionClick(row.item)\">\r\n              <span class=\"solaris-select__option-leading\">\r\n                @if (multiple) {\r\n                  @if (!row.hasChildren) {\r\n                    <span class=\"solaris-select__checkbox\" aria-hidden=\"true\" [class.is-checked]=\"row.selected\">\r\n                      <i class=\"ph ph-check\"></i>\r\n                    </span>\r\n                  } @else {\r\n                    @if (row.item.imageUrl) {\r\n                      <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill/>\r\n                    } @else if (row.item.icon) {\r\n                      <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n                    } @else {\r\n                      <span class=\"solaris-select__checkbox-spacer\" aria-hidden=\"true\"></span>\r\n                    }\r\n                  }\r\n                }\r\n\r\n                @if (!multiple) {\r\n                  @if (row.item.imageUrl) {\r\n                    <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\r\n                  } @else if (row.item.icon) {\r\n                    <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n                  }\r\n                }\r\n              </span>\r\n\r\n              <span class=\"solaris-select__option-main\">\r\n                <span class=\"solaris-select__option-label\">\r\n                  @if (row.item.labelKey) { {{ row.item.labelKey | translate }} }\r\n                  @else { {{ row.item.label }} }\r\n                </span>\r\n\r\n                @if (row.item.description || row.item.descriptionKey) {\r\n                  <span class=\"solaris-select__option-desc\">\r\n                    @if (row.item.descriptionKey) { {{ row.item.descriptionKey | translate }} }\r\n                    @else { {{ row.item.description }} }\r\n                  </span>\r\n                }\r\n              </span>\r\n\r\n              <span class=\"solaris-select__option-end\">\r\n                @if (row.item.endTextKey) {\r\n                  <span class=\"solaris-select__end-text\">{{ row.item.endTextKey | translate }}</span>\r\n                } @else if (row.item.endText) {\r\n                  <span class=\"solaris-select__end-text\">{{ row.item.endText }}</span>\r\n                }\r\n\r\n                @if (!multiple && row.selected) {\r\n                  <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n                }\r\n\r\n                @if (row.hasChildren) {\r\n                  <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n                }\r\n              </span>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</solaris-popover>\r\n", styles: [":host{width:100%;display:block}.solaris-select__trigger{width:100%;min-width:0;display:flex;position:relative;align-items:center;padding-right:2.8rem;gap:var(--solaris-space-2)}.solaris-select__token{opacity:1;min-width:0;flex:0 1 auto;max-width:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-color-text)}.solaris-select__input{border:0;width:1px;outline:none;min-width:6rem;padding:1rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}:host([data-compact=true]) .solaris-select__input{flex:0 0 2ch;width:2ch;min-width:2ch}.solaris-select__input::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn i.ph{margin-right:1.5rem;transform:rotate(0);transition:transform .16s ease,opacity .16s ease}:host([data-open=true]) .solaris-select__chevron-btn i.ph{transform:rotate(180deg);opacity:.95}.solaris-select__display{top:0;left:0;bottom:0;display:flex;right:2.8rem;overflow:hidden;position:absolute;align-items:center;white-space:nowrap;pointer-events:none;text-overflow:ellipsis}.solaris-select__display.is-hidden{opacity:0}.solaris-select__input::placeholder,.solaris-select__placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__input::placeholder,.solaris-select__placeholder,.solaris-select__token{font-size:var(--solaris-fs-14)}.solaris-select__chevron-btn{top:50%;right:0;border:0;display:grid;width:2.8rem;opacity:.85;height:3.6rem;cursor:pointer;position:absolute;place-items:center;background:transparent;transform:translateY(-50%);color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn:disabled{opacity:.5;cursor:not-allowed}.solaris-select__measure{top:-9999px;left:-9999px;position:absolute;visibility:hidden;pointer-events:none;max-width:none!important;overflow:visible!important;width:max-content!important;white-space:nowrap!important;text-overflow:clip!important;display:inline-block!important}.solaris-select__popover{padding:var(--solaris-space-2)}.solaris-select__panel{display:grid;overflow:auto;max-height:32rem;padding:.25rem;gap:var(--solaris-space-2);border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}.solaris-select__checkbox-spacer{width:1.6rem;height:1.6rem}.solaris-select__nav{display:grid;align-items:center;padding-right:1rem;gap:var(--solaris-space-2);grid-template-columns:auto 1fr}.solaris-select__back{border:0;cursor:pointer;align-items:center;display:inline-flex;background:transparent;gap:var(--solaris-space-1);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm)}.solaris-select__back:hover{background:var(--solaris-color-surface-2)}.solaris-select__title{justify-self:end;font-size:var(--solaris-fs-12);padding-right:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-select__list{gap:.25rem;display:grid}.solaris-select__group{opacity:.9;padding:.4rem .6rem;text-transform:uppercase;font-size:var(--solaris-fs-10);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-select__divider{height:1px;margin:.35rem .2rem;background:color-mix(in srgb,var(--solaris-color-border) 75%,transparent)}.solaris-select__option{width:100%;border:0;display:grid;cursor:pointer;text-align:left;align-items:center;padding:.7rem .8rem;background:transparent;gap:var(--solaris-space-4);color:var(--solaris-color-text);grid-template-columns:auto 1fr auto;border-radius:var(--solaris-radius-sm)}.solaris-select__option:hover{background:var(--solaris-color-surface-2)}.solaris-select__option.is-active{background:color-mix(in srgb,var(--solaris-color-primary) 7%,var(--solaris-color-surface-2))}.solaris-select__option:disabled{opacity:.45;cursor:not-allowed}.solaris-select__option-leading{align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-select__checkbox{display:grid;width:1.6rem;height:1.6rem;place-items:center;border-radius:.4rem;background:var(--solaris-color-surface);color:var(--solaris-color-primary-contrast);border:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-select__checkbox i.ph{opacity:0;line-height:1;font-size:1.2rem;transform:scale(.9);transition:opacity .12s ease,transform .12s ease}.solaris-select__checkbox.is-checked{background:var(--solaris-color-primary);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-select__checkbox.is-checked i.ph{opacity:1;transform:scale(1)}.solaris-select__avatar{width:1.8rem;height:1.8rem;object-fit:cover;border-radius:var(--solaris-radius-full)}.solaris-select__icon{opacity:.9;font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted)}.solaris-select__option-main{min-width:0;gap:.15rem;display:grid}.solaris-select__option-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__option-desc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-select__option-end{opacity:.9;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text-muted)}.solaris-select__option-end i.ph-check{color:var(--solaris-color-success)}.solaris-select__end-text{font-size:var(--solaris-fs-12);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: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-select', standalone: true, imports: [
+                        SolarisPopover,
+                        SolarisPopoverTriggerDirective,
+                        SolarisPopoverPanelDirective,
+                        SolarisTranslationPipe,
+                        NgOptimizedImage,
+                    ], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SolarisSelect), multi: true }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-popover [open]=\"open()\" (openChange)=\"open.set($event)\" placement=\"bottom-start\" [offset]=\"6\"\r\n  [matchWidth]=\"true\" [anchorElement]=\"matchWidthEl\" [matchWidthElement]=\"matchWidthEl\"\r\n  [closeOnOutsideClick]=\"true\" [closeOnEscape]=\"true\" panelClass=\"solaris-select__popover\">\r\n  <div #triggerWrap solaris-popover-trigger class=\"solaris-select__trigger\" (click)=\"openFromTrigger()\">\r\n    @if (showToken()) {\r\n      <span #tokenEl class=\"solaris-select__token\" aria-hidden=\"true\">\r\n        @if (multiple && showCount()) {\r\n          @if (selectedCountKey) { {{ selectedCountKey | translate:{ count: selectedCount() } }} }\r\n          @else { {{ selectedCountLabel() }} }\r\n        } @else {\r\n          {{ selectedText() }}\r\n        }\r\n      </span>\r\n    }\r\n\r\n    <input #triggerInput type=\"text\" class=\"solaris-select__input\" [disabled]=\"disabled\"\r\n      [attr.aria-activedescendant]=\"open() ? activeOptionId() : null\" (click)=\"openFromTrigger()\"\r\n      [readonly]=\"!isSearchMode()\" role=\"combobox\" aria-autocomplete=\"list\" aria-haspopup=\"listbox\"\r\n      aria-controls=\"{{ _id }}-listbox\" aria-expanded=\"false\" [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\r\n      [attr.placeholder]=\"inputPlaceholder()\" (focus)=\"openFromTrigger()\" (input)=\"onTriggerInput(triggerInput.value)\"\r\n      [value]=\"triggerValue()\" (keydown)=\"onTriggerKeydown($event)\"/>\r\n\r\n    <button type=\"button\" class=\"solaris-select__chevron-btn\" [disabled]=\"disabled\" (click)=\"toggleOpen()\"\r\n      [attr.aria-label]=\"('ui.solaris.aria.toggleOptions' | translate)\">\r\n      <i class=\"ph ph-caret-down\" aria-hidden=\"true\"></i>\r\n    </button>\r\n\r\n    <span class=\"solaris-select__measure solaris-select__token\" #measureSlot aria-hidden=\"true\">\r\n      {{ selectedText() }}\r\n    </span>\r\n  </div>\r\n\r\n  <ng-template solaris-popover-panel>\r\n    <div class=\"solaris-select__panel\" (keydown)=\"onPanelKeydown($event)\" [style.max-height]=\"panelMaxHeight\">\r\n      @if (canGoBack()) {\r\n        <div class=\"solaris-select__nav\">\r\n          <button type=\"button\" class=\"solaris-select__back\" (click)=\"goBack()\">\r\n            <i class=\"ph ph-arrow-left\"></i>\r\n            <span>\r\n              @if (backKey) { {{ backKey | translate }} }\r\n              @else { {{ backText | translate }} }\r\n            </span>\r\n          </button>\r\n\r\n          <div class=\"solaris-select__title\">\r\n            @if (currentLevel().titleKey) { {{ currentLevel().titleKey! | translate }} }\r\n            @else { {{ currentLevel().title ?? '' }} }\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"solaris-select__list\" role=\"listbox\" [id]=\"_id + '-listbox'\"\r\n        [attr.aria-multiselectable]=\"multiple ? 'true' : null\"\r\n        [attr.aria-activedescendant]=\"activeOptionId()\">\r\n        @for (row of rows(); track trackRow($index, row)) {\r\n          @if (row.kind === 'group') {\r\n            <div class=\"solaris-select__group\">\r\n              @if (row.labelKey) { {{ row.labelKey | translate }} }\r\n              @else { {{ row.label }} }\r\n            </div>\r\n          }\r\n\r\n          @if (row.kind === 'divider') {\r\n            <div class=\"solaris-select__divider\" aria-hidden=\"true\"></div>\r\n          }\r\n\r\n          @if (row.kind === 'item') {\r\n            <button type=\"button\" class=\"solaris-select__option\" [id]=\"row.id\" [disabled]=\"row.disabled\"\r\n              [attr.aria-selected]=\"row.selected ? 'true' : 'false'\" [class.is-active]=\"row.optionIndex === activeIndex()\"\r\n              [class.is-selected]=\"row.selected\" [class.is-navigable]=\"row.hasChildren\" (click)=\"onOptionClick(row.item)\">\r\n              <span class=\"solaris-select__option-leading\">\r\n                @if (multiple) {\r\n                  @if (!row.hasChildren) {\r\n                    <span class=\"solaris-select__checkbox\" aria-hidden=\"true\" [class.is-checked]=\"row.selected\">\r\n                      <i class=\"ph ph-check\"></i>\r\n                    </span>\r\n                  } @else {\r\n                    @if (row.item.imageUrl) {\r\n                      <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill/>\r\n                    } @else if (row.item.icon) {\r\n                      <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n                    } @else {\r\n                      <span class=\"solaris-select__checkbox-spacer\" aria-hidden=\"true\"></span>\r\n                    }\r\n                  }\r\n                }\r\n\r\n                @if (!multiple) {\r\n                  @if (row.item.imageUrl) {\r\n                    <img class=\"solaris-select__avatar\" [ngSrc]=\"row.item.imageUrl\" alt=\"\" fill />\r\n                  } @else if (row.item.icon) {\r\n                    <i class=\"solaris-select__icon\" [class]=\"row.item.icon\" aria-hidden=\"true\"></i>\r\n                  }\r\n                }\r\n              </span>\r\n\r\n              <span class=\"solaris-select__option-main\">\r\n                <span class=\"solaris-select__option-label\">\r\n                  @if (row.item.labelKey) { {{ row.item.labelKey | translate }} }\r\n                  @else { {{ row.item.label }} }\r\n                </span>\r\n\r\n                @if (row.item.description || row.item.descriptionKey) {\r\n                  <span class=\"solaris-select__option-desc\">\r\n                    @if (row.item.descriptionKey) { {{ row.item.descriptionKey | translate }} }\r\n                    @else { {{ row.item.description }} }\r\n                  </span>\r\n                }\r\n              </span>\r\n\r\n              <span class=\"solaris-select__option-end\">\r\n                @if (row.item.endTextKey) {\r\n                  <span class=\"solaris-select__end-text\">{{ row.item.endTextKey | translate }}</span>\r\n                } @else if (row.item.endText) {\r\n                  <span class=\"solaris-select__end-text\">{{ row.item.endText }}</span>\r\n                }\r\n\r\n                @if (!multiple && row.selected) {\r\n                  <i class=\"ph ph-check\" aria-hidden=\"true\"></i>\r\n                }\r\n\r\n                @if (row.hasChildren) {\r\n                  <i class=\"ph ph-caret-right\" aria-hidden=\"true\"></i>\r\n                }\r\n              </span>\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</solaris-popover>\r\n", styles: [":host{width:100%;display:block}.solaris-select__trigger{width:100%;min-width:0;display:flex;position:relative;align-items:center;padding-right:2.8rem;gap:var(--solaris-space-2)}.solaris-select__token{opacity:1;min-width:0;flex:0 1 auto;max-width:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--solaris-color-text)}.solaris-select__input{border:0;width:1px;outline:none;min-width:6rem;padding:1rem 0;background:transparent;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);line-height:var(--solaris-lh-normal)}:host([data-compact=true]) .solaris-select__input{flex:0 0 2ch;width:2ch;min-width:2ch}.solaris-select__input::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn i.ph{margin-right:1.5rem;transform:rotate(0);transition:transform .16s ease,opacity .16s ease}:host([data-open=true]) .solaris-select__chevron-btn i.ph{transform:rotate(180deg);opacity:.95}.solaris-select__display{top:0;left:0;bottom:0;display:flex;right:2.8rem;overflow:hidden;position:absolute;align-items:center;white-space:nowrap;pointer-events:none;text-overflow:ellipsis}.solaris-select__display.is-hidden{opacity:0}.solaris-select__input::placeholder,.solaris-select__placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-select__input::placeholder,.solaris-select__placeholder,.solaris-select__token{font-size:var(--solaris-fs-14)}.solaris-select__chevron-btn{top:50%;right:0;border:0;display:grid;width:2.8rem;opacity:.85;height:3.6rem;cursor:pointer;position:absolute;place-items:center;background:transparent;transform:translateY(-50%);color:var(--solaris-color-text-muted)}.solaris-select__chevron-btn:disabled{opacity:.5;cursor:not-allowed}.solaris-select__measure{top:-9999px;left:-9999px;position:absolute;visibility:hidden;pointer-events:none;max-width:none!important;overflow:visible!important;width:max-content!important;white-space:nowrap!important;text-overflow:clip!important;display:inline-block!important}.solaris-select__popover{padding:var(--solaris-space-2)}.solaris-select__panel{display:grid;overflow:auto;max-height:32rem;padding:.25rem;gap:var(--solaris-space-2);border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border)}.solaris-select__checkbox-spacer{width:1.6rem;height:1.6rem}.solaris-select__nav{display:grid;align-items:center;padding-right:1rem;gap:var(--solaris-space-2);grid-template-columns:auto 1fr}.solaris-select__back{border:0;cursor:pointer;align-items:center;display:inline-flex;background:transparent;gap:var(--solaris-space-1);padding:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm)}.solaris-select__back:hover{background:var(--solaris-color-surface-2)}.solaris-select__title{justify-self:end;font-size:var(--solaris-fs-12);padding-right:var(--solaris-space-1);color:var(--solaris-color-text-muted)}.solaris-select__list{gap:.25rem;display:grid}.solaris-select__group{opacity:.9;padding:.4rem .6rem;text-transform:uppercase;font-size:var(--solaris-fs-10);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-select__divider{height:1px;margin:.35rem .2rem;background:color-mix(in srgb,var(--solaris-color-border) 75%,transparent)}.solaris-select__option{width:100%;border:0;display:grid;cursor:pointer;text-align:left;align-items:center;padding:.7rem .8rem;background:transparent;gap:var(--solaris-space-4);color:var(--solaris-color-text);grid-template-columns:auto 1fr auto;border-radius:var(--solaris-radius-sm)}.solaris-select__option:hover{background:var(--solaris-color-surface-2)}.solaris-select__option.is-active{background:color-mix(in srgb,var(--solaris-color-primary) 7%,var(--solaris-color-surface-2))}.solaris-select__option:disabled{opacity:.45;cursor:not-allowed}.solaris-select__option-leading{align-items:center;display:inline-flex;gap:var(--solaris-space-2)}.solaris-select__checkbox{display:grid;width:1.6rem;height:1.6rem;place-items:center;border-radius:.4rem;background:var(--solaris-color-surface);color:var(--solaris-color-primary-contrast);border:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-select__checkbox i.ph{opacity:0;line-height:1;font-size:1.2rem;transform:scale(.9);transition:opacity .12s ease,transform .12s ease}.solaris-select__checkbox.is-checked{background:var(--solaris-color-primary);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-select__checkbox.is-checked i.ph{opacity:1;transform:scale(1)}.solaris-select__avatar{width:1.8rem;height:1.8rem;object-fit:cover;border-radius:var(--solaris-radius-full)}.solaris-select__icon{opacity:.9;font-size:var(--solaris-fs-16);color:var(--solaris-color-text-muted)}.solaris-select__option-main{min-width:0;gap:.15rem;display:grid}.solaris-select__option-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__option-desc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-select__option-end{opacity:.9;align-items:center;display:inline-flex;gap:var(--solaris-space-2);color:var(--solaris-color-text-muted)}.solaris-select__option-end i.ph-check{color:var(--solaris-color-success)}.solaris-select__end-text{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { field: [{
+                type: Optional
+            }], tokenEl: [{
+                type: ViewChild,
+                args: ['tokenEl', { read: ElementRef }]
+            }], measureSlot: [{
+                type: ViewChild,
+                args: ['measureSlot', { read: ElementRef }]
+            }], triggerWrap: [{
+                type: ViewChild,
+                args: ['triggerWrap', { read: ElementRef }]
+            }], triggerInput: [{
+                type: ViewChild,
+                args: ['triggerInput', { read: ElementRef }]
+            }], dataOpen: [{
+                type: HostBinding,
+                args: ['attr.data-open']
+            }], dataCompact: [{
+                type: HostBinding,
+                args: ['attr.data-compact']
+            }], items: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], valueKey: [{
+                type: Input
+            }], backKey: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], placeholderKey: [{
+                type: Input
+            }], searchable: [{
+                type: Input
+            }], selectedCountKey: [{
+                type: Input
+            }], selectedFirst: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], selectedCountText: [{
+                type: Input
+            }], panelMaxHeight: [{
+                type: Input
+            }], searchPlaceholderKey: [{
+                type: Input
+            }], selectionSeparator: [{
+                type: Input
+            }], compareWith: [{
+                type: Input
+            }], backText: [{
+                type: Input
+            }], selectionDisplay: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
 /// <reference path="./typings/intl-tel-input-utils.d.ts" />
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisButtonDirective, SolarisButtonGroupDirective, SolarisControlBridgeDirective, SolarisDivider, SolarisEmailDirective, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisImageSliderComponent, SolarisLoading, SolarisLoadingOverlay, SolarisPageComponent, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPrefixDirective, SolarisSectionComponent, SolarisSuffixDirective, SolarisTab, SolarisTabs };
+export { ButtonDirective, ButtonGroupDirective, FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, 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, SolarisPage, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPopover, SolarisPopoverPanelDirective, SolarisPopoverTriggerDirective, SolarisPrefixDirective, SolarisRowComponent, SolarisSectionComponent, SolarisSelect, SolarisSuffixDirective, SolarisTab, SolarisTable, SolarisTableColumn, SolarisTableFilters, SolarisTableSkeleton, SolarisTabs, computePopoverPosition, uniqueId };
 //# sourceMappingURL=educarehq-solaris-components.mjs.map