@educarehq/solaris-ui 0.11.2 → 0.13.0

package/fesm2022/educarehq-solaris-ui.mjs

@@ -4,6 +4,11 @@ import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT as DOCUMENT$1 } from '@an
 import { FormControlDirective, FormControlName, NgModel, NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
+import { DomSanitizer } from '@angular/platform-browser';
+import { getCountries, getCountryCallingCode, Metadata, AsYouType, parsePhoneNumberFromString, getExampleNumber } from 'libphonenumber-js';
+import * as FLAG_3X2 from 'country-flag-icons/string/3x2';
+import { hasFlag } from 'country-flag-icons';
+import examples from 'libphonenumber-js/examples.mobile.json';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { Subject } from 'rxjs';
 import { TestBed } from '@angular/core/testing';
@@ -114,6 +119,12 @@ const SOLARIS_TRANSLATE_DEFAULT_CONFIG = {
             'solaris.password-field.strength.weak': 'Weak',
             'solaris.password-field.strength.medium': 'Medium',
             'solaris.password-field.strength.strong': 'Strong',
+            'solaris.phone-field.required': 'Phone number is required.',
+            'solaris.phone-field.invalid': 'Enter a valid phone number.',
+            'solaris.phone-field.search.placeholder': 'Search country or code',
+            'solaris.phone-field.empty': 'No countries available',
+            'solaris.phone-field.noResults': 'No results found',
+            'solaris.phone-field.country': 'Select country code',
         },
         'pt-BR': {
             'solaris.button.loading': 'Carregando...',
@@ -184,6 +195,12 @@ const SOLARIS_TRANSLATE_DEFAULT_CONFIG = {
             'solaris.password-field.strength.weak': 'Fraca',
             'solaris.password-field.strength.medium': 'Média',
             'solaris.password-field.strength.strong': 'Forte',
+            'solaris.phone-field.required': 'O número de telefone é obrigatório.',
+            'solaris.phone-field.invalid': 'Insira um número de telefone válido.',
+            'solaris.phone-field.search.placeholder': 'Buscar país ou código',
+            'solaris.phone-field.empty': 'Nenhum país disponível',
+            'solaris.phone-field.noResults': 'Nenhum resultado encontrado',
+            'solaris.phone-field.country': 'Selecionar código do país',
         },
     },
     useBrowserLocale: true,
@@ -2642,18 +2659,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 // SECURITY_EXCEPTION_FILE: ElementRef.nativeElement.setAttribute required for default <button> type behavior.
 // SECURITY_EXCEPTION_FILE: createComponent/insertBefore/appendChild required to render the spinner and icon components inside a native button host (directive has no template).
 class SolarisButtonDirective {
+    iconPosition = input('start', ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
     appearance = input('solid', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     color = input('neutral', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    shape = input('normal', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
     radius = input('md', ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
     density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
-    shape = input('normal', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
-    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     loadingLabelKey = input(...(ngDevMode ? [undefined, { debugName: "loadingLabelKey" }] : /* istanbul ignore next */ []));
     loadingLabel = input(...(ngDevMode ? [undefined, { debugName: "loadingLabel" }] : /* istanbul ignore next */ []));
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
-    iconPosition = input('start', ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
     computedIconPosition = computed(() => {
         return this.icon() ? this.iconPosition() : null;
     }, ...(ngDevMode ? [{ debugName: "computedIconPosition" }] : /* istanbul ignore next */ []));
@@ -2695,10 +2712,12 @@ class SolarisButtonDirective {
         }
         // Apply variant attributes synchronously so the element never flashes the
         // base style before Angular's first change detection (SSR/hydration FOUC).
-        el.setAttribute('data-appearance', this.appearance());
-        el.setAttribute('data-color', this.color());
-        el.setAttribute('data-radius', this.radius());
-        el.setAttribute('data-shape', this.shape());
+        // Apply variant attributes synchronously so the element never flashes the
+        // base style before Angular's first change detection (SSR/hydration FOUC).
+        el.dataset['appearance'] = this.appearance();
+        el.dataset['color'] = this.color();
+        el.dataset['radius'] = this.radius();
+        el.dataset['shape'] = this.shape();
         effect(() => {
             if (this.loading()) {
                 this.attachSpinner();
@@ -2783,7 +2802,7 @@ class SolarisButtonDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: SolarisButtonDirective, isStandalone: true, selector: "[solaris-button]", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, loadingLabelKey: { classPropertyName: "loadingLabelKey", publicName: "loadingLabelKey", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.data-appearance": "appearance()", "attr.data-color": "color()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-shape": "shape()", "attr.data-loading": "loading() ? \"\" : null", "attr.data-full-width": "fullWidth() ? \"\" : null", "attr.data-icon-position": "computedIconPosition()", "attr.aria-busy": "loading() ? \"true\" : null", "attr.aria-label": "loading() ? resolvedLoadingLabel() : null", "attr.aria-disabled": "isEffectivelyDisabled() ? \"true\" : null", "attr.disabled": "isButton && isEffectivelyDisabled() ? \"\" : null", "tabindex": "isAnchor && isEffectivelyDisabled() ? \"-1\" : null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: SolarisButtonDirective, isStandalone: true, selector: "[solaris-button]", inputs: { iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingLabelKey: { classPropertyName: "loadingLabelKey", publicName: "loadingLabelKey", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.data-appearance": "appearance()", "attr.data-color": "color()", "attr.data-radius": "radius()", "attr.data-density": "effectiveDensity()", "attr.data-shape": "shape()", "attr.data-loading": "loading() ? \"\" : null", "attr.data-full-width": "fullWidth() ? \"\" : null", "attr.data-icon-position": "computedIconPosition()", "attr.aria-busy": "loading() ? \"true\" : null", "attr.aria-label": "loading() ? resolvedLoadingLabel() : null", "attr.aria-disabled": "isEffectivelyDisabled() ? \"true\" : null", "attr.disabled": "isButton && isEffectivelyDisabled() ? \"\" : null", "tabindex": "isAnchor && isEffectivelyDisabled() ? \"-1\" : null" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisButtonDirective, decorators: [{
             type: Directive,
@@ -2806,7 +2825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[tabindex]': 'isAnchor && isEffectivelyDisabled() ? "-1" : null',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], loadingLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabelKey", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], onClick: [{
+        }], ctorParameters: () => [], propDecorators: { iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabelKey", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -3793,14 +3812,14 @@ class SolarisPopoverPanelComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPopoverPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SolarisPopoverPanelComponent, isStandalone: true, selector: "solaris-popover-panel", host: { properties: { "attr.tabindex": "data.autoFocus === \"panel\" ? \"-1\" : null" }, classAttribute: "solaris-popover-panel" }, ngImport: i0, template: "<div\n  class=\"solaris-popover-panel__container\"\n  [attr.data-appearance]=\"data.appearance\"\n  [attr.data-padding]=\"data.padding\"\n  [attr.data-radius]=\"data.radius\"\n  [attr.data-connected-side]=\"data.connectedSide ?? null\"\n  [attr.role]=\"data.role\"\n  [id]=\"data.panelId\"\n  tabindex=\"-1\"\n>\n  <ng-container *ngTemplateOutlet=\"data.contentTemplate\" />\n</div>\n", styles: [":host{--solaris-popover-border-width: 0;--solaris-popover-min-width: auto;--solaris-popover-max-width: none;--solaris-popover-border-color: transparent;--solaris-popover-radius: var(--solaris-radius-md);--solaris-popover-shadow: var(--solaris-shadow-lg);--solaris-popover-padding: var(--solaris-spacing-3);--solaris-popover-color: var(--solaris-text-default);--solaris-popover-background: var(--solaris-surface-raised);width:100%;outline:none;display:block}.solaris-popover-panel__container{width:100%;outline:none;box-sizing:border-box;color:var(--solaris-popover-color);padding:var(--solaris-popover-padding);box-shadow:var(--solaris-popover-shadow);min-width:var(--solaris-popover-min-width);max-width:var(--solaris-popover-max-width);border-radius:var(--solaris-popover-radius);background:var(--solaris-popover-background);border:var(--solaris-popover-border-width) solid var(--solaris-popover-border-color)}.solaris-popover-panel__container[data-appearance=outline]{background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-padding=none]{--solaris-popover-padding: 0}.solaris-popover-panel__container[data-padding=sm]{--solaris-popover-padding: var(--solaris-spacing-2)}.solaris-popover-panel__container[data-padding=md]{--solaris-popover-padding: var(--solaris-spacing-3)}.solaris-popover-panel__container[data-padding=lg]{--solaris-popover-padding: var(--solaris-spacing-4)}.solaris-popover-panel__container[data-radius=none]{border-radius:var(--solaris-radius-none)}.solaris-popover-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-popover-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-popover-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}.solaris-popover-panel__container[data-radius=xl]{border-radius:var(--solaris-radius-xl)}.solaris-popover-panel__container[data-connected-side=bottom][data-form-field]{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.solaris-popover-panel__container[data-connected-side=top][data-form-field]{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: SolarisPopoverPanelComponent, isStandalone: true, selector: "solaris-popover-panel", host: { properties: { "attr.tabindex": "data.autoFocus === \"panel\" ? \"-1\" : null" }, classAttribute: "solaris-popover-panel" }, ngImport: i0, template: "<div\n  class=\"solaris-popover-panel__container\"\n  [attr.data-appearance]=\"data.appearance\"\n  [attr.data-padding]=\"data.padding\"\n  [attr.data-radius]=\"data.radius\"\n  [attr.data-connected-side]=\"data.connectedSide ?? null\"\n  [attr.role]=\"data.role\"\n  [id]=\"data.panelId\"\n  tabindex=\"-1\"\n>\n  <ng-container *ngTemplateOutlet=\"data.contentTemplate\" />\n</div>\n", styles: [":host{--solaris-popover-border-width: 0;--solaris-popover-min-width: auto;--solaris-popover-max-width: none;--solaris-popover-border-color: transparent;--solaris-popover-radius: var(--solaris-radius-md);--solaris-popover-shadow: var(--solaris-shadow-lg);--solaris-popover-padding: var(--solaris-spacing-3);--solaris-popover-color: var(--solaris-text-default);--solaris-popover-background: var(--solaris-surface-raised);width:100%;outline:none;display:block}.solaris-popover-panel__container{width:100%;outline:none;box-sizing:border-box;color:var(--solaris-popover-color);padding:var(--solaris-popover-padding);box-shadow:var(--solaris-popover-shadow);min-width:var(--solaris-popover-min-width);max-width:var(--solaris-popover-max-width);border-radius:var(--solaris-popover-radius);background:var(--solaris-popover-background);border:var(--solaris-popover-border-width) solid var(--solaris-popover-border-color)}.solaris-popover-panel__container[data-appearance=outline]{background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-appearance=filled]{border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-padding=none]{--solaris-popover-padding: 0}.solaris-popover-panel__container[data-padding=sm]{--solaris-popover-padding: var(--solaris-spacing-2)}.solaris-popover-panel__container[data-padding=md]{--solaris-popover-padding: var(--solaris-spacing-3)}.solaris-popover-panel__container[data-padding=lg]{--solaris-popover-padding: var(--solaris-spacing-4)}.solaris-popover-panel__container[data-radius=none]{border-radius:var(--solaris-radius-none)}.solaris-popover-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-popover-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-popover-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}.solaris-popover-panel__container[data-radius=xl]{border-radius:var(--solaris-radius-xl)}.solaris-popover-panel__container[data-connected-side=bottom][data-form-field]{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.solaris-popover-panel__container[data-connected-side=top][data-form-field]{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPopoverPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'solaris-popover-panel', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'solaris-popover-panel',
                         '[attr.tabindex]': 'data.autoFocus === "panel" ? "-1" : null',
-                    }, template: "<div\n  class=\"solaris-popover-panel__container\"\n  [attr.data-appearance]=\"data.appearance\"\n  [attr.data-padding]=\"data.padding\"\n  [attr.data-radius]=\"data.radius\"\n  [attr.data-connected-side]=\"data.connectedSide ?? null\"\n  [attr.role]=\"data.role\"\n  [id]=\"data.panelId\"\n  tabindex=\"-1\"\n>\n  <ng-container *ngTemplateOutlet=\"data.contentTemplate\" />\n</div>\n", styles: [":host{--solaris-popover-border-width: 0;--solaris-popover-min-width: auto;--solaris-popover-max-width: none;--solaris-popover-border-color: transparent;--solaris-popover-radius: var(--solaris-radius-md);--solaris-popover-shadow: var(--solaris-shadow-lg);--solaris-popover-padding: var(--solaris-spacing-3);--solaris-popover-color: var(--solaris-text-default);--solaris-popover-background: var(--solaris-surface-raised);width:100%;outline:none;display:block}.solaris-popover-panel__container{width:100%;outline:none;box-sizing:border-box;color:var(--solaris-popover-color);padding:var(--solaris-popover-padding);box-shadow:var(--solaris-popover-shadow);min-width:var(--solaris-popover-min-width);max-width:var(--solaris-popover-max-width);border-radius:var(--solaris-popover-radius);background:var(--solaris-popover-background);border:var(--solaris-popover-border-width) solid var(--solaris-popover-border-color)}.solaris-popover-panel__container[data-appearance=outline]{background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-padding=none]{--solaris-popover-padding: 0}.solaris-popover-panel__container[data-padding=sm]{--solaris-popover-padding: var(--solaris-spacing-2)}.solaris-popover-panel__container[data-padding=md]{--solaris-popover-padding: var(--solaris-spacing-3)}.solaris-popover-panel__container[data-padding=lg]{--solaris-popover-padding: var(--solaris-spacing-4)}.solaris-popover-panel__container[data-radius=none]{border-radius:var(--solaris-radius-none)}.solaris-popover-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-popover-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-popover-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}.solaris-popover-panel__container[data-radius=xl]{border-radius:var(--solaris-radius-xl)}.solaris-popover-panel__container[data-connected-side=bottom][data-form-field]{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.solaris-popover-panel__container[data-connected-side=top][data-form-field]{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}\n"] }]
+                    }, template: "<div\n  class=\"solaris-popover-panel__container\"\n  [attr.data-appearance]=\"data.appearance\"\n  [attr.data-padding]=\"data.padding\"\n  [attr.data-radius]=\"data.radius\"\n  [attr.data-connected-side]=\"data.connectedSide ?? null\"\n  [attr.role]=\"data.role\"\n  [id]=\"data.panelId\"\n  tabindex=\"-1\"\n>\n  <ng-container *ngTemplateOutlet=\"data.contentTemplate\" />\n</div>\n", styles: [":host{--solaris-popover-border-width: 0;--solaris-popover-min-width: auto;--solaris-popover-max-width: none;--solaris-popover-border-color: transparent;--solaris-popover-radius: var(--solaris-radius-md);--solaris-popover-shadow: var(--solaris-shadow-lg);--solaris-popover-padding: var(--solaris-spacing-3);--solaris-popover-color: var(--solaris-text-default);--solaris-popover-background: var(--solaris-surface-raised);width:100%;outline:none;display:block}.solaris-popover-panel__container{width:100%;outline:none;box-sizing:border-box;color:var(--solaris-popover-color);padding:var(--solaris-popover-padding);box-shadow:var(--solaris-popover-shadow);min-width:var(--solaris-popover-min-width);max-width:var(--solaris-popover-max-width);border-radius:var(--solaris-popover-radius);background:var(--solaris-popover-background);border:var(--solaris-popover-border-width) solid var(--solaris-popover-border-color)}.solaris-popover-panel__container[data-appearance=outline]{background:var(--solaris-surface-base);border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-appearance=filled]{border:var(--solaris-border-width-sm) solid var(--solaris-border-subtle)}.solaris-popover-panel__container[data-padding=none]{--solaris-popover-padding: 0}.solaris-popover-panel__container[data-padding=sm]{--solaris-popover-padding: var(--solaris-spacing-2)}.solaris-popover-panel__container[data-padding=md]{--solaris-popover-padding: var(--solaris-spacing-3)}.solaris-popover-panel__container[data-padding=lg]{--solaris-popover-padding: var(--solaris-spacing-4)}.solaris-popover-panel__container[data-radius=none]{border-radius:var(--solaris-radius-none)}.solaris-popover-panel__container[data-radius=sm]{border-radius:var(--solaris-radius-sm)}.solaris-popover-panel__container[data-radius=md]{border-radius:var(--solaris-radius-md)}.solaris-popover-panel__container[data-radius=lg]{border-radius:var(--solaris-radius-lg)}.solaris-popover-panel__container[data-radius=xl]{border-radius:var(--solaris-radius-xl)}.solaris-popover-panel__container[data-connected-side=bottom][data-form-field]{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.solaris-popover-panel__container[data-connected-side=top][data-form-field]{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}\n"] }]
         }] });
 
 function getBasePosition(placement, align) {
@@ -4081,11 +4100,13 @@ class SolarisPopoverTriggerDirective {
                     this.panelContainerRef.dataset['formField'] = '';
                 }
             }
-            this.elementRef.nativeElement.dataset['connectedSide'] =
-                this.connectedSide;
-            const formFieldWrapper = this.elementRef.nativeElement.querySelector(':scope > .solaris-form-field__control-wrapper');
-            if (formFieldWrapper) {
-                formFieldWrapper.dataset['connectedSide'] = this.connectedSide;
+            if (this.solarisPopoverTopConnected()) {
+                this.elementRef.nativeElement.dataset['connectedSide'] =
+                    this.connectedSide;
+                const formFieldWrapper = this.elementRef.nativeElement.querySelector(':scope > .solaris-form-field__control-wrapper');
+                if (formFieldWrapper) {
+                    formFieldWrapper.dataset['connectedSide'] = this.connectedSide;
+                }
             }
         });
     }
@@ -9445,6 +9466,662 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<solaris-form-field\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"density()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n>\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <input\n    type=\"email\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"density()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonly()\"\n    (focus)=\"onInputFocus()\"\n    [attr.id]=\"id() ?? null\"\n    (input)=\"onInput($event)\"\n    [value]=\"internalValue()\"\n    [attr.inputmode]=\"'email'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n", styles: [":host{display:block;box-sizing:border-box}\n"] }]
         }], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], projectedPrefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormPrefixDirective), { isSignal: true }] }], projectedSuffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormSuffixDirective), { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], invalidError: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidError", required: false }] }], requiredError: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredError", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], invalidErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidErrorKey", required: false }] }], requiredErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredErrorKey", required: false }] }], allowedDomainError: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedDomainError", required: false }] }], blockedDomainError: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockedDomainError", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], trimOnBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "trimOnBlur", required: false }] }], allowedDomainErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedDomainErrorKey", required: false }] }], blockedDomainErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockedDomainErrorKey", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], normalizeLowercase: [{ type: i0.Input, args: [{ isSignal: true, alias: "normalizeLowercase", required: false }] }], allowedDomains: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedDomains", required: false }] }], blockedDomains: [{ type: i0.Input, args: [{ isSignal: true, alias: "blockedDomains", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], validateDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateDomain", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
 
+// SECURITY_EXCEPTION_FILE: this pipe trusts a string only when rendered via [innerHTML] in the
+// phone-field country list. The value is a flag SVG returned by the pinned `country-flag-icons`
+// dependency (static data). It is never derived from user input, so bypassing Angular's sanitizer
+// here is safe and justified. A test documents this behavior.
+class SolarisSafeHtmlPipe {
+    sanitizer = inject(DomSanitizer);
+    transform(value) {
+        return this.sanitizer.bypassSecurityTrustHtml(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSafeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: SolarisSafeHtmlPipe, isStandalone: true, name: "solarisSafeHtml" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisSafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'solarisSafeHtml',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisPhoneCountryListComponent {
+    countries = input([], ...(ngDevMode ? [{ debugName: "countries" }] : /* istanbul ignore next */ []));
+    selectedCode = input(...(ngDevMode ? [undefined, { debugName: "selectedCode" }] : /* istanbul ignore next */ []));
+    searchable = input(true, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    noResultsText = input('', ...(ngDevMode ? [{ debugName: "noResultsText" }] : /* istanbul ignore next */ []));
+    emptyText = input('', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    maxHeight = input(...(ngDevMode ? [undefined, { debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    countrySelected = output();
+    closeRequest = output();
+    listId = nextIdFor('solaris-phone-country-list');
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    filtered = computed(() => {
+        const query = this.searchQuery().toLowerCase().trim();
+        const list = this.countries();
+        if (!query) {
+            return list;
+        }
+        return list.filter((country) => country.name.toLowerCase().includes(query) ||
+            country.code.toLowerCase().includes(query) ||
+            country.callingCode.includes(query));
+    }, ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+    showEmpty = computed(() => {
+        return this.countries().length === 0;
+    }, ...(ngDevMode ? [{ debugName: "showEmpty" }] : /* istanbul ignore next */ []));
+    showNoResults = computed(() => {
+        return this.countries().length > 0 && this.filtered().length === 0;
+    }, ...(ngDevMode ? [{ debugName: "showNoResults" }] : /* istanbul ignore next */ []));
+    activeDescendantId = computed(() => {
+        const index = this.activeIndex();
+        if (index < 0 || index >= this.filtered().length) {
+            return null;
+        }
+        return this.optionId(index);
+    }, ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
+    optionId(index) {
+        return `${this.listId}-option-${index}`;
+    }
+    onSearch(event) {
+        const target = event.target;
+        this.searchQuery.set(target.value);
+        this.activeIndex.set(-1);
+    }
+    onSearchKeydown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.moveActive(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.moveActive(-1);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                this.selectActive();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                if (this.searchQuery()) {
+                    this.searchQuery.set('');
+                    this.activeIndex.set(-1);
+                }
+                else {
+                    this.closeRequest.emit();
+                }
+                break;
+            case 'Tab':
+                this.closeRequest.emit();
+                break;
+        }
+    }
+    onListClick(event) {
+        const target = event.target;
+        const optionEl = target.closest('.solaris-phone-country-list__option');
+        if (!optionEl) {
+            return;
+        }
+        const current = event.currentTarget;
+        const index = Array.from(current.children).indexOf(optionEl);
+        const list = this.filtered();
+        if (index >= 0 && index < list.length) {
+            this.countrySelected.emit(list[index]);
+        }
+    }
+    onListKeydown(event) {
+        const list = this.filtered();
+        if (list.length === 0) {
+            return;
+        }
+        let index = this.activeIndex();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                index = index >= list.length - 1 ? 0 : index + 1;
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                index = index <= 0 ? list.length - 1 : index - 1;
+                break;
+            case 'Home':
+                event.preventDefault();
+                index = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                index = list.length - 1;
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (index >= 0 && index < list.length) {
+                    this.countrySelected.emit(list[index]);
+                }
+                return;
+            case 'Escape':
+                event.preventDefault();
+                this.closeRequest.emit();
+                return;
+            case 'Tab':
+                this.closeRequest.emit();
+                return;
+            default:
+                return;
+        }
+        this.activeIndex.set(index);
+    }
+    moveActive(direction) {
+        const list = this.filtered();
+        if (list.length === 0) {
+            return;
+        }
+        let index = this.activeIndex();
+        index =
+            index < 0
+                ? direction === 1
+                    ? 0
+                    : list.length - 1
+                : (index + direction + list.length) % list.length;
+        this.activeIndex.set(index);
+    }
+    selectActive() {
+        const list = this.filtered();
+        const index = this.activeIndex();
+        if (index >= 0 && index < list.length) {
+            this.countrySelected.emit(list[index]);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPhoneCountryListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisPhoneCountryListComponent, isStandalone: true, selector: "solaris-phone-country-list", inputs: { countries: { classPropertyName: "countries", publicName: "countries", isSignal: true, isRequired: false, transformFunction: null }, selectedCode: { classPropertyName: "selectedCode", publicName: "selectedCode", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { countrySelected: "countrySelected", closeRequest: "closeRequest" }, ngImport: i0, template: "<div class=\"solaris-phone-country-list\">\n  @if (searchable()) {\n    <div class=\"solaris-phone-country-list__search\">\n      <solaris-icon\n        name=\"search\"\n        [decorative]=\"true\"\n        class=\"solaris-phone-country-list__search-icon\"\n      />\n      <input\n        type=\"text\"\n        class=\"solaris-phone-country-list__search-input\"\n        role=\"searchbox\"\n        autocomplete=\"off\"\n        [attr.placeholder]=\"searchPlaceholder()\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearch($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    </div>\n  }\n\n  @if (showEmpty()) {\n    <div class=\"solaris-phone-country-list__empty\">\n      <span class=\"solaris-phone-country-list__empty-text\">{{\n        emptyText()\n      }}</span>\n    </div>\n  } @else if (showNoResults()) {\n    <div class=\"solaris-phone-country-list__no-results\">\n      <span class=\"solaris-phone-country-list__no-results-text\">{{\n        noResultsText()\n      }}</span>\n    </div>\n  } @else {\n    <div\n      class=\"solaris-phone-country-list__list\"\n      role=\"listbox\"\n      [attr.id]=\"listId\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      tabindex=\"-1\"\n      [style.max-height]=\"maxHeight()\"\n      (click)=\"onListClick($event)\"\n      (keydown)=\"onListKeydown($event)\"\n    >\n      @for (country of filtered(); track country.code; let index = $index) {\n        <div\n          class=\"solaris-phone-country-list__option\"\n          role=\"option\"\n          [attr.id]=\"optionId(index)\"\n          [attr.data-active]=\"activeIndex() === index ? '' : null\"\n          [attr.data-selected]=\"selectedCode() === country.code ? '' : null\"\n          [attr.aria-selected]=\"selectedCode() === country.code\"\n        >\n          <span\n            class=\"solaris-phone-country-list__flag\"\n            [innerHTML]=\"country.flag | solarisSafeHtml\"\n          ></span>\n          <span class=\"solaris-phone-country-list__name\">{{\n            country.name\n          }}</span>\n          <span class=\"solaris-phone-country-list__code\"\n            >+{{ country.callingCode }}</span\n          >\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--solaris-phone-country-option-radius: var(--solaris-radius-sm);--solaris-phone-country-search-bg: var(--solaris-surface-subtle);--solaris-phone-country-option-hover-bg: var(--solaris-surface-muted);--solaris-phone-country-option-active-bg: var(--solaris-primary-surface);--solaris-phone-country-option-active-color: var(--solaris-primary-text);width:260px;display:block;max-width:100%;box-sizing:border-box}.solaris-phone-country-list{display:flex;box-sizing:border-box;flex-direction:column;gap:var(--solaris-spacing-2)}.solaris-phone-country-list__search{display:flex;align-items:center;box-sizing:border-box;gap:var(--solaris-spacing-2);padding:0 var(--solaris-spacing-3);border-radius:var(--solaris-phone-country-option-radius);background:var(--solaris-phone-country-search-bg)}.solaris-phone-country-list__search-icon{flex-shrink:0;color:var(--solaris-text-muted)}.solaris-phone-country-list__search-input{all:unset;box-sizing:border-box;flex:1;min-width:0;padding:var(--solaris-spacing-2) 0;color:var(--solaris-text-default);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-phone-country-list__search-input::placeholder{color:var(--solaris-text-muted)}.solaris-phone-country-list__search-input:focus-visible{outline:none}.solaris-phone-country-list__list{display:flex;overflow-y:auto;max-height:320px;scrollbar-width:thin;box-sizing:border-box;flex-direction:column;gap:var(--solaris-spacing-1);scrollbar-color:var(--solaris-border-soft) transparent}.solaris-phone-country-list__list::-webkit-scrollbar{width:6px}.solaris-phone-country-list__list::-webkit-scrollbar-track{background:transparent}.solaris-phone-country-list__list::-webkit-scrollbar-thumb{background:var(--solaris-border-soft);border-radius:var(--solaris-radius-full)}.solaris-phone-country-list__list::-webkit-scrollbar-thumb:hover{background:var(--solaris-border-strong)}.solaris-phone-country-list__option{display:flex;cursor:pointer;align-items:center;box-sizing:border-box;gap:var(--solaris-spacing-3);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);border-radius:var(--solaris-phone-country-option-radius);padding:var(--solaris-spacing-2) var(--solaris-spacing-3)}.solaris-phone-country-list__option:hover{background:var(--solaris-phone-country-option-hover-bg)}.solaris-phone-country-list__option[data-active]{background:var(--solaris-phone-country-option-active-bg);color:var(--solaris-phone-country-option-active-color)}.solaris-phone-country-list__flag{flex-shrink:0;line-height:1;align-items:center;display:inline-flex;justify-content:center;width:var(--solaris-font-size-xl);font-size:var(--solaris-font-size-lg)}.solaris-phone-country-list__flag svg{display:block;width:100%;height:auto}.solaris-phone-country-list__name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-phone-country-list__code{flex-shrink:0;color:var(--solaris-text-muted)}.solaris-phone-country-list__empty,.solaris-phone-country-list__no-results{padding:var(--solaris-spacing-3);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}@media(prefers-reduced-motion:reduce){.solaris-phone-country-list__option{transition:none}}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "pipe", type: SolarisSafeHtmlPipe, name: "solarisSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPhoneCountryListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-phone-country-list', standalone: true, imports: [SolarisIconComponent, SolarisSafeHtmlPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-phone-country-list\">\n  @if (searchable()) {\n    <div class=\"solaris-phone-country-list__search\">\n      <solaris-icon\n        name=\"search\"\n        [decorative]=\"true\"\n        class=\"solaris-phone-country-list__search-icon\"\n      />\n      <input\n        type=\"text\"\n        class=\"solaris-phone-country-list__search-input\"\n        role=\"searchbox\"\n        autocomplete=\"off\"\n        [attr.placeholder]=\"searchPlaceholder()\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearch($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    </div>\n  }\n\n  @if (showEmpty()) {\n    <div class=\"solaris-phone-country-list__empty\">\n      <span class=\"solaris-phone-country-list__empty-text\">{{\n        emptyText()\n      }}</span>\n    </div>\n  } @else if (showNoResults()) {\n    <div class=\"solaris-phone-country-list__no-results\">\n      <span class=\"solaris-phone-country-list__no-results-text\">{{\n        noResultsText()\n      }}</span>\n    </div>\n  } @else {\n    <div\n      class=\"solaris-phone-country-list__list\"\n      role=\"listbox\"\n      [attr.id]=\"listId\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      tabindex=\"-1\"\n      [style.max-height]=\"maxHeight()\"\n      (click)=\"onListClick($event)\"\n      (keydown)=\"onListKeydown($event)\"\n    >\n      @for (country of filtered(); track country.code; let index = $index) {\n        <div\n          class=\"solaris-phone-country-list__option\"\n          role=\"option\"\n          [attr.id]=\"optionId(index)\"\n          [attr.data-active]=\"activeIndex() === index ? '' : null\"\n          [attr.data-selected]=\"selectedCode() === country.code ? '' : null\"\n          [attr.aria-selected]=\"selectedCode() === country.code\"\n        >\n          <span\n            class=\"solaris-phone-country-list__flag\"\n            [innerHTML]=\"country.flag | solarisSafeHtml\"\n          ></span>\n          <span class=\"solaris-phone-country-list__name\">{{\n            country.name\n          }}</span>\n          <span class=\"solaris-phone-country-list__code\"\n            >+{{ country.callingCode }}</span\n          >\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--solaris-phone-country-option-radius: var(--solaris-radius-sm);--solaris-phone-country-search-bg: var(--solaris-surface-subtle);--solaris-phone-country-option-hover-bg: var(--solaris-surface-muted);--solaris-phone-country-option-active-bg: var(--solaris-primary-surface);--solaris-phone-country-option-active-color: var(--solaris-primary-text);width:260px;display:block;max-width:100%;box-sizing:border-box}.solaris-phone-country-list{display:flex;box-sizing:border-box;flex-direction:column;gap:var(--solaris-spacing-2)}.solaris-phone-country-list__search{display:flex;align-items:center;box-sizing:border-box;gap:var(--solaris-spacing-2);padding:0 var(--solaris-spacing-3);border-radius:var(--solaris-phone-country-option-radius);background:var(--solaris-phone-country-search-bg)}.solaris-phone-country-list__search-icon{flex-shrink:0;color:var(--solaris-text-muted)}.solaris-phone-country-list__search-input{all:unset;box-sizing:border-box;flex:1;min-width:0;padding:var(--solaris-spacing-2) 0;color:var(--solaris-text-default);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-phone-country-list__search-input::placeholder{color:var(--solaris-text-muted)}.solaris-phone-country-list__search-input:focus-visible{outline:none}.solaris-phone-country-list__list{display:flex;overflow-y:auto;max-height:320px;scrollbar-width:thin;box-sizing:border-box;flex-direction:column;gap:var(--solaris-spacing-1);scrollbar-color:var(--solaris-border-soft) transparent}.solaris-phone-country-list__list::-webkit-scrollbar{width:6px}.solaris-phone-country-list__list::-webkit-scrollbar-track{background:transparent}.solaris-phone-country-list__list::-webkit-scrollbar-thumb{background:var(--solaris-border-soft);border-radius:var(--solaris-radius-full)}.solaris-phone-country-list__list::-webkit-scrollbar-thumb:hover{background:var(--solaris-border-strong)}.solaris-phone-country-list__option{display:flex;cursor:pointer;align-items:center;box-sizing:border-box;gap:var(--solaris-spacing-3);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);border-radius:var(--solaris-phone-country-option-radius);padding:var(--solaris-spacing-2) var(--solaris-spacing-3)}.solaris-phone-country-list__option:hover{background:var(--solaris-phone-country-option-hover-bg)}.solaris-phone-country-list__option[data-active]{background:var(--solaris-phone-country-option-active-bg);color:var(--solaris-phone-country-option-active-color)}.solaris-phone-country-list__flag{flex-shrink:0;line-height:1;align-items:center;display:inline-flex;justify-content:center;width:var(--solaris-font-size-xl);font-size:var(--solaris-font-size-lg)}.solaris-phone-country-list__flag svg{display:block;width:100%;height:auto}.solaris-phone-country-list__name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-phone-country-list__code{flex-shrink:0;color:var(--solaris-text-muted)}.solaris-phone-country-list__empty,.solaris-phone-country-list__no-results{padding:var(--solaris-spacing-3);color:var(--solaris-text-muted);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}@media(prefers-reduced-motion:reduce){.solaris-phone-country-list__option{transition:none}}\n"] }]
+        }], propDecorators: { countries: [{ type: i0.Input, args: [{ isSignal: true, alias: "countries", required: false }] }], selectedCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCode", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], countrySelected: [{ type: i0.Output, args: ["countrySelected"] }], closeRequest: [{ type: i0.Output, args: ["closeRequest"] }] } });
+
+// SECURITY_EXCEPTION_FILE: flag SVG strings are returned from the pinned, trusted `country-flag-icons`
+// dependency (static data, never user input). They are rendered safely through a sanitizing pipe
+// (SolarisSafeHtmlPipe) and this module never interpolates user-controlled values into SVG markup.
+const FLAG_INDEX = FLAG_3X2;
+function flagEmojiFallback(code) {
+    return code
+        .toUpperCase()
+        .replace(/./g, (char) => String.fromCodePoint(0x1f1e6 + (char.charCodeAt(0) - 65)));
+}
+function getCountryFlag(code) {
+    if (hasFlag(code)) {
+        return FLAG_INDEX[code] ?? flagEmojiFallback(code);
+    }
+    return flagEmojiFallback(code);
+}
+function buildCountries(locale = 'en-US') {
+    const displayNames = new Intl.DisplayNames([locale], { type: 'region' });
+    return getCountries()
+        .map((code) => {
+        const cc = code;
+        const name = displayNames.of(code) ?? code;
+        return {
+            code,
+            callingCode: String(getCountryCallingCode(cc)),
+            name,
+            flag: getCountryFlag(code),
+        };
+    })
+        .sort((a, b) => a.name.localeCompare(b.name, locale));
+}
+
+const SOLARIS_PHONE_COUNTRY_LIST = new InjectionToken('SOLARIS_PHONE_COUNTRY_LIST', {
+    factory: () => buildCountries,
+});
+
+function getMaxNationalNumberLength(country) {
+    const metadata = new Metadata();
+    metadata.selectNumberingPlan(country);
+    const lengths = metadata.numberingPlan?.possibleLengths() ?? [];
+    return lengths.length > 0 ? Math.max(...lengths) : 0;
+}
+function formatAsYouType(value, country) {
+    return new AsYouType(country).input(value);
+}
+function toE164(value, country) {
+    const parsed = parsePhoneNumberFromString(value, country);
+    return parsed?.number ?? '';
+}
+function toValidE164(value, country) {
+    const parsed = parsePhoneNumberFromString(value, country);
+    return parsed && parsed.isValid() ? parsed.number : '';
+}
+function detectCountry(value) {
+    const parsed = parsePhoneNumberFromString(value);
+    return parsed?.country;
+}
+function formatE164(value) {
+    const parsed = parsePhoneNumberFromString(value);
+    return parsed ? parsed.formatNational() : value;
+}
+function getExampleNumberFor(country) {
+    const number = getExampleNumber(country, examples);
+    return number ? number.formatNational() : '';
+}
+
+// SECURITY_EXCEPTION_FILE: nativeElement.value assignment is required to keep the native input in
+// sync with the as-you-type formatted value. Angular's data binding may not reflect synchronous
+// value changes to the native input. Same approach is standard for CVA blur/format normalization.
+// SECURITY_EXCEPTION_FILE: nativeElement.value read in onInput to obtain the current raw value.
+class SolarisPhoneFieldComponent {
+    translateService = inject(SolarisTranslateService);
+    countryListFactory = inject(SOLARIS_PHONE_COUNTRY_LIST);
+    inputElementRef = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputElementRef" }] : /* istanbul ignore next */ []));
+    popoverTrigger = viewChild(SolarisPopoverTriggerDirective, ...(ngDevMode ? [{ debugName: "popoverTrigger" }] : /* istanbul ignore next */ []));
+    projectedPrefix = contentChild(SolarisFormPrefixDirective, ...(ngDevMode ? [{ debugName: "projectedPrefix" }] : /* istanbul ignore next */ []));
+    projectedSuffix = contentChild(SolarisFormSuffixDirective, ...(ngDevMode ? [{ debugName: "projectedSuffix" }] : /* istanbul ignore next */ []));
+    id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+    hintKey = input(...(ngDevMode ? [undefined, { debugName: "hintKey" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    labelKey = input(...(ngDevMode ? [undefined, { debugName: "labelKey" }] : /* istanbul ignore next */ []));
+    errorKey = input(...(ngDevMode ? [undefined, { debugName: "errorKey" }] : /* istanbul ignore next */ []));
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    invalidError = input(...(ngDevMode ? [undefined, { debugName: "invalidError" }] : /* istanbul ignore next */ []));
+    requiredError = input(...(ngDevMode ? [undefined, { debugName: "requiredError" }] : /* istanbul ignore next */ []));
+    placeholderKey = input(...(ngDevMode ? [undefined, { debugName: "placeholderKey" }] : /* istanbul ignore next */ []));
+    invalidErrorKey = input(...(ngDevMode ? [undefined, { debugName: "invalidErrorKey" }] : /* istanbul ignore next */ []));
+    requiredErrorKey = input(...(ngDevMode ? [undefined, { debugName: "requiredErrorKey" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    autocomplete = input('tel', ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    invalid = input(...(ngDevMode ? [undefined, { debugName: "invalid" }] : /* istanbul ignore next */ []));
+    density = input(...(ngDevMode ? [undefined, { debugName: "density" }] : /* istanbul ignore next */ []));
+    radius = input('md', ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    maxLength = input(...(ngDevMode ? [undefined, { debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    suffix = input(...(ngDevMode ? [undefined, { debugName: "suffix" }] : /* istanbul ignore next */ []));
+    defaultCountry = input(...(ngDevMode ? [undefined, { debugName: "defaultCountry" }] : /* istanbul ignore next */ []));
+    country = input(...(ngDevMode ? [undefined, { debugName: "country" }] : /* istanbul ignore next */ []));
+    searchable = input(true, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    allowAnyCountry = input(true, ...(ngDevMode ? [{ debugName: "allowAnyCountry" }] : /* istanbul ignore next */ []));
+    countryList = input(...(ngDevMode ? [undefined, { debugName: "countryList" }] : /* istanbul ignore next */ []));
+    emptyText = input(...(ngDevMode ? [undefined, { debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    emptyTextKey = input(...(ngDevMode ? [undefined, { debugName: "emptyTextKey" }] : /* istanbul ignore next */ []));
+    noResultsText = input(...(ngDevMode ? [undefined, { debugName: "noResultsText" }] : /* istanbul ignore next */ []));
+    noResultsTextKey = input(...(ngDevMode ? [undefined, { debugName: "noResultsTextKey" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    searchPlaceholderKey = input(...(ngDevMode ? [undefined, { debugName: "searchPlaceholderKey" }] : /* istanbul ignore next */ []));
+    countryButtonLabel = input(...(ngDevMode ? [undefined, { debugName: "countryButtonLabel" }] : /* istanbul ignore next */ []));
+    countryButtonLabelKey = input(...(ngDevMode ? [undefined, { debugName: "countryButtonLabelKey" }] : /* istanbul ignore next */ []));
+    panelMaxWidth = input(...(ngDevMode ? [undefined, { debugName: "panelMaxWidth" }] : /* istanbul ignore next */ []));
+    panelMaxHeight = input(...(ngDevMode ? [undefined, { debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    countryChange = output();
+    internalValue = signal('', ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    displayValue = signal('', ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    internalDisabled = signal(false, ...(ngDevMode ? [{ debugName: "internalDisabled" }] : /* istanbul ignore next */ []));
+    internalFocused = signal(false, ...(ngDevMode ? [{ debugName: "internalFocused" }] : /* istanbul ignore next */ []));
+    touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    dirty = signal(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    selectedCountry = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedCountry" }] : /* istanbul ignore next */ []));
+    panelOpen = signal(false, ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange = () => { };
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onTouched = () => { };
+    popoverSubscriptions = [];
+    allCountries = computed(() => {
+        return this.countryListFactory(this.translateService.locale);
+    }, ...(ngDevMode ? [{ debugName: "allCountries" }] : /* istanbul ignore next */ []));
+    countries = computed(() => {
+        const list = this.allCountries();
+        const restrict = this.countryList();
+        if (restrict && restrict.length > 0) {
+            return list.filter((country) => restrict.includes(country.code));
+        }
+        return list;
+    }, ...(ngDevMode ? [{ debugName: "countries" }] : /* istanbul ignore next */ []));
+    effectiveCountry = computed(() => {
+        const explicit = this.country();
+        if (explicit)
+            return explicit;
+        const selected = this.selectedCountry();
+        if (selected)
+            return selected;
+        const fromValue = this.internalValue()
+            ? detectCountry(this.internalValue())
+            : undefined;
+        if (fromValue && this.countryAllowed(fromValue))
+            return fromValue;
+        const def = this.defaultCountry();
+        if (def)
+            return def;
+        const first = this.countries()[0];
+        return first?.code ?? 'US';
+    }, ...(ngDevMode ? [{ debugName: "effectiveCountry" }] : /* istanbul ignore next */ []));
+    selectedCountryObject = computed(() => {
+        const code = this.effectiveCountry();
+        return (this.countries().find((country) => country.code === code) ??
+            this.countries()[0]);
+    }, ...(ngDevMode ? [{ debugName: "selectedCountryObject" }] : /* istanbul ignore next */ []));
+    selectedFlag = computed(() => this.selectedCountryObject()?.flag ?? '', ...(ngDevMode ? [{ debugName: "selectedFlag" }] : /* istanbul ignore next */ []));
+    selectedCallingCode = computed(() => this.selectedCountryObject()?.callingCode ?? '', ...(ngDevMode ? [{ debugName: "selectedCallingCode" }] : /* istanbul ignore next */ []));
+    hasPrefix = computed(() => true, ...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
+    hasSuffix = computed(() => {
+        return !!this.projectedSuffix() || !!this.suffix();
+    }, ...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* istanbul ignore next */ []));
+    isEffectivelyDisabled = computed(() => {
+        return this.disabled() || this.internalDisabled();
+    }, ...(ngDevMode ? [{ debugName: "isEffectivelyDisabled" }] : /* istanbul ignore next */ []));
+    isEffectivelyReadonly = computed(() => {
+        return this.readonly();
+    }, ...(ngDevMode ? [{ debugName: "isEffectivelyReadonly" }] : /* istanbul ignore next */ []));
+    canOpen = computed(() => {
+        return (this.allowAnyCountry() &&
+            !this.isEffectivelyDisabled() &&
+            !this.isEffectivelyReadonly());
+    }, ...(ngDevMode ? [{ debugName: "canOpen" }] : /* istanbul ignore next */ []));
+    popoverAppearance = computed(() => {
+        const appearance = this.appearance();
+        if (appearance === 'outline')
+            return 'outline';
+        if (appearance === 'filled')
+            return 'filled';
+        return 'surface';
+    }, ...(ngDevMode ? [{ debugName: "popoverAppearance" }] : /* istanbul ignore next */ []));
+    effectiveMaxLength = computed(() => {
+        const explicit = this.maxLength();
+        if (explicit !== undefined) {
+            return explicit;
+        }
+        return getMaxNationalNumberLength(this.effectiveCountry());
+    }, ...(ngDevMode ? [{ debugName: "effectiveMaxLength" }] : /* istanbul ignore next */ []));
+    placeholderText = computed(() => {
+        const key = this.placeholderKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        if (this.placeholder() != null) {
+            return this.placeholder();
+        }
+        return getExampleNumberFor(this.effectiveCountry());
+    }, ...(ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []));
+    searchPlaceholderText = computed(() => {
+        const key = this.searchPlaceholderKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        if (this.searchPlaceholder()) {
+            return this.searchPlaceholder();
+        }
+        return this.translateWithDefault('solaris.phone-field.search.placeholder', 'Search country or code');
+    }, ...(ngDevMode ? [{ debugName: "searchPlaceholderText" }] : /* istanbul ignore next */ []));
+    emptyTextValue = computed(() => {
+        const key = this.emptyTextKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        if (this.emptyText()) {
+            return this.emptyText();
+        }
+        return this.translateWithDefault('solaris.phone-field.empty', 'No countries available');
+    }, ...(ngDevMode ? [{ debugName: "emptyTextValue" }] : /* istanbul ignore next */ []));
+    noResultsTextValue = computed(() => {
+        const key = this.noResultsTextKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        if (this.noResultsText()) {
+            return this.noResultsText();
+        }
+        return this.translateWithDefault('solaris.phone-field.noResults', 'No results found');
+    }, ...(ngDevMode ? [{ debugName: "noResultsTextValue" }] : /* istanbul ignore next */ []));
+    countryButtonLabelText = computed(() => {
+        const key = this.countryButtonLabelKey();
+        if (key) {
+            return this.translateService.translate(key);
+        }
+        if (this.countryButtonLabel()) {
+            return this.countryButtonLabel();
+        }
+        return this.translateWithDefault('solaris.phone-field.country', 'Select country code');
+    }, ...(ngDevMode ? [{ debugName: "countryButtonLabelText" }] : /* istanbul ignore next */ []));
+    computedError = computed(() => {
+        const manualError = this.error() || this.translateKey(this.errorKey());
+        if (manualError)
+            return manualError;
+        const isTouchedOrDirty = this.touched() || this.dirty();
+        if (!isTouchedOrDirty || this.internalFocused())
+            return '';
+        if (!this.displayValue() || this.displayValue().trim().length === 0) {
+            if (this.required()) {
+                return this.buildError(this.requiredError(), this.requiredErrorKey(), 'solaris.phone-field.required', 'Phone number is required.');
+            }
+            return '';
+        }
+        if (!this.internalValue()) {
+            return this.buildError(this.invalidError(), this.invalidErrorKey(), 'solaris.phone-field.invalid', 'Enter a valid phone number.');
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "computedError" }] : /* istanbul ignore next */ []));
+    isFieldInvalid = computed(() => {
+        const manual = this.invalid();
+        if (manual !== undefined) {
+            return manual;
+        }
+        if (this.internalFocused()) {
+            return false;
+        }
+        const isTouchedOrDirty = this.touched() || this.dirty();
+        if (!isTouchedOrDirty) {
+            return false;
+        }
+        return !!this.computedError();
+    }, ...(ngDevMode ? [{ debugName: "isFieldInvalid" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const value = this.value();
+            if (value !== this.lastAppliedValue) {
+                this.lastAppliedValue = value;
+                this.internalValue.set(value);
+                this.applyDisplayFromValue(value);
+            }
+        });
+    }
+    lastAppliedValue = '';
+    ngAfterViewInit() {
+        const trigger = this.popoverTrigger();
+        if (trigger) {
+            const openedSub = trigger.solarisPopoverOpened.subscribe(() => {
+                this.panelOpen.set(true);
+            });
+            const closedSub = trigger.solarisPopoverClosed.subscribe(() => {
+                this.panelOpen.set(false);
+                this.markAsTouched();
+            });
+            this.popoverSubscriptions.push(() => openedSub.unsubscribe(), () => closedSub.unsubscribe());
+        }
+    }
+    ngOnDestroy() {
+        this.popoverSubscriptions.forEach((fn) => fn());
+    }
+    writeValue(value) {
+        const safe = value ?? '';
+        this.internalValue.set(safe);
+        this.applyDisplayFromValue(safe);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.internalDisabled.set(isDisabled);
+    }
+    onInput(event) {
+        const target = event.target;
+        const raw = target.value;
+        if (!this.dirty()) {
+            this.dirty.set(true);
+        }
+        const startsWithPlus = raw.trim().startsWith('+');
+        let country = this.effectiveCountry();
+        let digits = raw.replace(/\D+/g, '');
+        if (startsWithPlus) {
+            const detected = detectCountry(raw);
+            if (detected && !this.country() && this.countryAllowed(detected)) {
+                this.selectedCountry.set(detected);
+                this.countryChange.emit(detected);
+                country = detected;
+            }
+            const callingCode = this.selectedCallingCode();
+            if (callingCode && digits.startsWith(callingCode)) {
+                digits = digits.slice(callingCode.length);
+            }
+        }
+        digits = digits.slice(0, this.effectiveMaxLength());
+        const formatted = formatAsYouType(digits, country);
+        this.displayValue.set(formatted);
+        if (target.value !== formatted) {
+            target.value = formatted;
+        }
+        const e164 = toValidE164(formatted, country);
+        if (e164) {
+            this.internalValue.set(e164);
+            this.onChange(e164);
+            this.valueChange.emit(e164);
+        }
+        else {
+            this.internalValue.set('');
+            this.onChange('');
+            this.valueChange.emit('');
+        }
+    }
+    onInputFocus() {
+        this.internalFocused.set(true);
+    }
+    onInputBlur() {
+        this.internalFocused.set(false);
+        this.markAsTouched();
+    }
+    onCountryToggle(event) {
+        event.stopPropagation();
+        if (this.canOpen()) {
+            this.popoverTrigger()?.toggle();
+        }
+    }
+    closeCountryPanel() {
+        this.popoverTrigger()?.close();
+    }
+    onInputClick(event) {
+        event.stopPropagation();
+    }
+    selectCountry(country) {
+        this.selectedCountry.set(country.code);
+        this.countryChange.emit(country.code);
+        const digits = this.displayValue().replace(/\D+/g, '');
+        if (digits) {
+            const formatted = formatAsYouType(digits, country.code);
+            this.displayValue.set(formatted);
+            const e164 = toValidE164(formatted, country.code);
+            if (e164) {
+                this.internalValue.set(e164);
+                this.onChange(e164);
+                this.valueChange.emit(e164);
+            }
+        }
+        this.popoverTrigger()?.close();
+    }
+    applyDisplayFromValue(e164) {
+        if (!e164) {
+            this.displayValue.set('');
+            return;
+        }
+        const country = detectCountry(e164);
+        if (country && !this.country() && this.countryAllowed(country)) {
+            this.selectedCountry.set(country);
+        }
+        this.displayValue.set(formatE164(e164));
+    }
+    countryAllowed(code) {
+        return this.countries().some((country) => country.code === code);
+    }
+    markAsTouched() {
+        if (!this.touched()) {
+            this.touched.set(true);
+            this.onTouched();
+        }
+    }
+    translateWithDefault(key, defaultText, params) {
+        const result = this.translateService.translate(key, params);
+        return result !== key ? result : defaultText;
+    }
+    translateKey(key) {
+        if (key) {
+            const translated = this.translateService.translate(key);
+            return translated !== key ? translated : undefined;
+        }
+        return undefined;
+    }
+    buildError(direct, key, fallbackKey, fallbackDefault) {
+        return (direct ??
+            this.translateKey(key) ??
+            this.translateWithDefault(fallbackKey, fallbackDefault));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisPhoneFieldComponent, isStandalone: true, selector: "solaris-phone-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, errorKey: { classPropertyName: "errorKey", publicName: "errorKey", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, invalidError: { classPropertyName: "invalidError", publicName: "invalidError", isSignal: true, isRequired: false, transformFunction: null }, requiredError: { classPropertyName: "requiredError", publicName: "requiredError", isSignal: true, isRequired: false, transformFunction: null }, placeholderKey: { classPropertyName: "placeholderKey", publicName: "placeholderKey", isSignal: true, isRequired: false, transformFunction: null }, invalidErrorKey: { classPropertyName: "invalidErrorKey", publicName: "invalidErrorKey", isSignal: true, isRequired: false, transformFunction: null }, requiredErrorKey: { classPropertyName: "requiredErrorKey", publicName: "requiredErrorKey", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, defaultCountry: { classPropertyName: "defaultCountry", publicName: "defaultCountry", isSignal: true, isRequired: false, transformFunction: null }, country: { classPropertyName: "country", publicName: "country", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, allowAnyCountry: { classPropertyName: "allowAnyCountry", publicName: "allowAnyCountry", isSignal: true, isRequired: false, transformFunction: null }, countryList: { classPropertyName: "countryList", publicName: "countryList", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, emptyTextKey: { classPropertyName: "emptyTextKey", publicName: "emptyTextKey", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, noResultsTextKey: { classPropertyName: "noResultsTextKey", publicName: "noResultsTextKey", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholderKey: { classPropertyName: "searchPlaceholderKey", publicName: "searchPlaceholderKey", isSignal: true, isRequired: false, transformFunction: null }, countryButtonLabel: { classPropertyName: "countryButtonLabel", publicName: "countryButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, countryButtonLabelKey: { classPropertyName: "countryButtonLabelKey", publicName: "countryButtonLabelKey", isSignal: true, isRequired: false, transformFunction: null }, panelMaxWidth: { classPropertyName: "panelMaxWidth", publicName: "panelMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", countryChange: "countryChange" }, host: { properties: { "attr.data-open": "panelOpen() ? \"\" : null" }, classAttribute: "solaris-phone-field" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SolarisPhoneFieldComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "projectedPrefix", first: true, predicate: SolarisFormPrefixDirective, descendants: true, isSignal: true }, { propertyName: "projectedSuffix", first: true, predicate: SolarisFormSuffixDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "popoverTrigger", first: true, predicate: SolarisPopoverTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<solaris-form-field\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"density()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  solaris-popover-trigger\n  [solarisPopoverTriggerFor]=\"countryPopover\"\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"8\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <button\n    type=\"button\"\n    class=\"solaris-phone-field__country\"\n    solaris-form-prefix\n    [attr.aria-label]=\"countryButtonLabelText()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [disabled]=\"!canOpen()\"\n    (click)=\"onCountryToggle($event)\"\n  >\n    <span\n      class=\"solaris-phone-field__flag\"\n      [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n    ></span>\n    <solaris-icon\n      class=\"solaris-phone-field__chevron\"\n      name=\"chevron-down\"\n      [decorative]=\"true\"\n    />\n  </button>\n\n  <span class=\"solaris-phone-field__dial-code\"\n    >+{{ selectedCallingCode() }}</span\n  >\n\n  <input\n    type=\"tel\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"density()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    (focus)=\"onInputFocus()\"\n    (click)=\"onInputClick($event)\"\n    [attr.id]=\"id() ?? null\"\n    (input)=\"onInput($event)\"\n    [value]=\"displayValue()\"\n    [attr.inputmode]=\"'tel'\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n\n<ng-template #countryPopover=\"solarisPopover\" solaris-popover>\n  <solaris-phone-country-list\n    [countries]=\"countries()\"\n    [selectedCode]=\"effectiveCountry()\"\n    [searchable]=\"searchable()\"\n    [searchPlaceholder]=\"searchPlaceholderText()\"\n    [noResultsText]=\"noResultsTextValue()\"\n    [emptyText]=\"emptyTextValue()\"\n    [maxHeight]=\"panelMaxHeight()\"\n    (countrySelected)=\"selectCountry($event)\"\n    (closeRequest)=\"closeCountryPanel()\"\n  />\n</ng-template>\n", styles: [":host{--solaris-phone-field-country-gap: var(--solaris-spacing-1);--solaris-phone-field-country-padding-inline: var(--solaris-spacing-2);--solaris-phone-field-dial-code-color: var(--solaris-text-muted);--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-text-default);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}:host .solaris-phone-field__country.solaris-form-prefix:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:.5}.solaris-phone-field__flag{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-phone-field-flag-size);font-size:var(--solaris-font-size-sm);line-height:1}.solaris-phone-field__flag svg{display:block;width:100%;height:auto}:host .solaris-phone-field__country .solaris-phone-field__chevron{flex-shrink:0;color:var(--solaris-text-muted);block-size:var(--solaris-phone-field-chevron-size);inline-size:var(--solaris-phone-field-chevron-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-phone-field__chevron{transform:rotate(180deg)}.solaris-phone-field__dial-code{flex:0 0 auto;-webkit-user-select:none;user-select:none;cursor:default;color:var(--solaris-phone-field-dial-code-color);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);margin-inline-end:var(--solaris-spacing-1)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: SolarisFormFieldComponent, selector: "solaris-form-field", inputs: ["hintKey", "labelKey", "hint", "errorKey", "label", "error", "optionalLabel", "requiredLabel", "optionalLabelKey", "requiredLabelKey", "required", "optional", "invalid", "disabled", "readonly", "density", "radius", "appearance", "control", "hasPrefix", "hasSuffix", "prefix", "suffix"] }, { kind: "directive", type: SolarisFormPrefixDirective, selector: "[solaris-form-prefix]" }, { kind: "directive", type: SolarisFormSuffixDirective, selector: "[solaris-form-suffix]" }, { kind: "directive", type: SolarisInputDirective, selector: "[solaris-input]", inputs: ["appearance", "radius", "size", "density", "invalid", "fullWidth"] }, { kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: SolarisPopoverDirective, selector: "ng-template[solaris-popover]", exportAs: ["solarisPopover"] }, { kind: "directive", type: SolarisPopoverTriggerDirective, selector: "[solaris-popover-trigger]", inputs: ["solarisPopoverTriggerFor", "solarisPopoverOpen", "solarisPopoverDisabled", "solarisPopoverPlacement", "solarisPopoverAlign", "solarisPopoverOffset", "solarisPopoverMatchTriggerWidth", "solarisPopoverMinWidth", "solarisPopoverMaxWidth", "solarisPopoverCloseOnOutsideClick", "solarisPopoverCloseOnEscape", "solarisPopoverRestoreFocus", "solarisPopoverAutoFocus", "solarisPopoverScrollStrategy", "solarisPopoverPanelRole", "solarisPopoverAriaHasPopup", "solarisPopoverAppearance", "solarisPopoverPadding", "solarisPopoverRadius", "solarisPopoverTopConnected"], outputs: ["solarisPopoverOpened", "solarisPopoverClosed", "solarisPopoverOpenChange"] }, { kind: "component", type: SolarisPhoneCountryListComponent, selector: "solaris-phone-country-list", inputs: ["countries", "selectedCode", "searchable", "searchPlaceholder", "noResultsText", "emptyText", "maxHeight"], outputs: ["countrySelected", "closeRequest"] }, { kind: "pipe", type: SolarisSafeHtmlPipe, name: "solarisSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisPhoneFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-phone-field', standalone: true, imports: [
+                        FormsModule,
+                        SolarisFormFieldComponent,
+                        SolarisFormPrefixDirective,
+                        SolarisFormSuffixDirective,
+                        SolarisInputDirective,
+                        SolarisIconComponent,
+                        SolarisPopoverDirective,
+                        SolarisPopoverTriggerDirective,
+                        SolarisPhoneCountryListComponent,
+                        SolarisSafeHtmlPipe,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SolarisPhoneFieldComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'solaris-phone-field',
+                        '[attr.data-open]': 'panelOpen() ? "" : null',
+                    }, template: "<solaris-form-field\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"density()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"required()\"\n  [optional]=\"optional()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  solaris-popover-trigger\n  [solarisPopoverTriggerFor]=\"countryPopover\"\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"8\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <button\n    type=\"button\"\n    class=\"solaris-phone-field__country\"\n    solaris-form-prefix\n    [attr.aria-label]=\"countryButtonLabelText()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [disabled]=\"!canOpen()\"\n    (click)=\"onCountryToggle($event)\"\n  >\n    <span\n      class=\"solaris-phone-field__flag\"\n      [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n    ></span>\n    <solaris-icon\n      class=\"solaris-phone-field__chevron\"\n      name=\"chevron-down\"\n      [decorative]=\"true\"\n    />\n  </button>\n\n  <span class=\"solaris-phone-field__dial-code\"\n    >+{{ selectedCallingCode() }}</span\n  >\n\n  <input\n    type=\"tel\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"density()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    (focus)=\"onInputFocus()\"\n    (click)=\"onInputClick($event)\"\n    [attr.id]=\"id() ?? null\"\n    (input)=\"onInput($event)\"\n    [value]=\"displayValue()\"\n    [attr.inputmode]=\"'tel'\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n\n<ng-template #countryPopover=\"solarisPopover\" solaris-popover>\n  <solaris-phone-country-list\n    [countries]=\"countries()\"\n    [selectedCode]=\"effectiveCountry()\"\n    [searchable]=\"searchable()\"\n    [searchPlaceholder]=\"searchPlaceholderText()\"\n    [noResultsText]=\"noResultsTextValue()\"\n    [emptyText]=\"emptyTextValue()\"\n    [maxHeight]=\"panelMaxHeight()\"\n    (countrySelected)=\"selectCountry($event)\"\n    (closeRequest)=\"closeCountryPanel()\"\n  />\n</ng-template>\n", styles: [":host{--solaris-phone-field-country-gap: var(--solaris-spacing-1);--solaris-phone-field-country-padding-inline: var(--solaris-spacing-2);--solaris-phone-field-dial-code-color: var(--solaris-text-muted);--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-text-default);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}:host .solaris-phone-field__country.solaris-form-prefix:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:.5}.solaris-phone-field__flag{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-phone-field-flag-size);font-size:var(--solaris-font-size-sm);line-height:1}.solaris-phone-field__flag svg{display:block;width:100%;height:auto}:host .solaris-phone-field__country .solaris-phone-field__chevron{flex-shrink:0;color:var(--solaris-text-muted);block-size:var(--solaris-phone-field-chevron-size);inline-size:var(--solaris-phone-field-chevron-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-phone-field__chevron{transform:rotate(180deg)}.solaris-phone-field__dial-code{flex:0 0 auto;-webkit-user-select:none;user-select:none;cursor:default;color:var(--solaris-phone-field-dial-code-color);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md);margin-inline-end:var(--solaris-spacing-1)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputElementRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], popoverTrigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SolarisPopoverTriggerDirective), { isSignal: true }] }], projectedPrefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormPrefixDirective), { isSignal: true }] }], projectedSuffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SolarisFormSuffixDirective), { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], errorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorKey", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], invalidError: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidError", required: false }] }], requiredError: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredError", required: false }] }], placeholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKey", required: false }] }], invalidErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidErrorKey", required: false }] }], requiredErrorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredErrorKey", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], defaultCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCountry", required: false }] }], country: [{ type: i0.Input, args: [{ isSignal: true, alias: "country", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], allowAnyCountry: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAnyCountry", required: false }] }], countryList: [{ type: i0.Input, args: [{ isSignal: true, alias: "countryList", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], emptyTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTextKey", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], noResultsTextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsTextKey", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchPlaceholderKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholderKey", required: false }] }], countryButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countryButtonLabel", required: false }] }], countryButtonLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "countryButtonLabelKey", required: false }] }], panelMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxWidth", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], countryChange: [{ type: i0.Output, args: ["countryChange"] }] } });
+
+function solarisPhoneValidator(country) {
+    return (control) => {
+        const value = control.value;
+        if (value == null || value === '') {
+            return null;
+        }
+        const parsed = parsePhoneNumberFromString(String(value), country);
+        if (!parsed || !parsed.isValid()) {
+            return { solarisPhoneInvalid: true };
+        }
+        return null;
+    };
+}
+
 class SolarisSkeletonComponent {
     variant = input('text', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     animation = input('pulse', ...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
@@ -10113,7 +10790,7 @@ class SolarisToastComponent {
         return key;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisToastComponent, isStandalone: true, selector: "solaris-toast", inputs: { entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()" }, properties: { "attr.role": "hostRole()", "attr.aria-live": "hostAriaLive()", "attr.data-variant": "hostDataVariant()", "attr.data-icon-size": "hostDataIconSize()", "attr.data-appearance": "hostDataAppearance()", "attr.data-media-shape": "hostDataMediaShape()", "attr.data-actions-align": "hostDataActionsAlign()", "attr.data-center-content": "centerContent()", "attr.data-actions-no-desc": "hasActionsNoDescription()" } }, ngImport: i0, template: "<div class=\"solaris-toast__root\">\n  @if (showIcon()) {\n    <div class=\"solaris-toast__media\">\n      <div class=\"solaris-toast__icon\">\n        <solaris-icon\n          [name]=\"entry().resolvedIcon\"\n          [decorative]=\"entry().options.iconDecorative !== false\"\n        />\n      </div>\n    </div>\n  }\n\n  <div class=\"solaris-toast__content\">\n    @if (showTitle()) {\n      <div class=\"solaris-toast__title\">{{ entry().resolvedTitle }}</div>\n    }\n\n    @if (showDescription()) {\n      <div\n        class=\"solaris-toast__description\"\n        [class.solaris-toast__description--truncated]=\"isTruncated()\"\n        [style.--solaris-toast-max-lines]=\"entry().resolvedMaxCollapsedLines\"\n      >\n        {{ entry().resolvedDescription }}\n      </div>\n    }\n\n    @if (showActions()) {\n      <div class=\"solaris-toast__actions\">\n        @for (action of entry().resolvedActions; track $index) {\n          <button\n            solaris-button\n            [appearance]=\"action.appearance ?? 'ghost'\"\n            [color]=\"action.color ?? 'neutral'\"\n            size=\"sm\"\n            [disabled]=\"action.disabled ?? false\"\n            (click)=\"handleActionClick(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"solaris-toast__trailing\">\n    @if (isExpandable()) {\n      <button\n        type=\"button\"\n        class=\"solaris-toast__trailing-btn\"\n        [attr.aria-label]=\"expandButtonLabel()\"\n        [attr.aria-expanded]=\"expanded()\"\n        (click)=\"toggleExpanded()\"\n      >\n        <solaris-icon\n          class=\"solaris-toast__expand-icon\"\n          [class.solaris-toast__expand-icon--expanded]=\"expanded()\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n        />\n      </button>\n    }\n\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"solaris-toast__trailing-btn\"\n        [attr.aria-label]=\"entry().resolvedCloseLabel\"\n        (click)=\"handleDismiss()\"\n      >\n        <solaris-icon name=\"x\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n</div>\n\n@if (showProgressBar()) {\n  <div\n    class=\"solaris-toast__progress\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"progressValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"\n      isProcessProgress()\n        ? translate('solaris.toast.progress')\n        : translate('solaris.toast.remaining')\n    \"\n  >\n    <div\n      class=\"solaris-toast__progress-bar\"\n      [style.width.%]=\"progressValue()\"\n    ></div>\n  </div>\n}\n\n@if (showCountdownText()) {\n  <div class=\"solaris-toast__countdown-text\">\n    <span class=\"solaris-toast__countdown-message\">{{ countdownText() }}</span>\n    <button\n      type=\"button\"\n      class=\"solaris-toast__countdown-toggle\"\n      (click)=\"togglePause()\"\n    >\n      {{ pauseButtonLabel() }}\n    </button>\n  </div>\n}\n", styles: [":host{--solaris-toast-max-lines: 2;--solaris-toast-width: 800px;--solaris-toast-border-width: 0;--solaris-toast-max-width: 800px;--solaris-toast-border-color: transparent;--solaris-toast-gap: var(--solaris-spacing-3);--solaris-toast-radius: var(--solaris-radius-md);--solaris-toast-shadow: var(--solaris-shadow-lg);--solaris-toast-padding: var(--solaris-spacing-2);--solaris-toast-color: var(--solaris-text-default);--solaris-toast-close-size: var(--solaris-spacing-4);--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-content-gap: var(--solaris-spacing-1);--solaris-toast-actions-gap: var(--solaris-spacing-2);--solaris-toast-radius-value: var(--solaris-radius-md);--solaris-toast-icon-size: var(--solaris-font-size-lg);--solaris-toast-shadow-value: var(--solaris-shadow-lg);--solaris-toast-title-color: var(--solaris-text-strong);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-action-color: var(--solaris-primary-base);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-progress-height: var(--solaris-spacing-1);--solaris-toast-description-color: var(--solaris-text-muted);--solaris-toast-close-icon-size: var(--solaris-font-size-lg);display:block;overflow:hidden;pointer-events:auto;box-sizing:border-box;width:var(--solaris-toast-width);max-width:var(--solaris-toast-max-width);box-shadow:var(--solaris-toast-shadow-value);border-radius:var(--solaris-toast-radius-value);animation:solaris-toast-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__root{display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-toast-gap);color:var(--solaris-toast-color);padding:var(--solaris-toast-padding);border-radius:var(--solaris-radius-md);background:var(--solaris-toast-background);border:var(--solaris-toast-border-width) solid var(--solaris-toast-border-color)}:host([data-center-content=true]) .solaris-toast__root{align-items:center}:host([data-center-content=true]) .solaris-toast__trailing{align-self:center}:host([data-center-content=true]) .solaris-toast__media{margin-top:0}.solaris-toast__media{display:grid;flex-shrink:0;overflow:hidden;place-items:center;margin-top:var(--solaris-spacing-1);width:var(--solaris-toast-media-size);height:var(--solaris-toast-media-size)}.solaris-toast__icon solaris-icon,.solaris-toast__icon svg{display:block;width:var(--solaris-toast-icon-size);height:var(--solaris-toast-icon-size)}.solaris-toast__icon{display:grid;place-items:center;color:var(--solaris-toast-icon-color)}.solaris-toast__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-toast-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-toast__title{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-md);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold);color:var(--solaris-toast-title-color)}.solaris-toast__description--truncated{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--solaris-toast-max-lines)}.solaris-toast__description{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);color:var(--solaris-toast-description-color)}.solaris-toast__trailing{display:flex;flex-shrink:0;align-self:flex-start;gap:var(--solaris-spacing-2)}.solaris-toast__trailing-btn:hover{color:var(--solaris-text-default)}.solaris-toast__trailing-btn:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-toast__trailing-btn solaris-icon,.solaris-toast__trailing-btn svg{display:block;width:var(--solaris-toast-close-icon-size);height:var(--solaris-toast-close-icon-size)}.solaris-toast__trailing-btn{all:unset;display:grid;flex-shrink:0;cursor:pointer;place-items:center;box-sizing:border-box;background:transparent;color:var(--solaris-text-muted);width:var(--solaris-toast-close-size);height:var(--solaris-toast-close-size);border-radius:var(--solaris-radius-sm);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__expand-icon--expanded{transform:rotate(180deg)}.solaris-toast__expand-icon{transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-toast-actions-gap);margin-block-start:var(--solaris-spacing-2)}:host([data-actions-align=start]) .solaris-toast__actions{justify-content:flex-start}:host([data-actions-align=center]) .solaris-toast__actions{justify-content:center}:host([data-actions-align=end]) .solaris-toast__actions{justify-content:flex-end}:host([data-actions-align=stretch]) .solaris-toast__actions [solaris-button]{flex:1}:host([data-actions-align=stretch]) .solaris-toast__actions{justify-content:stretch}.solaris-toast__progress{overflow:hidden;background:var(--solaris-surface-muted);height:var(--solaris-toast-progress-height)}.solaris-toast__progress-bar{height:100%;transition:width .1s var(--solaris-motion-easing-standard);background:var(--solaris-toast-progress-color)}.solaris-toast__countdown-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--solaris-spacing-1);color:var(--solaris-text-muted);background:var(--solaris-bg-page);font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);padding:var(--solaris-toast-padding) var(--solaris-spacing-4)}.solaris-toast__countdown-toggle:hover{text-decoration:underline}.solaris-toast__countdown-toggle:focus-visible{outline-offset:2px;text-decoration:underline;border-radius:var(--solaris-radius-sm);outline:2px solid var(--solaris-primary-base)}.solaris-toast__countdown-toggle{all:unset;cursor:pointer;white-space:nowrap;line-height:inherit;text-decoration:none;color:var(--solaris-text-default);font-weight:var(--solaris-font-weight-bold)}:host([data-icon-size=sm]){--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-size: var(--solaris-font-size-lg)}:host([data-icon-size=md]){--solaris-toast-media-size: var(--solaris-spacing-8);--solaris-toast-icon-size: var(--solaris-font-size-2xl)}:host([data-icon-size=lg]){--solaris-toast-media-size: var(--solaris-spacing-10);--solaris-toast-icon-size: var(--solaris-font-size-3xl)}:host([data-media-shape=circle]) .solaris-toast__media{border-radius:50%}:host([data-media-shape=rounded]) .solaris-toast__media{border-radius:var(--solaris-radius-md)}:host([data-media-shape=square]) .solaris-toast__media{border-radius:0}:host([data-variant=neutral][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted)}:host([data-variant=neutral][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-border-color: var(--solaris-border-default);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=info][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised)}:host([data-variant=info][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-border-color: var(--solaris-info-border);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=success][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-success-base)}:host([data-variant=success][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-success-border);--solaris-toast-progress-color: var(--solaris-success-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=warning][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-warning-base)}:host([data-variant=warning][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-warning-border);--solaris-toast-progress-color: var(--solaris-warning-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=danger][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-danger-base)}:host([data-variant=danger][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-danger-border);--solaris-toast-progress-color: var(--solaris-danger-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-primary-base)}:host([data-variant=loading][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-primary-border);--solaris-toast-progress-color: var(--solaris-primary-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=custom]){--solaris-toast-color: var( --solaris-toast-custom-color, var(--solaris-text-default) );--solaris-toast-icon-color: var( --solaris-toast-custom-icon-color, var(--solaris-text-muted) );--solaris-toast-background: var( --solaris-toast-custom-background, var(--solaris-surface-raised) );--solaris-toast-border-color: var( --solaris-toast-custom-border-color, var(--solaris-border-default) );--solaris-toast-progress-color: var( --solaris-toast-custom-progress-color, var(--solaris-primary-base) )}:host([data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent}:host([data-appearance=outline]){--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading]) .solaris-toast__icon{animation:solaris-toast-spin 1s var(--solaris-motion-easing-linear) infinite}@keyframes solaris-toast-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes solaris-toast-enter{0%{opacity:0;transform:translateY(-16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host([data-variant=loading]) .solaris-toast__icon{animation:none}}:host-context([data-reduced-motion=true]){animation:none}:host([data-reduced-motion=true][data-variant=loading]) .solaris-toast__icon{animation:none}@media(width<=640px){:host{--solaris-toast-width: 100%;--solaris-toast-max-width: 100%}}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["appearance", "color", "radius", "density", "shape", "loading", "disabled", "fullWidth", "loadingLabelKey", "loadingLabel", "icon", "iconPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisToastComponent, isStandalone: true, selector: "solaris-toast", inputs: { entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()" }, properties: { "attr.role": "hostRole()", "attr.aria-live": "hostAriaLive()", "attr.data-variant": "hostDataVariant()", "attr.data-icon-size": "hostDataIconSize()", "attr.data-appearance": "hostDataAppearance()", "attr.data-media-shape": "hostDataMediaShape()", "attr.data-actions-align": "hostDataActionsAlign()", "attr.data-center-content": "centerContent()", "attr.data-actions-no-desc": "hasActionsNoDescription()" } }, ngImport: i0, template: "<div class=\"solaris-toast__root\">\n  <div class=\"solaris-toast__bar\"></div>\n\n  @if (showIcon()) {\n    <div class=\"solaris-toast__media\">\n      <div class=\"solaris-toast__icon\">\n        <solaris-icon\n          [name]=\"entry().resolvedIcon\"\n          [decorative]=\"entry().options.iconDecorative !== false\"\n        />\n      </div>\n    </div>\n  }\n\n  <div class=\"solaris-toast__content\">\n    @if (showTitle()) {\n      <div class=\"solaris-toast__title\">{{ entry().resolvedTitle }}</div>\n    }\n\n    @if (showDescription()) {\n      <div\n        class=\"solaris-toast__description\"\n        [class.solaris-toast__description--truncated]=\"isTruncated()\"\n        [style.--solaris-toast-max-lines]=\"entry().resolvedMaxCollapsedLines\"\n      >\n        {{ entry().resolvedDescription }}\n      </div>\n    }\n\n    @if (showActions()) {\n      <div class=\"solaris-toast__actions\">\n        @for (action of entry().resolvedActions; track $index) {\n          <button\n            solaris-button\n            [appearance]=\"action.appearance ?? 'ghost'\"\n            [color]=\"action.color ?? 'neutral'\"\n            size=\"sm\"\n            [disabled]=\"action.disabled ?? false\"\n            (click)=\"handleActionClick(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"solaris-toast__trailing\">\n    @if (isExpandable()) {\n      <button\n        type=\"button\"\n        class=\"solaris-toast__trailing-btn\"\n        [attr.aria-label]=\"expandButtonLabel()\"\n        [attr.aria-expanded]=\"expanded()\"\n        (click)=\"toggleExpanded()\"\n      >\n        <solaris-icon\n          class=\"solaris-toast__expand-icon\"\n          [class.solaris-toast__expand-icon--expanded]=\"expanded()\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n        />\n      </button>\n    }\n\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"solaris-toast__trailing-btn\"\n        [attr.aria-label]=\"entry().resolvedCloseLabel\"\n        (click)=\"handleDismiss()\"\n      >\n        <solaris-icon name=\"x\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n</div>\n\n@if (showProgressBar()) {\n  <div\n    class=\"solaris-toast__progress\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"progressValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"\n      isProcessProgress()\n        ? translate('solaris.toast.progress')\n        : translate('solaris.toast.remaining')\n    \"\n  >\n    <div\n      class=\"solaris-toast__progress-bar\"\n      [style.width.%]=\"progressValue()\"\n    ></div>\n  </div>\n}\n\n@if (showCountdownText()) {\n  <div class=\"solaris-toast__countdown-text\">\n    <span class=\"solaris-toast__countdown-message\">{{ countdownText() }}</span>\n    <button\n      type=\"button\"\n      class=\"solaris-toast__countdown-toggle\"\n      (click)=\"togglePause()\"\n    >\n      {{ pauseButtonLabel() }}\n    </button>\n  </div>\n}\n", styles: [":host{--solaris-toast-max-lines: 2;--solaris-toast-border-width: 0;--solaris-toast-max-width: 800px;--solaris-toast-width: fit-content;--solaris-toast-border-color: transparent;--solaris-toast-gap: var(--solaris-spacing-3);--solaris-toast-radius: var(--solaris-radius-md);--solaris-toast-shadow: var(--solaris-shadow-lg);--solaris-toast-padding: var(--solaris-spacing-3);--solaris-toast-color: var(--solaris-text-default);--solaris-toast-close-size: var(--solaris-spacing-4);--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-content-gap: var(--solaris-spacing-1);--solaris-toast-actions-gap: var(--solaris-spacing-2);--solaris-toast-radius-value: var(--solaris-radius-md);--solaris-toast-icon-size: var(--solaris-font-size-lg);--solaris-toast-shadow-value: var(--solaris-shadow-lg);--solaris-toast-title-color: var(--solaris-text-strong);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-action-color: var(--solaris-primary-base);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-progress-height: var(--solaris-spacing-1);--solaris-toast-description-color: var(--solaris-text-muted);--solaris-toast-close-icon-size: var(--solaris-font-size-lg);display:block;overflow:hidden;pointer-events:auto;box-sizing:border-box;width:var(--solaris-toast-width);margin-top:var(--solaris-spacing-4);max-width:var(--solaris-toast-max-width);box-shadow:var(--solaris-toast-shadow-value);border-radius:var(--solaris-toast-radius-value);animation:solaris-toast-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__root{display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-toast-gap);color:var(--solaris-toast-color);padding:var(--solaris-toast-padding);border-radius:var(--solaris-radius-md);background:var(--solaris-toast-background);border:var(--solaris-toast-border-width) solid var(--solaris-toast-border-color)}:host([data-center-content=true]) .solaris-toast__root{align-items:center}:host([data-center-content=true]) .solaris-toast__trailing{align-self:center}:host([data-center-content=true]) .solaris-toast__media{margin-top:0}.solaris-toast__bar{width:3px;flex-shrink:0;align-self:stretch;border-radius:var(--solaris-radius-full);background:var(--solaris-toast-icon-color)}.solaris-toast__media{display:grid;flex-shrink:0;overflow:hidden;place-items:center;margin-top:var(--solaris-spacing-1);width:var(--solaris-toast-media-size);height:var(--solaris-toast-media-size)}.solaris-toast__icon solaris-icon,.solaris-toast__icon svg{display:block;width:var(--solaris-toast-icon-size);height:var(--solaris-toast-icon-size)}.solaris-toast__icon{display:grid;place-items:center;color:var(--solaris-toast-icon-color)}.solaris-toast__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-toast-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-toast__title{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-md);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold);color:var(--solaris-toast-title-color)}.solaris-toast__description--truncated{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--solaris-toast-max-lines)}.solaris-toast__description{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);color:var(--solaris-toast-description-color)}.solaris-toast__trailing{display:flex;flex-shrink:0;align-self:flex-start;gap:var(--solaris-spacing-2)}.solaris-toast__trailing-btn:hover{color:var(--solaris-text-default)}.solaris-toast__trailing-btn:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-toast__trailing-btn solaris-icon,.solaris-toast__trailing-btn svg{display:block;width:var(--solaris-toast-close-icon-size);height:var(--solaris-toast-close-icon-size)}.solaris-toast__trailing-btn{all:unset;display:grid;flex-shrink:0;cursor:pointer;place-items:center;box-sizing:border-box;background:transparent;color:var(--solaris-text-muted);width:var(--solaris-toast-close-size);height:var(--solaris-toast-close-size);border-radius:var(--solaris-radius-sm);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__expand-icon--expanded{transform:rotate(180deg)}.solaris-toast__expand-icon{transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-toast-actions-gap);margin-block-start:var(--solaris-spacing-2)}:host([data-actions-align=start]) .solaris-toast__actions{justify-content:flex-start}:host([data-actions-align=center]) .solaris-toast__actions{justify-content:center}:host([data-actions-align=end]) .solaris-toast__actions{justify-content:flex-end}:host([data-actions-align=stretch]) .solaris-toast__actions [solaris-button]{flex:1}:host([data-actions-align=stretch]) .solaris-toast__actions{justify-content:stretch}.solaris-toast__progress{overflow:hidden;background:var(--solaris-surface-muted);height:var(--solaris-toast-progress-height)}.solaris-toast__progress-bar{height:100%;transition:width .1s var(--solaris-motion-easing-standard);background:var(--solaris-toast-progress-color)}.solaris-toast__countdown-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--solaris-spacing-1);color:var(--solaris-text-muted);background:var(--solaris-bg-page);font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);padding:var(--solaris-toast-padding) var(--solaris-spacing-4)}.solaris-toast__countdown-toggle:hover{text-decoration:underline}.solaris-toast__countdown-toggle:focus-visible{outline-offset:2px;text-decoration:underline;border-radius:var(--solaris-radius-sm);outline:2px solid var(--solaris-primary-base)}.solaris-toast__countdown-toggle{all:unset;cursor:pointer;white-space:nowrap;line-height:inherit;text-decoration:none;color:var(--solaris-text-default);font-weight:var(--solaris-font-weight-bold)}:host([data-icon-size=sm]){--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-size: var(--solaris-font-size-lg)}:host([data-icon-size=md]){--solaris-toast-media-size: var(--solaris-spacing-8);--solaris-toast-icon-size: var(--solaris-font-size-2xl)}:host([data-icon-size=lg]){--solaris-toast-media-size: var(--solaris-spacing-10);--solaris-toast-icon-size: var(--solaris-font-size-3xl)}:host([data-media-shape=circle]) .solaris-toast__media{border-radius:50%}:host([data-media-shape=rounded]) .solaris-toast__media{border-radius:var(--solaris-radius-md)}:host([data-media-shape=square]) .solaris-toast__media{border-radius:0}:host([data-variant=neutral][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted)}:host([data-variant=neutral][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-border-color: var(--solaris-border-default);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=info][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised)}:host([data-variant=info][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-border-color: var(--solaris-info-border);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=success][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-success-base)}:host([data-variant=success][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-success-border);--solaris-toast-progress-color: var(--solaris-success-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=warning][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-warning-base)}:host([data-variant=warning][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-warning-border);--solaris-toast-progress-color: var(--solaris-warning-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=danger][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-danger-base)}:host([data-variant=danger][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-danger-border);--solaris-toast-progress-color: var(--solaris-danger-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-primary-base)}:host([data-variant=loading][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-primary-border);--solaris-toast-progress-color: var(--solaris-primary-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=custom]){--solaris-toast-color: var( --solaris-toast-custom-color, var(--solaris-text-default) );--solaris-toast-icon-color: var( --solaris-toast-custom-icon-color, var(--solaris-text-muted) );--solaris-toast-background: var( --solaris-toast-custom-background, var(--solaris-surface-raised) );--solaris-toast-border-color: var( --solaris-toast-custom-border-color, var(--solaris-border-default) );--solaris-toast-progress-color: var( --solaris-toast-custom-progress-color, var(--solaris-primary-base) )}:host([data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent}:host([data-appearance=outline]){--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading]) .solaris-toast__icon{animation:solaris-toast-spin 1s var(--solaris-motion-easing-linear) infinite}@keyframes solaris-toast-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes solaris-toast-enter{0%{opacity:0;transform:translateY(-16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host([data-variant=loading]) .solaris-toast__icon{animation:none}}:host-context([data-reduced-motion=true]){animation:none}:host([data-reduced-motion=true][data-variant=loading]) .solaris-toast__icon{animation:none}@media(width<=640px){:host{--solaris-toast-width: 100%;--solaris-toast-max-width: 100%}}\n"], dependencies: [{ kind: "component", type: SolarisIconComponent, selector: "solaris-icon", inputs: ["name", "ariaLabel", "decorative", "inheritColor"] }, { kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["iconPosition", "appearance", "color", "shape", "radius", "density", "fullWidth", "disabled", "loading", "loadingLabelKey", "loadingLabel", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisToastComponent, decorators: [{
             type: Component,
@@ -10127,7 +10804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-actions-align]': 'hostDataActionsAlign()',
                         '[attr.data-center-content]': 'centerContent()',
                         '[attr.data-actions-no-desc]': 'hasActionsNoDescription()',
-                    }, template: "<div class=\"solaris-toast__root\">\n  @if (showIcon()) {\n    <div class=\"solaris-toast__media\">\n      <div class=\"solaris-toast__icon\">\n        <solaris-icon\n          [name]=\"entry().resolvedIcon\"\n          [decorative]=\"entry().options.iconDecorative !== false\"\n        />\n      </div>\n    </div>\n  }\n\n  <div class=\"solaris-toast__content\">\n    @if (showTitle()) {\n      <div class=\"solaris-toast__title\">{{ entry().resolvedTitle }}</div>\n    }\n\n    @if (showDescription()) {\n      <div\n        class=\"solaris-toast__description\"\n        [class.solaris-toast__description--truncated]=\"isTruncated()\"\n        [style.--solaris-toast-max-lines]=\"entry().resolvedMaxCollapsedLines\"\n      >\n        {{ entry().resolvedDescription }}\n      </div>\n    }\n\n    @if (showActions()) {\n      <div class=\"solaris-toast__actions\">\n        @for (action of entry().resolvedActions; track $index) {\n          <button\n            solaris-button\n            [appearance]=\"action.appearance ?? 'ghost'\"\n            [color]=\"action.color ?? 'neutral'\"\n            size=\"sm\"\n            [disabled]=\"action.disabled ?? false\"\n            (click)=\"handleActionClick(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"solaris-toast__trailing\">\n    @if (isExpandable()) {\n      <button\n        type=\"button\"\n        class=\"solaris-toast__trailing-btn\"\n        [attr.aria-label]=\"expandButtonLabel()\"\n        [attr.aria-expanded]=\"expanded()\"\n        (click)=\"toggleExpanded()\"\n      >\n        <solaris-icon\n          class=\"solaris-toast__expand-icon\"\n          [class.solaris-toast__expand-icon--expanded]=\"expanded()\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n        />\n      </button>\n    }\n\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"solaris-toast__trailing-btn\"\n        [attr.aria-label]=\"entry().resolvedCloseLabel\"\n        (click)=\"handleDismiss()\"\n      >\n        <solaris-icon name=\"x\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n</div>\n\n@if (showProgressBar()) {\n  <div\n    class=\"solaris-toast__progress\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"progressValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"\n      isProcessProgress()\n        ? translate('solaris.toast.progress')\n        : translate('solaris.toast.remaining')\n    \"\n  >\n    <div\n      class=\"solaris-toast__progress-bar\"\n      [style.width.%]=\"progressValue()\"\n    ></div>\n  </div>\n}\n\n@if (showCountdownText()) {\n  <div class=\"solaris-toast__countdown-text\">\n    <span class=\"solaris-toast__countdown-message\">{{ countdownText() }}</span>\n    <button\n      type=\"button\"\n      class=\"solaris-toast__countdown-toggle\"\n      (click)=\"togglePause()\"\n    >\n      {{ pauseButtonLabel() }}\n    </button>\n  </div>\n}\n", styles: [":host{--solaris-toast-max-lines: 2;--solaris-toast-width: 800px;--solaris-toast-border-width: 0;--solaris-toast-max-width: 800px;--solaris-toast-border-color: transparent;--solaris-toast-gap: var(--solaris-spacing-3);--solaris-toast-radius: var(--solaris-radius-md);--solaris-toast-shadow: var(--solaris-shadow-lg);--solaris-toast-padding: var(--solaris-spacing-2);--solaris-toast-color: var(--solaris-text-default);--solaris-toast-close-size: var(--solaris-spacing-4);--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-content-gap: var(--solaris-spacing-1);--solaris-toast-actions-gap: var(--solaris-spacing-2);--solaris-toast-radius-value: var(--solaris-radius-md);--solaris-toast-icon-size: var(--solaris-font-size-lg);--solaris-toast-shadow-value: var(--solaris-shadow-lg);--solaris-toast-title-color: var(--solaris-text-strong);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-action-color: var(--solaris-primary-base);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-progress-height: var(--solaris-spacing-1);--solaris-toast-description-color: var(--solaris-text-muted);--solaris-toast-close-icon-size: var(--solaris-font-size-lg);display:block;overflow:hidden;pointer-events:auto;box-sizing:border-box;width:var(--solaris-toast-width);max-width:var(--solaris-toast-max-width);box-shadow:var(--solaris-toast-shadow-value);border-radius:var(--solaris-toast-radius-value);animation:solaris-toast-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__root{display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-toast-gap);color:var(--solaris-toast-color);padding:var(--solaris-toast-padding);border-radius:var(--solaris-radius-md);background:var(--solaris-toast-background);border:var(--solaris-toast-border-width) solid var(--solaris-toast-border-color)}:host([data-center-content=true]) .solaris-toast__root{align-items:center}:host([data-center-content=true]) .solaris-toast__trailing{align-self:center}:host([data-center-content=true]) .solaris-toast__media{margin-top:0}.solaris-toast__media{display:grid;flex-shrink:0;overflow:hidden;place-items:center;margin-top:var(--solaris-spacing-1);width:var(--solaris-toast-media-size);height:var(--solaris-toast-media-size)}.solaris-toast__icon solaris-icon,.solaris-toast__icon svg{display:block;width:var(--solaris-toast-icon-size);height:var(--solaris-toast-icon-size)}.solaris-toast__icon{display:grid;place-items:center;color:var(--solaris-toast-icon-color)}.solaris-toast__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-toast-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-toast__title{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-md);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold);color:var(--solaris-toast-title-color)}.solaris-toast__description--truncated{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--solaris-toast-max-lines)}.solaris-toast__description{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);color:var(--solaris-toast-description-color)}.solaris-toast__trailing{display:flex;flex-shrink:0;align-self:flex-start;gap:var(--solaris-spacing-2)}.solaris-toast__trailing-btn:hover{color:var(--solaris-text-default)}.solaris-toast__trailing-btn:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-toast__trailing-btn solaris-icon,.solaris-toast__trailing-btn svg{display:block;width:var(--solaris-toast-close-icon-size);height:var(--solaris-toast-close-icon-size)}.solaris-toast__trailing-btn{all:unset;display:grid;flex-shrink:0;cursor:pointer;place-items:center;box-sizing:border-box;background:transparent;color:var(--solaris-text-muted);width:var(--solaris-toast-close-size);height:var(--solaris-toast-close-size);border-radius:var(--solaris-radius-sm);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__expand-icon--expanded{transform:rotate(180deg)}.solaris-toast__expand-icon{transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-toast-actions-gap);margin-block-start:var(--solaris-spacing-2)}:host([data-actions-align=start]) .solaris-toast__actions{justify-content:flex-start}:host([data-actions-align=center]) .solaris-toast__actions{justify-content:center}:host([data-actions-align=end]) .solaris-toast__actions{justify-content:flex-end}:host([data-actions-align=stretch]) .solaris-toast__actions [solaris-button]{flex:1}:host([data-actions-align=stretch]) .solaris-toast__actions{justify-content:stretch}.solaris-toast__progress{overflow:hidden;background:var(--solaris-surface-muted);height:var(--solaris-toast-progress-height)}.solaris-toast__progress-bar{height:100%;transition:width .1s var(--solaris-motion-easing-standard);background:var(--solaris-toast-progress-color)}.solaris-toast__countdown-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--solaris-spacing-1);color:var(--solaris-text-muted);background:var(--solaris-bg-page);font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);padding:var(--solaris-toast-padding) var(--solaris-spacing-4)}.solaris-toast__countdown-toggle:hover{text-decoration:underline}.solaris-toast__countdown-toggle:focus-visible{outline-offset:2px;text-decoration:underline;border-radius:var(--solaris-radius-sm);outline:2px solid var(--solaris-primary-base)}.solaris-toast__countdown-toggle{all:unset;cursor:pointer;white-space:nowrap;line-height:inherit;text-decoration:none;color:var(--solaris-text-default);font-weight:var(--solaris-font-weight-bold)}:host([data-icon-size=sm]){--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-size: var(--solaris-font-size-lg)}:host([data-icon-size=md]){--solaris-toast-media-size: var(--solaris-spacing-8);--solaris-toast-icon-size: var(--solaris-font-size-2xl)}:host([data-icon-size=lg]){--solaris-toast-media-size: var(--solaris-spacing-10);--solaris-toast-icon-size: var(--solaris-font-size-3xl)}:host([data-media-shape=circle]) .solaris-toast__media{border-radius:50%}:host([data-media-shape=rounded]) .solaris-toast__media{border-radius:var(--solaris-radius-md)}:host([data-media-shape=square]) .solaris-toast__media{border-radius:0}:host([data-variant=neutral][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted)}:host([data-variant=neutral][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-border-color: var(--solaris-border-default);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=info][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised)}:host([data-variant=info][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-border-color: var(--solaris-info-border);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=success][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-success-base)}:host([data-variant=success][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-success-border);--solaris-toast-progress-color: var(--solaris-success-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=warning][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-warning-base)}:host([data-variant=warning][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-warning-border);--solaris-toast-progress-color: var(--solaris-warning-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=danger][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-danger-base)}:host([data-variant=danger][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-danger-border);--solaris-toast-progress-color: var(--solaris-danger-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-primary-base)}:host([data-variant=loading][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-primary-border);--solaris-toast-progress-color: var(--solaris-primary-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=custom]){--solaris-toast-color: var( --solaris-toast-custom-color, var(--solaris-text-default) );--solaris-toast-icon-color: var( --solaris-toast-custom-icon-color, var(--solaris-text-muted) );--solaris-toast-background: var( --solaris-toast-custom-background, var(--solaris-surface-raised) );--solaris-toast-border-color: var( --solaris-toast-custom-border-color, var(--solaris-border-default) );--solaris-toast-progress-color: var( --solaris-toast-custom-progress-color, var(--solaris-primary-base) )}:host([data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent}:host([data-appearance=outline]){--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading]) .solaris-toast__icon{animation:solaris-toast-spin 1s var(--solaris-motion-easing-linear) infinite}@keyframes solaris-toast-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes solaris-toast-enter{0%{opacity:0;transform:translateY(-16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host([data-variant=loading]) .solaris-toast__icon{animation:none}}:host-context([data-reduced-motion=true]){animation:none}:host([data-reduced-motion=true][data-variant=loading]) .solaris-toast__icon{animation:none}@media(width<=640px){:host{--solaris-toast-width: 100%;--solaris-toast-max-width: 100%}}\n"] }]
+                    }, template: "<div class=\"solaris-toast__root\">\n  <div class=\"solaris-toast__bar\"></div>\n\n  @if (showIcon()) {\n    <div class=\"solaris-toast__media\">\n      <div class=\"solaris-toast__icon\">\n        <solaris-icon\n          [name]=\"entry().resolvedIcon\"\n          [decorative]=\"entry().options.iconDecorative !== false\"\n        />\n      </div>\n    </div>\n  }\n\n  <div class=\"solaris-toast__content\">\n    @if (showTitle()) {\n      <div class=\"solaris-toast__title\">{{ entry().resolvedTitle }}</div>\n    }\n\n    @if (showDescription()) {\n      <div\n        class=\"solaris-toast__description\"\n        [class.solaris-toast__description--truncated]=\"isTruncated()\"\n        [style.--solaris-toast-max-lines]=\"entry().resolvedMaxCollapsedLines\"\n      >\n        {{ entry().resolvedDescription }}\n      </div>\n    }\n\n    @if (showActions()) {\n      <div class=\"solaris-toast__actions\">\n        @for (action of entry().resolvedActions; track $index) {\n          <button\n            solaris-button\n            [appearance]=\"action.appearance ?? 'ghost'\"\n            [color]=\"action.color ?? 'neutral'\"\n            size=\"sm\"\n            [disabled]=\"action.disabled ?? false\"\n            (click)=\"handleActionClick(action)\"\n          >\n            {{ action.label }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"solaris-toast__trailing\">\n    @if (isExpandable()) {\n      <button\n        type=\"button\"\n        class=\"solaris-toast__trailing-btn\"\n        [attr.aria-label]=\"expandButtonLabel()\"\n        [attr.aria-expanded]=\"expanded()\"\n        (click)=\"toggleExpanded()\"\n      >\n        <solaris-icon\n          class=\"solaris-toast__expand-icon\"\n          [class.solaris-toast__expand-icon--expanded]=\"expanded()\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n        />\n      </button>\n    }\n\n    @if (showClose()) {\n      <button\n        type=\"button\"\n        class=\"solaris-toast__trailing-btn\"\n        [attr.aria-label]=\"entry().resolvedCloseLabel\"\n        (click)=\"handleDismiss()\"\n      >\n        <solaris-icon name=\"x\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n</div>\n\n@if (showProgressBar()) {\n  <div\n    class=\"solaris-toast__progress\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"progressValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"\n      isProcessProgress()\n        ? translate('solaris.toast.progress')\n        : translate('solaris.toast.remaining')\n    \"\n  >\n    <div\n      class=\"solaris-toast__progress-bar\"\n      [style.width.%]=\"progressValue()\"\n    ></div>\n  </div>\n}\n\n@if (showCountdownText()) {\n  <div class=\"solaris-toast__countdown-text\">\n    <span class=\"solaris-toast__countdown-message\">{{ countdownText() }}</span>\n    <button\n      type=\"button\"\n      class=\"solaris-toast__countdown-toggle\"\n      (click)=\"togglePause()\"\n    >\n      {{ pauseButtonLabel() }}\n    </button>\n  </div>\n}\n", styles: [":host{--solaris-toast-max-lines: 2;--solaris-toast-border-width: 0;--solaris-toast-max-width: 800px;--solaris-toast-width: fit-content;--solaris-toast-border-color: transparent;--solaris-toast-gap: var(--solaris-spacing-3);--solaris-toast-radius: var(--solaris-radius-md);--solaris-toast-shadow: var(--solaris-shadow-lg);--solaris-toast-padding: var(--solaris-spacing-3);--solaris-toast-color: var(--solaris-text-default);--solaris-toast-close-size: var(--solaris-spacing-4);--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-content-gap: var(--solaris-spacing-1);--solaris-toast-actions-gap: var(--solaris-spacing-2);--solaris-toast-radius-value: var(--solaris-radius-md);--solaris-toast-icon-size: var(--solaris-font-size-lg);--solaris-toast-shadow-value: var(--solaris-shadow-lg);--solaris-toast-title-color: var(--solaris-text-strong);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-action-color: var(--solaris-primary-base);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-progress-height: var(--solaris-spacing-1);--solaris-toast-description-color: var(--solaris-text-muted);--solaris-toast-close-icon-size: var(--solaris-font-size-lg);display:block;overflow:hidden;pointer-events:auto;box-sizing:border-box;width:var(--solaris-toast-width);margin-top:var(--solaris-spacing-4);max-width:var(--solaris-toast-max-width);box-shadow:var(--solaris-toast-shadow-value);border-radius:var(--solaris-toast-radius-value);animation:solaris-toast-enter var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__root{display:flex;box-sizing:border-box;align-items:flex-start;gap:var(--solaris-toast-gap);color:var(--solaris-toast-color);padding:var(--solaris-toast-padding);border-radius:var(--solaris-radius-md);background:var(--solaris-toast-background);border:var(--solaris-toast-border-width) solid var(--solaris-toast-border-color)}:host([data-center-content=true]) .solaris-toast__root{align-items:center}:host([data-center-content=true]) .solaris-toast__trailing{align-self:center}:host([data-center-content=true]) .solaris-toast__media{margin-top:0}.solaris-toast__bar{width:3px;flex-shrink:0;align-self:stretch;border-radius:var(--solaris-radius-full);background:var(--solaris-toast-icon-color)}.solaris-toast__media{display:grid;flex-shrink:0;overflow:hidden;place-items:center;margin-top:var(--solaris-spacing-1);width:var(--solaris-toast-media-size);height:var(--solaris-toast-media-size)}.solaris-toast__icon solaris-icon,.solaris-toast__icon svg{display:block;width:var(--solaris-toast-icon-size);height:var(--solaris-toast-icon-size)}.solaris-toast__icon{display:grid;place-items:center;color:var(--solaris-toast-icon-color)}.solaris-toast__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-toast-content-gap);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-toast__title{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-md);line-height:var(--solaris-line-height-sm);font-weight:var(--solaris-font-weight-semibold);color:var(--solaris-toast-title-color)}.solaris-toast__description--truncated{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--solaris-toast-max-lines)}.solaris-toast__description{margin:0;word-break:normal;overflow-wrap:break-word;font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);color:var(--solaris-toast-description-color)}.solaris-toast__trailing{display:flex;flex-shrink:0;align-self:flex-start;gap:var(--solaris-spacing-2)}.solaris-toast__trailing-btn:hover{color:var(--solaris-text-default)}.solaris-toast__trailing-btn:focus-visible{outline-offset:2px;outline:2px solid var(--solaris-primary-base)}.solaris-toast__trailing-btn solaris-icon,.solaris-toast__trailing-btn svg{display:block;width:var(--solaris-toast-close-icon-size);height:var(--solaris-toast-close-icon-size)}.solaris-toast__trailing-btn{all:unset;display:grid;flex-shrink:0;cursor:pointer;place-items:center;box-sizing:border-box;background:transparent;color:var(--solaris-text-muted);width:var(--solaris-toast-close-size);height:var(--solaris-toast-close-size);border-radius:var(--solaris-radius-sm);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__expand-icon--expanded{transform:rotate(180deg)}.solaris-toast__expand-icon{transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-toast__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-toast-actions-gap);margin-block-start:var(--solaris-spacing-2)}:host([data-actions-align=start]) .solaris-toast__actions{justify-content:flex-start}:host([data-actions-align=center]) .solaris-toast__actions{justify-content:center}:host([data-actions-align=end]) .solaris-toast__actions{justify-content:flex-end}:host([data-actions-align=stretch]) .solaris-toast__actions [solaris-button]{flex:1}:host([data-actions-align=stretch]) .solaris-toast__actions{justify-content:stretch}.solaris-toast__progress{overflow:hidden;background:var(--solaris-surface-muted);height:var(--solaris-toast-progress-height)}.solaris-toast__progress-bar{height:100%;transition:width .1s var(--solaris-motion-easing-standard);background:var(--solaris-toast-progress-color)}.solaris-toast__countdown-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--solaris-spacing-1);color:var(--solaris-text-muted);background:var(--solaris-bg-page);font-size:var(--solaris-font-size-xs);line-height:var(--solaris-line-height-md);padding:var(--solaris-toast-padding) var(--solaris-spacing-4)}.solaris-toast__countdown-toggle:hover{text-decoration:underline}.solaris-toast__countdown-toggle:focus-visible{outline-offset:2px;text-decoration:underline;border-radius:var(--solaris-radius-sm);outline:2px solid var(--solaris-primary-base)}.solaris-toast__countdown-toggle{all:unset;cursor:pointer;white-space:nowrap;line-height:inherit;text-decoration:none;color:var(--solaris-text-default);font-weight:var(--solaris-font-weight-bold)}:host([data-icon-size=sm]){--solaris-toast-media-size: var(--solaris-spacing-6);--solaris-toast-icon-size: var(--solaris-font-size-lg)}:host([data-icon-size=md]){--solaris-toast-media-size: var(--solaris-spacing-8);--solaris-toast-icon-size: var(--solaris-font-size-2xl)}:host([data-icon-size=lg]){--solaris-toast-media-size: var(--solaris-spacing-10);--solaris-toast-icon-size: var(--solaris-font-size-3xl)}:host([data-media-shape=circle]) .solaris-toast__media{border-radius:50%}:host([data-media-shape=rounded]) .solaris-toast__media{border-radius:var(--solaris-radius-md)}:host([data-media-shape=square]) .solaris-toast__media{border-radius:0}:host([data-variant=neutral][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted)}:host([data-variant=neutral][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-text-muted);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-text-muted);--solaris-toast-border-color: var(--solaris-border-default);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=info][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised)}:host([data-variant=info][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-info-base);--solaris-toast-border-color: var(--solaris-info-border);--solaris-toast-progress-color: var(--solaris-info-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=success][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-success-base)}:host([data-variant=success][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-success-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-success-border);--solaris-toast-progress-color: var(--solaris-success-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=warning][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-warning-base)}:host([data-variant=warning][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-warning-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-warning-border);--solaris-toast-progress-color: var(--solaris-warning-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=danger][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-danger-base)}:host([data-variant=danger][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-danger-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-danger-border);--solaris-toast-progress-color: var(--solaris-danger-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading][data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent;--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-progress-color: var(--solaris-primary-base)}:host([data-variant=loading][data-appearance=outline]){--solaris-toast-color: var(--solaris-text-default);--solaris-toast-icon-color: var(--solaris-primary-base);--solaris-toast-background: var(--solaris-surface-raised);--solaris-toast-border-color: var(--solaris-primary-border);--solaris-toast-progress-color: var(--solaris-primary-base);--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=custom]){--solaris-toast-color: var( --solaris-toast-custom-color, var(--solaris-text-default) );--solaris-toast-icon-color: var( --solaris-toast-custom-icon-color, var(--solaris-text-muted) );--solaris-toast-background: var( --solaris-toast-custom-background, var(--solaris-surface-raised) );--solaris-toast-border-color: var( --solaris-toast-custom-border-color, var(--solaris-border-default) );--solaris-toast-progress-color: var( --solaris-toast-custom-progress-color, var(--solaris-primary-base) )}:host([data-appearance=surface]){--solaris-toast-border-width: 0;--solaris-toast-border-color: transparent}:host([data-appearance=outline]){--solaris-toast-border-width: var(--solaris-border-width-sm)}:host([data-variant=loading]) .solaris-toast__icon{animation:solaris-toast-spin 1s var(--solaris-motion-easing-linear) infinite}@keyframes solaris-toast-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes solaris-toast-enter{0%{opacity:0;transform:translateY(-16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}:host([data-variant=loading]) .solaris-toast__icon{animation:none}}:host-context([data-reduced-motion=true]){animation:none}:host([data-reduced-motion=true][data-variant=loading]) .solaris-toast__icon{animation:none}@media(width<=640px){:host{--solaris-toast-width: 100%;--solaris-toast-max-width: 100%}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { entry: [{ type: i0.Input, args: [{ isSignal: true, alias: "entry", required: true }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
@@ -10152,14 +10829,14 @@ class SolarisToastContainerComponent {
         this.toastService.dismiss(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisToastContainerComponent, isStandalone: true, selector: "solaris-toast-container", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-position": "position()" }, classAttribute: "solaris-toast-container" }, ngImport: i0, template: "@for (entry of entries(); track entry.id) {\n  <solaris-toast [entry]=\"entry\" (dismiss)=\"dismiss($event)\" />\n}\n", styles: [":host{--solaris-toast-z-index: var(--solaris-z-index-toast);position:fixed;z-index:var(--solaris-toast-z-index);display:flex;flex-direction:column;gap:var(--solaris-toast-gap);pointer-events:none;box-sizing:border-box;max-height:100dvh;overflow:hidden;padding:var(--solaris-spacing-4);inset:0}:host([data-position=top-start]){align-items:flex-start;justify-content:flex-start}:host([data-position=top-center]){align-items:center;justify-content:flex-start}:host([data-position=top-end]){align-items:flex-end;justify-content:flex-start}:host([data-position=bottom-start]){align-items:flex-start;justify-content:flex-end}:host([data-position=bottom-center]){align-items:center;justify-content:flex-end}:host([data-position=bottom-end]){align-items:flex-end;justify-content:flex-end}@media(width<=640px){:host{padding:var(--solaris-spacing-2);max-width:100vw;width:100%}:host([data-position=top-start]),:host([data-position=top-center]),:host([data-position=top-end]){align-items:stretch}:host([data-position=bottom-start]),:host([data-position=bottom-center]),:host([data-position=bottom-end]){align-items:stretch}}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => SolarisToastComponent), selector: "solaris-toast", inputs: ["entry"], outputs: ["dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisToastContainerComponent, isStandalone: true, selector: "solaris-toast-container", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-position": "position()" }, classAttribute: "solaris-toast-container" }, ngImport: i0, template: "@for (entry of entries(); track entry.id) {\n  <solaris-toast [entry]=\"entry\" (dismiss)=\"dismiss($event)\" />\n}\n", styles: [":host{--solaris-toast-z-index: var(--solaris-z-index-toast);inset:0;display:flex;position:fixed;overflow:hidden;max-height:100dvh;pointer-events:none;box-sizing:border-box;flex-direction:column;gap:var(--solaris-toast-gap);padding:var(--solaris-spacing-4);z-index:var(--solaris-toast-z-index)}:host([data-position=top-start]){align-items:flex-start;justify-content:flex-start}:host([data-position=top-center]){align-items:center;justify-content:flex-start}:host([data-position=top-end]){align-items:flex-end;justify-content:flex-start}:host([data-position=bottom-start]){align-items:flex-start;justify-content:flex-end}:host([data-position=bottom-center]){align-items:center;justify-content:flex-end}:host([data-position=bottom-end]){align-items:flex-end;justify-content:flex-end}@media(width<=640px){:host{padding:var(--solaris-spacing-2);max-width:100vw;width:100%}:host([data-position=top-start]),:host([data-position=top-center]),:host([data-position=top-end]){align-items:stretch}:host([data-position=bottom-start]),:host([data-position=bottom-center]),:host([data-position=bottom-end]){align-items:stretch}}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => SolarisToastComponent), selector: "solaris-toast", inputs: ["entry"], outputs: ["dismiss"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisToastContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'solaris-toast-container', standalone: true, imports: [forwardRef(() => SolarisToastComponent)], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'solaris-toast-container',
                         '[attr.data-position]': 'position()',
-                    }, template: "@for (entry of entries(); track entry.id) {\n  <solaris-toast [entry]=\"entry\" (dismiss)=\"dismiss($event)\" />\n}\n", styles: [":host{--solaris-toast-z-index: var(--solaris-z-index-toast);position:fixed;z-index:var(--solaris-toast-z-index);display:flex;flex-direction:column;gap:var(--solaris-toast-gap);pointer-events:none;box-sizing:border-box;max-height:100dvh;overflow:hidden;padding:var(--solaris-spacing-4);inset:0}:host([data-position=top-start]){align-items:flex-start;justify-content:flex-start}:host([data-position=top-center]){align-items:center;justify-content:flex-start}:host([data-position=top-end]){align-items:flex-end;justify-content:flex-start}:host([data-position=bottom-start]){align-items:flex-start;justify-content:flex-end}:host([data-position=bottom-center]){align-items:center;justify-content:flex-end}:host([data-position=bottom-end]){align-items:flex-end;justify-content:flex-end}@media(width<=640px){:host{padding:var(--solaris-spacing-2);max-width:100vw;width:100%}:host([data-position=top-start]),:host([data-position=top-center]),:host([data-position=top-end]){align-items:stretch}:host([data-position=bottom-start]),:host([data-position=bottom-center]),:host([data-position=bottom-end]){align-items:stretch}}\n"] }]
+                    }, template: "@for (entry of entries(); track entry.id) {\n  <solaris-toast [entry]=\"entry\" (dismiss)=\"dismiss($event)\" />\n}\n", styles: [":host{--solaris-toast-z-index: var(--solaris-z-index-toast);inset:0;display:flex;position:fixed;overflow:hidden;max-height:100dvh;pointer-events:none;box-sizing:border-box;flex-direction:column;gap:var(--solaris-toast-gap);padding:var(--solaris-spacing-4);z-index:var(--solaris-toast-z-index)}:host([data-position=top-start]){align-items:flex-start;justify-content:flex-start}:host([data-position=top-center]){align-items:center;justify-content:flex-start}:host([data-position=top-end]){align-items:flex-end;justify-content:flex-start}:host([data-position=bottom-start]){align-items:flex-start;justify-content:flex-end}:host([data-position=bottom-center]){align-items:center;justify-content:flex-end}:host([data-position=bottom-end]){align-items:flex-end;justify-content:flex-end}@media(width<=640px){:host{padding:var(--solaris-spacing-2);max-width:100vw;width:100%}:host([data-position=top-start]),:host([data-position=top-center]),:host([data-position=top-end]){align-items:stretch}:host([data-position=bottom-start]),:host([data-position=bottom-center]),:host([data-position=bottom-end]){align-items:stretch}}\n"] }]
         }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
 
 const SOLARIS_DIALOG_DATA = new InjectionToken('SolarisDialogData');
@@ -10198,7 +10875,7 @@ class SolarisDialogActionsComponent {
         this.actionExecuted.emit(action);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDialogActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisDialogActionsComponent, isStandalone: true, selector: "solaris-dialog-actions", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionExecuted: "actionExecuted" }, host: { properties: { "attr.data-align": "align()", "attr.data-stack": "stack()" }, classAttribute: "solaris-dialog-actions" }, ngImport: i0, template: "<div class=\"solaris-dialog-actions__inner\">\n  @for (action of actions(); track $index) {\n    <button\n      type=\"button\"\n      solaris-button\n      (click)=\"handleAction(action)\"\n      [color]=\"action.color ?? 'neutral'\"\n      [disabled]=\"action.disabled ?? false\"\n      [appearance]=\"action.appearance ?? 'solid'\"\n    >\n      {{ action.label }}\n    </button>\n  }\n</div>\n", styles: [":host{display:block;padding:var(--solaris-spacing-3) var(--solaris-spacing-4)}.solaris-dialog-actions__inner{display:flex;flex-wrap:wrap;gap:var(--solaris-spacing-2)}:host([data-align=start]) .solaris-dialog-actions__inner{justify-content:flex-start}:host([data-align=center]) .solaris-dialog-actions__inner{justify-content:center}:host([data-align=end]) .solaris-dialog-actions__inner{justify-content:flex-end}:host([data-align=space-between]) .solaris-dialog-actions__inner{justify-content:space-between}:host([data-stack=vertical]) .solaris-dialog-actions__inner{flex-direction:column}:host([data-stack=horizontal]) .solaris-dialog-actions__inner{flex-direction:row}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["appearance", "color", "radius", "density", "shape", "loading", "disabled", "fullWidth", "loadingLabelKey", "loadingLabel", "icon", "iconPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SolarisDialogActionsComponent, isStandalone: true, selector: "solaris-dialog-actions", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, stack: { classPropertyName: "stack", publicName: "stack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionExecuted: "actionExecuted" }, host: { properties: { "attr.data-align": "align()", "attr.data-stack": "stack()" }, classAttribute: "solaris-dialog-actions" }, ngImport: i0, template: "<div class=\"solaris-dialog-actions__inner\">\n  @for (action of actions(); track $index) {\n    <button\n      type=\"button\"\n      solaris-button\n      (click)=\"handleAction(action)\"\n      [color]=\"action.color ?? 'neutral'\"\n      [disabled]=\"action.disabled ?? false\"\n      [appearance]=\"action.appearance ?? 'solid'\"\n    >\n      {{ action.label }}\n    </button>\n  }\n</div>\n", styles: [":host{display:block;padding:var(--solaris-spacing-3) var(--solaris-spacing-4)}.solaris-dialog-actions__inner{display:flex;flex-wrap:wrap;gap:var(--solaris-spacing-2)}:host([data-align=start]) .solaris-dialog-actions__inner{justify-content:flex-start}:host([data-align=center]) .solaris-dialog-actions__inner{justify-content:center}:host([data-align=end]) .solaris-dialog-actions__inner{justify-content:flex-end}:host([data-align=space-between]) .solaris-dialog-actions__inner{justify-content:space-between}:host([data-stack=vertical]) .solaris-dialog-actions__inner{flex-direction:column}:host([data-stack=horizontal]) .solaris-dialog-actions__inner{flex-direction:row}\n"], dependencies: [{ kind: "directive", type: SolarisButtonDirective, selector: "[solaris-button]", inputs: ["iconPosition", "appearance", "color", "shape", "radius", "density", "fullWidth", "disabled", "loading", "loadingLabelKey", "loadingLabel", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SolarisDialogActionsComponent, decorators: [{
             type: Component,
@@ -13933,5 +14610,5 @@ function provideSolaris(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { SOLARIS_ACCESSIBILITY_CONFIG, SOLARIS_BUILT_IN_ICONS, SOLARIS_DIALOG_CONFIG, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_REF, SOLARIS_ICONS_CONFIG, SOLARIS_SEGMENTED_CONTROL, SOLARIS_STEPPER, SOLARIS_TABS, SOLARIS_THEME_CONFIG, SOLARIS_TOAST_CONFIG, SOLARIS_TRANSLATE_CONFIG, SolarisAccessibilityService, SolarisAccordionComponent, SolarisAlertActionsComponent, SolarisAlertComponent, SolarisAlertDescriptionDirective, SolarisAlertTitleDirective, SolarisBadgeComponent, SolarisBadgeIconDirective, SolarisBreadcrumbComponent, SolarisButtonDirective, SolarisButtonGroupComponent, SolarisButtonIconDirective, SolarisCardActionsDirective, SolarisCardComponent, SolarisCardContentDirective, SolarisCardDescriptionDirective, SolarisCardFooterDirective, SolarisCardHeaderDirective, SolarisCardMediaDirective, SolarisCardTitleDirective, SolarisCheckboxComponent, SolarisCheckboxGroupComponent, SolarisCollapsibleComponent, SolarisDialogActionsComponent, SolarisDialogComponent, SolarisDialogContainerComponent, SolarisDialogContentComponent, SolarisDialogFlowComponent, SolarisDialogHeaderComponent, SolarisDialogRef, SolarisDialogService, SolarisDialogStepComponent, SolarisDividerComponent, SolarisDividerStackComponent, SolarisDropdownMenuComponent, SolarisDropdownMenuGroupComponent, SolarisDropdownMenuItemComponent, SolarisDropdownMenuLabelComponent, SolarisDropdownMenuTriggerDirective, SolarisDropdownSubmenuComponent, SolarisDropdownSubmenuTriggerComponent, SolarisEditableTabComponent, SolarisEditableTabsComponent, SolarisEmailFieldComponent, SolarisFormErrorComponent, SolarisFormFieldComponent, SolarisFormHintComponent, SolarisFormLabelActionDirective, SolarisFormLabelComponent, SolarisFormPrefixDirective, SolarisFormSuffixDirective, SolarisIconButtonBadgeDirective, SolarisIconButtonDirective, SolarisIconComponent, SolarisIconRegistryService, SolarisInputDirective, SolarisLoadingTextComponent, SolarisMultiSelectComponent, SolarisOptionComponent, SolarisOptionDescriptionDirective, SolarisOptionGroupComponent, SolarisOptionLabelDirective, SolarisOptionLeadingDirective, SolarisOptionMetaDirective, SolarisOptionTrailingDirective, SolarisPasswordFieldComponent, SolarisPopoverDirective, SolarisPopoverPanelComponent, SolarisPopoverTriggerDirective, SolarisProgressComponent, SolarisRadioComponent, SolarisRadioGroupComponent, SolarisSegmentedControlComponent, SolarisSegmentedItemComponent, SolarisSelectComponent, SolarisSkeletonComponent, SolarisSpinnerComponent, SolarisStepComponent, SolarisStepperActionsComponent, SolarisStepperComponent, SolarisStepperContentComponent, SolarisSwitchComponent, SolarisSwitchGroupComponent, SolarisTabComponent, SolarisTabPanelComponent, SolarisTabsComponent, SolarisTextareaDirective, SolarisThemeService, SolarisToastComponent, SolarisToastContainerComponent, SolarisToastService, SolarisTooltipDirective, SolarisTooltipPanelComponent, SolarisTranslatePipe, SolarisTranslateService, SolarisVisuallyHiddenDirective, configureSolarisTesting, nextIdFor, provideSolaris, provideSolarisAccessibilityTesting, provideSolarisTesting, provideSolarisThemeTesting, provideSolarisTranslateTesting, resolveElementId, solarisAllowedDomainsValidator, solarisBlockedDomainsValidator, solarisEmailValidator, solarisPasswordValidator };
+export { SOLARIS_ACCESSIBILITY_CONFIG, SOLARIS_BUILT_IN_ICONS, SOLARIS_DIALOG_CONFIG, SOLARIS_DIALOG_DATA, SOLARIS_DIALOG_REF, SOLARIS_ICONS_CONFIG, SOLARIS_SEGMENTED_CONTROL, SOLARIS_STEPPER, SOLARIS_TABS, SOLARIS_THEME_CONFIG, SOLARIS_TOAST_CONFIG, SOLARIS_TRANSLATE_CONFIG, SolarisAccessibilityService, SolarisAccordionComponent, SolarisAlertActionsComponent, SolarisAlertComponent, SolarisAlertDescriptionDirective, SolarisAlertTitleDirective, SolarisBadgeComponent, SolarisBadgeIconDirective, SolarisBreadcrumbComponent, SolarisButtonDirective, SolarisButtonGroupComponent, SolarisButtonIconDirective, SolarisCardActionsDirective, SolarisCardComponent, SolarisCardContentDirective, SolarisCardDescriptionDirective, SolarisCardFooterDirective, SolarisCardHeaderDirective, SolarisCardMediaDirective, SolarisCardTitleDirective, SolarisCheckboxComponent, SolarisCheckboxGroupComponent, SolarisCollapsibleComponent, SolarisDialogActionsComponent, SolarisDialogComponent, SolarisDialogContainerComponent, SolarisDialogContentComponent, SolarisDialogFlowComponent, SolarisDialogHeaderComponent, SolarisDialogRef, SolarisDialogService, SolarisDialogStepComponent, SolarisDividerComponent, SolarisDividerStackComponent, SolarisDropdownMenuComponent, SolarisDropdownMenuGroupComponent, SolarisDropdownMenuItemComponent, SolarisDropdownMenuLabelComponent, SolarisDropdownMenuTriggerDirective, SolarisDropdownSubmenuComponent, SolarisDropdownSubmenuTriggerComponent, SolarisEditableTabComponent, SolarisEditableTabsComponent, SolarisEmailFieldComponent, SolarisFormErrorComponent, SolarisFormFieldComponent, SolarisFormHintComponent, SolarisFormLabelActionDirective, SolarisFormLabelComponent, SolarisFormPrefixDirective, SolarisFormSuffixDirective, SolarisIconButtonBadgeDirective, SolarisIconButtonDirective, SolarisIconComponent, SolarisIconRegistryService, SolarisInputDirective, SolarisLoadingTextComponent, SolarisMultiSelectComponent, SolarisOptionComponent, SolarisOptionDescriptionDirective, SolarisOptionGroupComponent, SolarisOptionLabelDirective, SolarisOptionLeadingDirective, SolarisOptionMetaDirective, SolarisOptionTrailingDirective, SolarisPasswordFieldComponent, SolarisPhoneCountryListComponent, SolarisPhoneFieldComponent, SolarisPopoverDirective, SolarisPopoverPanelComponent, SolarisPopoverTriggerDirective, SolarisProgressComponent, SolarisRadioComponent, SolarisRadioGroupComponent, SolarisSegmentedControlComponent, SolarisSegmentedItemComponent, SolarisSelectComponent, SolarisSkeletonComponent, SolarisSpinnerComponent, SolarisStepComponent, SolarisStepperActionsComponent, SolarisStepperComponent, SolarisStepperContentComponent, SolarisSwitchComponent, SolarisSwitchGroupComponent, SolarisTabComponent, SolarisTabPanelComponent, SolarisTabsComponent, SolarisTextareaDirective, SolarisThemeService, SolarisToastComponent, SolarisToastContainerComponent, SolarisToastService, SolarisTooltipDirective, SolarisTooltipPanelComponent, SolarisTranslatePipe, SolarisTranslateService, SolarisVisuallyHiddenDirective, configureSolarisTesting, nextIdFor, provideSolaris, provideSolarisAccessibilityTesting, provideSolarisTesting, provideSolarisThemeTesting, provideSolarisTranslateTesting, resolveElementId, solarisAllowedDomainsValidator, solarisBlockedDomainsValidator, solarisEmailValidator, solarisPasswordValidator, solarisPhoneValidator };
 //# sourceMappingURL=educarehq-solaris-ui.mjs.map