@danske/sapphire-angular 1.26.0 → 1.27.1

package/fesm2015/danske-sapphire-angular.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, Inject, SkipSelf, Optional, forwardRef, Directive, Component, Input, NgModule, ViewEncapsulation, InjectionToken, isDevMode, ChangeDetectionStrategy, HostBinding, ContentChild, EventEmitter, Output, HostListener, Attribute, ViewChild, Injector, ElementRef, QueryList, ContentChildren, ViewChildren, ChangeDetectorRef, TemplateRef } from '@angular/core';
-import * as i1$3 from '@angular/cdk/overlay';
+import * as i1$2 from '@angular/cdk/overlay';
 import { OverlayContainer, Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
-import * as i1$1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule, NgIf } from '@angular/common';
 import * as i1 from '@angular/cdk/platform';
 import { Platform } from '@angular/cdk/platform';
@@ -11,20 +11,20 @@ import * as icons from '@danske/sapphire-icons/js';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i3$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, FormsModule, RequiredValidator } from '@angular/forms';
-import * as i2 from '@angular/cdk/a11y';
+import * as i2$1 from '@angular/cdk/a11y';
 import { A11yModule, ListKeyManager } from '@angular/cdk/a11y';
-import * as i1$2 from '@angular/cdk/menu';
+import * as i1$1 from '@angular/cdk/menu';
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger, CdkMenuGroup, CdkMenuModule } from '@angular/cdk/menu';
 import { hasModifierKey } from '@angular/cdk/keycodes';
-import * as i1$4 from '@angular/cdk/portal';
+import * as i1$3 from '@angular/cdk/portal';
 import { TemplatePortal, DomPortal, PortalModule, CdkPortal, ComponentPortal } from '@angular/cdk/portal';
 import { Subject, merge, combineLatest, empty, fromEvent } from 'rxjs';
 import { takeUntil, startWith, map } from 'rxjs/operators';
 import * as i3 from '@angular/cdk/collections';
-import * as i1$5 from '@angular/cdk/listbox';
+import * as i1$4 from '@angular/cdk/listbox';
 import { CdkListbox, CdkOption, CdkListboxModule } from '@angular/cdk/listbox';
 export { tokens } from '@danske/sapphire-css/themes';
-import * as i1$6 from '@angular/cdk/dialog';
+import * as i1$5 from '@angular/cdk/dialog';
 import { CdkDialogContainer, DialogModule } from '@angular/cdk/dialog';
 
 /**
@@ -386,7 +386,7 @@ class ButtonGroupComponent {
     }
 }
 ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ButtonGroupComponent, selector: "sp-button-group", inputs: { align: "align", stretch: "stretch", iconSpacing: "iconSpacing", spacing: "spacing", orientation: "orientation" }, ngImport: i0, template: "<div\n  class=\"sapphire-button-group\"\n  [ngClass]=\"\n    stretch !== 'none'\n      ? 'sapphire-button-group--stretch'\n      : 'sapphire-button-group--align-' + align\n  \"\n  [class.sapphire-button-group--stretch-auto-vertical]=\"\n    stretch === 'autoVertical'\n  \"\n  [class.sapphire-button-group--spacing-xs]=\"spacing === 'extra-dense'\"\n  [class.sapphire-button-group--spacing-s]=\"spacing === 'dense'\"\n  [class.sapphire-button-group--spacing-l]=\"spacing === 'large'\"\n  [class.sapphire-button-group--vertical]=\"orientation === 'vertical'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sapphire-button-group{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:stretch;gap:var(--sapphire-button-group-size-spacing-m)}.sapphire-button-group--stretch{flex-wrap:wrap-reverse;justify-content:normal;align-items:normal}.sapphire-button-group--stretch>*{min-width:-moz-fit-content!important;min-width:fit-content!important;max-width:100%!important;flex-grow:1!important}.sapphire-button-group--stretch.sapphire-button-group--vertical{flex-direction:column-reverse;flex-wrap:nowrap}.sapphire-button-group--stretch.sapphire-button-group--stretch-auto-vertical.sapphire-button-group:has(> *:nth-child(3)){flex-direction:column-reverse}.sapphire-button-group--spacing-l{gap:var(--sapphire-button-group-size-spacing-l)}.sapphire-button-group--spacing-s{gap:var(--sapphire-button-group-size-spacing-s)}.sapphire-button-group--spacing-xs{gap:var(--sapphire-button-group-size-spacing-xs)}.sapphire-button-group--align-center{justify-content:center}.sapphire-button-group--align-right{justify-content:flex-end}.sapphire-button-group--align-left{justify-content:flex-start}.sapphire-button-group--vertical{flex-direction:column}.sapphire-button-group--vertical.sapphire-button-group--align-center{align-items:center}.sapphire-button-group--vertical.sapphire-button-group--align-right{align-items:flex-end}.sapphire-button-group--vertical.sapphire-button-group--align-left{align-items:flex-start}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
+ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ButtonGroupComponent, selector: "sp-button-group", inputs: { align: "align", stretch: "stretch", iconSpacing: "iconSpacing", spacing: "spacing", orientation: "orientation" }, ngImport: i0, template: "<div\n  class=\"sapphire-button-group\"\n  [ngClass]=\"\n    stretch !== 'none'\n      ? 'sapphire-button-group--stretch'\n      : 'sapphire-button-group--align-' + align\n  \"\n  [class.sapphire-button-group--stretch-auto-vertical]=\"\n    stretch === 'autoVertical'\n  \"\n  [class.sapphire-button-group--spacing-xs]=\"spacing === 'extra-dense'\"\n  [class.sapphire-button-group--spacing-s]=\"spacing === 'dense'\"\n  [class.sapphire-button-group--spacing-l]=\"spacing === 'large'\"\n  [class.sapphire-button-group--vertical]=\"orientation === 'vertical'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sapphire-button-group{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:stretch;gap:var(--sapphire-button-group-size-spacing-m)}.sapphire-button-group--stretch{flex-wrap:wrap-reverse;justify-content:normal;align-items:normal}.sapphire-button-group--stretch>*{min-width:-moz-fit-content!important;min-width:fit-content!important;max-width:100%!important;flex-grow:1!important}.sapphire-button-group--stretch.sapphire-button-group--vertical{flex-direction:column-reverse;flex-wrap:nowrap}.sapphire-button-group--stretch.sapphire-button-group--stretch-auto-vertical.sapphire-button-group:has(> *:nth-child(3)){flex-direction:column-reverse}.sapphire-button-group--spacing-l{gap:var(--sapphire-button-group-size-spacing-l)}.sapphire-button-group--spacing-s{gap:var(--sapphire-button-group-size-spacing-s)}.sapphire-button-group--spacing-xs{gap:var(--sapphire-button-group-size-spacing-xs)}.sapphire-button-group--align-center{justify-content:center}.sapphire-button-group--align-right{justify-content:flex-end}.sapphire-button-group--align-left{justify-content:flex-start}.sapphire-button-group--vertical{flex-direction:column}.sapphire-button-group--vertical.sapphire-button-group--align-center{align-items:center}.sapphire-button-group--vertical.sapphire-button-group--align-right{align-items:flex-end}.sapphire-button-group--vertical.sapphire-button-group--align-left{align-items:flex-start}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-button-group', encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sapphire-button-group\"\n  [ngClass]=\"\n    stretch !== 'none'\n      ? 'sapphire-button-group--stretch'\n      : 'sapphire-button-group--align-' + align\n  \"\n  [class.sapphire-button-group--stretch-auto-vertical]=\"\n    stretch === 'autoVertical'\n  \"\n  [class.sapphire-button-group--spacing-xs]=\"spacing === 'extra-dense'\"\n  [class.sapphire-button-group--spacing-s]=\"spacing === 'dense'\"\n  [class.sapphire-button-group--spacing-l]=\"spacing === 'large'\"\n  [class.sapphire-button-group--vertical]=\"orientation === 'vertical'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sapphire-button-group{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:stretch;gap:var(--sapphire-button-group-size-spacing-m)}.sapphire-button-group--stretch{flex-wrap:wrap-reverse;justify-content:normal;align-items:normal}.sapphire-button-group--stretch>*{min-width:-moz-fit-content!important;min-width:fit-content!important;max-width:100%!important;flex-grow:1!important}.sapphire-button-group--stretch.sapphire-button-group--vertical{flex-direction:column-reverse;flex-wrap:nowrap}.sapphire-button-group--stretch.sapphire-button-group--stretch-auto-vertical.sapphire-button-group:has(> *:nth-child(3)){flex-direction:column-reverse}.sapphire-button-group--spacing-l{gap:var(--sapphire-button-group-size-spacing-l)}.sapphire-button-group--spacing-s{gap:var(--sapphire-button-group-size-spacing-s)}.sapphire-button-group--spacing-xs{gap:var(--sapphire-button-group-size-spacing-xs)}.sapphire-button-group--align-center{justify-content:center}.sapphire-button-group--align-right{justify-content:flex-end}.sapphire-button-group--align-left{justify-content:flex-start}.sapphire-button-group--vertical{flex-direction:column}.sapphire-button-group--vertical.sapphire-button-group--align-center{align-items:center}.sapphire-button-group--vertical.sapphire-button-group--align-right{align-items:flex-end}.sapphire-button-group--vertical.sapphire-button-group--align-left{align-items:flex-start}\n"] }]
@@ -614,7 +614,7 @@ class ButtonComponent {
     }
 }
 ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: { variant: "variant", appearance: "appearance", surface: "surface", size: "size", disabled: "disabled", iconAlign: "iconAlign", type: "type" }, host: { properties: { "attr.disabled": "disabled || null", "class.is-disabled": "disabled", "class.sapphire-button--large": "size === \"large\"", "class.sapphire-button--small": "size === \"small\"", "class.sapphire-button--with-left-icon": "buttonIcon && iconAlign === \"left\"", "class.sapphire-button--with-right-icon": "buttonIcon && iconAlign === \"right\"", "class.sapphire-button--secondary-surface": "surface === \"secondary\"", "type": "this.type", "class": "this.derivedVariantAndStyleClass" }, classAttribute: "sapphire-button" }, queries: [{ propertyName: "buttonIcon", first: true, predicate: ButtonIconDirective, descendants: true }, { propertyName: "icon", first: true, predicate: IconComponent, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<span class=\"sapphire-button__content\">\n  <span\n    *ngIf=\"buttonIcon && iconAlign === 'left'\"\n    class=\"sapphire-button__icon\"\n  >\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n  </span>\n\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n  <span\n    *ngIf=\"buttonIcon && iconAlign === 'right'\"\n    class=\"sapphire-button__icon\"\n  >\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n  </span>\n\n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>\n  <ng-template #iconContent>\n    <ng-content select=\"[spButtonIcon]\"></ng-content>\n  </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;font-family:var(--sapphire-button-font-name);font-weight:var(--sapphire-button-font-weight);font-size:var(--sapphire-button-size-font-m);text-transform:var(--sapphire-button-font-text-transform);letter-spacing:var(--sapphire-button-font-letter-spacing);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-button-size-spacing-horizontal-m);height:var(--sapphire-button-size-height-m);min-width:var(--sapphire-button-size-min-width-no-icon-m);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-button-size-radius-m);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-button-time-transition);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-button-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button:not(.js-focus):focus-visible{outline:var(--sapphire-button-size-focus-ring-border) solid var(--sapphire-button-color-focus-ring);outline-offset:var(--sapphire-button-size-focus-ring-offset)}.sapphire-button--with-left-icon,.sapphire-button--with-right-icon{min-width:var(--sapphire-button-size-min-width-with-icon-default)}.sapphire-button--with-right-icon .sapphire-button__icon{margin-left:var(--sapphire-button-size-spacing-icon-gap)}.sapphire-button--with-left-icon .sapphire-button__icon{margin-right:var(--sapphire-button-size-spacing-icon-gap)}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary-fill{background-color:var(--sapphire-button-color-background-primary-default);color:var(--sapphire-button-color-content-primary-default)}.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-primary-hover)}.sapphire-button--primary-fill.is-focus,.sapphire-button--primary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-primary-focus)}.sapphire-button--primary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-primary-active)}.sapphire-button--secondary-fill{background-color:var(--sapphire-button-color-background-secondary-default);color:var(--sapphire-button-color-content-secondary-default)}.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-hover);color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-fill.is-focus,.sapphire-button--secondary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-focus)}.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-active);color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-default)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-hover)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-focus)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-active)}.sapphire-button--secondary-ghost{background-color:var(--sapphire-button-color-background-secondary-ghost-default);color:var(--sapphire-button-color-content-secondary-default)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-ghost-hover);color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-ghost.is-focus,.sapphire-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-ghost-focus)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-ghost-active);color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-default)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-hover)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-focus)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-active)}.sapphire-button--secondary-text{color:var(--sapphire-button-color-content-secondary-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-secondary-text);padding:0}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--tertiary-fill{background-color:var(--sapphire-button-color-background-tertiary-default);color:var(--sapphire-button-color-content-tertiary-default)}.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-hover);color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-fill.is-focus,.sapphire-button--tertiary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-focus)}.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-active);color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-default)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-hover)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-focus)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-active)}.sapphire-button--tertiary-ghost{background-color:var(--sapphire-button-color-background-tertiary-ghost-default);color:var(--sapphire-button-color-content-tertiary-default)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-ghost-hover);color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-ghost.is-focus,.sapphire-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-ghost-focus)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-ghost-active);color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-default)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-hover)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-focus)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-active)}.sapphire-button--tertiary-text{color:var(--sapphire-button-color-content-tertiary-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-tertiary-text);padding:0}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--danger-fill{background-color:var(--sapphire-button-color-background-danger-default);color:var(--sapphire-button-color-content-danger-default)}.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-hover);color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-fill.is-focus,.sapphire-button--danger-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-focus)}.sapphire-button--danger-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-active);color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--danger-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-danger-surface-secondary-default)}.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-surface-secondary-hover)}.sapphire-button--danger-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-surface-secondary-focus)}.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-surface-secondary-active)}.sapphire-button--danger-ghost{background-color:var(--sapphire-button-color-background-danger-ghost-default);color:var(--sapphire-button-color-content-danger-default)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-ghost-hover);color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-ghost.is-focus,.sapphire-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-ghost-focus)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-active);color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-default)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-hover)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-focus)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-active)}.sapphire-button--danger-text{color:var(--sapphire-button-color-content-danger-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-danger-text);padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--selected{background-color:var(--sapphire-button-color-background-selected-default);color:var(--sapphire-button-color-content-selected-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-selected-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-selected-focus)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-selected-active);color:var(--sapphire-button-color-content-selected-active)}.sapphire-button--unselected{background-color:var(--sapphire-button-color-background-unselected-default);color:var(--sapphire-button-color-content-unselected-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-unselected-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-unselected-focus)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-unselected-active);color:var(--sapphire-button-color-content-unselected-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-button-size-icon-m);width:var(--sapphire-button-size-icon-m)}.sapphire-button--large .sapphire-button__icon{height:var(--sapphire-button-size-icon-l);width:var(--sapphire-button-size-icon-l)}.sapphire-button--small .sapphire-button__icon{height:var(--sapphire-button-size-icon-s);width:var(--sapphire-button-size-icon-s)}.sapphire-button--large{height:var(--sapphire-button-size-height-l);min-width:var(--sapphire-button-size-min-width-no-icon-l);padding:0 var(--sapphire-button-size-spacing-horizontal-l);font-size:var(--sapphire-button-size-font-l);border-radius:var(--sapphire-button-size-radius-l)}.sapphire-button--large.sapphire-button--secondary-text,.sapphire-button--large.sapphire-button--tertiary-text,.sapphire-button--large.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-button-size-radius-text)}.sapphire-button--small{height:var(--sapphire-button-size-height-s);min-width:var(--sapphire-button-size-min-width-no-icon-s);padding:0 var(--sapphire-button-size-spacing-horizontal-s);font-size:var(--sapphire-button-size-font-s);border-radius:var(--sapphire-button-size-radius-s)}.sapphire-button--small.sapphire-button--secondary-text,.sapphire-button--small.sapphire-button--tertiary-text,.sapphire-button--small.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-button-size-radius-text)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: { variant: "variant", appearance: "appearance", surface: "surface", size: "size", disabled: "disabled", iconAlign: "iconAlign", type: "type" }, host: { properties: { "attr.disabled": "disabled || null", "class.is-disabled": "disabled", "class.sapphire-button--large": "size === \"large\"", "class.sapphire-button--small": "size === \"small\"", "class.sapphire-button--with-left-icon": "buttonIcon && iconAlign === \"left\"", "class.sapphire-button--with-right-icon": "buttonIcon && iconAlign === \"right\"", "class.sapphire-button--secondary-surface": "surface === \"secondary\"", "type": "this.type", "class": "this.derivedVariantAndStyleClass" }, classAttribute: "sapphire-button" }, queries: [{ propertyName: "buttonIcon", first: true, predicate: ButtonIconDirective, descendants: true }, { propertyName: "icon", first: true, predicate: IconComponent, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<span class=\"sapphire-button__content\">\n  <span\n    *ngIf=\"buttonIcon && iconAlign === 'left'\"\n    class=\"sapphire-button__icon\"\n  >\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n  </span>\n\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n  <span\n    *ngIf=\"buttonIcon && iconAlign === 'right'\"\n    class=\"sapphire-button__icon\"\n  >\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n  </span>\n\n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>\n  <ng-template #iconContent>\n    <ng-content select=\"[spButtonIcon]\"></ng-content>\n  </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;font-family:var(--sapphire-button-font-name);font-weight:var(--sapphire-button-font-weight);font-size:var(--sapphire-button-size-font-m);text-transform:var(--sapphire-button-font-text-transform);letter-spacing:var(--sapphire-button-font-letter-spacing);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-button-size-spacing-horizontal-m);height:var(--sapphire-button-size-height-m);min-width:var(--sapphire-button-size-min-width-no-icon-m);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-button-size-radius-m);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-button-time-transition);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-button-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button:not(.js-focus):focus-visible{outline:var(--sapphire-button-size-focus-ring-border) solid var(--sapphire-button-color-focus-ring);outline-offset:var(--sapphire-button-size-focus-ring-offset)}.sapphire-button--with-left-icon,.sapphire-button--with-right-icon{min-width:var(--sapphire-button-size-min-width-with-icon-default)}.sapphire-button--with-right-icon .sapphire-button__icon{margin-left:var(--sapphire-button-size-spacing-icon-gap)}.sapphire-button--with-left-icon .sapphire-button__icon{margin-right:var(--sapphire-button-size-spacing-icon-gap)}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary-fill{background-color:var(--sapphire-button-color-background-primary-default);color:var(--sapphire-button-color-content-primary-default)}.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-primary-hover)}.sapphire-button--primary-fill.is-focus,.sapphire-button--primary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-primary-focus)}.sapphire-button--primary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-primary-active)}.sapphire-button--secondary-fill{background-color:var(--sapphire-button-color-background-secondary-default);color:var(--sapphire-button-color-content-secondary-default)}.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-hover);color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-fill.is-focus,.sapphire-button--secondary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-focus)}.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-active);color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-default)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-hover)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-focus)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-active)}.sapphire-button--secondary-ghost{background-color:var(--sapphire-button-color-background-secondary-ghost-default);color:var(--sapphire-button-color-content-secondary-default)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-ghost-hover);color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-ghost.is-focus,.sapphire-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-ghost-focus)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-ghost-active);color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-default)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-hover)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-focus)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-active)}.sapphire-button--secondary-text{color:var(--sapphire-button-color-content-secondary-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-secondary-text);padding:0}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--tertiary-fill{background-color:var(--sapphire-button-color-background-tertiary-default);color:var(--sapphire-button-color-content-tertiary-default)}.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-hover);color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-fill.is-focus,.sapphire-button--tertiary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-focus)}.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-active);color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-default)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-hover)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-focus)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-active)}.sapphire-button--tertiary-ghost{background-color:var(--sapphire-button-color-background-tertiary-ghost-default);color:var(--sapphire-button-color-content-tertiary-default)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-ghost-hover);color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-ghost.is-focus,.sapphire-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-ghost-focus)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-ghost-active);color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-default)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-hover)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-focus)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-active)}.sapphire-button--tertiary-text{color:var(--sapphire-button-color-content-tertiary-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-tertiary-text);padding:0}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--danger-fill{background-color:var(--sapphire-button-color-background-danger-default);color:var(--sapphire-button-color-content-danger-default)}.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-hover);color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-fill.is-focus,.sapphire-button--danger-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-focus)}.sapphire-button--danger-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-active);color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--danger-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-danger-surface-secondary-default)}.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-surface-secondary-hover)}.sapphire-button--danger-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-surface-secondary-focus)}.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-surface-secondary-active)}.sapphire-button--danger-ghost{background-color:var(--sapphire-button-color-background-danger-ghost-default);color:var(--sapphire-button-color-content-danger-default)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-ghost-hover);color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-ghost.is-focus,.sapphire-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-ghost-focus)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-active);color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-default)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-hover)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-focus)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-active)}.sapphire-button--danger-text{color:var(--sapphire-button-color-content-danger-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-danger-text);padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--selected{background-color:var(--sapphire-button-color-background-selected-default);color:var(--sapphire-button-color-content-selected-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-selected-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-selected-focus)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-selected-active);color:var(--sapphire-button-color-content-selected-active)}.sapphire-button--unselected{background-color:var(--sapphire-button-color-background-unselected-default);color:var(--sapphire-button-color-content-unselected-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-unselected-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-unselected-focus)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-unselected-active);color:var(--sapphire-button-color-content-unselected-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-button-size-icon-m);width:var(--sapphire-button-size-icon-m)}.sapphire-button--large .sapphire-button__icon{height:var(--sapphire-button-size-icon-l);width:var(--sapphire-button-size-icon-l)}.sapphire-button--small .sapphire-button__icon{height:var(--sapphire-button-size-icon-s);width:var(--sapphire-button-size-icon-s)}.sapphire-button--large{height:var(--sapphire-button-size-height-l);min-width:var(--sapphire-button-size-min-width-no-icon-l);padding:0 var(--sapphire-button-size-spacing-horizontal-l);font-size:var(--sapphire-button-size-font-l);border-radius:var(--sapphire-button-size-radius-l)}.sapphire-button--large.sapphire-button--secondary-text,.sapphire-button--large.sapphire-button--tertiary-text,.sapphire-button--large.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-button-size-radius-text)}.sapphire-button--small{height:var(--sapphire-button-size-height-s);min-width:var(--sapphire-button-size-min-width-no-icon-s);padding:0 var(--sapphire-button-size-spacing-horizontal-s);font-size:var(--sapphire-button-size-font-s);border-radius:var(--sapphire-button-size-radius-s)}.sapphire-button--small.sapphire-button--secondary-text,.sapphire-button--small.sapphire-button--tertiary-text,.sapphire-button--small.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-button-size-radius-text)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     CoerceBoolean
 ], ButtonComponent.prototype, "disabled", void 0);
@@ -807,7 +807,7 @@ ToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             useExisting: forwardRef(() => ToggleButtonComponent),
             multi: true,
         },
-    ], queries: [{ propertyName: "buttonIcon", first: true, predicate: ButtonIconDirective, descendants: true }, { propertyName: "icon", first: true, predicate: IconComponent, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<span class=\"sapphire-button__content\">\n  <span\n    *ngIf=\"buttonIcon && iconAlign === 'left'\"\n    class=\"sapphire-button__icon\"\n  >\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n  </span>\n\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n  <span\n    *ngIf=\"buttonIcon && iconAlign === 'right'\"\n    class=\"sapphire-button__icon\"\n  >\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n  </span>\n\n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>\n  <ng-template #iconContent>\n    <ng-content select=\"[spButtonIcon]\"></ng-content>\n  </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;font-family:var(--sapphire-button-font-name);font-weight:var(--sapphire-button-font-weight);font-size:var(--sapphire-button-size-font-m);text-transform:var(--sapphire-button-font-text-transform);letter-spacing:var(--sapphire-button-font-letter-spacing);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-button-size-spacing-horizontal-m);height:var(--sapphire-button-size-height-m);min-width:var(--sapphire-button-size-min-width-no-icon-m);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-button-size-radius-m);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-button-time-transition);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-button-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button:not(.js-focus):focus-visible{outline:var(--sapphire-button-size-focus-ring-border) solid var(--sapphire-button-color-focus-ring);outline-offset:var(--sapphire-button-size-focus-ring-offset)}.sapphire-button--with-left-icon,.sapphire-button--with-right-icon{min-width:var(--sapphire-button-size-min-width-with-icon-default)}.sapphire-button--with-right-icon .sapphire-button__icon{margin-left:var(--sapphire-button-size-spacing-icon-gap)}.sapphire-button--with-left-icon .sapphire-button__icon{margin-right:var(--sapphire-button-size-spacing-icon-gap)}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary-fill{background-color:var(--sapphire-button-color-background-primary-default);color:var(--sapphire-button-color-content-primary-default)}.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-primary-hover)}.sapphire-button--primary-fill.is-focus,.sapphire-button--primary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-primary-focus)}.sapphire-button--primary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-primary-active)}.sapphire-button--secondary-fill{background-color:var(--sapphire-button-color-background-secondary-default);color:var(--sapphire-button-color-content-secondary-default)}.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-hover);color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-fill.is-focus,.sapphire-button--secondary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-focus)}.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-active);color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-default)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-hover)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-focus)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-active)}.sapphire-button--secondary-ghost{background-color:var(--sapphire-button-color-background-secondary-ghost-default);color:var(--sapphire-button-color-content-secondary-default)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-ghost-hover);color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-ghost.is-focus,.sapphire-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-ghost-focus)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-ghost-active);color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-default)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-hover)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-focus)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-active)}.sapphire-button--secondary-text{color:var(--sapphire-button-color-content-secondary-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-secondary-text);padding:0}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--tertiary-fill{background-color:var(--sapphire-button-color-background-tertiary-default);color:var(--sapphire-button-color-content-tertiary-default)}.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-hover);color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-fill.is-focus,.sapphire-button--tertiary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-focus)}.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-active);color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-default)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-hover)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-focus)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-active)}.sapphire-button--tertiary-ghost{background-color:var(--sapphire-button-color-background-tertiary-ghost-default);color:var(--sapphire-button-color-content-tertiary-default)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-ghost-hover);color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-ghost.is-focus,.sapphire-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-ghost-focus)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-ghost-active);color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-default)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-hover)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-focus)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-active)}.sapphire-button--tertiary-text{color:var(--sapphire-button-color-content-tertiary-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-tertiary-text);padding:0}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--danger-fill{background-color:var(--sapphire-button-color-background-danger-default);color:var(--sapphire-button-color-content-danger-default)}.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-hover);color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-fill.is-focus,.sapphire-button--danger-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-focus)}.sapphire-button--danger-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-active);color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--danger-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-danger-surface-secondary-default)}.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-surface-secondary-hover)}.sapphire-button--danger-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-surface-secondary-focus)}.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-surface-secondary-active)}.sapphire-button--danger-ghost{background-color:var(--sapphire-button-color-background-danger-ghost-default);color:var(--sapphire-button-color-content-danger-default)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-ghost-hover);color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-ghost.is-focus,.sapphire-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-ghost-focus)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-active);color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-default)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-hover)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-focus)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-active)}.sapphire-button--danger-text{color:var(--sapphire-button-color-content-danger-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-danger-text);padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--selected{background-color:var(--sapphire-button-color-background-selected-default);color:var(--sapphire-button-color-content-selected-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-selected-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-selected-focus)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-selected-active);color:var(--sapphire-button-color-content-selected-active)}.sapphire-button--unselected{background-color:var(--sapphire-button-color-background-unselected-default);color:var(--sapphire-button-color-content-unselected-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-unselected-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-unselected-focus)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-unselected-active);color:var(--sapphire-button-color-content-unselected-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-button-size-icon-m);width:var(--sapphire-button-size-icon-m)}.sapphire-button--large .sapphire-button__icon{height:var(--sapphire-button-size-icon-l);width:var(--sapphire-button-size-icon-l)}.sapphire-button--small .sapphire-button__icon{height:var(--sapphire-button-size-icon-s);width:var(--sapphire-button-size-icon-s)}.sapphire-button--large{height:var(--sapphire-button-size-height-l);min-width:var(--sapphire-button-size-min-width-no-icon-l);padding:0 var(--sapphire-button-size-spacing-horizontal-l);font-size:var(--sapphire-button-size-font-l);border-radius:var(--sapphire-button-size-radius-l)}.sapphire-button--large.sapphire-button--secondary-text,.sapphire-button--large.sapphire-button--tertiary-text,.sapphire-button--large.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-button-size-radius-text)}.sapphire-button--small{height:var(--sapphire-button-size-height-s);min-width:var(--sapphire-button-size-min-width-no-icon-s);padding:0 var(--sapphire-button-size-spacing-horizontal-s);font-size:var(--sapphire-button-size-font-s);border-radius:var(--sapphire-button-size-radius-s)}.sapphire-button--small.sapphire-button--secondary-text,.sapphire-button--small.sapphire-button--tertiary-text,.sapphire-button--small.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-button-size-radius-text)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "buttonIcon", first: true, predicate: ButtonIconDirective, descendants: true }, { propertyName: "icon", first: true, predicate: IconComponent, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<span class=\"sapphire-button__content\">\n  <span\n    *ngIf=\"buttonIcon && iconAlign === 'left'\"\n    class=\"sapphire-button__icon\"\n  >\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n  </span>\n\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n  <span\n    *ngIf=\"buttonIcon && iconAlign === 'right'\"\n    class=\"sapphire-button__icon\"\n  >\n    <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n  </span>\n\n  <ng-template #content>\n    <ng-content></ng-content>\n  </ng-template>\n  <ng-template #iconContent>\n    <ng-content select=\"[spButtonIcon]\"></ng-content>\n  </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;font-family:var(--sapphire-button-font-name);font-weight:var(--sapphire-button-font-weight);font-size:var(--sapphire-button-size-font-m);text-transform:var(--sapphire-button-font-text-transform);letter-spacing:var(--sapphire-button-font-letter-spacing);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-button-size-spacing-horizontal-m);height:var(--sapphire-button-size-height-m);min-width:var(--sapphire-button-size-min-width-no-icon-m);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-button-size-radius-m);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-button-time-transition);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-button-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button:not(.js-focus):focus-visible{outline:var(--sapphire-button-size-focus-ring-border) solid var(--sapphire-button-color-focus-ring);outline-offset:var(--sapphire-button-size-focus-ring-offset)}.sapphire-button--with-left-icon,.sapphire-button--with-right-icon{min-width:var(--sapphire-button-size-min-width-with-icon-default)}.sapphire-button--with-right-icon .sapphire-button__icon{margin-left:var(--sapphire-button-size-spacing-icon-gap)}.sapphire-button--with-left-icon .sapphire-button__icon{margin-right:var(--sapphire-button-size-spacing-icon-gap)}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary-fill{background-color:var(--sapphire-button-color-background-primary-default);color:var(--sapphire-button-color-content-primary-default)}.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-primary-hover)}.sapphire-button--primary-fill.is-focus,.sapphire-button--primary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-primary-focus)}.sapphire-button--primary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-primary-active)}.sapphire-button--secondary-fill{background-color:var(--sapphire-button-color-background-secondary-default);color:var(--sapphire-button-color-content-secondary-default)}.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-hover);color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-fill.is-focus,.sapphire-button--secondary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-focus)}.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-active);color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-default)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-hover)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-focus)}.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-surface-secondary-active)}.sapphire-button--secondary-ghost{background-color:var(--sapphire-button-color-background-secondary-ghost-default);color:var(--sapphire-button-color-content-secondary-default)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-ghost-hover);color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-ghost.is-focus,.sapphire-button--secondary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-ghost-focus)}.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-ghost-active);color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-default)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-hover)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-focus)}.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-secondary-ghost-surface-secondary-active)}.sapphire-button--secondary-text{color:var(--sapphire-button-color-content-secondary-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-secondary-text);padding:0}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-secondary-hover)}.sapphire-button--secondary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-secondary-active)}.sapphire-button--tertiary-fill{background-color:var(--sapphire-button-color-background-tertiary-default);color:var(--sapphire-button-color-content-tertiary-default)}.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-hover);color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-fill.is-focus,.sapphire-button--tertiary-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-focus)}.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-active);color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-default)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-hover)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-focus)}.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-surface-secondary-active)}.sapphire-button--tertiary-ghost{background-color:var(--sapphire-button-color-background-tertiary-ghost-default);color:var(--sapphire-button-color-content-tertiary-default)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-ghost-hover);color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-ghost.is-focus,.sapphire-button--tertiary-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-ghost-focus)}.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-ghost-active);color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-default)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-hover)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-focus)}.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-tertiary-ghost-surface-secondary-active)}.sapphire-button--tertiary-text{color:var(--sapphire-button-color-content-tertiary-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-tertiary-text);padding:0}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-tertiary-hover)}.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-tertiary-active)}.sapphire-button--danger-fill{background-color:var(--sapphire-button-color-background-danger-default);color:var(--sapphire-button-color-content-danger-default)}.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-hover);color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-fill.is-focus,.sapphire-button--danger-fill:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-focus)}.sapphire-button--danger-fill:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-active);color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--danger-fill.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-danger-surface-secondary-default)}.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-surface-secondary-hover)}.sapphire-button--danger-fill.sapphire-button--secondary-surface.is-focus,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-surface-secondary-focus)}.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-surface-secondary-active)}.sapphire-button--danger-ghost{background-color:var(--sapphire-button-color-background-danger-ghost-default);color:var(--sapphire-button-color-content-danger-default)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-ghost-hover);color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-ghost.is-focus,.sapphire-button--danger-ghost:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-ghost-focus)}.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-active);color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-default)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-hover)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface.is-focus,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-focus)}.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-danger-ghost-surface-secondary-active)}.sapphire-button--danger-text{color:var(--sapphire-button-color-content-danger-default);border-radius:var(--sapphire-button-size-radius-text);background:var(--sapphire-button-color-background-danger-text);padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-button-color-content-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-button-color-content-danger-active)}.sapphire-button--selected{background-color:var(--sapphire-button-color-background-selected-default);color:var(--sapphire-button-color-content-selected-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-selected-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-selected-focus)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-selected-active);color:var(--sapphire-button-color-content-selected-active)}.sapphire-button--unselected{background-color:var(--sapphire-button-color-background-unselected-default);color:var(--sapphire-button-color-content-unselected-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background-color:var(--sapphire-button-color-background-unselected-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background-color:var(--sapphire-button-color-background-unselected-focus)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background-color:var(--sapphire-button-color-background-unselected-active);color:var(--sapphire-button-color-content-unselected-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-button-size-icon-m);width:var(--sapphire-button-size-icon-m)}.sapphire-button--large .sapphire-button__icon{height:var(--sapphire-button-size-icon-l);width:var(--sapphire-button-size-icon-l)}.sapphire-button--small .sapphire-button__icon{height:var(--sapphire-button-size-icon-s);width:var(--sapphire-button-size-icon-s)}.sapphire-button--large{height:var(--sapphire-button-size-height-l);min-width:var(--sapphire-button-size-min-width-no-icon-l);padding:0 var(--sapphire-button-size-spacing-horizontal-l);font-size:var(--sapphire-button-size-font-l);border-radius:var(--sapphire-button-size-radius-l)}.sapphire-button--large.sapphire-button--secondary-text,.sapphire-button--large.sapphire-button--tertiary-text,.sapphire-button--large.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-button-size-radius-text)}.sapphire-button--small{height:var(--sapphire-button-size-height-s);min-width:var(--sapphire-button-size-min-width-no-icon-s);padding:0 var(--sapphire-button-size-spacing-horizontal-s);font-size:var(--sapphire-button-size-font-s);border-radius:var(--sapphire-button-size-radius-s)}.sapphire-button--small.sapphire-button--secondary-text,.sapphire-button--small.sapphire-button--tertiary-text,.sapphire-button--small.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-button-size-radius-text)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     CoerceBoolean
 ], ToggleButtonComponent.prototype, "selected", void 0);
@@ -1172,7 +1172,7 @@ CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             useExisting: forwardRef(() => CheckboxComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["spCheckbox"], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<label\n  [for]=\"_inputId\"\n  class=\"sapphire-checkbox\"\n  [class.sapphire-checkbox--checked]=\"selected\"\n  [class.sapphire-checkbox--indeterminate]=\"indeterminate\"\n  [class.sapphire-checkbox--medium]=\"size === 'medium'\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    class=\"sapphire-checkbox__input\"\n    [attr.aria-checked]=\"_getAriaChecked()\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n    [checked]=\"selected\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [id]=\"_inputId\"\n    [required]=\"required\"\n    [tabIndex]=\"tabIndex\"\n    (blur)=\"_onBlur()\"\n    (click)=\"_onInputClick($event)\"\n    (change)=\"_onInteractionEvent($event)\"\n  />\n  <span class=\"sapphire-checkbox__box\">\n    <svg\n      *ngIf=\"indeterminate\"\n      class=\"sapphire-checkbox__box-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"square\"\n          d=\"M7 12h10\"\n        />\n        <path fill=\"currentColor\" fill-rule=\"nonzero\" d=\"M18 11v2H6v-2z\" />\n      </g>\n    </svg>\n    <svg\n      *ngIf=\"selected && !indeterminate\"\n      class=\"sapphire-checkbox__box-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M17.782 6.918l.753.659a.5.5 0 01.047.705L10.9 17.061a.5.5 0 01-.73.024l-4.232-4.231a.5.5 0 010-.708l.707-.707a.5.5 0 01.708 0l3.097 3.097 6.626-7.57a.5.5 0 01.705-.048z\"\n        fill=\"currentColor\"\n        fill-rule=\"nonzero\"\n      />\n    </svg>\n  </span>\n  <span class=\"sapphire-checkbox__label\"><ng-content></ng-content></span>\n</label>\n", styles: [".sapphire-checkbox{font-family:var(--sapphire-checkbox-font-label-name);display:inline-flex;position:relative;max-width:100%}.sapphire-checkbox__input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-checkbox__label{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-left:var(--sapphire-checkbox-size-spacing-label);font-size:var(--sapphire-checkbox-size-font-content-l);color:var(--sapphire-checkbox-color-label);line-height:var(--sapphire-checkbox-size-height-label-l)}.sapphire-checkbox__label:empty{margin-left:0}.sapphire-checkbox--medium .sapphire-checkbox__label{font-size:var(--sapphire-checkbox-size-font-content-m);line-height:var(--sapphire-checkbox-size-height-label-m)}.sapphire-checkbox__error-text{display:block;font-family:var(--sapphire-checkbox-font-error-text-name);font-weight:var(--sapphire-checkbox-font-error-text-weight);font-size:var(--sapphire-checkbox-size-font-error-text-l);line-height:var(--sapphire-checkbox-size-line-height-error-text-l);color:var(--sapphire-checkbox-color-error-text);margin-top:var(--sapphire-checkbox-size-spacing-error-text-vertical);margin-left:calc(var(--sapphire-checkbox-size-spacing-label) + var(--sapphire-checkbox-size-width-box-l))}.sapphire-checkbox__error-text--medium{font-size:var(--sapphire-checkbox-size-font-error-text-m);line-height:var(--sapphire-checkbox-size-line-height-error-text-m);margin-left:calc(var(--sapphire-checkbox-size-spacing-label) + var(--sapphire-checkbox-size-width-box-m))}.sapphire-checkbox__box{box-sizing:border-box;position:relative;width:var(--sapphire-checkbox-size-width-box-l);height:var(--sapphire-checkbox-size-height-box-l);border-radius:var(--sapphire-checkbox-size-radius);border:var(--sapphire-checkbox-size-width-border-unchecked) solid var(--sapphire-checkbox-color-border-unchecked-default);background-color:var(--sapphire-checkbox-color-background-unchecked);transition:all var(--sapphire-checkbox-time-transition);flex-shrink:0;display:inline-flex;justify-content:center;align-items:center}.sapphire-checkbox__box:has(~ .sapphire-checkbox__label:not(:empty)){margin-top:var(--sapphire-checkbox-size-spacing-box)}.sapphire-checkbox--medium .sapphire-checkbox__box{width:var(--sapphire-checkbox-size-width-box-m);height:var(--sapphire-checkbox-size-height-box-m)}.sapphire-checkbox__box-icon{display:inherit;line-height:0;color:var(--sapphire-checkbox-color-icon);margin:calc(var(--sapphire-checkbox-size-width-border-unchecked) * -1);height:var(--sapphire-checkbox-size-height-box-l);width:var(--sapphire-checkbox-size-width-box-l)}.sapphire-checkbox--medium .sapphire-checkbox__box-icon{height:var(--sapphire-checkbox-size-height-box-m);width:var(--sapphire-checkbox-size-width-box-m)}.sapphire-checkbox--error .sapphire-checkbox__box{border-color:var(--sapphire-checkbox-color-border-unchecked-error-default)}.sapphire-checkbox--checked .sapphire-checkbox__box,.sapphire-checkbox--indeterminate .sapphire-checkbox__box{border-width:var(--sapphire-checkbox-size-width-border-checked);background-color:var(--sapphire-checkbox-color-background-checked-default)}.sapphire-checkbox--checked.sapphire-checkbox--error .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error .sapphire-checkbox__box{background-color:var(--sapphire-checkbox-color-background-checked-error-default)}.sapphire-checkbox:not(:active):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox:not(:active):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-checkbox-color-border-unchecked-hover)}.sapphire-checkbox--error:not(:active):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox--error:not(:active):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-checkbox-color-border-unchecked-error-hover)}.sapphire-checkbox--checked:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background-color:var(--sapphire-checkbox-color-background-checked-hover)}.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background-color:var(--sapphire-checkbox-color-background-checked-error-hover)}.sapphire-checkbox.is-focus .sapphire-checkbox__box,.sapphire-checkbox:not(.js-focus) .sapphire-checkbox__input:focus-visible~.sapphire-checkbox__box{outline:var(--sapphire-checkbox-size-focus-ring-border) solid var(--sapphire-checkbox-color-focus-ring);outline-offset:var(--sapphire-checkbox-size-focus-ring-offset)}.sapphire-checkbox__input:disabled{cursor:not-allowed}.sapphire-checkbox:not(.sapphire-checkbox--no-disabled) .sapphire-checkbox__input:disabled~.sapphire-checkbox__box,.sapphire-checkbox:not(.sapphire-checkbox--no-disabled) .sapphire-checkbox__input:disabled~.sapphire-checkbox__label{opacity:var(--sapphire-checkbox-opacity-disabled)}:host{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["spCheckbox"], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<label\n  [for]=\"_inputId\"\n  class=\"sapphire-checkbox\"\n  [class.sapphire-checkbox--checked]=\"selected\"\n  [class.sapphire-checkbox--indeterminate]=\"indeterminate\"\n  [class.sapphire-checkbox--medium]=\"size === 'medium'\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    class=\"sapphire-checkbox__input\"\n    [attr.aria-checked]=\"_getAriaChecked()\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n    [checked]=\"selected\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [id]=\"_inputId\"\n    [required]=\"required\"\n    [tabIndex]=\"tabIndex\"\n    (blur)=\"_onBlur()\"\n    (click)=\"_onInputClick($event)\"\n    (change)=\"_onInteractionEvent($event)\"\n  />\n  <span class=\"sapphire-checkbox__box\">\n    <svg\n      *ngIf=\"indeterminate\"\n      class=\"sapphire-checkbox__box-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"square\"\n          d=\"M7 12h10\"\n        />\n        <path fill=\"currentColor\" fill-rule=\"nonzero\" d=\"M18 11v2H6v-2z\" />\n      </g>\n    </svg>\n    <svg\n      *ngIf=\"selected && !indeterminate\"\n      class=\"sapphire-checkbox__box-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M17.782 6.918l.753.659a.5.5 0 01.047.705L10.9 17.061a.5.5 0 01-.73.024l-4.232-4.231a.5.5 0 010-.708l.707-.707a.5.5 0 01.708 0l3.097 3.097 6.626-7.57a.5.5 0 01.705-.048z\"\n        fill=\"currentColor\"\n        fill-rule=\"nonzero\"\n      />\n    </svg>\n  </span>\n  <span class=\"sapphire-checkbox__label\"><ng-content></ng-content></span>\n</label>\n", styles: [".sapphire-checkbox{font-family:var(--sapphire-checkbox-font-label-name);display:inline-flex;position:relative;max-width:100%}.sapphire-checkbox__input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-checkbox__label{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-left:var(--sapphire-checkbox-size-spacing-label);font-size:var(--sapphire-checkbox-size-font-content-l);color:var(--sapphire-checkbox-color-label);line-height:var(--sapphire-checkbox-size-height-label-l)}.sapphire-checkbox__label:empty{margin-left:0}.sapphire-checkbox--medium .sapphire-checkbox__label{font-size:var(--sapphire-checkbox-size-font-content-m);line-height:var(--sapphire-checkbox-size-height-label-m)}.sapphire-checkbox__error-text{display:block;font-family:var(--sapphire-checkbox-font-error-text-name);font-weight:var(--sapphire-checkbox-font-error-text-weight);font-size:var(--sapphire-checkbox-size-font-error-text-l);line-height:var(--sapphire-checkbox-size-line-height-error-text-l);color:var(--sapphire-checkbox-color-error-text);margin-top:var(--sapphire-checkbox-size-spacing-error-text-vertical);margin-left:calc(var(--sapphire-checkbox-size-spacing-label) + var(--sapphire-checkbox-size-width-box-l))}.sapphire-checkbox__error-text--medium{font-size:var(--sapphire-checkbox-size-font-error-text-m);line-height:var(--sapphire-checkbox-size-line-height-error-text-m);margin-left:calc(var(--sapphire-checkbox-size-spacing-label) + var(--sapphire-checkbox-size-width-box-m))}.sapphire-checkbox__box{box-sizing:border-box;position:relative;width:var(--sapphire-checkbox-size-width-box-l);height:var(--sapphire-checkbox-size-height-box-l);border-radius:var(--sapphire-checkbox-size-radius);border:var(--sapphire-checkbox-size-width-border-unchecked) solid var(--sapphire-checkbox-color-border-unchecked-default);background-color:var(--sapphire-checkbox-color-background-unchecked);transition:all var(--sapphire-checkbox-time-transition);flex-shrink:0;display:inline-flex;justify-content:center;align-items:center}.sapphire-checkbox__box:has(~ .sapphire-checkbox__label:not(:empty)){margin-top:var(--sapphire-checkbox-size-spacing-box)}.sapphire-checkbox--medium .sapphire-checkbox__box{width:var(--sapphire-checkbox-size-width-box-m);height:var(--sapphire-checkbox-size-height-box-m)}.sapphire-checkbox__box-icon{display:inherit;line-height:0;color:var(--sapphire-checkbox-color-icon);margin:calc(var(--sapphire-checkbox-size-width-border-unchecked) * -1);height:var(--sapphire-checkbox-size-height-box-l);width:var(--sapphire-checkbox-size-width-box-l)}.sapphire-checkbox--medium .sapphire-checkbox__box-icon{height:var(--sapphire-checkbox-size-height-box-m);width:var(--sapphire-checkbox-size-width-box-m)}.sapphire-checkbox--error .sapphire-checkbox__box{border-color:var(--sapphire-checkbox-color-border-unchecked-error-default)}.sapphire-checkbox--checked .sapphire-checkbox__box,.sapphire-checkbox--indeterminate .sapphire-checkbox__box{border-width:var(--sapphire-checkbox-size-width-border-checked);background-color:var(--sapphire-checkbox-color-background-checked-default)}.sapphire-checkbox--checked.sapphire-checkbox--error .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error .sapphire-checkbox__box{background-color:var(--sapphire-checkbox-color-background-checked-error-default)}.sapphire-checkbox:not(:active):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox:not(:active):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-checkbox-color-border-unchecked-hover)}.sapphire-checkbox--error:not(:active):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox--error:not(:active):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-checkbox-color-border-unchecked-error-hover)}.sapphire-checkbox--checked:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background-color:var(--sapphire-checkbox-color-background-checked-hover)}.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background-color:var(--sapphire-checkbox-color-background-checked-error-hover)}.sapphire-checkbox.is-focus .sapphire-checkbox__box,.sapphire-checkbox:not(.js-focus) .sapphire-checkbox__input:focus-visible~.sapphire-checkbox__box{outline:var(--sapphire-checkbox-size-focus-ring-border) solid var(--sapphire-checkbox-color-focus-ring);outline-offset:var(--sapphire-checkbox-size-focus-ring-offset)}.sapphire-checkbox__input:disabled{cursor:not-allowed}.sapphire-checkbox:not(.sapphire-checkbox--no-disabled) .sapphire-checkbox__input:disabled~.sapphire-checkbox__box,.sapphire-checkbox:not(.sapphire-checkbox--no-disabled) .sapphire-checkbox__input:disabled~.sapphire-checkbox__label{opacity:var(--sapphire-checkbox-opacity-disabled)}:host{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     AutoId()
 ], CheckboxComponent.prototype, "id", void 0);
@@ -1282,7 +1282,7 @@ class MenuComponent {
     }
 }
 MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuComponent, selector: "sp-menu", inputs: { size: "size" }, host: { properties: { "class.sapphire-popover": "true", "class.sapphire-popover--max-width": "true" } }, hostDirectives: [{ directive: i1$2.CdkMenu, outputs: ["closed", "closed"] }, { directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div\n  class=\"sapphire-listbox\"\n  [class.sapphire-listbox--medium]=\"size === 'medium'\"\n  [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;min-width:var(--sapphire-listbox-size-width-min);margin:0;position:relative;list-style:none;outline:none;padding:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-listbox-size-spacing-outer-vertical) var(--sapphire-listbox-size-spacing-outer-horizontal);color:var(--sapphire-listbox-color-content-normal-primary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-listbox-color-content-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-listbox-color-content-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-listbox-color-background-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-size-width-icon-l));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-listbox-size-spacing-inner-horizontal-l);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-l);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-l) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-l);border-radius:var(--sapphire-listbox-size-radius-item);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-listbox-time-transition);transition-timing-function:ease-in-out;min-height:var(--sapphire-listbox-size-height-min-height)}.sapphire-listbox--medium .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-m);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-m);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-m) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-m)}.sapphire-listbox--small .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-s);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-s);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-s) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-s)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-listbox-font-name);line-height:var(--sapphire-listbox-size-line-height)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-listbox-font-weight-primary);font-size:var(--sapphire-listbox-size-font-primary-l)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-listbox-font-weight-secondary);font-size:var(--sapphire-listbox-size-font-secondary-l)}.sapphire-listbox--medium .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-m)}.sapphire-listbox--small .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-s)}.sapphire-listbox--medium .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-m)}.sapphire-listbox--small .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-s)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-listbox-color-content-normal-secondary-default)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-listbox-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__separator{height:var(--sapphire-listbox-size-height-separator);width:100%;background:var(--sapphire-listbox-color-separator);margin-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));margin-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-listbox-size-focus-ring) var(--sapphire-listbox-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-hover);background-color:var(--sapphire-listbox-color-background-normal-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-hover);background-color:var(--sapphire-listbox-color-background-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-hover);background-color:var(--sapphire-listbox-color-background-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-active);background-color:var(--sapphire-listbox-color-background-normal-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-active);background-color:var(--sapphire-listbox-color-background-danger-active)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-active);background-color:var(--sapphire-listbox-color-background-selected-active)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-popover-color-background);box-shadow:var(--sapphire-popover-shadow);animation:fade-in var(--sapphire-popover-time-transition) ease-in-out;border-radius:var(--sapphire-popover-size-radius);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-popover-size-spacing-padded)}.sapphire-popover--max-width{max-width:var(--sapphire-popover-size-max-width)}.sapphire-menu-backdrop{background:none}\n"] });
+MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuComponent, selector: "sp-menu", inputs: { size: "size" }, host: { properties: { "class.sapphire-popover": "true", "class.sapphire-popover--max-width": "true" } }, hostDirectives: [{ directive: i1$1.CdkMenu, outputs: ["closed", "closed"] }, { directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div\n  class=\"sapphire-listbox\"\n  [class.sapphire-listbox--medium]=\"size === 'medium'\"\n  [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;min-width:var(--sapphire-listbox-size-width-min);margin:0;position:relative;list-style:none;outline:none;padding:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-listbox-size-spacing-outer-vertical) var(--sapphire-listbox-size-spacing-outer-horizontal);color:var(--sapphire-listbox-color-content-normal-primary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-listbox-color-content-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-listbox-color-content-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-listbox-color-background-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-size-width-icon-l));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-listbox-size-spacing-inner-horizontal-l);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-l);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-l) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-l);border-radius:var(--sapphire-listbox-size-radius-item);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-listbox-time-transition);transition-timing-function:ease-in-out;min-height:var(--sapphire-listbox-size-height-min-height)}.sapphire-listbox--medium .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-m);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-m);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-m) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-m)}.sapphire-listbox--small .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-s);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-s);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-s) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-s)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-listbox-font-name);line-height:var(--sapphire-listbox-size-line-height)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-listbox-font-weight-primary);font-size:var(--sapphire-listbox-size-font-primary-l)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-listbox-font-weight-secondary);font-size:var(--sapphire-listbox-size-font-secondary-l)}.sapphire-listbox--medium .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-m)}.sapphire-listbox--small .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-s)}.sapphire-listbox--medium .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-m)}.sapphire-listbox--small .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-s)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-listbox-color-content-normal-secondary-default)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-listbox-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__separator{height:var(--sapphire-listbox-size-height-separator);width:100%;background:var(--sapphire-listbox-color-separator);margin-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));margin-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-listbox-size-focus-ring) var(--sapphire-listbox-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-hover);background-color:var(--sapphire-listbox-color-background-normal-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-hover);background-color:var(--sapphire-listbox-color-background-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-hover);background-color:var(--sapphire-listbox-color-background-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-active);background-color:var(--sapphire-listbox-color-background-normal-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-active);background-color:var(--sapphire-listbox-color-background-danger-active)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-active);background-color:var(--sapphire-listbox-color-background-selected-active)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-popover-color-background);box-shadow:var(--sapphire-popover-shadow);animation:fade-in var(--sapphire-popover-time-transition) ease-in-out;border-radius:var(--sapphire-popover-size-radius);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-popover-size-spacing-padded)}.sapphire-popover--max-width{max-width:var(--sapphire-popover-size-max-width)}.sapphire-menu-backdrop{background:none}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-menu', hostDirectives: [
@@ -1303,7 +1303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
 class MenuItemComponent {
 }
 MenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuItemComponent, selector: "sp-menu-item", inputs: { disabled: "disabled", danger: "danger" }, host: { properties: { "class.sapphire-listbox__item": "true", "class.is-disabled": "this.disabled", "class.sapphire-listbox__item--danger": "this.danger" } }, hostDirectives: [{ directive: i1$2.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel"], outputs: ["cdkMenuItemTriggered", "triggered"] }, { directive: UseComponentStyles }], ngImport: i0, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n  <ng-content select=\"sp-menu-item-icon\"></ng-content>\n  <div class=\"sapphire-listbox__text-container\" _spUseComponentStyles>\n    <div class=\"sapphire-listbox__primary-text\" _spUseComponentStyles>\n      <ng-content select=\"sp-menu-primary-text\"></ng-content>\n      <!-- If nothing matches other ng-content selectors then render it as primary text -->\n      <ng-content></ng-content>\n    </div>\n    <ng-content select=\"sp-menu-secondary-text\"></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
+MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuItemComponent, selector: "sp-menu-item", inputs: { disabled: "disabled", danger: "danger" }, host: { properties: { "class.sapphire-listbox__item": "true", "class.is-disabled": "this.disabled", "class.sapphire-listbox__item--danger": "this.danger" } }, hostDirectives: [{ directive: i1$1.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel"], outputs: ["cdkMenuItemTriggered", "triggered"] }, { directive: UseComponentStyles }], ngImport: i0, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n  <ng-content select=\"sp-menu-item-icon\"></ng-content>\n  <div class=\"sapphire-listbox__text-container\" _spUseComponentStyles>\n    <div class=\"sapphire-listbox__primary-text\" _spUseComponentStyles>\n      <ng-content select=\"sp-menu-primary-text\"></ng-content>\n      <!-- If nothing matches other ng-content selectors then render it as primary text -->\n      <ng-content></ng-content>\n    </div>\n    <ng-content select=\"sp-menu-secondary-text\"></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
 __decorate([
     CoerceBoolean
 ], MenuItemComponent.prototype, "disabled", void 0);
@@ -1505,8 +1505,8 @@ class MenuTriggerDirective {
         return `${this.direction} ${this.align}`;
     }
 }
-MenuTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuTriggerDirective, deps: [{ token: i1$2.CdkMenuTrigger }], target: i0.ɵɵFactoryTarget.Directive });
-MenuTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: MenuTriggerDirective, selector: "[spMenuTriggerFor]", inputs: { align: ["spMenuTriggerAlign", "align"], direction: ["spMenuTriggerDirection", "direction"] }, host: { listeners: { "keydown.space": "handleSpace()", "keydown.escape": "handleEscape()" }, properties: { "class.is-active": "isOpen()" } }, exportAs: ["spMenuTrigger"], hostDirectives: [{ directive: i1$2.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "spMenuTriggerFor"], outputs: ["cdkMenuOpened", "spMenuOpened", "cdkMenuClosed", "spMenuClosed"] }], ngImport: i0 });
+MenuTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuTriggerDirective, deps: [{ token: i1$1.CdkMenuTrigger }], target: i0.ɵɵFactoryTarget.Directive });
+MenuTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: MenuTriggerDirective, selector: "[spMenuTriggerFor]", inputs: { align: ["spMenuTriggerAlign", "align"], direction: ["spMenuTriggerDirection", "direction"] }, host: { listeners: { "keydown.space": "handleSpace()", "keydown.escape": "handleEscape()" }, properties: { "class.is-active": "isOpen()" } }, exportAs: ["spMenuTrigger"], hostDirectives: [{ directive: i1$1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "spMenuTriggerFor"], outputs: ["cdkMenuOpened", "spMenuOpened", "cdkMenuClosed", "spMenuClosed"] }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuTriggerDirective, decorators: [{
             type: Directive,
             args: [{
@@ -1523,7 +1523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         '[class.is-active]': 'isOpen()',
                     },
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.CdkMenuTrigger }]; }, propDecorators: { align: [{
+        }], ctorParameters: function () { return [{ type: i1$1.CdkMenuTrigger }]; }, propDecorators: { align: [{
                 type: Input,
                 args: ['spMenuTriggerAlign']
             }], direction: [{
@@ -1546,14 +1546,14 @@ class MenuSectionComponent {
         return ((_a = this.menu.items) === null || _a === void 0 ? void 0 : _a.first) === this.firstMenuItem;
     }
 }
-MenuSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuSectionComponent, deps: [{ token: i1$2.CdkMenu }], target: i0.ɵɵFactoryTarget.Component });
-MenuSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuSectionComponent, selector: "sp-menu-section", host: { properties: { "class.sapphire-listbox__section": "true" } }, queries: [{ propertyName: "firstMenuItem", first: true, predicate: CdkMenuItem, descendants: true }], hostDirectives: [{ directive: i1$2.CdkMenuGroup }, { directive: UseComponentStyles }], ngImport: i0, template: "<div\n  *ngIf=\"!_isFirstSection()\"\n  class=\"sapphire-listbox__separator\"\n  _spUseComponentStyles\n></div>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
+MenuSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuSectionComponent, deps: [{ token: i1$1.CdkMenu }], target: i0.ɵɵFactoryTarget.Component });
+MenuSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuSectionComponent, selector: "sp-menu-section", host: { properties: { "class.sapphire-listbox__section": "true" } }, queries: [{ propertyName: "firstMenuItem", first: true, predicate: CdkMenuItem, descendants: true }], hostDirectives: [{ directive: i1$1.CdkMenuGroup }, { directive: UseComponentStyles }], ngImport: i0, template: "<div\n  *ngIf=\"!_isFirstSection()\"\n  class=\"sapphire-listbox__separator\"\n  _spUseComponentStyles\n></div>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-menu-section', hostDirectives: [CdkMenuGroup, UseComponentStyles], host: {
                         '[class.sapphire-listbox__section]': 'true',
                     }, template: "<div\n  *ngIf=\"!_isFirstSection()\"\n  class=\"sapphire-listbox__separator\"\n  _spUseComponentStyles\n></div>\n<ng-content></ng-content>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$2.CdkMenu }]; }, propDecorators: { firstMenuItem: [{
+        }], ctorParameters: function () { return [{ type: i1$1.CdkMenu }]; }, propDecorators: { firstMenuItem: [{
                 type: ContentChild,
                 args: [CdkMenuItem]
             }] } });
@@ -1877,7 +1877,7 @@ class PopoverTriggerDirective {
             .withViewportMargin(placement.includes('end') ? 0 : 6));
     }
 }
-PopoverTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PopoverTriggerDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+PopoverTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PopoverTriggerDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
 PopoverTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: { placement: ["spPopoverPlacement", "placement"], templateRef: ["spPopoverTriggerFor", "templateRef"], nonModal: ["spPopoverNonModal", "nonModal"], openOnPressStart: ["spPopoverTriggerOpenOnPressStart", "openOnPressStart"], closeOnScroll: ["spPopoverTriggerCloseOnScroll", "closeOnScroll"], disabled: ["spPopoverTriggerDisabled", "disabled"] }, outputs: { opened: "spPopoverTriggerOpened", closed: "spPopoverTriggerClosed" }, host: { listeners: { "mousedown": "handleMousedown($event)", "click": "handleClick($event)", "keydown.tab": "handleTab()", "focusout": "onFocusout($event)", "keydown": "handleKeyDown($event)" }, properties: { "class.is-active": "isOpen()", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "this.getPopoverId" } }, providers: [
         { provide: POPOVER_TRIGGER, useExisting: PopoverTriggerDirective },
     ], exportAs: ["spPopoverTrigger"], ngImport: i0 });
@@ -1906,7 +1906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                     },
                     exportAs: 'spPopoverTrigger',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.Injector }]; }, propDecorators: { placement: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.Injector }]; }, propDecorators: { placement: [{
                 type: Input,
                 args: ['spPopoverPlacement']
             }], templateRef: [{
@@ -2040,7 +2040,7 @@ class PopoverComponent {
     }
 }
 PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PopoverComponent, deps: [{ token: POPOVER_TRIGGER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PopoverComponent, selector: "sp-popover", inputs: { noPadding: "noPadding", noMaxWidth: "noMaxWidth", noAutoFocus: "noAutoFocus", trapFocus: "trapFocus" }, host: { attributes: { "role": "presentation" }, listeners: { "keydown.Escape": "handleEscape($event)" }, properties: { "class.sapphire-popover": "true", "class.sapphire-popover--padded": "!noPadding", "class.sapphire-popover--max-width": "!noMaxWidth" } }, queries: [{ propertyName: "title", first: true, predicate: PopoverTitleDirective, descendants: true }], viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<!--\n NOTE: cdkTrapFocus is required for cdkTrapFocusAutoCapture to work, which would be similar to\n <FocusScope autoFocus /> in react-aria.\n\n It prevents focus from going out of popover by bringing it back to the first\n focusable element.\n\n We sometimes counter this in (cdkFocusChange) and sometimes don't, based on\n the \"trapFocus\" input.\n  -->\n<div\n  #contentWrapper\n  [id]=\"ID\"\n  role=\"dialog\"\n  tabindex=\"-1\"\n  cdkMonitorSubtreeFocus\n  cdkTrapFocus\n  [cdkTrapFocusAutoCapture]=\"!noAutoFocus\"\n  class=\"dialog\"\n  [attr.aria-labelledby]=\"title?.ID\"\n  (cdkFocusChange)=\"_contentFocusChanged($event)\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-popover-color-background);box-shadow:var(--sapphire-popover-shadow);animation:fade-in var(--sapphire-popover-time-transition) ease-in-out;border-radius:var(--sapphire-popover-size-radius);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-popover-size-spacing-padded)}.sapphire-popover--max-width{max-width:var(--sapphire-popover-size-max-width)}.dialog{outline:none}\n"], dependencies: [{ kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
+PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PopoverComponent, selector: "sp-popover", inputs: { noPadding: "noPadding", noMaxWidth: "noMaxWidth", noAutoFocus: "noAutoFocus", trapFocus: "trapFocus" }, host: { attributes: { "role": "presentation" }, listeners: { "keydown.Escape": "handleEscape($event)" }, properties: { "class.sapphire-popover": "true", "class.sapphire-popover--padded": "!noPadding", "class.sapphire-popover--max-width": "!noMaxWidth" } }, queries: [{ propertyName: "title", first: true, predicate: PopoverTitleDirective, descendants: true }], viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<!--\n NOTE: cdkTrapFocus is required for cdkTrapFocusAutoCapture to work, which would be similar to\n <FocusScope autoFocus /> in react-aria.\n\n It prevents focus from going out of popover by bringing it back to the first\n focusable element.\n\n We sometimes counter this in (cdkFocusChange) and sometimes don't, based on\n the \"trapFocus\" input.\n  -->\n<div\n  #contentWrapper\n  [id]=\"ID\"\n  role=\"dialog\"\n  tabindex=\"-1\"\n  cdkMonitorSubtreeFocus\n  cdkTrapFocus\n  [cdkTrapFocusAutoCapture]=\"!noAutoFocus\"\n  class=\"dialog\"\n  [attr.aria-labelledby]=\"title?.ID\"\n  (cdkFocusChange)=\"_contentFocusChanged($event)\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-popover-color-background);box-shadow:var(--sapphire-popover-shadow);animation:fade-in var(--sapphire-popover-time-transition) ease-in-out;border-radius:var(--sapphire-popover-size-radius);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-popover-size-spacing-padded)}.sapphire-popover--max-width{max-width:var(--sapphire-popover-size-max-width)}.dialog{outline:none}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
 __decorate([
     CoerceBoolean
 ], PopoverComponent.prototype, "noPadding", void 0);
@@ -2208,7 +2208,7 @@ class FieldErrorDirective {
     }
 }
 FieldErrorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldErrorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FieldErrorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: FieldErrorDirective, isStandalone: true, selector: "sp-field-error", inputs: { id: "id" }, host: { properties: { "id": "this.id" }, classAttribute: "sapphire-field__note" }, ngImport: i0 });
+FieldErrorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: FieldErrorDirective, isStandalone: true, selector: "sp-field-error", inputs: { id: "id", target: "target" }, host: { properties: { "id": "this.id" }, classAttribute: "sapphire-field__note" }, ngImport: i0 });
 __decorate([
     AutoId()
 ], FieldErrorDirective.prototype, "id", void 0);
@@ -2225,6 +2225,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                 type: HostBinding
             }, {
                 type: Input
+            }], target: [{
+                type: Input
             }] } });
 
 /**
@@ -2515,7 +2517,7 @@ class RadioComponent extends _RadioMixinBase {
         }
     }
 }
-RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioComponent, deps: [{ token: RadioGroupComponent, optional: true }, { token: i0.ElementRef }, { token: 'tabindex', attribute: true }, { token: i2.FocusMonitor }, { token: i3.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioComponent, deps: [{ token: RadioGroupComponent, optional: true }, { token: i0.ElementRef }, { token: 'tabindex', attribute: true }, { token: i2$1.FocusMonitor }, { token: i3.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Component });
 RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: RadioComponent, selector: "sp-radio", inputs: { tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], name: "name", autofocus: "autofocus", id: "id", value: "value", checked: "checked", disabled: "disabled", readonly: "readonly", required: "required" }, outputs: { change: "change" }, host: { properties: { "attr.id": "id", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "id": "this.id" } }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<label\n  [for]=\"inputId\"\n  class=\"sapphire-radio\"\n  [class.sapphire-radio--no-disabled]=\"radioGroup?.disabled\"\n  [class.sapphire-radio--checked]=\"checked\"\n  [class.sapphire-radio--medium]=\"radioGroup?._field?.size === 'medium'\"\n>\n  <input\n    #input\n    class=\"sapphire-radio__input\"\n    type=\"radio\"\n    [id]=\"inputId\"\n    [attr.aria-checked]=\"_getAriaChecked()\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    (change)=\"_onInputInteraction($event)\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n  />\n  <span class=\"sapphire-radio__box\"></span>\n  <span class=\"sapphire-radio__label\">\n    <ng-content></ng-content>\n  </span>\n</label>\n", styles: [".sapphire-radio{display:inline-flex;font-family:var(--sapphire-radio-font-label-name);max-width:100%;position:relative}.sapphire-radio__input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-radio__label{margin-left:var(--sapphire-radio-size-spacing-label);font-size:var(--sapphire-radio-size-font-l);line-height:var(--sapphire-radio-size-height-label-l);color:var(--sapphire-radio-color-label);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-radio--medium .sapphire-radio__label{font-size:var(--sapphire-radio-size-font-m);line-height:var(--sapphire-radio-size-height-label-m)}.sapphire-radio__box{box-sizing:border-box;background-color:var(--sapphire-radio-color-background-box-unchecked-default);width:var(--sapphire-radio-size-width-box-l);height:var(--sapphire-radio-size-height-box-l);flex-shrink:0;border-radius:50%;border:var(--sapphire-radio-size-width-border-unchecked) solid var(--sapphire-radio-color-border-box-unchecked-default);position:relative;margin-top:var(--sapphire-radio-size-spacing-box);transition-property:background-color,border-color,border-width;transition-duration:var(--sapphire-radio-time-transition);transition-timing-function:ease-in-out}.sapphire-radio--medium .sapphire-radio__box{width:var(--sapphire-radio-size-width-box-m);height:var(--sapphire-radio-size-height-box-m)}.sapphire-radio--checked .sapphire-radio__box{border-color:var(--sapphire-radio-color-background-box-checked-default);border-width:calc((var(--sapphire-radio-size-height-box-l) - var(--sapphire-radio-size-circle-l)) / 2)}.sapphire-radio--medium.sapphire-radio--checked .sapphire-radio__box{border-width:calc((var(--sapphire-radio-size-height-box-m) - var(--sapphire-radio-size-circle-m)) / 2)}.sapphire-radio--checked .sapphire-radio__box:after{display:block}.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked).is-hover .sapphire-radio__box,.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked):not(.js-hover):hover .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-radio-color-border-box-unchecked-hover)}.sapphire-radio--checked:not(:active):not(.is-active).is-hover .sapphire-radio__box,.sapphire-radio--checked:not(:active):not(.is-active):not(.js-hover):hover .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-radio-color-background-box-checked-hover)}.sapphire-radio.is-focus .sapphire-radio__input~.sapphire-radio__box,.sapphire-radio:not(.js-focus) .sapphire-radio__input:focus-visible~.sapphire-radio__box{outline:var(--sapphire-radio-size-focus-ring-border) solid var(--sapphire-radio-color-focus-ring);outline-offset:var(--sapphire-radio-size-focus-ring-offset)}.sapphire-radio__input:disabled{cursor:not-allowed}.sapphire-radio:not(.sapphire-radio--no-disabled) .sapphire-radio__input:disabled~.sapphire-radio__box,.sapphire-radio:not(.sapphire-radio--no-disabled) .sapphire-radio__input:disabled~.sapphire-radio__label{opacity:var(--sapphire-radio-opacity-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.Default });
 __decorate([
     AutoId()
@@ -2535,7 +2537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                     }] }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                         type: Attribute,
                         args: ['tabindex']
-                    }] }, { type: i2.FocusMonitor }, { type: i3.UniqueSelectionDispatcher }];
+                    }] }, { type: i2$1.FocusMonitor }, { type: i3.UniqueSelectionDispatcher }];
     }, propDecorators: { ariaLabel: [{
                 type: Input,
                 args: ['aria-label']
@@ -2711,7 +2713,7 @@ RadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             provide: FieldControl,
             useExisting: forwardRef(() => RadioGroupComponent),
         },
-    ], queries: [{ propertyName: "radios", predicate: i0.forwardRef(function () { return RadioComponent; }), descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<div\n  class=\"sapphire-field-group\"\n  role=\"radiogroup\"\n  [attr.aria-orientation]=\"orientation\"\n  [attr.aria-labelledby]=\"_field?.label?.id\"\n  [class.sapphire-field-group--vertical]=\"orientation === 'vertical'\"\n  [class.sapphire-field-group--horizontal]=\"orientation === 'horizontal'\"\n  [class.sapphire-field-group--medium]=\"_field?.size === 'medium'\"\n  (cdkFocusChange)=\"_contentFocusChanged($event)\"\n  cdkMonitorSubtreeFocus\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sapphire-field-group{display:flex;flex-wrap:wrap;column-gap:var(--sapphire-field-group-size-spacing-field-horizontal);row-gap:var(--sapphire-field-group-size-spacing-field-vertical-l)}.sapphire-field-group--horizontal{flex-direction:row}.sapphire-field-group--vertical{flex-direction:column}.sapphire-field-group--medium{row-gap:var(--sapphire-field-group-size-spacing-field-vertical-m)}\n"], dependencies: [{ kind: "directive", type: i2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+    ], queries: [{ propertyName: "radios", predicate: i0.forwardRef(function () { return RadioComponent; }), descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<div\n  class=\"sapphire-field-group\"\n  role=\"radiogroup\"\n  [attr.aria-orientation]=\"orientation\"\n  [attr.aria-labelledby]=\"_field?.label?.id\"\n  [class.sapphire-field-group--vertical]=\"orientation === 'vertical'\"\n  [class.sapphire-field-group--horizontal]=\"orientation === 'horizontal'\"\n  [class.sapphire-field-group--medium]=\"_field?.size === 'medium'\"\n  (cdkFocusChange)=\"_contentFocusChanged($event)\"\n  cdkMonitorSubtreeFocus\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sapphire-field-group{display:flex;flex-wrap:wrap;column-gap:var(--sapphire-field-group-size-spacing-field-horizontal);row-gap:var(--sapphire-field-group-size-spacing-field-vertical-l)}.sapphire-field-group--horizontal{flex-direction:row}.sapphire-field-group--vertical{flex-direction:column}.sapphire-field-group--medium{row-gap:var(--sapphire-field-group-size-spacing-field-vertical-m)}\n"], dependencies: [{ kind: "directive", type: i2$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 __decorate([
     AutoId()
 ], RadioGroupComponent.prototype, "uniqueId", void 0);
@@ -2798,7 +2800,7 @@ class FieldComponent {
         this.changed = false;
     }
     ngAfterContentInit() {
-        if (!this.control && isDevMode()) {
+        if (!this.controls && isDevMode()) {
             throw new Error('sp-field is rendered without any control like sp-select, sp-text-field, or sp-radio-group inside it.');
         }
     }
@@ -2819,8 +2821,29 @@ class FieldComponent {
     /**
      * Whether the field contains an error message (sp-field-error).
      */
-    hasError() {
-        return this.error != undefined;
+    hasError(targetField) {
+        return (this.error !== undefined &&
+            (!targetField || !this.error.target || this.error.target === targetField));
+    }
+    /**
+     * If there are multiple controls, the field is only disabled when all of them are disabled
+     */
+    isDisabled() {
+        var _a;
+        if (!this.controls || this.controls.length === 0) {
+            return false;
+        }
+        return (_a = this.controls) === null || _a === void 0 ? void 0 : _a.toArray().every((control) => control.isDisabled());
+    }
+    /**
+     * Only support features like `for` or `labelClick` if the field has one control.
+     */
+    get control() {
+        var _a;
+        return ((_a = this.controls) === null || _a === void 0 ? void 0 : _a.length) === 1 ? this.controls.first : undefined;
+    }
+    get isGroup() {
+        return this.controls ? this.controls.length > 1 : false;
     }
     /**
      * Whether the field control is radio group (sp-radio-group).
@@ -2850,12 +2873,12 @@ class FieldComponent {
     }
 }
 FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: FieldComponent, selector: "sp-field", inputs: { necessityIndicator: "necessityIndicator", labelPlacement: "labelPlacement", size: "size" }, host: { properties: { "class.sapphire-field--label-placement-side": "labelPlacement === \"side\"", "class.sapphire-field--label-alignment-top": "labelPlacement === \"side\" && hasFieldGroupChild()", "class.sapphire-field--medium": "size === \"medium\"", "class.sapphire-field--error": "hasError()", "class.is-disabled": "control?.isDisabled()" }, classAttribute: "sapphire-field" }, providers: [
+FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: FieldComponent, selector: "sp-field", inputs: { necessityIndicator: "necessityIndicator", labelPlacement: "labelPlacement", size: "size" }, host: { properties: { "class.sapphire-field--label-placement-side": "labelPlacement === \"side\"", "class.sapphire-field--label-alignment-top": "labelPlacement === \"side\" && hasFieldGroupChild()", "class.sapphire-field--medium": "size === \"medium\"", "class.sapphire-field--error": "hasError()", "class.is-disabled": "isDisabled()" }, classAttribute: "sapphire-field" }, providers: [
         {
             provide: ICON_SIZE_PROVIDER,
             useExisting: forwardRef(() => FieldComponent),
         },
-    ], queries: [{ propertyName: "note", first: true, predicate: FieldNoteDirective, descendants: true }, { propertyName: "error", first: true, predicate: FieldErrorDirective, descendants: true }, { propertyName: "radioGroup", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "_fieldLabel", first: true, predicate: FieldLabelDirective, descendants: true }, { propertyName: "control", first: true, predicate: FieldControl, descendants: true }, { propertyName: "requiredValidator", first: true, predicate: RequiredValidator, descendants: true }], viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }], hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div class=\"sapphire-field__label\" *ngIf=\"_fieldLabel\">\n  <sp-label\n    [necessityIndicator]=\"labelNecessityIndicator\"\n    [for]=\"control?.getId?.()\"\n    [disabled]=\"control?.isDisabled()\"\n    (labelClick)=\"control?.focus?.('keyboard')\"\n    [size]=\"size\"\n  >\n    <ng-content select=\"sp-field-label\"></ng-content>\n    <ng-content\n      select=\"sp-contextual-help\"\n      ngProjectAs=\"sp-contextual-help\"\n    ></ng-content>\n  </sp-label>\n</div>\n<div class=\"sapphire-field__control\">\n  <ng-content></ng-content>\n</div>\n<div class=\"sapphire-field__message\" *ngIf=\"note || error || _noteSuffixPortal\">\n  <div class=\"sapphire-field__note-row\">\n    <div class=\"sapphire-field__note\" *ngIf=\"error\">\n      <ng-content select=\"sp-field-error\"></ng-content>\n    </div>\n    <div class=\"sapphire-field__note\" *ngIf=\"note && !error\">\n      <ng-content select=\"sp-field-note\"></ng-content>\n    </div>\n    <ng-container *ngIf=\"_noteSuffixPortal\">\n      <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n", styles: [".sapphire-field{display:inline-grid;grid-template-columns:auto;row-gap:var(--sapphire-field-size-spacing-vertical);column-gap:var(--sapphire-field-size-spacing-horizontal);font-family:var(--sapphire-field-font-name);grid-auto-rows:min-content;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}fieldset.sapphire-field{border:0;margin:0;padding:0}.sapphire-field__label{order:1;justify-content:end}legend.sapphire-field__label{padding:0;float:left}.sapphire-field__control{order:2;min-width:100%}.sapphire-field__control--group{display:flex;gap:var(--sapphire-field-size-spacing-control-group)}.sapphire-field--no-shrink .sapphire-field__control{min-width:initial}.sapphire-field__message{min-width:100%;max-width:min-content;order:3}.sapphire-field__note-row{display:flex;align-items:top;font-size:var(--sapphire-field-size-font-note-l);line-height:var(--sapphire-field-size-line-height-note-l);color:var(--sapphire-field-color-note-default)}.sapphire-field--medium .sapphire-field__note-row{font-size:var(--sapphire-field-size-font-note-m);line-height:var(--sapphire-field-size-line-height-note-m)}.sapphire-field__note{flex:1}.sapphire-field--error .sapphire-field__note{color:var(--sapphire-field-color-note-error)}.sapphire-field.is-disabled{opacity:var(--sapphire-field-opacity-disabled);cursor:not-allowed}.sapphire-field.is-disabled .sapphire-field__control *{cursor:inherit}.sapphire-field--label-placement-side{grid-template-columns:max-content auto}.sapphire-field--label-placement-side .sapphire-field__control,.sapphire-field--label-placement-side .sapphire-field__message{grid-column:2}.sapphire-field--label-placement-side .sapphire-field__label{display:flex;align-items:center;max-height:var(--sapphire-field-size-max-height-label-l)}.sapphire-field--label-placement-side.sapphire-field--medium .sapphire-field__label{max-height:var(--sapphire-field-size-max-height-label-m)}.sapphire-field--label-placement-side.sapphire-field--label-alignment-top .sapphire-field__label{align-items:flex-start;max-height:unset}.sapphire-fieldset{display:inline-flex;flex-direction:column;width:min-content;gap:var(--sapphire-field-size-spacing-fieldset-large)}.sapphire-fieldset .sapphire-field--label-placement-side{grid-template-columns:1fr min-content}.sapphire-fieldset .sapphire-field--label-placement-side .sapphire-field__label{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: LabelComponent, selector: "sp-label", inputs: ["id", "for", "disabled", "necessityIndicator", "size"], outputs: ["labelClick"] }] });
+    ], queries: [{ propertyName: "note", first: true, predicate: FieldNoteDirective, descendants: true }, { propertyName: "error", first: true, predicate: FieldErrorDirective, descendants: true }, { propertyName: "radioGroup", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "_fieldLabel", first: true, predicate: FieldLabelDirective, descendants: true }, { propertyName: "requiredValidator", first: true, predicate: RequiredValidator, descendants: true }, { propertyName: "controls", predicate: FieldControl }], viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }], hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div class=\"sapphire-field__label\" *ngIf=\"_fieldLabel\">\n  <sp-label\n    [necessityIndicator]=\"labelNecessityIndicator\"\n    [for]=\"control?.getId?.()\"\n    [disabled]=\"isDisabled()\"\n    (labelClick)=\"control?.focus?.('keyboard')\"\n    [size]=\"size\"\n  >\n    <ng-content select=\"sp-field-label\"></ng-content>\n    <ng-content\n      select=\"sp-contextual-help\"\n      ngProjectAs=\"sp-contextual-help\"\n    ></ng-content>\n  </sp-label>\n</div>\n<div\n  class=\"sapphire-field__control\"\n  [ngClass]=\"{\n    'sapphire-field__control--group': isGroup\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n<div class=\"sapphire-field__message\" *ngIf=\"note || error || _noteSuffixPortal\">\n  <div class=\"sapphire-field__note-row\">\n    <div class=\"sapphire-field__note\" *ngIf=\"error\">\n      <ng-content select=\"sp-field-error\"></ng-content>\n    </div>\n    <div class=\"sapphire-field__note\" *ngIf=\"note && !error\">\n      <ng-content select=\"sp-field-note\"></ng-content>\n    </div>\n    <ng-container *ngIf=\"_noteSuffixPortal\">\n      <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n", styles: [".sapphire-field{display:inline-grid;grid-template-columns:auto;row-gap:var(--sapphire-field-size-spacing-vertical);column-gap:var(--sapphire-field-size-spacing-horizontal);font-family:var(--sapphire-field-font-name);grid-auto-rows:min-content;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}fieldset.sapphire-field{border:0;margin:0;padding:0}.sapphire-field__label{order:1;justify-content:end}legend.sapphire-field__label{padding:0;float:left}.sapphire-field__control{order:2;min-width:100%}.sapphire-field__control--group{display:flex;gap:var(--sapphire-field-size-spacing-control-group)}.sapphire-field--no-shrink .sapphire-field__control{min-width:initial}.sapphire-field__message{min-width:100%;max-width:min-content;order:3}.sapphire-field__note-row{display:flex;align-items:top;font-size:var(--sapphire-field-size-font-note-l);line-height:var(--sapphire-field-size-line-height-note-l);color:var(--sapphire-field-color-note-default)}.sapphire-field--medium .sapphire-field__note-row{font-size:var(--sapphire-field-size-font-note-m);line-height:var(--sapphire-field-size-line-height-note-m)}.sapphire-field__note{flex:1}.sapphire-field--error .sapphire-field__note{color:var(--sapphire-field-color-note-error)}.sapphire-field.is-disabled{opacity:var(--sapphire-field-opacity-disabled);cursor:not-allowed}.sapphire-field.is-disabled .sapphire-field__control *{cursor:inherit}.sapphire-field--label-placement-side{grid-template-columns:max-content auto}.sapphire-field--label-placement-side .sapphire-field__control,.sapphire-field--label-placement-side .sapphire-field__message{grid-column:2}.sapphire-field--label-placement-side .sapphire-field__label{display:flex;align-items:center;max-height:var(--sapphire-field-size-max-height-label-l)}.sapphire-field--label-placement-side.sapphire-field--medium .sapphire-field__label{max-height:var(--sapphire-field-size-max-height-label-m)}.sapphire-field--label-placement-side.sapphire-field--label-alignment-top .sapphire-field__label{align-items:flex-start;max-height:unset}.sapphire-fieldset{display:inline-flex;flex-direction:column;width:min-content;gap:var(--sapphire-field-size-spacing-fieldset-large)}.sapphire-fieldset .sapphire-field--label-placement-side{grid-template-columns:1fr min-content}.sapphire-fieldset .sapphire-field--label-placement-side .sapphire-field__label{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: LabelComponent, selector: "sp-label", inputs: ["id", "for", "disabled", "necessityIndicator", "size"], outputs: ["labelClick"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 __decorate([
     CoerceBoolean
 ], FieldComponent.prototype, "necessityIndicator", void 0);
@@ -2867,13 +2890,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         '[class.sapphire-field--label-alignment-top]': 'labelPlacement === "side" && hasFieldGroupChild()',
                         '[class.sapphire-field--medium]': 'size === "medium"',
                         '[class.sapphire-field--error]': 'hasError()',
-                        '[class.is-disabled]': 'control?.isDisabled()',
+                        '[class.is-disabled]': 'isDisabled()',
                     }, hostDirectives: [UseComponentStylesOnHost], providers: [
                         {
                             provide: ICON_SIZE_PROVIDER,
                             useExisting: forwardRef(() => FieldComponent),
                         },
-                    ], template: "<div class=\"sapphire-field__label\" *ngIf=\"_fieldLabel\">\n  <sp-label\n    [necessityIndicator]=\"labelNecessityIndicator\"\n    [for]=\"control?.getId?.()\"\n    [disabled]=\"control?.isDisabled()\"\n    (labelClick)=\"control?.focus?.('keyboard')\"\n    [size]=\"size\"\n  >\n    <ng-content select=\"sp-field-label\"></ng-content>\n    <ng-content\n      select=\"sp-contextual-help\"\n      ngProjectAs=\"sp-contextual-help\"\n    ></ng-content>\n  </sp-label>\n</div>\n<div class=\"sapphire-field__control\">\n  <ng-content></ng-content>\n</div>\n<div class=\"sapphire-field__message\" *ngIf=\"note || error || _noteSuffixPortal\">\n  <div class=\"sapphire-field__note-row\">\n    <div class=\"sapphire-field__note\" *ngIf=\"error\">\n      <ng-content select=\"sp-field-error\"></ng-content>\n    </div>\n    <div class=\"sapphire-field__note\" *ngIf=\"note && !error\">\n      <ng-content select=\"sp-field-note\"></ng-content>\n    </div>\n    <ng-container *ngIf=\"_noteSuffixPortal\">\n      <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n", styles: [".sapphire-field{display:inline-grid;grid-template-columns:auto;row-gap:var(--sapphire-field-size-spacing-vertical);column-gap:var(--sapphire-field-size-spacing-horizontal);font-family:var(--sapphire-field-font-name);grid-auto-rows:min-content;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}fieldset.sapphire-field{border:0;margin:0;padding:0}.sapphire-field__label{order:1;justify-content:end}legend.sapphire-field__label{padding:0;float:left}.sapphire-field__control{order:2;min-width:100%}.sapphire-field__control--group{display:flex;gap:var(--sapphire-field-size-spacing-control-group)}.sapphire-field--no-shrink .sapphire-field__control{min-width:initial}.sapphire-field__message{min-width:100%;max-width:min-content;order:3}.sapphire-field__note-row{display:flex;align-items:top;font-size:var(--sapphire-field-size-font-note-l);line-height:var(--sapphire-field-size-line-height-note-l);color:var(--sapphire-field-color-note-default)}.sapphire-field--medium .sapphire-field__note-row{font-size:var(--sapphire-field-size-font-note-m);line-height:var(--sapphire-field-size-line-height-note-m)}.sapphire-field__note{flex:1}.sapphire-field--error .sapphire-field__note{color:var(--sapphire-field-color-note-error)}.sapphire-field.is-disabled{opacity:var(--sapphire-field-opacity-disabled);cursor:not-allowed}.sapphire-field.is-disabled .sapphire-field__control *{cursor:inherit}.sapphire-field--label-placement-side{grid-template-columns:max-content auto}.sapphire-field--label-placement-side .sapphire-field__control,.sapphire-field--label-placement-side .sapphire-field__message{grid-column:2}.sapphire-field--label-placement-side .sapphire-field__label{display:flex;align-items:center;max-height:var(--sapphire-field-size-max-height-label-l)}.sapphire-field--label-placement-side.sapphire-field--medium .sapphire-field__label{max-height:var(--sapphire-field-size-max-height-label-m)}.sapphire-field--label-placement-side.sapphire-field--label-alignment-top .sapphire-field__label{align-items:flex-start;max-height:unset}.sapphire-fieldset{display:inline-flex;flex-direction:column;width:min-content;gap:var(--sapphire-field-size-spacing-fieldset-large)}.sapphire-fieldset .sapphire-field--label-placement-side{grid-template-columns:1fr min-content}.sapphire-fieldset .sapphire-field--label-placement-side .sapphire-field__label{white-space:nowrap}\n"] }]
+                    ], template: "<div class=\"sapphire-field__label\" *ngIf=\"_fieldLabel\">\n  <sp-label\n    [necessityIndicator]=\"labelNecessityIndicator\"\n    [for]=\"control?.getId?.()\"\n    [disabled]=\"isDisabled()\"\n    (labelClick)=\"control?.focus?.('keyboard')\"\n    [size]=\"size\"\n  >\n    <ng-content select=\"sp-field-label\"></ng-content>\n    <ng-content\n      select=\"sp-contextual-help\"\n      ngProjectAs=\"sp-contextual-help\"\n    ></ng-content>\n  </sp-label>\n</div>\n<div\n  class=\"sapphire-field__control\"\n  [ngClass]=\"{\n    'sapphire-field__control--group': isGroup\n  }\"\n>\n  <ng-content></ng-content>\n</div>\n<div class=\"sapphire-field__message\" *ngIf=\"note || error || _noteSuffixPortal\">\n  <div class=\"sapphire-field__note-row\">\n    <div class=\"sapphire-field__note\" *ngIf=\"error\">\n      <ng-content select=\"sp-field-error\"></ng-content>\n    </div>\n    <div class=\"sapphire-field__note\" *ngIf=\"note && !error\">\n      <ng-content select=\"sp-field-note\"></ng-content>\n    </div>\n    <ng-container *ngIf=\"_noteSuffixPortal\">\n      <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n    </ng-container>\n  </div>\n</div>\n", styles: [".sapphire-field{display:inline-grid;grid-template-columns:auto;row-gap:var(--sapphire-field-size-spacing-vertical);column-gap:var(--sapphire-field-size-spacing-horizontal);font-family:var(--sapphire-field-font-name);grid-auto-rows:min-content;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}fieldset.sapphire-field{border:0;margin:0;padding:0}.sapphire-field__label{order:1;justify-content:end}legend.sapphire-field__label{padding:0;float:left}.sapphire-field__control{order:2;min-width:100%}.sapphire-field__control--group{display:flex;gap:var(--sapphire-field-size-spacing-control-group)}.sapphire-field--no-shrink .sapphire-field__control{min-width:initial}.sapphire-field__message{min-width:100%;max-width:min-content;order:3}.sapphire-field__note-row{display:flex;align-items:top;font-size:var(--sapphire-field-size-font-note-l);line-height:var(--sapphire-field-size-line-height-note-l);color:var(--sapphire-field-color-note-default)}.sapphire-field--medium .sapphire-field__note-row{font-size:var(--sapphire-field-size-font-note-m);line-height:var(--sapphire-field-size-line-height-note-m)}.sapphire-field__note{flex:1}.sapphire-field--error .sapphire-field__note{color:var(--sapphire-field-color-note-error)}.sapphire-field.is-disabled{opacity:var(--sapphire-field-opacity-disabled);cursor:not-allowed}.sapphire-field.is-disabled .sapphire-field__control *{cursor:inherit}.sapphire-field--label-placement-side{grid-template-columns:max-content auto}.sapphire-field--label-placement-side .sapphire-field__control,.sapphire-field--label-placement-side .sapphire-field__message{grid-column:2}.sapphire-field--label-placement-side .sapphire-field__label{display:flex;align-items:center;max-height:var(--sapphire-field-size-max-height-label-l)}.sapphire-field--label-placement-side.sapphire-field--medium .sapphire-field__label{max-height:var(--sapphire-field-size-max-height-label-m)}.sapphire-field--label-placement-side.sapphire-field--label-alignment-top .sapphire-field__label{align-items:flex-start;max-height:unset}.sapphire-fieldset{display:inline-flex;flex-direction:column;width:min-content;gap:var(--sapphire-field-size-spacing-fieldset-large)}.sapphire-fieldset .sapphire-field--label-placement-side{grid-template-columns:1fr min-content}.sapphire-fieldset .sapphire-field--label-placement-side .sapphire-field__label{white-space:nowrap}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { necessityIndicator: [{
                 type: Input
             }], labelPlacement: [{
@@ -2895,8 +2918,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
             }], _fieldLabel: [{
                 type: ContentChild,
                 args: [FieldLabelDirective]
-            }], control: [{
-                type: ContentChild,
+            }], controls: [{
+                type: ContentChildren,
                 args: [FieldControl]
             }], requiredValidator: [{
                 type: ContentChild,
@@ -2941,13 +2964,15 @@ SapphireFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         FieldNoteSuffixDirective,
         FieldErrorDirective,
         PortalModule,
-        LabelComponent], exports: [FieldLabelDirective,
+        LabelComponent,
+        CommonModule], exports: [FieldLabelDirective,
         FieldNoteDirective,
         FieldNoteSuffixDirective,
         FieldErrorDirective,
         FieldComponent] });
 SapphireFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireFieldModule, imports: [PortalModule,
-        LabelComponent] });
+        LabelComponent,
+        CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireFieldModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2960,6 +2985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         FieldErrorDirective,
                         PortalModule,
                         LabelComponent,
+                        CommonModule,
                     ],
                     exports: [
                         FieldLabelDirective,
@@ -3002,7 +3028,7 @@ class TextFieldInputDirective {
     }
 }
 TextFieldInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldInputDirective, deps: [{ token: i0.ElementRef }, { token: FieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-TextFieldInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TextFieldInputDirective, selector: "[spTextFieldInput]", inputs: { id: "id", disabled: "disabled", required: "required" }, host: { listeners: { "input": "ngDoCheck($event.target.value)", "blur": "onBlur()" }, properties: { "id": "id", "attr.aria-describedby": "field?.error?.id || field?.note?.id", "attr.aria-invalid": "field?.hasError() ? true : null", "style": "this.style" }, classAttribute: "sapphire-text-field__input" }, hostDirectives: [{ directive: UseComponentStyles }], ngImport: i0 });
+TextFieldInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TextFieldInputDirective, selector: "[spTextFieldInput]", inputs: { id: "id", disabled: "disabled", required: "required" }, host: { listeners: { "input": "ngDoCheck($event.target.value)", "blur": "onBlur()" }, properties: { "id": "id", "attr.aria-describedby": "field?.error?.id || field?.note?.id", "attr.aria-invalid": "field?.hasError(this) ? true : null", "style": "this.style" }, classAttribute: "sapphire-text-field__input" }, hostDirectives: [{ directive: UseComponentStyles }], ngImport: i0 });
 __decorate([
     AutoId()
 ], TextFieldInputDirective.prototype, "id", void 0);
@@ -3017,7 +3043,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         '[id]': 'id',
                         class: 'sapphire-text-field__input',
                         '[attr.aria-describedby]': 'field?.error?.id || field?.note?.id',
-                        '[attr.aria-invalid]': 'field?.hasError() ? true : null',
+                        '[attr.aria-invalid]': 'field?.hasError(this) ? true : null',
                     },
                     hostDirectives: [UseComponentStyles],
                 }]
@@ -3061,18 +3087,18 @@ class TextFieldComponent {
     }
 }
 TextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldComponent, deps: [{ token: FieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: TextFieldComponent, selector: "sp-text-field", inputs: { characterCounterMax: "characterCounterMax" }, host: { properties: { "class.sapphire-text-field--multiline": "_inputDirective.textarea", "class.sapphire-text-field--error": "field?.hasError()", "class.sapphire-text-field--medium": "field?.size === \"medium\"" }, classAttribute: "sapphire-text-field" }, providers: [
+TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: TextFieldComponent, selector: "sp-text-field", inputs: { characterCounterMax: "characterCounterMax" }, host: { properties: { "class.sapphire-text-field--multiline": "_inputDirective.textarea", "class.sapphire-text-field--error": "field?.hasError(this)", "class.sapphire-text-field--medium": "field?.size === \"medium\"" }, classAttribute: "sapphire-text-field" }, providers: [
         {
             provide: FieldControl,
             useExisting: forwardRef(() => TextFieldComponent),
         },
-    ], queries: [{ propertyName: "inputElement", first: true, predicate: TextFieldInputDirective, descendants: true, read: ElementRef }, { propertyName: "_inputDirective", first: true, predicate: TextFieldInputDirective, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content\n  select=\"sp-text-field-prefix\"\n  *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n  select=\"sp-text-field-postfix\"\n  *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n  *ngIf=\"characterCounterMax !== undefined\"\n  spFieldNoteSuffix\n  class=\"sapphire-text-field__counter\"\n  [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n  >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{width:var(--sapphire-text-field-size-width-control);outline:solid var(--sapphire-text-field-size-width-border) var(--sapphire-text-field-color-border-default);outline-offset:calc(0px - var(--sapphire-text-field-size-width-border));box-sizing:border-box;overflow-x:hidden;display:flex;align-items:center;border-radius:var(--sapphire-text-field-size-radius);cursor:text;color:var(--sapphire-text-field-color-content-control);background-color:var(--sapphire-text-field-color-background-control);height:var(--sapphire-text-field-size-height-field-l);font-family:var(--sapphire-text-field-font-name);font-size:var(--sapphire-text-field-size-font-content-l);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text-field--medium{height:var(--sapphire-text-field-size-height-field-m);font-size:var(--sapphire-text-field-size-font-content-m)}.sapphire-text-field__input{box-sizing:border-box;width:100%;height:100%;margin:0;padding:0 var(--sapphire-text-field-size-spacing-control-horizontal-l);line-height:var(--sapphire-text-field-size-line-height-content);font-family:inherit;font-size:inherit;font-weight:var(--sapphire-text-field-size-font-weight-input);caret-color:var(--sapphire-text-field-color-caret);color:inherit;background-color:transparent;border:none;outline:none}.sapphire-text-field--medium .sapphire-text-field__input{padding:0 var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field__input::placeholder{opacity:1;color:var(--sapphire-text-field-color-placeholder)}.sapphire-text-field__input--align-right{text-align:right}.sapphire-text-field:not(.sapphire-text-field--multiline){gap:var(--sapphire-text-field-size-spacing-control-gap)}.sapphire-text-field:has(.sapphire-text-field__prefix) .sapphire-text-field__input{padding-left:0}.sapphire-text-field .sapphire-text-field__prefix{color:var(--sapphire-text-field-color-affix);flex-shrink:0;z-index:1;margin-left:var(--sapphire-text-field-size-spacing-control-horizontal-l)}.sapphire-text-field--medium .sapphire-text-field__prefix{margin-left:var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field:has(.sapphire-text-field__postfix) .sapphire-text-field__input{padding-right:0}.sapphire-text-field .sapphire-text-field__postfix{color:var(--sapphire-text-field-color-affix);flex-shrink:0;z-index:1;margin-right:var(--sapphire-text-field-size-spacing-control-horizontal-l)}.sapphire-text-field--medium .sapphire-text-field__postfix{margin-right:var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field .sapphire-text-field__prefix--icon,.sapphire-text-field .sapphire-text-field__postfix--icon{width:var(--sapphire-text-field-size-affix-icon-width-l);height:var(--sapphire-text-field-size-affix-icon-height-l)}.sapphire-text-field--medium .sapphire-text-field__prefix--icon,.sapphire-text-field--medium .sapphire-text-field__postfix--icon{width:var(--sapphire-text-field-size-affix-icon-width-m);height:var(--sapphire-text-field-size-affix-icon-height-m)}.sapphire-text-field--multiline{display:inline-block;line-height:0;height:unset;padding:0}.sapphire-text-field--multiline .sapphire-text-field__input{resize:none;width:100%;padding:var(--sapphire-text-field-size-spacing-control-vertical-l) var(--sapphire-text-field-size-spacing-control-horizontal-l);scroll-padding-bottom:var(--sapphire-text-field-size-spacing-control-vertical-l)}.sapphire-text-field--medium .sapphire-text-field--multiline .sapphire-text-field__input{padding:var(--sapphire-text-field-size-spacing-control-vertical-m) var(--sapphire-text-field-size-spacing-control-horizontal-m);scroll-padding-bottom:var(--sapphire-text-field-size-spacing-control-vertical-m)}.sapphire-text-field--multiline.sapphire-text-field--resizable .sapphire-text-field__input{resize:vertical}.sapphire-text-field__counter{color:var(--sapphire-text-field-color-counter-default);padding-left:var(--sapphire-text-field-size-spacing-note-horizontal);margin-left:auto}.sapphire-text-field__counter--error{color:var(--sapphire-text-field-color-counter-error)}.sapphire-text-field--error{outline:solid var(--sapphire-text-field-size-width-border) var(--sapphire-text-field-color-border-error)}.sapphire-text-field.is-focus,.sapphire-text-field:focus-within{outline:solid var(--sapphire-text-field-size-focus-ring) var(--sapphire-text-field-color-focus-ring);outline-offset:calc(0px - var(--sapphire-text-field-size-focus-ring))}.sapphire-text-field.is-focus .sapphire-text-field__input:-webkit-autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:-webkit-autofill{box-shadow:0 0 0 var(--sapphire-text-field-size-height-field-l) inset var(--sapphire-text-field-color-background-control)!important}.sapphire-text-field.is-focus .sapphire-text-field__input:autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:autofill{box-shadow:0 0 0 var(--sapphire-text-field-size-height-field-l) inset var(--sapphire-text-field-color-background-control)!important}.sapphire-text-field__stepper{display:flex;flex-direction:column;justify-items:stretch;padding:var(--sapphire-text-field-size-spacing-control-stepper) calc(var(--sapphire-text-field-size-spacing-control-stepper) + var(--sapphire-text-field-size-width-border));gap:var(--sapphire-text-field-size-spacing-control-stepper)}.sapphire-text-field:has(.sapphire-text-field__stepper) .sapphire-text-field__postfix{margin-right:0}.sapphire-text-field__stepper-button{display:flex;align-items:center;justify-content:center;width:var(--sapphire-text-field-size-width-stepper-l);margin:0;padding:0;max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-text-field-size-radius);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-text-field-time-transition);transition-timing-function:ease-in-out;cursor:pointer;background-color:var(--sapphire-text-field-color-background-stepper-default);color:var(--sapphire-text-field-color-content-stepper-default)}.sapphire-text-field__stepper-button:not(:active):not(.is-active):not(.js-hover):hover,.sapphire-text-field__stepper-button:not(:active):not(.is-active).is-hover{background-color:var(--sapphire-text-field-color-background-stepper-hover);color:var(--sapphire-text-field-color-content-stepper-hover)}.sapphire-text-field__stepper-button.is-active,.sapphire-text-field__stepper-button:active{background-color:var(--sapphire-text-field-color-background-stepper-active);color:var(--sapphire-text-field-color-content-stepper-active)}.sapphire-text-field--medium.sapphire-text-field__stepper-button{width:var(--sapphire-text-field-size-width-stepper-m)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FieldNoteSuffixDirective, selector: "[spFieldNoteSuffix]" }] });
+    ], queries: [{ propertyName: "inputElement", first: true, predicate: TextFieldInputDirective, descendants: true, read: ElementRef }, { propertyName: "_inputDirective", first: true, predicate: TextFieldInputDirective, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content\n  select=\"sp-text-field-prefix\"\n  *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n  select=\"sp-text-field-postfix\"\n  *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n  *ngIf=\"characterCounterMax !== undefined\"\n  spFieldNoteSuffix\n  class=\"sapphire-text-field__counter\"\n  [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n  >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{width:var(--sapphire-text-field-size-width-control);outline:solid var(--sapphire-text-field-size-width-border) var(--sapphire-text-field-color-border-default);outline-offset:calc(0px - var(--sapphire-text-field-size-width-border));box-sizing:border-box;overflow-x:hidden;display:flex;align-items:center;border-radius:var(--sapphire-text-field-size-radius);cursor:text;color:var(--sapphire-text-field-color-content-control);background-color:var(--sapphire-text-field-color-background-control);height:var(--sapphire-text-field-size-height-field-l);font-family:var(--sapphire-text-field-font-name);font-size:var(--sapphire-text-field-size-font-content-l);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text-field--medium{height:var(--sapphire-text-field-size-height-field-m);font-size:var(--sapphire-text-field-size-font-content-m)}.sapphire-text-field__input{box-sizing:border-box;width:100%;height:100%;margin:0;padding:0 var(--sapphire-text-field-size-spacing-control-horizontal-l);line-height:var(--sapphire-text-field-size-line-height-content);font-family:inherit;font-size:inherit;font-weight:var(--sapphire-text-field-size-font-weight-input);caret-color:var(--sapphire-text-field-color-caret);color:inherit;background-color:transparent;border:none;outline:none}.sapphire-text-field--medium .sapphire-text-field__input{padding:0 var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field__input::placeholder{opacity:1;color:var(--sapphire-text-field-color-placeholder)}.sapphire-text-field__input--align-right{text-align:right}.sapphire-text-field:not(.sapphire-text-field--multiline){gap:var(--sapphire-text-field-size-spacing-control-gap)}.sapphire-text-field:has(.sapphire-text-field__prefix) .sapphire-text-field__input{padding-left:0}.sapphire-text-field .sapphire-text-field__prefix{color:var(--sapphire-text-field-color-affix);flex-shrink:0;z-index:1;margin-left:var(--sapphire-text-field-size-spacing-control-horizontal-l)}.sapphire-text-field--medium .sapphire-text-field__prefix{margin-left:var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field:has(.sapphire-text-field__postfix) .sapphire-text-field__input{padding-right:0}.sapphire-text-field .sapphire-text-field__postfix{color:var(--sapphire-text-field-color-affix);flex-shrink:0;z-index:1;margin-right:var(--sapphire-text-field-size-spacing-control-horizontal-l)}.sapphire-text-field--medium .sapphire-text-field__postfix{margin-right:var(--sapphire-text-field-size-spacing-control-horizontal-m)}.sapphire-text-field .sapphire-text-field__prefix--icon,.sapphire-text-field .sapphire-text-field__postfix--icon{width:var(--sapphire-text-field-size-affix-icon-width-l);height:var(--sapphire-text-field-size-affix-icon-height-l)}.sapphire-text-field--medium .sapphire-text-field__prefix--icon,.sapphire-text-field--medium .sapphire-text-field__postfix--icon{width:var(--sapphire-text-field-size-affix-icon-width-m);height:var(--sapphire-text-field-size-affix-icon-height-m)}.sapphire-text-field--multiline{display:inline-block;line-height:0;height:unset;padding:0}.sapphire-text-field--multiline .sapphire-text-field__input{resize:none;width:100%;padding:var(--sapphire-text-field-size-spacing-control-vertical-l) var(--sapphire-text-field-size-spacing-control-horizontal-l);scroll-padding-bottom:var(--sapphire-text-field-size-spacing-control-vertical-l)}.sapphire-text-field--medium .sapphire-text-field--multiline .sapphire-text-field__input{padding:var(--sapphire-text-field-size-spacing-control-vertical-m) var(--sapphire-text-field-size-spacing-control-horizontal-m);scroll-padding-bottom:var(--sapphire-text-field-size-spacing-control-vertical-m)}.sapphire-text-field--multiline.sapphire-text-field--resizable .sapphire-text-field__input{resize:vertical}.sapphire-text-field__counter{color:var(--sapphire-text-field-color-counter-default);padding-left:var(--sapphire-text-field-size-spacing-note-horizontal);margin-left:auto}.sapphire-text-field__counter--error{color:var(--sapphire-text-field-color-counter-error)}.sapphire-text-field--error{outline:solid var(--sapphire-text-field-size-width-border) var(--sapphire-text-field-color-border-error)}.sapphire-text-field.is-focus,.sapphire-text-field:focus-within{outline:solid var(--sapphire-text-field-size-focus-ring) var(--sapphire-text-field-color-focus-ring);outline-offset:calc(0px - var(--sapphire-text-field-size-focus-ring))}.sapphire-text-field.is-focus .sapphire-text-field__input:-webkit-autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:-webkit-autofill{box-shadow:0 0 0 var(--sapphire-text-field-size-height-field-l) inset var(--sapphire-text-field-color-background-control)!important}.sapphire-text-field.is-focus .sapphire-text-field__input:autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:autofill{box-shadow:0 0 0 var(--sapphire-text-field-size-height-field-l) inset var(--sapphire-text-field-color-background-control)!important}.sapphire-text-field__stepper{display:flex;flex-direction:column;justify-items:stretch;padding:var(--sapphire-text-field-size-spacing-control-stepper) calc(var(--sapphire-text-field-size-spacing-control-stepper) + var(--sapphire-text-field-size-width-border));gap:var(--sapphire-text-field-size-spacing-control-stepper)}.sapphire-text-field:has(.sapphire-text-field__stepper) .sapphire-text-field__postfix{margin-right:0}.sapphire-text-field__stepper-button{display:flex;align-items:center;justify-content:center;width:var(--sapphire-text-field-size-width-stepper-l);margin:0;padding:0;max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-text-field-size-radius);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-text-field-time-transition);transition-timing-function:ease-in-out;cursor:pointer;background-color:var(--sapphire-text-field-color-background-stepper-default);color:var(--sapphire-text-field-color-content-stepper-default)}.sapphire-text-field__stepper-button:not(:active):not(.is-active):not(.js-hover):hover,.sapphire-text-field__stepper-button:not(:active):not(.is-active).is-hover{background-color:var(--sapphire-text-field-color-background-stepper-hover);color:var(--sapphire-text-field-color-content-stepper-hover)}.sapphire-text-field__stepper-button.is-active,.sapphire-text-field__stepper-button:active{background-color:var(--sapphire-text-field-color-background-stepper-active);color:var(--sapphire-text-field-color-content-stepper-active)}.sapphire-text-field--medium.sapphire-text-field__stepper-button{width:var(--sapphire-text-field-size-width-stepper-m)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FieldNoteSuffixDirective, selector: "[spFieldNoteSuffix]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-text-field', host: {
                         class: 'sapphire-text-field',
                         '[class.sapphire-text-field--multiline]': '_inputDirective.textarea',
-                        '[class.sapphire-text-field--error]': 'field?.hasError()',
+                        '[class.sapphire-text-field--error]': 'field?.hasError(this)',
                         '[class.sapphire-text-field--medium]': 'field?.size === "medium"',
                     }, providers: [
                         {
@@ -3271,7 +3297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
 class OptionIconDirective {
 }
 OptionIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OptionIconDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: OptionIconDirective, selector: "sp-option-icon", viewQueries: [{ propertyName: "contentPortal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: '<ng-template cdkPortal><ng-content></ng-content></ng-template>', isInline: true, dependencies: [{ kind: "directive", type: i1$4.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }] });
+OptionIconDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: OptionIconDirective, selector: "sp-option-icon", viewQueries: [{ propertyName: "contentPortal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: '<ng-template cdkPortal><ng-content></ng-content></ng-template>', isInline: true, dependencies: [{ kind: "directive", type: i1$3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionIconDirective, decorators: [{
             type: Component,
             args: [{
@@ -3289,7 +3315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
 class OptionSecondaryTextDirective {
 }
 OptionSecondaryTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionSecondaryTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OptionSecondaryTextDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: OptionSecondaryTextDirective, selector: "sp-option-secondary-text", viewQueries: [{ propertyName: "contentPortal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: '<ng-template cdkPortal><ng-content></ng-content></ng-template>', isInline: true, dependencies: [{ kind: "directive", type: i1$4.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }] });
+OptionSecondaryTextDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: OptionSecondaryTextDirective, selector: "sp-option-secondary-text", viewQueries: [{ propertyName: "contentPortal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: '<ng-template cdkPortal><ng-content></ng-content></ng-template>', isInline: true, dependencies: [{ kind: "directive", type: i1$3.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionSecondaryTextDirective, decorators: [{
             type: Component,
             args: [{
@@ -3442,7 +3468,7 @@ class CdkOptionScrollIssuePatch {
         }
     }
 }
-CdkOptionScrollIssuePatch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, deps: [{ token: i1$5.CdkListbox }, { token: i1$5.CdkOption }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+CdkOptionScrollIssuePatch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, deps: [{ token: i1$4.CdkListbox }, { token: i1$4.CdkOption }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
 CdkOptionScrollIssuePatch.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: CdkOptionScrollIssuePatch, isStandalone: true, selector: "[cdkOption]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, decorators: [{
             type: Directive,
@@ -3450,7 +3476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                     selector: '[cdkOption]',
                     standalone: true,
                 }]
-        }], ctorParameters: function () { return [{ type: i1$5.CdkListbox }, { type: i1$5.CdkOption }, { type: i0.ElementRef }]; } });
+        }], ctorParameters: function () { return [{ type: i1$4.CdkListbox }, { type: i1$4.CdkOption }, { type: i0.ElementRef }]; } });
 
 /**
  * JS-based :active state for non-button clickable elements.
@@ -3542,7 +3568,7 @@ class FocusedDirective {
         this.hostFocused = false;
     }
 }
-FocusedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FocusedDirective, deps: [{ token: i2.InputModalityDetector }], target: i0.ɵɵFactoryTarget.Directive });
+FocusedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FocusedDirective, deps: [{ token: i2$1.InputModalityDetector }], target: i0.ɵɵFactoryTarget.Directive });
 FocusedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: FocusedDirective, isStandalone: true, selector: "[spFocused]", inputs: { focusedClass: ["spFocusedClass", "focusedClass"], focusedInput: ["spFocused", "focusedInput"] }, host: { listeners: { "focusin": "onFocusIn()", "focusout": "onFocusOut()" }, properties: { "class": "this.className" } }, exportAs: ["spFocused"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FocusedDirective, decorators: [{
             type: Directive,
@@ -3551,7 +3577,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                     selector: '[spFocused]',
                     exportAs: 'spFocused',
                 }]
-        }], ctorParameters: function () { return [{ type: i2.InputModalityDetector }]; }, propDecorators: { focusedClass: [{
+        }], ctorParameters: function () { return [{ type: i2$1.InputModalityDetector }]; }, propDecorators: { focusedClass: [{
                 type: Input,
                 args: ['spFocusedClass']
             }], focusedInput: [{
@@ -3581,7 +3607,7 @@ class ListboxItemComponent {
     }
 }
 ListboxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListboxItemComponent, deps: [{ token: PressedDirective }], target: i0.ɵɵFactoryTarget.Component });
-ListboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: { selected: "selected", focused: "focused", option: "option", size: "size" }, host: { properties: { "class.sapphire-listbox__item--selected": "selected", "class.is-disabled": "option.disabled" }, classAttribute: "sapphire-listbox__item" }, hostDirectives: [{ directive: UseComponentStyles }, { directive: PressedDirective }, { directive: FocusedDirective, inputs: ["spFocused", "focused"] }], ngImport: i0, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n  <div\n    class=\"sapphire-listbox__icon\"\n    _spUseComponentStyles\n    *ngIf=\"option.icon?.contentPortal as icon\"\n  >\n    <ng-container *cdkPortalOutlet=\"icon\"></ng-container>\n  </div>\n  <div class=\"sapphire-listbox__text-container\" _spUseComponentStyles>\n    <div class=\"sapphire-listbox__primary-text\" _spUseComponentStyles>\n      <ng-container *ngIf=\"option.primaryText\">\n        <ng-container *cdkPortalOutlet=\"option.primaryText\"></ng-container>\n      </ng-container>\n    </div>\n    <div\n      class=\"sapphire-listbox__secondary-text\"\n      _spUseComponentStyles\n      *ngIf=\"option.secondaryText?.contentPortal as secondaryText\"\n    >\n      <ng-container *cdkPortalOutlet=\"secondaryText\"></ng-container>\n    </div>\n  </div>\n  <div class=\"sapphire-listbox__icon\" _spUseComponentStyles *ngIf=\"selected\">\n    <sp-icon name=\"checkMark\"></sp-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
+ListboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: { selected: "selected", focused: "focused", option: "option", size: "size" }, host: { properties: { "class.sapphire-listbox__item--selected": "selected", "class.is-disabled": "option.disabled" }, classAttribute: "sapphire-listbox__item" }, hostDirectives: [{ directive: UseComponentStyles }, { directive: PressedDirective }, { directive: FocusedDirective, inputs: ["spFocused", "focused"] }], ngImport: i0, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n  <div\n    class=\"sapphire-listbox__icon\"\n    _spUseComponentStyles\n    *ngIf=\"option.icon?.contentPortal as icon\"\n  >\n    <ng-container *cdkPortalOutlet=\"icon\"></ng-container>\n  </div>\n  <div class=\"sapphire-listbox__text-container\" _spUseComponentStyles>\n    <div class=\"sapphire-listbox__primary-text\" _spUseComponentStyles>\n      <ng-container *ngIf=\"option.primaryText\">\n        <ng-container *cdkPortalOutlet=\"option.primaryText\"></ng-container>\n      </ng-container>\n    </div>\n    <div\n      class=\"sapphire-listbox__secondary-text\"\n      _spUseComponentStyles\n      *ngIf=\"option.secondaryText?.contentPortal as secondaryText\"\n    >\n      <ng-container *cdkPortalOutlet=\"secondaryText\"></ng-container>\n    </div>\n  </div>\n  <div class=\"sapphire-listbox__icon\" _spUseComponentStyles *ngIf=\"selected\">\n    <sp-icon name=\"checkMark\"></sp-icon>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "directive", type: i1$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListboxItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'li[sp-listbox-item]', host: {
@@ -3809,7 +3835,7 @@ ListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
             useExisting: forwardRef(() => ListboxComponent),
         },
         ViewEncapsulationProvider,
-    ], queries: [{ propertyName: "itemsInContent", predicate: ListboxChild }], viewQueries: [{ propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true }, { propertyName: "cdkOptions", predicate: CdkOption, descendants: true }], exportAs: ["spListbox"], ngImport: i0, template: "<ul\n  class=\"sapphire-listbox\"\n  cdkListbox\n  [id]=\"id || ''\"\n  [cdkListboxCompareWith]=\"\"\n  [cdkListboxMultiple]=\"!!multiple\"\n  [cdkListboxDisabled]=\"!!disabled\"\n  [cdkListboxNavigationWrapDisabled]=\"\n    navigationWrapDisabled && !_forceEnableNavigationWrap\n  \"\n  [cdkListboxValue]=\"_validSelectedValues\"\n  [cdkListboxUseActiveDescendant]=\"_shouldUseVirtualFocus()\"\n  (cdkListboxValueChange)=\"_handleSelectionChange($event)\"\n  (keydown.enter)=\"selected.emit($event)\"\n  (keydown.space)=\"selected.emit($event)\"\n  (mousedown)=\"_isConnectedToInput() && $event.preventDefault()\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [class.sapphire-listbox--medium]=\"size === 'medium'\"\n  [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n  <ng-container *ngFor=\"let item of options; let last = last\">\n    <ng-container *ngIf=\"_isSection(item)\">\n      <li role=\"presentation\">\n        <ul\n          role=\"group\"\n          class=\"sapphire-listbox__section\"\n          [attr.aria-label]=\"item.ariaLabel\"\n        >\n          <li\n            *ngFor=\"let option of item.children\"\n            [cdkOption]=\"option.value\"\n            [cdkOptionDisabled]=\"!!option.disabled\"\n            [cdkOptionTypeaheadLabel]=\"option.label\"\n            #cdkOption=\"cdkOption\"\n            sp-listbox-item\n            [option]=\"option\"\n            [selected]=\"isSelected(option)\"\n            [focused]=\"cdkOption.isActive()\"\n            (click)=\"!(disabled || option.disabled) && selected.emit($event)\"\n            [size]=\"size\"\n          ></li>\n        </ul>\n      </li>\n      <li\n        *ngIf=\"!last\"\n        role=\"separator\"\n        class=\"sapphire-listbox__separator\"\n      ></li>\n    </ng-container>\n    <li\n      *ngIf=\"_isOption(item)\"\n      [cdkOption]=\"item.value\"\n      [cdkOptionDisabled]=\"!!item.disabled\"\n      [cdkOptionTypeaheadLabel]=\"item.label\"\n      #cdkOption=\"cdkOption\"\n      sp-listbox-item\n      [option]=\"item\"\n      [selected]=\"isSelected(item)\"\n      [focused]=\"cdkOption.isActive()\"\n      (click)=\"!(disabled || item.disabled) && selected.emit($event)\"\n      [size]=\"size\"\n    ></li>\n  </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;min-width:var(--sapphire-listbox-size-width-min);margin:0;position:relative;list-style:none;outline:none;padding:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-listbox-size-spacing-outer-vertical) var(--sapphire-listbox-size-spacing-outer-horizontal);color:var(--sapphire-listbox-color-content-normal-primary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-listbox-color-content-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-listbox-color-content-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-listbox-color-background-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-size-width-icon-l));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-listbox-size-spacing-inner-horizontal-l);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-l);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-l) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-l);border-radius:var(--sapphire-listbox-size-radius-item);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-listbox-time-transition);transition-timing-function:ease-in-out;min-height:var(--sapphire-listbox-size-height-min-height)}.sapphire-listbox--medium .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-m);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-m);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-m) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-m)}.sapphire-listbox--small .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-s);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-s);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-s) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-s)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-listbox-font-name);line-height:var(--sapphire-listbox-size-line-height)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-listbox-font-weight-primary);font-size:var(--sapphire-listbox-size-font-primary-l)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-listbox-font-weight-secondary);font-size:var(--sapphire-listbox-size-font-secondary-l)}.sapphire-listbox--medium .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-m)}.sapphire-listbox--small .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-s)}.sapphire-listbox--medium .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-m)}.sapphire-listbox--small .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-s)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-listbox-color-content-normal-secondary-default)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-listbox-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__separator{height:var(--sapphire-listbox-size-height-separator);width:100%;background:var(--sapphire-listbox-color-separator);margin-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));margin-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-listbox-size-focus-ring) var(--sapphire-listbox-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-hover);background-color:var(--sapphire-listbox-color-background-normal-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-hover);background-color:var(--sapphire-listbox-color-background-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-hover);background-color:var(--sapphire-listbox-color-background-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-active);background-color:var(--sapphire-listbox-color-background-normal-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-active);background-color:var(--sapphire-listbox-color-background-danger-active)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-active);background-color:var(--sapphire-listbox-color-background-selected-active)}:host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i1$5.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkOptionScrollIssuePatch, selector: "[cdkOption]" }, { kind: "component", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: ["selected", "focused", "option", "size"] }] });
+    ], queries: [{ propertyName: "itemsInContent", predicate: ListboxChild }], viewQueries: [{ propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true }, { propertyName: "cdkOptions", predicate: CdkOption, descendants: true }], exportAs: ["spListbox"], ngImport: i0, template: "<ul\n  class=\"sapphire-listbox\"\n  cdkListbox\n  [id]=\"id || ''\"\n  [cdkListboxCompareWith]=\"\"\n  [cdkListboxMultiple]=\"!!multiple\"\n  [cdkListboxDisabled]=\"!!disabled\"\n  [cdkListboxNavigationWrapDisabled]=\"\n    navigationWrapDisabled && !_forceEnableNavigationWrap\n  \"\n  [cdkListboxValue]=\"_validSelectedValues\"\n  [cdkListboxUseActiveDescendant]=\"_shouldUseVirtualFocus()\"\n  (cdkListboxValueChange)=\"_handleSelectionChange($event)\"\n  (keydown.enter)=\"selected.emit($event)\"\n  (keydown.space)=\"selected.emit($event)\"\n  (mousedown)=\"_isConnectedToInput() && $event.preventDefault()\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledBy\"\n  [class.sapphire-listbox--medium]=\"size === 'medium'\"\n  [class.sapphire-listbox--small]=\"size === 'small'\"\n>\n  <ng-container *ngFor=\"let item of options; let last = last\">\n    <ng-container *ngIf=\"_isSection(item)\">\n      <li role=\"presentation\">\n        <ul\n          role=\"group\"\n          class=\"sapphire-listbox__section\"\n          [attr.aria-label]=\"item.ariaLabel\"\n        >\n          <li\n            *ngFor=\"let option of item.children\"\n            [cdkOption]=\"option.value\"\n            [cdkOptionDisabled]=\"!!option.disabled\"\n            [cdkOptionTypeaheadLabel]=\"option.label\"\n            #cdkOption=\"cdkOption\"\n            sp-listbox-item\n            [option]=\"option\"\n            [selected]=\"isSelected(option)\"\n            [focused]=\"cdkOption.isActive()\"\n            (click)=\"!(disabled || option.disabled) && selected.emit($event)\"\n            [size]=\"size\"\n          ></li>\n        </ul>\n      </li>\n      <li\n        *ngIf=\"!last\"\n        role=\"separator\"\n        class=\"sapphire-listbox__separator\"\n      ></li>\n    </ng-container>\n    <li\n      *ngIf=\"_isOption(item)\"\n      [cdkOption]=\"item.value\"\n      [cdkOptionDisabled]=\"!!item.disabled\"\n      [cdkOptionTypeaheadLabel]=\"item.label\"\n      #cdkOption=\"cdkOption\"\n      sp-listbox-item\n      [option]=\"item\"\n      [selected]=\"isSelected(item)\"\n      [focused]=\"cdkOption.isActive()\"\n      (click)=\"!(disabled || item.disabled) && selected.emit($event)\"\n      [size]=\"size\"\n    ></li>\n  </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;min-width:var(--sapphire-listbox-size-width-min);margin:0;position:relative;list-style:none;outline:none;padding:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-listbox-size-spacing-outer-vertical) var(--sapphire-listbox-size-spacing-outer-horizontal);color:var(--sapphire-listbox-color-content-normal-primary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-listbox-color-content-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-listbox-color-content-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-listbox-color-background-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-size-width-icon-l));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-listbox-size-spacing-inner-horizontal-l);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-l);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-l) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-l);border-radius:var(--sapphire-listbox-size-radius-item);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-listbox-time-transition);transition-timing-function:ease-in-out;min-height:var(--sapphire-listbox-size-height-min-height)}.sapphire-listbox--medium .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-m);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-m);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-m) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-m)}.sapphire-listbox--small .sapphire-listbox__content{gap:var(--sapphire-listbox-size-spacing-inner-horizontal-s);grid-template-columns:auto 1fr var(--sapphire-listbox-size-width-icon-s);padding:calc(var(--sapphire-listbox-size-spacing-inner-vertical-s) - var(--sapphire-listbox-size-spacing-outer-vertical)) var(--sapphire-listbox-size-spacing-inner-horizontal-s)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-listbox-font-name);line-height:var(--sapphire-listbox-size-line-height)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-listbox-font-weight-primary);font-size:var(--sapphire-listbox-size-font-primary-l)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-listbox-font-weight-secondary);font-size:var(--sapphire-listbox-size-font-secondary-l)}.sapphire-listbox--medium .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-m)}.sapphire-listbox--small .sapphire-listbox__primary-text{font-size:var(--sapphire-listbox-size-font-primary-s)}.sapphire-listbox--medium .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-m)}.sapphire-listbox--small .sapphire-listbox__secondary-text{font-size:var(--sapphire-listbox-size-font-secondary-s)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-listbox-color-content-normal-secondary-default)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-listbox-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__separator{height:var(--sapphire-listbox-size-height-separator);width:100%;background:var(--sapphire-listbox-color-separator);margin-top:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical));margin-bottom:calc(var(--sapphire-listbox-size-spacing-outer-horizontal) - var(--sapphire-listbox-size-spacing-outer-vertical))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-listbox-size-focus-ring) var(--sapphire-listbox-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-hover);background-color:var(--sapphire-listbox-color-background-normal-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-hover);background-color:var(--sapphire-listbox-color-background-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-hover);background-color:var(--sapphire-listbox-color-background-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-normal-primary-active);background-color:var(--sapphire-listbox-color-background-normal-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-danger-active);background-color:var(--sapphire-listbox-color-background-danger-active)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-listbox-color-content-selected-active);background-color:var(--sapphire-listbox-color-background-selected-active)}:host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i1$4.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkOptionScrollIssuePatch, selector: "[cdkOption]" }, { kind: "component", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: ["selected", "focused", "option", "size"] }] });
 __decorate([
     CoerceBoolean
 ], ListboxComponent.prototype, "disabled", void 0);
@@ -4535,7 +4561,7 @@ class HiddenSelectComponent {
     }
 }
 HiddenSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: HiddenSelectComponent, deps: [{ token: SelectComponentBase }], target: i0.ɵɵFactoryTarget.Component });
-HiddenSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: HiddenSelectComponent, selector: "sp-hidden-select", ngImport: i0, template: "<ng-container *ngIf=\"_select._initialized\">\n  <select\n    *ngIf=\"_isMobile && !_select.multiple\"\n    class=\"sapphire-select__native-select\"\n    _spUseComponentStyles\n    [disabled]=\"_select.disabled\"\n    [attr.name]=\"_select.name\"\n    [attr.autocomplete]=\"_select.autocomplete\"\n    (change)=\"_onNativeSelectChange($event)\"\n  >\n    <option\n      *ngFor=\"let option of _select.options\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n      [selected]=\"_select.listboxValue.includes(option.value)\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n  <div\n    *ngIf=\"!_isMobile || _select.multiple\"\n    aria-hidden=\"true\"\n    spVisuallyHidden\n  >\n    <input\n      type=\"text\"\n      style=\"font-size: 16px\"\n      [disabled]=\"_select.disabled\"\n      [tabIndex]=\"_select.isFocused() || _select.isOpen() ? -1 : 0\"\n      (focus)=\"_select.focus('keyboard')\"\n    />\n    <label>\n      {{ _select.getLabelText() }}\n      <select\n        [attr.size]=\"_select.multiple ? _select.options.length : null\"\n        [disabled]=\"_select.disabled\"\n        tabindex=\"-1\"\n        [multiple]=\"_select.multiple\"\n        (change)=\"_onNativeSelectChange($event)\"\n        [attr.name]=\"_select.name\"\n        [attr.autocomplete]=\"_select.autocomplete\"\n      >\n        <option\n          *ngFor=\"let option of _select.options\"\n          [value]=\"option.value\"\n          [selected]=\"_select.listboxValue.includes(option.value)\"\n          [disabled]=\"option.disabled\"\n        >\n          {{ option.label }}\n        </option>\n      </select>\n    </label>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: VisuallyHiddenDirective, selector: "[spVisuallyHidden]", inputs: ["spVisuallyHidden"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
+HiddenSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: HiddenSelectComponent, selector: "sp-hidden-select", ngImport: i0, template: "<ng-container *ngIf=\"_select._initialized\">\n  <select\n    *ngIf=\"_isMobile && !_select.multiple\"\n    class=\"sapphire-select__native-select\"\n    _spUseComponentStyles\n    [disabled]=\"_select.disabled\"\n    [attr.name]=\"_select.name\"\n    [attr.autocomplete]=\"_select.autocomplete\"\n    (change)=\"_onNativeSelectChange($event)\"\n  >\n    <option\n      *ngFor=\"let option of _select.options\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n      [selected]=\"_select.listboxValue.includes(option.value)\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n  <div\n    *ngIf=\"!_isMobile || _select.multiple\"\n    aria-hidden=\"true\"\n    spVisuallyHidden\n  >\n    <input\n      type=\"text\"\n      style=\"font-size: 16px\"\n      [disabled]=\"_select.disabled\"\n      [tabIndex]=\"_select.isFocused() || _select.isOpen() ? -1 : 0\"\n      (focus)=\"_select.focus('keyboard')\"\n    />\n    <label>\n      {{ _select.getLabelText() }}\n      <select\n        [attr.size]=\"_select.multiple ? _select.options.length : null\"\n        [disabled]=\"_select.disabled\"\n        tabindex=\"-1\"\n        [multiple]=\"_select.multiple\"\n        (change)=\"_onNativeSelectChange($event)\"\n        [attr.name]=\"_select.name\"\n        [attr.autocomplete]=\"_select.autocomplete\"\n      >\n        <option\n          *ngFor=\"let option of _select.options\"\n          [value]=\"option.value\"\n          [selected]=\"_select.listboxValue.includes(option.value)\"\n          [disabled]=\"option.disabled\"\n        >\n          {{ option.label }}\n        </option>\n      </select>\n    </label>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: VisuallyHiddenDirective, selector: "[spVisuallyHidden]", inputs: ["spVisuallyHidden"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: HiddenSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-hidden-select', template: "<ng-container *ngIf=\"_select._initialized\">\n  <select\n    *ngIf=\"_isMobile && !_select.multiple\"\n    class=\"sapphire-select__native-select\"\n    _spUseComponentStyles\n    [disabled]=\"_select.disabled\"\n    [attr.name]=\"_select.name\"\n    [attr.autocomplete]=\"_select.autocomplete\"\n    (change)=\"_onNativeSelectChange($event)\"\n  >\n    <option\n      *ngFor=\"let option of _select.options\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n      [selected]=\"_select.listboxValue.includes(option.value)\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n  <div\n    *ngIf=\"!_isMobile || _select.multiple\"\n    aria-hidden=\"true\"\n    spVisuallyHidden\n  >\n    <input\n      type=\"text\"\n      style=\"font-size: 16px\"\n      [disabled]=\"_select.disabled\"\n      [tabIndex]=\"_select.isFocused() || _select.isOpen() ? -1 : 0\"\n      (focus)=\"_select.focus('keyboard')\"\n    />\n    <label>\n      {{ _select.getLabelText() }}\n      <select\n        [attr.size]=\"_select.multiple ? _select.options.length : null\"\n        [disabled]=\"_select.disabled\"\n        tabindex=\"-1\"\n        [multiple]=\"_select.multiple\"\n        (change)=\"_onNativeSelectChange($event)\"\n        [attr.name]=\"_select.name\"\n        [attr.autocomplete]=\"_select.autocomplete\"\n      >\n        <option\n          *ngFor=\"let option of _select.options\"\n          [value]=\"option.value\"\n          [selected]=\"_select.listboxValue.includes(option.value)\"\n          [disabled]=\"option.disabled\"\n        >\n          {{ option.label }}\n        </option>\n      </select>\n    </label>\n  </div>\n</ng-container>\n" }]
@@ -4814,8 +4840,8 @@ class SelectComponent extends SelectComponentBase {
         return coerceBooleanProperty(this.disabled);
     }
 }
-SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SelectComponent, deps: [{ token: SelectValueHolder }, { token: i2.FocusMonitor }, { token: i2.InputModalityDetector }, { token: FieldComponent, optional: true }, { token: SearchableSelectDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SelectComponent, selector: "sp-select", host: { properties: { "class.sapphire-select--error": "_field?.hasError()", "class.sapphire-select--medium": "_field?.size === \"medium\"", "class.is-focus": "isFocusVisible()", "class.is-disabled": "isDisabled()", "attr.id": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.placeholder": "null" }, classAttribute: "sapphire-select" }, providers: [
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SelectComponent, deps: [{ token: SelectValueHolder }, { token: i2$1.FocusMonitor }, { token: i2$1.InputModalityDetector }, { token: FieldComponent, optional: true }, { token: SearchableSelectDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SelectComponent, selector: "sp-select", host: { properties: { "class.sapphire-select--error": "_field?.hasError(this)", "class.sapphire-select--medium": "_field?.size === \"medium\"", "class.is-focus": "isFocusVisible()", "class.is-disabled": "isDisabled()", "attr.id": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.placeholder": "null" }, classAttribute: "sapphire-select" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => SelectComponent),
@@ -4829,7 +4855,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
             provide: FieldControl,
             useExisting: forwardRef(() => SelectComponent),
         },
-    ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }], exportAs: ["spSelect"], usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<sp-hidden-select></sp-hidden-select>\n<div\n  role=\"button\"\n  aria-haspopup=\"listbox\"\n  class=\"sapphire-select__button\"\n  [spPopoverTriggerFor]=\"popover\"\n  [spPopoverTriggerDisabled]=\"disabled\"\n  spPopoverTriggerOpenOnPressStart\n  spPopoverTriggerCloseOnScroll\n  spPopoverPlacement=\"bottom start\"\n  #triggerElementRef\n  #triggerRef=\"spPopoverTrigger\"\n  (keydown)=\"handleKeyDown($event)\"\n  (spPopoverTriggerClosed)=\"_onClose()\"\n  (spPopoverTriggerOpened)=\"_onOpen()\"\n  (focus)=\"_onFocus()\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"_onFocusChange($event)\"\n  [spPopoverNonModal]=\"searchable\"\n  [id]=\"id\"\n  [tabindex]=\"-1\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n  [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n  [attr.aria-invalid]=\"_field?.hasError() ? true : null\"\n>\n  <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n    <input\n      *ngIf=\"searchable\"\n      #searchInput\n      tabindex=\"-1\"\n      role=\"combobox\"\n      class=\"sapphire-select__search-input\"\n      [spListboxInput]=\"listbox\"\n      [spVisuallyHidden]=\"!_isInputVisible()\"\n      [attr.data-hidden]=\"!_isInputVisible()\"\n      [placeholder]=\"placeholder || ''\"\n      (keydown)=\"_onInputKeydown($event)\"\n      (beforeinput)=\"open()\"\n      [value]=\"_searchableSelectDirective?.searchValue\"\n      (input)=\"_onSearchInput($event)\"\n    />\n    <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n      <div\n        *ngIf=\"selectedOptions.length === 0\"\n        class=\"sapphire-select__placeholder\"\n      >\n        {{ placeholder }}\n      </div>\n      <ng-container *ngIf=\"selectedOptions.length > 0\">\n        <ng-container *ngIf=\"!selectionText\">{{\n          getSelectionText()\n        }}</ng-container>\n        <ng-content select=\"sp-selection-text\"></ng-content>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"sapphire-select__icon-container\">\n    <sp-icon name=\"chevronDown\"></sp-icon>\n  </div>\n</div>\n<ng-template #popover>\n  <sp-popover\n    [style.display]=\"\n      (filteredChildren$ | async)?.length === 0 ? 'none' : undefined\n    \"\n    noPadding\n    noMaxWidth\n    [style.min-width]=\"triggerElementRef.offsetWidth + 'px'\"\n  >\n    <sp-listbox\n      [spListboxItems]=\"(filteredChildren$ | async) || undefined\"\n      navigationWrapDisabled\n      [multiple]=\"multiple\"\n      [(selectedValues)]=\"listboxValue\"\n      (selectedValuesChange)=\"_searchableSelectDirective?.setSearchValue('')\"\n      (selected)=\"_handleSelected()\"\n      [size]=\"_field?.size\"\n    >\n    </sp-listbox>\n  </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field);gap:var(--sapphire-select-size-spacing-control-gap-l)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m);gap:var(--sapphire-select-size-spacing-control-gap-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-select-size-font-content-l)}.sapphire-select--medium .sapphire-select__prefix{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size", "id"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "directive", type: ListboxInputDirective, selector: "input[spListboxInput]", inputs: ["spListboxInput"] }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: VisuallyHiddenDirective, selector: "[spVisuallyHidden]", inputs: ["spVisuallyHidden"] }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] });
+    ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }], exportAs: ["spSelect"], usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<sp-hidden-select></sp-hidden-select>\n<div\n  role=\"button\"\n  aria-haspopup=\"listbox\"\n  class=\"sapphire-select__button\"\n  [spPopoverTriggerFor]=\"popover\"\n  [spPopoverTriggerDisabled]=\"disabled\"\n  spPopoverTriggerOpenOnPressStart\n  spPopoverTriggerCloseOnScroll\n  spPopoverPlacement=\"bottom start\"\n  #triggerElementRef\n  #triggerRef=\"spPopoverTrigger\"\n  (keydown)=\"handleKeyDown($event)\"\n  (spPopoverTriggerClosed)=\"_onClose()\"\n  (spPopoverTriggerOpened)=\"_onOpen()\"\n  (focus)=\"_onFocus()\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"_onFocusChange($event)\"\n  [spPopoverNonModal]=\"searchable\"\n  [id]=\"id\"\n  [tabindex]=\"-1\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n  [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n  [attr.aria-invalid]=\"_field?.hasError(this) ? true : null\"\n>\n  <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n    <input\n      *ngIf=\"searchable\"\n      #searchInput\n      tabindex=\"-1\"\n      role=\"combobox\"\n      class=\"sapphire-select__search-input\"\n      [spListboxInput]=\"listbox\"\n      [spVisuallyHidden]=\"!_isInputVisible()\"\n      [attr.data-hidden]=\"!_isInputVisible()\"\n      [placeholder]=\"placeholder || ''\"\n      (keydown)=\"_onInputKeydown($event)\"\n      (beforeinput)=\"open()\"\n      [value]=\"_searchableSelectDirective?.searchValue\"\n      (input)=\"_onSearchInput($event)\"\n    />\n    <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n      <div\n        *ngIf=\"selectedOptions.length === 0\"\n        class=\"sapphire-select__placeholder\"\n      >\n        {{ placeholder }}\n      </div>\n      <ng-container *ngIf=\"selectedOptions.length > 0\">\n        <ng-container *ngIf=\"!selectionText\">{{\n          getSelectionText()\n        }}</ng-container>\n        <ng-content select=\"sp-selection-text\"></ng-content>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"sapphire-select__icon-container\">\n    <sp-icon name=\"chevronDown\"></sp-icon>\n  </div>\n</div>\n<ng-template #popover>\n  <sp-popover\n    [style.display]=\"\n      (filteredChildren$ | async)?.length === 0 ? 'none' : undefined\n    \"\n    noPadding\n    noMaxWidth\n    [style.min-width]=\"triggerElementRef.offsetWidth + 'px'\"\n  >\n    <sp-listbox\n      [spListboxItems]=\"(filteredChildren$ | async) || undefined\"\n      navigationWrapDisabled\n      [multiple]=\"multiple\"\n      [(selectedValues)]=\"listboxValue\"\n      (selectedValuesChange)=\"_searchableSelectDirective?.setSearchValue('')\"\n      (selected)=\"_handleSelected()\"\n      [size]=\"_field?.size\"\n    >\n    </sp-listbox>\n  </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field);gap:var(--sapphire-select-size-spacing-control-gap-l)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m);gap:var(--sapphire-select-size-spacing-control-gap-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-select-size-font-content-l)}.sapphire-select--medium .sapphire-select__prefix{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size", "id"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "directive", type: ListboxInputDirective, selector: "input[spListboxInput]", inputs: ["spListboxInput"] }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: VisuallyHiddenDirective, selector: "[spVisuallyHidden]", inputs: ["spVisuallyHidden"] }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 __decorate([
     AutoId()
 ], SelectComponent.prototype, "_valueContainerId", void 0);
@@ -4851,7 +4877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         },
                     ], host: {
                         class: 'sapphire-select',
-                        '[class.sapphire-select--error]': '_field?.hasError()',
+                        '[class.sapphire-select--error]': '_field?.hasError(this)',
                         '[class.sapphire-select--medium]': '_field?.size === "medium"',
                         '[class.is-focus]': 'isFocusVisible()',
                         '[class.is-disabled]': 'isDisabled()',
@@ -4859,9 +4885,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         '[attr.aria-label]': 'null',
                         '[attr.aria-labelledby]': 'null',
                         '[attr.placeholder]': 'null',
-                    }, hostDirectives: [UseComponentStylesOnHost], template: "<sp-hidden-select></sp-hidden-select>\n<div\n  role=\"button\"\n  aria-haspopup=\"listbox\"\n  class=\"sapphire-select__button\"\n  [spPopoverTriggerFor]=\"popover\"\n  [spPopoverTriggerDisabled]=\"disabled\"\n  spPopoverTriggerOpenOnPressStart\n  spPopoverTriggerCloseOnScroll\n  spPopoverPlacement=\"bottom start\"\n  #triggerElementRef\n  #triggerRef=\"spPopoverTrigger\"\n  (keydown)=\"handleKeyDown($event)\"\n  (spPopoverTriggerClosed)=\"_onClose()\"\n  (spPopoverTriggerOpened)=\"_onOpen()\"\n  (focus)=\"_onFocus()\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"_onFocusChange($event)\"\n  [spPopoverNonModal]=\"searchable\"\n  [id]=\"id\"\n  [tabindex]=\"-1\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n  [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n  [attr.aria-invalid]=\"_field?.hasError() ? true : null\"\n>\n  <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n    <input\n      *ngIf=\"searchable\"\n      #searchInput\n      tabindex=\"-1\"\n      role=\"combobox\"\n      class=\"sapphire-select__search-input\"\n      [spListboxInput]=\"listbox\"\n      [spVisuallyHidden]=\"!_isInputVisible()\"\n      [attr.data-hidden]=\"!_isInputVisible()\"\n      [placeholder]=\"placeholder || ''\"\n      (keydown)=\"_onInputKeydown($event)\"\n      (beforeinput)=\"open()\"\n      [value]=\"_searchableSelectDirective?.searchValue\"\n      (input)=\"_onSearchInput($event)\"\n    />\n    <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n      <div\n        *ngIf=\"selectedOptions.length === 0\"\n        class=\"sapphire-select__placeholder\"\n      >\n        {{ placeholder }}\n      </div>\n      <ng-container *ngIf=\"selectedOptions.length > 0\">\n        <ng-container *ngIf=\"!selectionText\">{{\n          getSelectionText()\n        }}</ng-container>\n        <ng-content select=\"sp-selection-text\"></ng-content>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"sapphire-select__icon-container\">\n    <sp-icon name=\"chevronDown\"></sp-icon>\n  </div>\n</div>\n<ng-template #popover>\n  <sp-popover\n    [style.display]=\"\n      (filteredChildren$ | async)?.length === 0 ? 'none' : undefined\n    \"\n    noPadding\n    noMaxWidth\n    [style.min-width]=\"triggerElementRef.offsetWidth + 'px'\"\n  >\n    <sp-listbox\n      [spListboxItems]=\"(filteredChildren$ | async) || undefined\"\n      navigationWrapDisabled\n      [multiple]=\"multiple\"\n      [(selectedValues)]=\"listboxValue\"\n      (selectedValuesChange)=\"_searchableSelectDirective?.setSearchValue('')\"\n      (selected)=\"_handleSelected()\"\n      [size]=\"_field?.size\"\n    >\n    </sp-listbox>\n  </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field);gap:var(--sapphire-select-size-spacing-control-gap-l)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m);gap:var(--sapphire-select-size-spacing-control-gap-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-select-size-font-content-l)}.sapphire-select--medium .sapphire-select__prefix{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"] }]
+                    }, hostDirectives: [UseComponentStylesOnHost], template: "<sp-hidden-select></sp-hidden-select>\n<div\n  role=\"button\"\n  aria-haspopup=\"listbox\"\n  class=\"sapphire-select__button\"\n  [spPopoverTriggerFor]=\"popover\"\n  [spPopoverTriggerDisabled]=\"disabled\"\n  spPopoverTriggerOpenOnPressStart\n  spPopoverTriggerCloseOnScroll\n  spPopoverPlacement=\"bottom start\"\n  #triggerElementRef\n  #triggerRef=\"spPopoverTrigger\"\n  (keydown)=\"handleKeyDown($event)\"\n  (spPopoverTriggerClosed)=\"_onClose()\"\n  (spPopoverTriggerOpened)=\"_onOpen()\"\n  (focus)=\"_onFocus()\"\n  cdkMonitorSubtreeFocus\n  (cdkFocusChange)=\"_onFocusChange($event)\"\n  [spPopoverNonModal]=\"searchable\"\n  [id]=\"id\"\n  [tabindex]=\"-1\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n  [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n  [attr.aria-invalid]=\"_field?.hasError(this) ? true : null\"\n>\n  <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n    <input\n      *ngIf=\"searchable\"\n      #searchInput\n      tabindex=\"-1\"\n      role=\"combobox\"\n      class=\"sapphire-select__search-input\"\n      [spListboxInput]=\"listbox\"\n      [spVisuallyHidden]=\"!_isInputVisible()\"\n      [attr.data-hidden]=\"!_isInputVisible()\"\n      [placeholder]=\"placeholder || ''\"\n      (keydown)=\"_onInputKeydown($event)\"\n      (beforeinput)=\"open()\"\n      [value]=\"_searchableSelectDirective?.searchValue\"\n      (input)=\"_onSearchInput($event)\"\n    />\n    <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n      <div\n        *ngIf=\"selectedOptions.length === 0\"\n        class=\"sapphire-select__placeholder\"\n      >\n        {{ placeholder }}\n      </div>\n      <ng-container *ngIf=\"selectedOptions.length > 0\">\n        <ng-container *ngIf=\"!selectionText\">{{\n          getSelectionText()\n        }}</ng-container>\n        <ng-content select=\"sp-selection-text\"></ng-content>\n      </ng-container>\n    </ng-container>\n  </div>\n  <div class=\"sapphire-select__icon-container\">\n    <sp-icon name=\"chevronDown\"></sp-icon>\n  </div>\n</div>\n<ng-template #popover>\n  <sp-popover\n    [style.display]=\"\n      (filteredChildren$ | async)?.length === 0 ? 'none' : undefined\n    \"\n    noPadding\n    noMaxWidth\n    [style.min-width]=\"triggerElementRef.offsetWidth + 'px'\"\n  >\n    <sp-listbox\n      [spListboxItems]=\"(filteredChildren$ | async) || undefined\"\n      navigationWrapDisabled\n      [multiple]=\"multiple\"\n      [(selectedValues)]=\"listboxValue\"\n      (selectedValuesChange)=\"_searchableSelectDirective?.setSearchValue('')\"\n      (selected)=\"_handleSelected()\"\n      [size]=\"_field?.size\"\n    >\n    </sp-listbox>\n  </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field);gap:var(--sapphire-select-size-spacing-control-gap-l)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m);gap:var(--sapphire-select-size-spacing-control-gap-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-select-size-font-content-l)}.sapphire-select--medium .sapphire-select__prefix{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: SelectValueHolder }, { type: i2.FocusMonitor }, { type: i2.InputModalityDetector }, { type: FieldComponent, decorators: [{
+        return [{ type: SelectValueHolder }, { type: i2$1.FocusMonitor }, { type: i2$1.InputModalityDetector }, { type: FieldComponent, decorators: [{
                         type: Optional
                     }] }, { type: SearchableSelectDirective, decorators: [{
                         type: Optional
@@ -4970,7 +4996,7 @@ class BasicSelectComponent extends SelectComponentBase {
         }
     }
 }
-BasicSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BasicSelectComponent, deps: [{ token: SelectValueHolder }, { token: i2.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
+BasicSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BasicSelectComponent, deps: [{ token: SelectValueHolder }, { token: i2$1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
 BasicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: BasicSelectComponent, selector: "sp-basic-select", inputs: { size: "size", variant: "variant" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -4982,7 +5008,7 @@ BasicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             useExisting: forwardRef(() => BasicSelectComponent),
         },
         ViewEncapsulationProvider,
-    ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }], exportAs: ["spBasicSelect"], usesInheritance: true, ngImport: i0, template: "<div style=\"position: relative\">\n  <sp-hidden-select></sp-hidden-select>\n  <button\n    sp-button\n    [variant]=\"getButtonVariant()\"\n    [appearance]=\"getButtonAppearance()\"\n    [size]=\"size\"\n    iconAlign=\"right\"\n    [spPopoverTriggerFor]=\"popover\"\n    spPopoverPlacement=\"bottom start\"\n    #triggerElementRef\n    #triggerRef=\"spPopoverTrigger\"\n    (keydown)=\"handleKeyDown($event)\"\n    (spPopoverTriggerOpened)=\"_onOpen()\"\n    (spPopoverTriggerClosed)=\"_onClose()\"\n    cdkMonitorElementFocus\n    (cdkFocusChange)=\"_onFocusChange($event)\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [disabled]=\"disabled\"\n  >\n    <span *ngIf=\"selectedOptions.length === 0\">\n      {{ placeholder }}\n    </span>\n    <ng-container *ngIf=\"selectedOptions.length > 0\">\n      <ng-container *ngIf=\"!selectionText\">{{\n        getSelectionText()\n      }}</ng-container>\n      <ng-content select=\"sp-selection-text\"></ng-content>\n    </ng-container>\n    <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n  </button>\n  <ng-template #popover>\n    <sp-popover noPadding>\n      <sp-listbox\n        [spListboxItems]=\"listboxChildren\"\n        navigationWrapDisabled\n        [multiple]=\"multiple\"\n        [(selectedValues)]=\"listboxValue\"\n        (selected)=\"_handleSelected()\"\n        [size]=\"size\"\n      >\n      </sp-listbox>\n    </sp-popover>\n  </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field);gap:var(--sapphire-select-size-spacing-control-gap-l)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m);gap:var(--sapphire-select-size-spacing-control-gap-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-select-size-font-content-l)}.sapphire-select--medium .sapphire-select__prefix{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size", "id"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "directive", type: ButtonIconDirective, selector: "[spButtonIcon]" }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }] });
+    ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }], exportAs: ["spBasicSelect"], usesInheritance: true, ngImport: i0, template: "<div style=\"position: relative\">\n  <sp-hidden-select></sp-hidden-select>\n  <button\n    sp-button\n    [variant]=\"getButtonVariant()\"\n    [appearance]=\"getButtonAppearance()\"\n    [size]=\"size\"\n    iconAlign=\"right\"\n    [spPopoverTriggerFor]=\"popover\"\n    spPopoverPlacement=\"bottom start\"\n    #triggerElementRef\n    #triggerRef=\"spPopoverTrigger\"\n    (keydown)=\"handleKeyDown($event)\"\n    (spPopoverTriggerOpened)=\"_onOpen()\"\n    (spPopoverTriggerClosed)=\"_onClose()\"\n    cdkMonitorElementFocus\n    (cdkFocusChange)=\"_onFocusChange($event)\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [disabled]=\"disabled\"\n  >\n    <span *ngIf=\"selectedOptions.length === 0\">\n      {{ placeholder }}\n    </span>\n    <ng-container *ngIf=\"selectedOptions.length > 0\">\n      <ng-container *ngIf=\"!selectionText\">{{\n        getSelectionText()\n      }}</ng-container>\n      <ng-content select=\"sp-selection-text\"></ng-content>\n    </ng-container>\n    <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n  </button>\n  <ng-template #popover>\n    <sp-popover noPadding>\n      <sp-listbox\n        [spListboxItems]=\"listboxChildren\"\n        navigationWrapDisabled\n        [multiple]=\"multiple\"\n        [(selectedValues)]=\"listboxValue\"\n        (selected)=\"_handleSelected()\"\n        [size]=\"size\"\n      >\n      </sp-listbox>\n    </sp-popover>\n  </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field);gap:var(--sapphire-select-size-spacing-control-gap-l)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m);gap:var(--sapphire-select-size-spacing-control-gap-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-select-size-font-content-l)}.sapphire-select--medium .sapphire-select__prefix{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size", "id"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "directive", type: ButtonIconDirective, selector: "[spButtonIcon]" }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BasicSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-basic-select', exportAs: 'spBasicSelect', providers: [
@@ -5000,7 +5026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         '[attr.aria-label]': 'null',
                         '[attr.aria-labelledby]': 'null',
                     }, template: "<div style=\"position: relative\">\n  <sp-hidden-select></sp-hidden-select>\n  <button\n    sp-button\n    [variant]=\"getButtonVariant()\"\n    [appearance]=\"getButtonAppearance()\"\n    [size]=\"size\"\n    iconAlign=\"right\"\n    [spPopoverTriggerFor]=\"popover\"\n    spPopoverPlacement=\"bottom start\"\n    #triggerElementRef\n    #triggerRef=\"spPopoverTrigger\"\n    (keydown)=\"handleKeyDown($event)\"\n    (spPopoverTriggerOpened)=\"_onOpen()\"\n    (spPopoverTriggerClosed)=\"_onClose()\"\n    cdkMonitorElementFocus\n    (cdkFocusChange)=\"_onFocusChange($event)\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [disabled]=\"disabled\"\n  >\n    <span *ngIf=\"selectedOptions.length === 0\">\n      {{ placeholder }}\n    </span>\n    <ng-container *ngIf=\"selectedOptions.length > 0\">\n      <ng-container *ngIf=\"!selectionText\">{{\n        getSelectionText()\n      }}</ng-container>\n      <ng-content select=\"sp-selection-text\"></ng-content>\n    </ng-container>\n    <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n  </button>\n  <ng-template #popover>\n    <sp-popover noPadding>\n      <sp-listbox\n        [spListboxItems]=\"listboxChildren\"\n        navigationWrapDisabled\n        [multiple]=\"multiple\"\n        [(selectedValues)]=\"listboxValue\"\n        (selected)=\"_handleSelected()\"\n        [size]=\"size\"\n      >\n      </sp-listbox>\n    </sp-popover>\n  </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:inline-block;color:var(--sapphire-select-color-content);width:var(--sapphire-select-size-width-control);font-family:var(--sapphire-select-font-name);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-select-size-height-field-l);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-select-size-spacing-control-horizontal-l);border:none;background-color:var(--sapphire-select-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-default);border-radius:var(--sapphire-select-size-radius-field);gap:var(--sapphire-select-size-spacing-control-gap-l)}.sapphire-select--medium .sapphire-select__button{height:var(--sapphire-select-size-height-field-m);padding:0 var(--sapphire-select-size-spacing-control-horizontal-m);gap:var(--sapphire-select-size-spacing-control-gap-m)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-select-size-font-content-l);width:100%;font-weight:var(--sapphire-select-size-font-weight-item);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--medium .sapphire-select__value{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-select-color-placeholder)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-select-size-width-icon-l);height:var(--sapphire-select-size-height-icon-l)}.sapphire-select--medium .sapphire-select__icon-container{width:var(--sapphire-select-size-width-icon-m);height:var(--sapphire-select-size-height-icon-m)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-select-size-font-content-l)}.sapphire-select--medium .sapphire-select__prefix{font-size:var(--sapphire-select-size-font-content-m)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-select-color-placeholder)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-select-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-select-size-focus-ring) var(--sapphire-select-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"] }]
-        }], ctorParameters: function () { return [{ type: SelectValueHolder }, { type: i2.FocusMonitor }]; }, propDecorators: { size: [{
+        }], ctorParameters: function () { return [{ type: SelectValueHolder }, { type: i2$1.FocusMonitor }]; }, propDecorators: { size: [{
                 type: Input
             }], variant: [{
                 type: Input
@@ -5438,7 +5464,7 @@ class SegmentedTabsComponent {
     }
 }
 SegmentedTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedTabsComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SegmentedTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedTabsComponent, selector: "sp-segmented-tabs", inputs: { size: "size", align: "align", keyboardActivation: "keyboardActivation", disabled: "disabled", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { properties: { "attr.align": "null" } }, providers: [ViewEncapsulationProvider], queries: [{ propertyName: "tabs", predicate: i0.forwardRef(function () { return SegmentedTabComponent; }) }], viewQueries: [{ propertyName: "segmentedControl", first: true, predicate: ["segmentedControl"], descendants: true }], exportAs: ["spSegmentedTabs"], ngImport: i0, template: "<div\n  #segmentedControl\n  class=\"sapphire-segmented-control\"\n  [class.sapphire-segmented-control--large]=\"size === 'large'\"\n  [class.sapphire-segmented-control--small]=\"size === 'small'\"\n  [class.focus-visible]=\"_focusVisible\"\n  [class.sapphire-segmented-control--manual-keyboard-activation]=\"\n    keyboardActivation === 'manual'\n  \"\n  [ngClass]=\"\n    align === 'stretch'\n      ? 'sapphire-segmented-control--stretch'\n      : 'sapphire-segmented-control--align-' + align\n  \"\n>\n  <div\n    class=\"sapphire-segmented-control__button-container\"\n    role=\"tablist\"\n    aria-orientation=\"horizontal\"\n    cdkMonitorSubtreeFocus\n    (cdkFocusChange)=\"_onFocusChange($event)\"\n    (keydown)=\"_onKeyDown($event)\"\n  >\n    <ng-content select=\"sp-segmented-tab\"></ng-content>\n    <span\n      [style.left]=\"_activeTabPosition.left\"\n      [style.width]=\"_activeTabPosition.width\"\n      [class.sapphire-segmented-control__glider--with-transition]=\"\n        _animationEnabled\n      \"\n      class=\"sapphire-segmented-control__glider\"\n      role=\"none\"\n    ></span>\n  </div>\n</div>\n<ng-container *ngTemplateOutlet=\"_getTabContentTemplate()\"></ng-container>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-segmented-control-size-height-m)}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container{width:100%}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background-color:var(--sapphire-segmented-control-color-tray);border-radius:var(--sapphire-segmented-control-size-radius);padding:var(--sapphire-segmented-control-size-spacing-tray);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-segmented-control-size-spacing-tray);left:0;height:calc(100% - var(--sapphire-segmented-control-size-spacing-tray) * 2);display:block;background-color:var(--sapphire-segmented-control-color-glider);box-shadow:var(--sapphire-segmented-control-shadow-glider);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-segmented-control-size-radius)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-segmented-control-time-transition) ease-in-out,left var(--sapphire-segmented-control-time-transition) ease-in-out}.sapphire-segmented-control__button{font-family:var(--sapphire-segmented-control-font-name);font-weight:var(--sapphire-segmented-control-font-weight);font-size:var(--sapphire-segmented-control-size-font-m);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex:1 1 auto;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-segmented-control-size-min-width-tab);padding:0 var(--sapphire-segmented-control-size-spacing-tab-horizontal);background-color:transparent;color:var(--sapphire-segmented-control-color-content-inactive);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-segmented-control-time-transition) ease-in-out}.sapphire-segmented-control__button--active{color:var(--sapphire-segmented-control-color-content-active)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-segmented-control-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-segmented-control-size-focus-ring) solid var(--sapphire-segmented-control-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-segmented-control-size-focus-ring) solid var(--sapphire-segmented-control-color-focus-ring);border-radius:var(--sapphire-segmented-control-size-radius)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--large{height:var(--sapphire-segmented-control-size-height-l)}.sapphire-segmented-control--large .sapphire-segmented-control__button{font-size:var(--sapphire-segmented-control-size-font-l)}.sapphire-segmented-control--small{height:var(--sapphire-segmented-control-size-height-s)}.sapphire-segmented-control--small .sapphire-segmented-control__button{font-size:var(--sapphire-segmented-control-size-font-s)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
+SegmentedTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedTabsComponent, selector: "sp-segmented-tabs", inputs: { size: "size", align: "align", keyboardActivation: "keyboardActivation", disabled: "disabled", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { properties: { "attr.align": "null" } }, providers: [ViewEncapsulationProvider], queries: [{ propertyName: "tabs", predicate: i0.forwardRef(function () { return SegmentedTabComponent; }) }], viewQueries: [{ propertyName: "segmentedControl", first: true, predicate: ["segmentedControl"], descendants: true }], exportAs: ["spSegmentedTabs"], ngImport: i0, template: "<div\n  #segmentedControl\n  class=\"sapphire-segmented-control\"\n  [class.sapphire-segmented-control--large]=\"size === 'large'\"\n  [class.sapphire-segmented-control--small]=\"size === 'small'\"\n  [class.focus-visible]=\"_focusVisible\"\n  [class.sapphire-segmented-control--manual-keyboard-activation]=\"\n    keyboardActivation === 'manual'\n  \"\n  [ngClass]=\"\n    align === 'stretch'\n      ? 'sapphire-segmented-control--stretch'\n      : 'sapphire-segmented-control--align-' + align\n  \"\n>\n  <div\n    class=\"sapphire-segmented-control__button-container\"\n    role=\"tablist\"\n    aria-orientation=\"horizontal\"\n    cdkMonitorSubtreeFocus\n    (cdkFocusChange)=\"_onFocusChange($event)\"\n    (keydown)=\"_onKeyDown($event)\"\n  >\n    <ng-content select=\"sp-segmented-tab\"></ng-content>\n    <span\n      [style.left]=\"_activeTabPosition.left\"\n      [style.width]=\"_activeTabPosition.width\"\n      [class.sapphire-segmented-control__glider--with-transition]=\"\n        _animationEnabled\n      \"\n      class=\"sapphire-segmented-control__glider\"\n      role=\"none\"\n    ></span>\n  </div>\n</div>\n<ng-container *ngTemplateOutlet=\"_getTabContentTemplate()\"></ng-container>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-segmented-control-size-height-m)}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container{width:100%}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background-color:var(--sapphire-segmented-control-color-tray);border-radius:var(--sapphire-segmented-control-size-radius);padding:var(--sapphire-segmented-control-size-spacing-tray);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-segmented-control-size-spacing-tray);left:0;height:calc(100% - var(--sapphire-segmented-control-size-spacing-tray) * 2);display:block;background-color:var(--sapphire-segmented-control-color-glider);box-shadow:var(--sapphire-segmented-control-shadow-glider);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-segmented-control-size-radius)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-segmented-control-time-transition) ease-in-out,left var(--sapphire-segmented-control-time-transition) ease-in-out}.sapphire-segmented-control__button{font-family:var(--sapphire-segmented-control-font-name);font-weight:var(--sapphire-segmented-control-font-weight);font-size:var(--sapphire-segmented-control-size-font-m);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex:1 1 auto;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-segmented-control-size-min-width-tab);padding:0 var(--sapphire-segmented-control-size-spacing-tab-horizontal);background-color:transparent;color:var(--sapphire-segmented-control-color-content-inactive);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-segmented-control-time-transition) ease-in-out}.sapphire-segmented-control__button--active{color:var(--sapphire-segmented-control-color-content-active)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-segmented-control-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-segmented-control-size-focus-ring) solid var(--sapphire-segmented-control-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-segmented-control-size-focus-ring) solid var(--sapphire-segmented-control-color-focus-ring);border-radius:var(--sapphire-segmented-control-size-radius)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--large{height:var(--sapphire-segmented-control-size-height-l)}.sapphire-segmented-control--large .sapphire-segmented-control__button{font-size:var(--sapphire-segmented-control-size-font-l)}.sapphire-segmented-control--small{height:var(--sapphire-segmented-control-size-height-s)}.sapphire-segmented-control--small .sapphire-segmented-control__button{font-size:var(--sapphire-segmented-control-size-font-s)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
 __decorate([
     CoerceBoolean
 ], SegmentedTabsComponent.prototype, "disabled", void 0);
@@ -5821,7 +5847,7 @@ class TooltipDirective {
         };
     }
 }
-TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i1$3.Overlay }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i1$2.Overlay }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
 TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TooltipDirective, isStandalone: true, selector: "[spTooltip]", inputs: { tooltipText: ["spTooltip", "tooltipText"], delay: ["spTooltipDelay", "delay"], placement: ["spTooltipPlacement", "placement"] }, host: { listeners: { "mouseenter": "warmup()", "mouseleave": "hide()", "click": "hide(true)", "document:keydown.escape": "handleGlobalEscapeKeyEvent()", "focus": "onFocus($event)", "blur": "onBlur($event)" } }, exportAs: ["spTooltip"], ngImport: i0 });
 __decorate([
     AutoId()
@@ -5840,7 +5866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                     },
                     exportAs: 'spTooltip',
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.Overlay }, { type: i0.ElementRef }]; }, propDecorators: { id: [], tooltipText: [{
+        }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.ElementRef }]; }, propDecorators: { id: [], tooltipText: [{
                 type: Input,
                 args: ['spTooltip']
             }], delay: [{
@@ -5929,7 +5955,7 @@ class TableHeadCellComponent {
     }
 }
 TableHeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableHeadCellComponent, deps: [{ token: forwardRef(() => TableComponent) }, { token: TableSortHeaderDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TableHeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: TableHeadCellComponent, selector: "th[sp-table-th]", inputs: { align: "align", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", selectionCell: "selectionCell" }, host: { properties: { "class.sapphire-table__headCell": "!selectionCell", "class.sapphire-table__cell": "selectionCell", "class.sapphire-table__cell--alignLeft": "align === 'left'", "class.sapphire-table__cell--alignCenter": "align === 'center'", "class.sapphire-table__cell--alignRight": "align === 'right'", "class.sapphire-table__selectionCell": "selectionCell", "style.width": "this.width", "style.min-width": "this.minWidth", "style.max-width": "this.maxWidth" } }, hostDirectives: [{ directive: UseComponentStyles }], ngImport: i0, template: "<div\n  *ngIf=\"!selectionCell\"\n  class=\"sapphire-table__headCell_container\"\n  _spUseComponentStyles\n>\n  <span *ngIf=\"tableSortHeader && align === 'right'\">\n    <ng-container *ngTemplateOutlet=\"sortIcon\"></ng-container>\n  </span>\n  <span [spTruncatedWithTooltip]=\"cellOverflow === 'truncate'\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </span>\n  <span *ngIf=\"tableSortHeader && align !== 'right'\">\n    <ng-container *ngTemplateOutlet=\"sortIcon\"></ng-container>\n  </span>\n</div>\n<ng-container *ngIf=\"selectionCell\"\n  ><ng-container *ngTemplateOutlet=\"content\"></ng-container\n></ng-container>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n\n<ng-template #sortIcon>\n  <span\n    *ngIf=\"tableSortHeader\"\n    aria-hidden=\"true\"\n    [class.sapphire-table-sortableIcon]=\"\n      tableSortHeader.tableSort.sortDescriptor.column !==\n      tableSortHeader.sortHeader\n    \"\n    [class.sapphire-table-sortedIcon]=\"\n      tableSortHeader.tableSort.sortDescriptor.column ===\n      tableSortHeader.sortHeader\n    \"\n    _spUseComponentStyles\n  >\n    <sp-icon\n      [name]=\"\n        tableSortHeader.tableSort.sortDescriptor.column ===\n          tableSortHeader.sortHeader &&\n        tableSortHeader.tableSort.sortDescriptor.direction === 'descending'\n          ? 'caretDownMedium'\n          : 'caretUpMedium'\n      \"\n    ></sp-icon>\n  </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "directive", type: TruncatedWithTooltipDirective, selector: "[spTruncatedWithTooltip]", inputs: ["spTruncatedWithTooltip"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
+TableHeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: TableHeadCellComponent, selector: "th[sp-table-th]", inputs: { align: "align", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", selectionCell: "selectionCell" }, host: { properties: { "class.sapphire-table__headCell": "!selectionCell", "class.sapphire-table__cell": "selectionCell", "class.sapphire-table__cell--alignLeft": "align === 'left'", "class.sapphire-table__cell--alignCenter": "align === 'center'", "class.sapphire-table__cell--alignRight": "align === 'right'", "class.sapphire-table__selectionCell": "selectionCell", "style.width": "this.width", "style.min-width": "this.minWidth", "style.max-width": "this.maxWidth" } }, hostDirectives: [{ directive: UseComponentStyles }], ngImport: i0, template: "<div\n  *ngIf=\"!selectionCell\"\n  class=\"sapphire-table__headCell_container\"\n  _spUseComponentStyles\n>\n  <span *ngIf=\"tableSortHeader && align === 'right'\">\n    <ng-container *ngTemplateOutlet=\"sortIcon\"></ng-container>\n  </span>\n  <span [spTruncatedWithTooltip]=\"cellOverflow === 'truncate'\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </span>\n  <span *ngIf=\"tableSortHeader && align !== 'right'\">\n    <ng-container *ngTemplateOutlet=\"sortIcon\"></ng-container>\n  </span>\n</div>\n<ng-container *ngIf=\"selectionCell\"\n  ><ng-container *ngTemplateOutlet=\"content\"></ng-container\n></ng-container>\n\n<ng-template #content><ng-content></ng-content></ng-template>\n\n<ng-template #sortIcon>\n  <span\n    *ngIf=\"tableSortHeader\"\n    aria-hidden=\"true\"\n    [class.sapphire-table-sortableIcon]=\"\n      tableSortHeader.tableSort.sortDescriptor.column !==\n      tableSortHeader.sortHeader\n    \"\n    [class.sapphire-table-sortedIcon]=\"\n      tableSortHeader.tableSort.sortDescriptor.column ===\n      tableSortHeader.sortHeader\n    \"\n    _spUseComponentStyles\n  >\n    <sp-icon\n      [name]=\"\n        tableSortHeader.tableSort.sortDescriptor.column ===\n          tableSortHeader.sortHeader &&\n        tableSortHeader.tableSort.sortDescriptor.direction === 'descending'\n          ? 'caretDownMedium'\n          : 'caretUpMedium'\n      \"\n    ></sp-icon>\n  </span>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "directive", type: TruncatedWithTooltipDirective, selector: "[spTruncatedWithTooltip]", inputs: ["spTruncatedWithTooltip"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
 __decorate([
     CoerceBoolean
 ], TableHeadCellComponent.prototype, "selectionCell", void 0);
@@ -6222,7 +6248,7 @@ TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
     <table *ngIf="!table" class="sapphire-table__table">
       <ng-content></ng-content>
     </table>
-  `, isInline: true, styles: [".sapphire-table{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;justify-content:space-between}.sapphire-table--overflow{overflow:auto}.sapphire-table__table{border-collapse:collapse;border-spacing:0;background-color:var(--sapphire-table-color-background-table);width:100%}.sapphire-table-sortedIcon,.sapphire-table-sortableIcon{display:inline-flex;visibility:hidden;vertical-align:top}.sapphire-table__head{top:0;z-index:2;line-height:var(--sapphire-table-size-line-height-cell-default);background-color:var(--sapphire-table-color-background-head)}.sapphire-table__head--sticky{position:sticky}.sapphire-table__cell--alignLeft{text-align:left}.sapphire-table__cell--alignCenter{text-align:center}.sapphire-table__cell--alignRight{text-align:end}.sapphire-table__headCell{color:var(--sapphire-table-color-content-cell);box-sizing:border-box;font-size:var(--sapphire-table-size-font-head-default);font-family:var(--sapphire-table-font-name);font-weight:var(--sapphire-table-font-weight-head);line-height:var(--sapphire-table-size-line-height-cell-default);padding:var(--sapphire-table-size-spacing-head-cell-vertical-default) var(--sapphire-table-size-spacing-head-cell-horizontal-default);vertical-align:top}.sapphire-table__headCell_container{padding:var(--sapphire-table-size-spacing-head-cell-container-vertical) var(--sapphire-table-size-spacing-head-cell-container-horizontal);display:inline-flex;align-items:center;box-sizing:border-box;width:100%}.sapphire-table__cell--alignRight .sapphire-table__headCell_container{justify-content:flex-end}.sapphire-table__cell--alignLeft .sapphire-table__headCell_container{justify-content:flex-start}.sapphire-table__cell--alignCenter .sapphire-table__headCell_container{justify-content:center}.sapphire-table__row,.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{outline:none;position:relative;z-index:1}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container,.sapphire-table__cell.is-focus,.sapphire-table__cell:not(.js-focus):focus-visible,.sapphire-table__selectionCell.is-focus,.sapphire-table__selectionCell:not(.js-focus):focus-visible,.sapphire-table__row.is-focus,.sapphire-table__row:not(.js-focus):focus-visible{outline:none;border-radius:var(--sapphire-table-size-radius-focus);box-shadow:inset 0 0 0 var(--sapphire-table-size-width-border-focus) var(--sapphire-table-color-border-focus)}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container{border-radius:var(--sapphire-table-size-radius-focus)}.sapphire-table__headCell.sapphire-table__headCell--sortable.is-hover .sapphire-table__headCell_container,.sapphire-table__headCell.sapphire-table__headCell--sortable:not(.js-hover):hover .sapphire-table__headCell_container{background-color:var(--sapphire-table-color-background-hover);border-radius:var(--sapphire-table-size-radius-hover)}.sapphire-table__headCell.sapphire-table__headCell--sortable{cursor:pointer}.sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover .sapphire-table-sortableIcon{visibility:visible}.sapphire-table__headCell--sorted .sapphire-table-sortedIcon{visibility:visible;padding-left:var(--sapphire-table-size-spacing-icon-left-default)}.sapphire-table__headCell .sapphire-table-sortedIcon,.sapphire-table__headCell .sapphire-table-sortableIcon{padding-left:var(--sapphire-table-size-spacing-icon-left-default)}.sapphire-table__cell--alignRight .sapphire-table-sortedIcon,.sapphire-table__cell--alignRight .sapphire-table-sortableIcon{padding-right:var(--sapphire-table-size-spacing-icon-left-default)}.sapphire-table__headCell__text,.sapphire-table__headCell__icon{vertical-align:top;display:inline-block}.sapphire-table__body{position:relative;overflow:auto}.sapphire-table__cell{box-sizing:border-box;color:var(--sapphire-table-color-content-cell);font-family:var(--sapphire-table-font-name);font-weight:var(--sapphire-table-font-weight-data)}.sapphire-table__cell--ellipsed,.sapphire-table__headCell_content--ellipsed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sapphire-table__cell,.sapphire-table__selectionCell{font-size:var(--sapphire-table-size-font-data-default);line-height:var(--sapphire-table-size-line-height-cell-default);padding:var(--sapphire-table-size-spacing-cell-vertical-default) var(--sapphire-table-size-spacing-cell-horizontal-default)}.sapphire-table__selectionCell{line-height:0;padding-left:var(--sapphire-table-size-spacing-cell-horizontal-end);width:var(--sapphire-table-size-width-selection-cell)}.sapphire-table__selectionCell:not(:first-child){padding-left:var(--sapphire-table-size-spacing-cell-horizontal-default)}.sapphire-table__cell:first-child{padding-left:var(--sapphire-table-size-spacing-cell-horizontal-end)}.sapphire-table__cell:last-child{padding-right:var(--sapphire-table-size-spacing-cell-horizontal-end)}.sapphire-table__headCell:first-child{padding-left:var(--sapphire-table-size-spacing-head-cell-horizontal-end)}.sapphire-table__headCell:last-child{padding-right:var(--sapphire-table-size-spacing-head-cell-horizontal-end)}.sapphire-table__row{position:relative}.sapphire-table__row--active{background-color:var(--sapphire-table-color-background-active)!important}.sapphire-table__row--selected{background-color:var(--sapphire-table-color-background-selected)}.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible,.sapphire-table__row--expanded){box-shadow:inset 0 -1px 0 0 var(--sapphire-table-color-border-separator)}.sapphire-table__row-expanded-view{box-shadow:inset 0 -1px 0 0 var(--sapphire-table-color-border-separator)}.sapphire-table__row-expand-button{display:inline-flex;transition:transform ease-in-out var(--sapphire-table-time-transition-arrow);margin-left:var(--sapphire-table-size-spacing-icon-left-default)}.sapphire-table td:has(.sapphire-table__row-expand-button){width:0}.sapphire-table__row--expanded .sapphire-table__row-expand-button{transform:rotate(180deg)}.sapphire-table--without-last-divider .sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible):last-child{box-shadow:none}.sapphire-table--interactive .sapphire-table__row,.sapphire-table__row--interactive{cursor:default}.sapphire-table--interactive .sapphire-table__row.is-hover,.sapphire-table__row--interactive.is-hover,.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover,.sapphire-table__row--interactive:not(.js-hover):hover{background-color:var(--sapphire-table-color-background-hover);cursor:pointer}.sapphire-table__row--highlighted{background-color:var(--sapphire-table-color-background-hover)}.sapphire-table__row--highlighted>*:first-child{box-shadow:inset var(--sapphire-table-size-width-highlight) 0 0 0 var(--sapphire-table-color-background-highlight)}.sapphire-table__selection-action-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--sapphire-table-size-spacing-selection-action-bar-vertical) var(--sapphire-table-size-spacing-selection-action-bar-horizontal);background-color:var(--sapphire-table-color-background-selection-action-bar)}.sapphire-table__footer{position:relative;z-index:2}.sapphire-table__footer--sticky{position:sticky;bottom:0;left:0}sp-table{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, styles: [".sapphire-table{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;justify-content:space-between}.sapphire-table--overflow{overflow:auto}.sapphire-table__table{border-collapse:collapse;border-spacing:0;background-color:var(--sapphire-table-color-background-table);width:100%}.sapphire-table-sortedIcon,.sapphire-table-sortableIcon{display:inline-flex;visibility:hidden;vertical-align:top}.sapphire-table__head{top:0;z-index:2;line-height:var(--sapphire-table-size-line-height-cell-default);background-color:var(--sapphire-table-color-background-head)}.sapphire-table__head--sticky{position:sticky}.sapphire-table__cell--alignLeft{text-align:left}.sapphire-table__cell--alignCenter{text-align:center}.sapphire-table__cell--alignRight{text-align:end}.sapphire-table__headCell{color:var(--sapphire-table-color-content-cell);box-sizing:border-box;font-size:var(--sapphire-table-size-font-head-default);font-family:var(--sapphire-table-font-name);font-weight:var(--sapphire-table-font-weight-head);line-height:var(--sapphire-table-size-line-height-cell-default);padding:var(--sapphire-table-size-spacing-head-cell-vertical-default) var(--sapphire-table-size-spacing-head-cell-horizontal-default);vertical-align:top}.sapphire-table__headCell_container{padding:var(--sapphire-table-size-spacing-head-cell-container-vertical) var(--sapphire-table-size-spacing-head-cell-container-horizontal);display:inline-flex;align-items:center;box-sizing:border-box;width:100%}.sapphire-table__cell--alignRight .sapphire-table__headCell_container{justify-content:flex-end}.sapphire-table__cell--alignLeft .sapphire-table__headCell_container{justify-content:flex-start}.sapphire-table__cell--alignCenter .sapphire-table__headCell_container{justify-content:center}.sapphire-table__row,.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{outline:none;position:relative;z-index:1}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container,.sapphire-table__cell.is-focus,.sapphire-table__cell:not(.js-focus):focus-visible,.sapphire-table__selectionCell.is-focus,.sapphire-table__selectionCell:not(.js-focus):focus-visible,.sapphire-table__row.is-focus,.sapphire-table__row:not(.js-focus):focus-visible{outline:none;border-radius:var(--sapphire-table-size-radius-focus);box-shadow:inset 0 0 0 var(--sapphire-table-size-width-border-focus) var(--sapphire-table-color-border-focus)}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container{border-radius:var(--sapphire-table-size-radius-focus)}.sapphire-table__headCell.sapphire-table__headCell--sortable.is-hover .sapphire-table__headCell_container,.sapphire-table__headCell.sapphire-table__headCell--sortable:not(.js-hover):hover .sapphire-table__headCell_container{background-color:var(--sapphire-table-color-background-hover);border-radius:var(--sapphire-table-size-radius-hover)}.sapphire-table__headCell.sapphire-table__headCell--sortable{cursor:pointer}.sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover .sapphire-table-sortableIcon{visibility:visible}.sapphire-table__headCell--sorted .sapphire-table-sortedIcon{visibility:visible;padding-left:var(--sapphire-table-size-spacing-icon-left-default)}.sapphire-table__headCell .sapphire-table-sortedIcon,.sapphire-table__headCell .sapphire-table-sortableIcon{padding-left:var(--sapphire-table-size-spacing-icon-left-default)}.sapphire-table__cell--alignRight .sapphire-table-sortedIcon,.sapphire-table__cell--alignRight .sapphire-table-sortableIcon{padding-right:var(--sapphire-table-size-spacing-icon-left-default)}.sapphire-table__headCell__text,.sapphire-table__headCell__icon{vertical-align:top;display:inline-block}.sapphire-table__body{position:relative;overflow:auto}.sapphire-table__cell{box-sizing:border-box;color:var(--sapphire-table-color-content-cell);font-family:var(--sapphire-table-font-name);font-weight:var(--sapphire-table-font-weight-data)}.sapphire-table__cell--ellipsed,.sapphire-table__headCell_content--ellipsed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sapphire-table__cell,.sapphire-table__selectionCell{font-size:var(--sapphire-table-size-font-data-default);line-height:var(--sapphire-table-size-line-height-cell-default);padding:var(--sapphire-table-size-spacing-cell-vertical-default) var(--sapphire-table-size-spacing-cell-horizontal-default)}.sapphire-table__selectionCell{line-height:0;padding-left:var(--sapphire-table-size-spacing-cell-horizontal-end);width:var(--sapphire-table-size-width-selection-cell)}.sapphire-table__selectionCell:not(:first-child){padding-left:var(--sapphire-table-size-spacing-cell-horizontal-default)}.sapphire-table__cell:first-child{padding-left:var(--sapphire-table-size-spacing-cell-horizontal-end)}.sapphire-table__cell:last-child{padding-right:var(--sapphire-table-size-spacing-cell-horizontal-end)}.sapphire-table__headCell:first-child{padding-left:var(--sapphire-table-size-spacing-head-cell-horizontal-end)}.sapphire-table__headCell:last-child{padding-right:var(--sapphire-table-size-spacing-head-cell-horizontal-end)}.sapphire-table__row{position:relative}.sapphire-table__row--active{background-color:var(--sapphire-table-color-background-active)!important}.sapphire-table__row--selected{background-color:var(--sapphire-table-color-background-selected)}.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible,.sapphire-table__row--expanded){box-shadow:inset 0 -1px 0 0 var(--sapphire-table-color-border-separator)}.sapphire-table__row-expanded-view{box-shadow:inset 0 -1px 0 0 var(--sapphire-table-color-border-separator)}.sapphire-table__row-expand-button{display:inline-flex;transition:transform ease-in-out var(--sapphire-table-time-transition-arrow);margin-left:var(--sapphire-table-size-spacing-icon-left-default)}.sapphire-table td:has(.sapphire-table__row-expand-button){width:0}.sapphire-table__row--expanded .sapphire-table__row-expand-button{transform:rotate(180deg)}.sapphire-table--without-last-divider .sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible):last-child{box-shadow:none}.sapphire-table--interactive .sapphire-table__row,.sapphire-table__row--interactive{cursor:default}.sapphire-table--interactive .sapphire-table__row.is-hover,.sapphire-table__row--interactive.is-hover,.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover,.sapphire-table__row--interactive:not(.js-hover):hover{background-color:var(--sapphire-table-color-background-hover);cursor:pointer}.sapphire-table__row--highlighted{background-color:var(--sapphire-table-color-background-hover)}.sapphire-table__row--highlighted>*:first-child{box-shadow:inset var(--sapphire-table-size-width-highlight) 0 0 0 var(--sapphire-table-color-background-highlight)}.sapphire-table__selection-action-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--sapphire-table-size-spacing-selection-action-bar-vertical) var(--sapphire-table-size-spacing-selection-action-bar-horizontal);background-color:var(--sapphire-table-color-background-selection-action-bar)}.sapphire-table__footer{position:relative;z-index:2}.sapphire-table__footer--sticky{position:sticky;bottom:0;left:0}sp-table{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-table', template: `
@@ -6380,7 +6406,7 @@ class NotificationBadgeComponent {
     }
 }
 NotificationBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NotificationBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: NotificationBadgeComponent, selector: "sp-notification-badge", inputs: { containerType: "containerType", size: "size", variant: "variant", count: "count", show: "show", animate: "animate" }, ngImport: i0, template: "<span\n  class=\"sapphire-notification-badge-container\"\n  [class.sapphire-notification-badge-container--rectangle]=\"\n    containerType === 'rectangle'\n  \"\n>\n  <ng-content></ng-content>\n  <span\n    role=\"status\"\n    class=\"sapphire-notification-badge\"\n    [class.sapphire-notification-badge--large]=\"size === 'large'\"\n    [class.sapphire-notification-badge--medium]=\"size === 'medium'\"\n    [class.sapphire-notification-badge--small]=\"size === 'small'\"\n    [class.sapphire-notification-badge--primary]=\"variant === 'primary'\"\n    [class.sapphire-notification-badge--secondary]=\"variant === 'secondary'\"\n    [class.sapphire-notification-badge--pop-in]=\"show && animate\"\n    [class.sapphire-notification-badge--pop-out]=\"!show && animate\"\n    *ngIf=\"show || animate\"\n  >\n    {{\n      size !== 'small'\n        ? count && count.toString().length > 2\n          ? '99+'\n          : count\n        : ''\n    }}\n  </span>\n</span>\n", styles: ["@keyframes pop-in{0%{transform:scale(0) translate(50%,-50%);opacity:0}25%{opacity:.1}to{transform:scale(1) translate(50%,-50%)}}@keyframes pop-out{0%{transform:scale(1) translate(50%,-50%)}75%{opacity:.1}to{transform:scale(0) translate(50%,-50%);opacity:0;display:none}}.sapphire-notification-badge{display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--sapphire-notification-badge-color-content-default);font-family:var(--sapphire-notification-badge-font-name);font-weight:var(--sapphire-notification-badge-font-weight);box-sizing:border-box;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-notification-badge--pop-in{animation:pop-in var(--sapphire-notification-badge-time-transition) cubic-bezier(.55,-.49,.39,1.49)}.sapphire-notification-badge--pop-out{animation:pop-out var(--sapphire-notification-badge-time-transition) forwards}.sapphire-notification-badge--large{height:var(--sapphire-notification-badge-size-height-l);border-radius:var(--sapphire-notification-badge-size-radius-l);padding:var(--sapphire-notification-badge-size-spacing-l-vertical) var(--sapphire-notification-badge-size-spacing-l-horizontal);font-size:var(--sapphire-notification-badge-size-font-primary)}.sapphire-notification-badge--medium{height:var(--sapphire-notification-badge-size-height-m);border-radius:var(--sapphire-notification-badge-size-radius-m);padding:0 var(--sapphire-notification-badge-size-spacing-m-horizontal);font-size:var(--sapphire-notification-badge-size-font-secondary);min-width:var(--sapphire-notification-badge-size-width-m);box-sizing:border-box}.sapphire-notification-badge--small{min-width:var(--sapphire-notification-badge-size-width-s);height:var(--sapphire-notification-badge-size-height-s);border-radius:var(--sapphire-notification-badge-size-radius-s)}.sapphire-notification-badge--primary{background-color:var(--sapphire-notification-badge-color-background-primary)}.sapphire-notification-badge--secondary{background-color:var(--sapphire-notification-badge-color-background-secondary)}.sapphire-notification-badge-container{position:relative;display:inline-block;width:max-content}.sapphire-notification-badge-container .sapphire-notification-badge{position:absolute;top:14%;right:14%;transform:scale(1) translate(50%,-50%);transform-origin:100% 0;pointer-events:none}.sapphire-notification-badge-container--rectangle .sapphire-notification-badge{position:absolute;top:0;right:0;transform:scale(1) translate(50%,-50%);transform-origin:100% 0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NotificationBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: NotificationBadgeComponent, selector: "sp-notification-badge", inputs: { containerType: "containerType", size: "size", variant: "variant", count: "count", show: "show", animate: "animate" }, ngImport: i0, template: "<span\n  class=\"sapphire-notification-badge-container\"\n  [class.sapphire-notification-badge-container--rectangle]=\"\n    containerType === 'rectangle'\n  \"\n>\n  <ng-content></ng-content>\n  <span\n    role=\"status\"\n    class=\"sapphire-notification-badge\"\n    [class.sapphire-notification-badge--large]=\"size === 'large'\"\n    [class.sapphire-notification-badge--medium]=\"size === 'medium'\"\n    [class.sapphire-notification-badge--small]=\"size === 'small'\"\n    [class.sapphire-notification-badge--primary]=\"variant === 'primary'\"\n    [class.sapphire-notification-badge--secondary]=\"variant === 'secondary'\"\n    [class.sapphire-notification-badge--pop-in]=\"show && animate\"\n    [class.sapphire-notification-badge--pop-out]=\"!show && animate\"\n    *ngIf=\"show || animate\"\n  >\n    {{\n      size !== 'small'\n        ? count && count.toString().length > 2\n          ? '99+'\n          : count\n        : ''\n    }}\n  </span>\n</span>\n", styles: ["@keyframes pop-in{0%{transform:scale(0) translate(50%,-50%);opacity:0}25%{opacity:.1}to{transform:scale(1) translate(50%,-50%)}}@keyframes pop-out{0%{transform:scale(1) translate(50%,-50%)}75%{opacity:.1}to{transform:scale(0) translate(50%,-50%);opacity:0;display:none}}.sapphire-notification-badge{display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--sapphire-notification-badge-color-content-default);font-family:var(--sapphire-notification-badge-font-name);font-weight:var(--sapphire-notification-badge-font-weight);box-sizing:border-box;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-notification-badge--pop-in{animation:pop-in var(--sapphire-notification-badge-time-transition) cubic-bezier(.55,-.49,.39,1.49)}.sapphire-notification-badge--pop-out{animation:pop-out var(--sapphire-notification-badge-time-transition) forwards}.sapphire-notification-badge--large{height:var(--sapphire-notification-badge-size-height-l);border-radius:var(--sapphire-notification-badge-size-radius-l);padding:var(--sapphire-notification-badge-size-spacing-l-vertical) var(--sapphire-notification-badge-size-spacing-l-horizontal);font-size:var(--sapphire-notification-badge-size-font-primary)}.sapphire-notification-badge--medium{height:var(--sapphire-notification-badge-size-height-m);border-radius:var(--sapphire-notification-badge-size-radius-m);padding:0 var(--sapphire-notification-badge-size-spacing-m-horizontal);font-size:var(--sapphire-notification-badge-size-font-secondary);min-width:var(--sapphire-notification-badge-size-width-m);box-sizing:border-box}.sapphire-notification-badge--small{min-width:var(--sapphire-notification-badge-size-width-s);height:var(--sapphire-notification-badge-size-height-s);border-radius:var(--sapphire-notification-badge-size-radius-s)}.sapphire-notification-badge--primary{background-color:var(--sapphire-notification-badge-color-background-primary)}.sapphire-notification-badge--secondary{background-color:var(--sapphire-notification-badge-color-background-secondary)}.sapphire-notification-badge-container{position:relative;display:inline-block;width:max-content}.sapphire-notification-badge-container .sapphire-notification-badge{position:absolute;top:14%;right:14%;transform:scale(1) translate(50%,-50%);transform-origin:100% 0;pointer-events:none}.sapphire-notification-badge-container--rectangle .sapphire-notification-badge{position:absolute;top:0;right:0;transform:scale(1) translate(50%,-50%);transform-origin:100% 0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NotificationBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-notification-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"sapphire-notification-badge-container\"\n  [class.sapphire-notification-badge-container--rectangle]=\"\n    containerType === 'rectangle'\n  \"\n>\n  <ng-content></ng-content>\n  <span\n    role=\"status\"\n    class=\"sapphire-notification-badge\"\n    [class.sapphire-notification-badge--large]=\"size === 'large'\"\n    [class.sapphire-notification-badge--medium]=\"size === 'medium'\"\n    [class.sapphire-notification-badge--small]=\"size === 'small'\"\n    [class.sapphire-notification-badge--primary]=\"variant === 'primary'\"\n    [class.sapphire-notification-badge--secondary]=\"variant === 'secondary'\"\n    [class.sapphire-notification-badge--pop-in]=\"show && animate\"\n    [class.sapphire-notification-badge--pop-out]=\"!show && animate\"\n    *ngIf=\"show || animate\"\n  >\n    {{\n      size !== 'small'\n        ? count && count.toString().length > 2\n          ? '99+'\n          : count\n        : ''\n    }}\n  </span>\n</span>\n", styles: ["@keyframes pop-in{0%{transform:scale(0) translate(50%,-50%);opacity:0}25%{opacity:.1}to{transform:scale(1) translate(50%,-50%)}}@keyframes pop-out{0%{transform:scale(1) translate(50%,-50%)}75%{opacity:.1}to{transform:scale(0) translate(50%,-50%);opacity:0;display:none}}.sapphire-notification-badge{display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--sapphire-notification-badge-color-content-default);font-family:var(--sapphire-notification-badge-font-name);font-weight:var(--sapphire-notification-badge-font-weight);box-sizing:border-box;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-notification-badge--pop-in{animation:pop-in var(--sapphire-notification-badge-time-transition) cubic-bezier(.55,-.49,.39,1.49)}.sapphire-notification-badge--pop-out{animation:pop-out var(--sapphire-notification-badge-time-transition) forwards}.sapphire-notification-badge--large{height:var(--sapphire-notification-badge-size-height-l);border-radius:var(--sapphire-notification-badge-size-radius-l);padding:var(--sapphire-notification-badge-size-spacing-l-vertical) var(--sapphire-notification-badge-size-spacing-l-horizontal);font-size:var(--sapphire-notification-badge-size-font-primary)}.sapphire-notification-badge--medium{height:var(--sapphire-notification-badge-size-height-m);border-radius:var(--sapphire-notification-badge-size-radius-m);padding:0 var(--sapphire-notification-badge-size-spacing-m-horizontal);font-size:var(--sapphire-notification-badge-size-font-secondary);min-width:var(--sapphire-notification-badge-size-width-m);box-sizing:border-box}.sapphire-notification-badge--small{min-width:var(--sapphire-notification-badge-size-width-s);height:var(--sapphire-notification-badge-size-height-s);border-radius:var(--sapphire-notification-badge-size-radius-s)}.sapphire-notification-badge--primary{background-color:var(--sapphire-notification-badge-color-background-primary)}.sapphire-notification-badge--secondary{background-color:var(--sapphire-notification-badge-color-background-secondary)}.sapphire-notification-badge-container{position:relative;display:inline-block;width:max-content}.sapphire-notification-badge-container .sapphire-notification-badge{position:absolute;top:14%;right:14%;transform:scale(1) translate(50%,-50%);transform-origin:100% 0;pointer-events:none}.sapphire-notification-badge-container--rectangle .sapphire-notification-badge{position:absolute;top:0;right:0;transform:scale(1) translate(50%,-50%);transform-origin:100% 0;pointer-events:none}\n"] }]
@@ -6824,11 +6850,11 @@ class ModalService {
         return this.open(componentOrTemplateRef, options, this.overlay.position().global().right());
     }
 }
-ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, deps: [{ token: i1$6.Dialog }, { token: i1$3.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, deps: [{ token: i1$5.Dialog }, { token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
 ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$6.Dialog }, { type: i1$3.Overlay }]; } });
+        }], ctorParameters: function () { return [{ type: i1$5.Dialog }, { type: i1$2.Overlay }]; } });
 
 /**
  * Monitors host element's **scrolled** and **scrollable** state.
@@ -7000,7 +7026,7 @@ class ModalCloseButtonDirective {
         (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close();
     }
 }
-ModalCloseButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, deps: [{ token: i1$6.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ModalCloseButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, deps: [{ token: i1$5.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 ModalCloseButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ModalCloseButtonDirective, isStandalone: true, host: { listeners: { "click": "close()" }, properties: { "attr.aria-label": "\"Dismiss\"" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, decorators: [{
             type: Directive,
@@ -7011,7 +7037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                     },
                 }]
         }], ctorParameters: function () {
-        return [{ type: i1$6.DialogRef, decorators: [{
+        return [{ type: i1$5.DialogRef, decorators: [{
                         type: Optional
                     }] }];
     }, propDecorators: { close: [{
@@ -7074,7 +7100,7 @@ class DialogHeaderComponent {
     }
 }
 DialogHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogHeaderComponent, deps: [{ token: forwardRef(() => DialogComponent) }], target: i0.ɵɵFactoryTarget.Component });
-DialogHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DialogHeaderComponent, selector: "sp-dialog-header", hostDirectives: [{ directive: DialogHeaderDirective, inputs: ["id", "id"] }], ngImport: i0, template: "<h4 sp-heading><ng-content></ng-content></h4>\n<div\n  *ngIf=\"dialog.type === 'passive'\"\n  class=\"sapphire-dialog-close-button-container\"\n>\n  <button\n    sp-icon-button\n    variant=\"tertiary\"\n    appearance=\"ghost\"\n    size=\"large\"\n    spDialogCloseButton\n  >\n    <sp-icon name=\"close\"></sp-icon>\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "fontVariant"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "directive", type: DialogCloseButtonDirective, selector: "button[spDialogCloseButton]" }] });
+DialogHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DialogHeaderComponent, selector: "sp-dialog-header", hostDirectives: [{ directive: DialogHeaderDirective, inputs: ["id", "id"] }], ngImport: i0, template: "<h4 sp-heading><ng-content></ng-content></h4>\n<div\n  *ngIf=\"dialog.type === 'passive'\"\n  class=\"sapphire-dialog-close-button-container\"\n>\n  <button\n    sp-icon-button\n    variant=\"tertiary\"\n    appearance=\"ghost\"\n    size=\"large\"\n    spDialogCloseButton\n  >\n    <sp-icon name=\"close\"></sp-icon>\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "fontVariant"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "directive", type: DialogCloseButtonDirective, selector: "button[spDialogCloseButton]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-dialog-header', hostDirectives: [{ directive: DialogHeaderDirective, inputs: ['id'] }], template: "<h4 sp-heading><ng-content></ng-content></h4>\n<div\n  *ngIf=\"dialog.type === 'passive'\"\n  class=\"sapphire-dialog-close-button-container\"\n>\n  <button\n    sp-icon-button\n    variant=\"tertiary\"\n    appearance=\"ghost\"\n    size=\"large\"\n    spDialogCloseButton\n  >\n    <sp-icon name=\"close\"></sp-icon>\n  </button>\n</div>\n" }]
@@ -7145,7 +7171,7 @@ class ModalBaseComponent {
         this.dialogRef.immediateClose();
     }
 }
-ModalBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, deps: [{ token: i1$6.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+ModalBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, deps: [{ token: i1$5.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
 ModalBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ModalBaseComponent, selector: "ng-component", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaDescribedBy: ["aria-describedby", "ariaDescribedBy"], role: "role" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.role": "null" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, decorators: [{
             type: Component,
@@ -7160,7 +7186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         '[attr.role]': 'null',
                     },
                 }]
-        }], ctorParameters: function () { return [{ type: i1$6.DialogRef }]; }, propDecorators: { ariaLabel: [{
+        }], ctorParameters: function () { return [{ type: i1$5.DialogRef }]; }, propDecorators: { ariaLabel: [{
                 type: Input,
                 args: ['aria-label']
             }], ariaLabelledBy: [{
@@ -7201,8 +7227,8 @@ class DialogComponent extends ModalBaseComponent {
         this.size = 'small';
     }
 }
-DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, deps: [{ token: i1$6.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
-DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DialogComponent, selector: "sp-dialog", inputs: { size: "size" }, host: { properties: { "class.sapphire-dialog--extra-small": "size === 'extra-small'", "class.sapphire-dialog--small": "size === 'small'", "class.sapphire-dialog--medium": "size === 'medium'", "class.sapphire-dialog--large": "size === 'large'", "class.sapphire-dialog--passive": "type === 'passive'", "class.sapphire-dialog--exiting": "dialogRef.closing" }, classAttribute: "sapphire-dialog" }, queries: [{ propertyName: "footer", first: true, predicate: DialogFooterDirective, descendants: true }, { propertyName: "header", first: true, predicate: DialogHeaderDirective, descendants: true }, { propertyName: "content", first: true, predicate: DialogContentDirective, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div #headerTemplate>\n  <ng-content select=\"sp-dialog-header, [spDialogHeader]\"></ng-content>\n</div>\n\n<!--If header is not provided as <sp-dialog-header>, but as an another div with spDialogHeader,-->\n<!--  we still need the styling of the header to be rendered, so the dialog looks as expected in the spec.-->\n<ng-container *ngIf=\"!headerTemplate.children.length\">\n  <div class=\"sapphire-dialog-header\"></div>\n</ng-container>\n\n<ng-content select=\"sp-dialog-content, [sp-dialog-content]\"></ng-content>\n<ng-content select=\"sp-dialog-footer, [spDialogFooter]\"></ng-content>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.sapphire-dialog{border-radius:var(--sapphire-dialog-size-radius);background-color:var(--sapphire-dialog-color-background);font-family:var(--sapphire-dialog-font-name);color:var(--sapphire-dialog-color-content);box-sizing:border-box;overflow:hidden;max-height:90vh;max-width:90vw;display:flex;flex-direction:column;outline:none;animation-name:fade-in;animation-duration:var(--sapphire-dialog-time-transition);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-dialog--exiting{animation-name:fade-out}.sapphire-dialog--extra-small{width:var(--sapphire-dialog-size-width-xs)}.sapphire-dialog--small{width:var(--sapphire-dialog-size-width-s)}.sapphire-dialog--medium{width:var(--sapphire-dialog-size-width-m)}.sapphire-dialog--large{width:var(--sapphire-dialog-size-width-l)}.sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-default) var(--sapphire-dialog-size-spacing-header-right-default) var(--sapphire-dialog-size-spacing-header-bottom-default) var(--sapphire-dialog-size-spacing-header-left-default);display:flex;justify-content:space-between;align-items:center}.sapphire-dialog--passive .sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-passive) var(--sapphire-dialog-size-spacing-header-right-passive) var(--sapphire-dialog-size-spacing-header-bottom-passive) var(--sapphire-dialog-size-spacing-header-left-passive)}.sapphire-dialog-close-button-container{align-self:flex-start}.sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-default) var(--sapphire-dialog-size-spacing-body-right-default) var(--sapphire-dialog-size-spacing-body-bottom-default) var(--sapphire-dialog-size-spacing-body-left-default);overflow-y:auto;overflow-x:hidden}.sapphire-dialog--passive .sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-passive) var(--sapphire-dialog-size-spacing-body-right-passive) var(--sapphire-dialog-size-spacing-body-bottom-passive) var(--sapphire-dialog-size-spacing-body-left-passive)}.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-default) var(--sapphire-dialog-size-spacing-footer-right-default) var(--sapphire-dialog-size-spacing-footer-bottom-default) var(--sapphire-dialog-size-spacing-footer-left-default)}.sapphire-dialog-header+.sapphire-dialog-body{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-header+.sapphire-dialog-body.sapphire-dialog-body--scrolled{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog-body+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-body.sapphire-dialog-body--scrollable+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog:has(.sapphire-dialog-body--scrollable)>.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-scrollable) var(--sapphire-dialog-size-spacing-footer-right-scrollable) var(--sapphire-dialog-size-spacing-footer-bottom-scrollable) var(--sapphire-dialog-size-spacing-footer-left-scrollable)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, deps: [{ token: i1$5.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DialogComponent, selector: "sp-dialog", inputs: { size: "size" }, host: { properties: { "class.sapphire-dialog--extra-small": "size === 'extra-small'", "class.sapphire-dialog--small": "size === 'small'", "class.sapphire-dialog--medium": "size === 'medium'", "class.sapphire-dialog--large": "size === 'large'", "class.sapphire-dialog--passive": "type === 'passive'", "class.sapphire-dialog--exiting": "dialogRef.closing" }, classAttribute: "sapphire-dialog" }, queries: [{ propertyName: "footer", first: true, predicate: DialogFooterDirective, descendants: true }, { propertyName: "header", first: true, predicate: DialogHeaderDirective, descendants: true }, { propertyName: "content", first: true, predicate: DialogContentDirective, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div #headerTemplate>\n  <ng-content select=\"sp-dialog-header, [spDialogHeader]\"></ng-content>\n</div>\n\n<!--If header is not provided as <sp-dialog-header>, but as an another div with spDialogHeader,-->\n<!--  we still need the styling of the header to be rendered, so the dialog looks as expected in the spec.-->\n<ng-container *ngIf=\"!headerTemplate.children.length\">\n  <div class=\"sapphire-dialog-header\"></div>\n</ng-container>\n\n<ng-content select=\"sp-dialog-content, [sp-dialog-content]\"></ng-content>\n<ng-content select=\"sp-dialog-footer, [spDialogFooter]\"></ng-content>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.sapphire-dialog{border-radius:var(--sapphire-dialog-size-radius);background-color:var(--sapphire-dialog-color-background);font-family:var(--sapphire-dialog-font-name);color:var(--sapphire-dialog-color-content);box-sizing:border-box;overflow:hidden;max-height:90vh;max-width:90vw;display:flex;flex-direction:column;outline:none;animation-name:fade-in;animation-duration:var(--sapphire-dialog-time-transition);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-dialog--exiting{animation-name:fade-out}.sapphire-dialog--extra-small{width:var(--sapphire-dialog-size-width-xs)}.sapphire-dialog--small{width:var(--sapphire-dialog-size-width-s)}.sapphire-dialog--medium{width:var(--sapphire-dialog-size-width-m)}.sapphire-dialog--large{width:var(--sapphire-dialog-size-width-l)}.sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-default) var(--sapphire-dialog-size-spacing-header-right-default) var(--sapphire-dialog-size-spacing-header-bottom-default) var(--sapphire-dialog-size-spacing-header-left-default);display:flex;justify-content:space-between;align-items:center}.sapphire-dialog--passive .sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-passive) var(--sapphire-dialog-size-spacing-header-right-passive) var(--sapphire-dialog-size-spacing-header-bottom-passive) var(--sapphire-dialog-size-spacing-header-left-passive)}.sapphire-dialog-close-button-container{align-self:flex-start}.sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-default) var(--sapphire-dialog-size-spacing-body-right-default) var(--sapphire-dialog-size-spacing-body-bottom-default) var(--sapphire-dialog-size-spacing-body-left-default);overflow-y:auto;overflow-x:hidden}.sapphire-dialog--passive .sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-passive) var(--sapphire-dialog-size-spacing-body-right-passive) var(--sapphire-dialog-size-spacing-body-bottom-passive) var(--sapphire-dialog-size-spacing-body-left-passive)}.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-default) var(--sapphire-dialog-size-spacing-footer-right-default) var(--sapphire-dialog-size-spacing-footer-bottom-default) var(--sapphire-dialog-size-spacing-footer-left-default)}.sapphire-dialog-header+.sapphire-dialog-body{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-header+.sapphire-dialog-body.sapphire-dialog-body--scrolled{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog-body+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-body.sapphire-dialog-body--scrollable+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog:has(.sapphire-dialog-body--scrollable)>.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-scrollable) var(--sapphire-dialog-size-spacing-footer-right-scrollable) var(--sapphire-dialog-size-spacing-footer-bottom-scrollable) var(--sapphire-dialog-size-spacing-footer-left-scrollable)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-dialog', host: {
@@ -7214,7 +7240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         '[class.sapphire-dialog--passive]': "type === 'passive'",
                         '[class.sapphire-dialog--exiting]': 'dialogRef.closing',
                     }, hostDirectives: [UseComponentStylesOnHost], template: "<div #headerTemplate>\n  <ng-content select=\"sp-dialog-header, [spDialogHeader]\"></ng-content>\n</div>\n\n<!--If header is not provided as <sp-dialog-header>, but as an another div with spDialogHeader,-->\n<!--  we still need the styling of the header to be rendered, so the dialog looks as expected in the spec.-->\n<ng-container *ngIf=\"!headerTemplate.children.length\">\n  <div class=\"sapphire-dialog-header\"></div>\n</ng-container>\n\n<ng-content select=\"sp-dialog-content, [sp-dialog-content]\"></ng-content>\n<ng-content select=\"sp-dialog-footer, [spDialogFooter]\"></ng-content>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.sapphire-dialog{border-radius:var(--sapphire-dialog-size-radius);background-color:var(--sapphire-dialog-color-background);font-family:var(--sapphire-dialog-font-name);color:var(--sapphire-dialog-color-content);box-sizing:border-box;overflow:hidden;max-height:90vh;max-width:90vw;display:flex;flex-direction:column;outline:none;animation-name:fade-in;animation-duration:var(--sapphire-dialog-time-transition);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-dialog--exiting{animation-name:fade-out}.sapphire-dialog--extra-small{width:var(--sapphire-dialog-size-width-xs)}.sapphire-dialog--small{width:var(--sapphire-dialog-size-width-s)}.sapphire-dialog--medium{width:var(--sapphire-dialog-size-width-m)}.sapphire-dialog--large{width:var(--sapphire-dialog-size-width-l)}.sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-default) var(--sapphire-dialog-size-spacing-header-right-default) var(--sapphire-dialog-size-spacing-header-bottom-default) var(--sapphire-dialog-size-spacing-header-left-default);display:flex;justify-content:space-between;align-items:center}.sapphire-dialog--passive .sapphire-dialog-header{padding:var(--sapphire-dialog-size-spacing-header-top-passive) var(--sapphire-dialog-size-spacing-header-right-passive) var(--sapphire-dialog-size-spacing-header-bottom-passive) var(--sapphire-dialog-size-spacing-header-left-passive)}.sapphire-dialog-close-button-container{align-self:flex-start}.sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-default) var(--sapphire-dialog-size-spacing-body-right-default) var(--sapphire-dialog-size-spacing-body-bottom-default) var(--sapphire-dialog-size-spacing-body-left-default);overflow-y:auto;overflow-x:hidden}.sapphire-dialog--passive .sapphire-dialog-body{padding:var(--sapphire-dialog-size-spacing-body-top-passive) var(--sapphire-dialog-size-spacing-body-right-passive) var(--sapphire-dialog-size-spacing-body-bottom-passive) var(--sapphire-dialog-size-spacing-body-left-passive)}.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-default) var(--sapphire-dialog-size-spacing-footer-right-default) var(--sapphire-dialog-size-spacing-footer-bottom-default) var(--sapphire-dialog-size-spacing-footer-left-default)}.sapphire-dialog-header+.sapphire-dialog-body{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-header+.sapphire-dialog-body.sapphire-dialog-body--scrolled{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog-body+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid transparent}.sapphire-dialog-body.sapphire-dialog-body--scrollable+.sapphire-dialog-footer{border-top:var(--sapphire-dialog-size-border) solid var(--sapphire-dialog-color-separator)}.sapphire-dialog:has(.sapphire-dialog-body--scrollable)>.sapphire-dialog-footer{padding:var(--sapphire-dialog-size-spacing-footer-top-scrollable) var(--sapphire-dialog-size-spacing-footer-right-scrollable) var(--sapphire-dialog-size-spacing-footer-bottom-scrollable) var(--sapphire-dialog-size-spacing-footer-left-scrollable)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$6.DialogRef }]; }, propDecorators: { size: [{
+        }], ctorParameters: function () { return [{ type: i1$5.DialogRef }]; }, propDecorators: { size: [{
                 type: Input
             }], footer: [{
                 type: ContentChild,
@@ -7331,7 +7357,7 @@ class ConfirmationDialogComponent {
     }
 }
 ConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ConfirmationDialogComponent, selector: "sp-confirmation-dialog", inputs: { heading: "heading", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryActionSelected: "primaryActionSelected", secondaryActionSelected: "secondaryActionSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true }], exportAs: ["spConfirmationDialog"], ngImport: i0, template: "<sp-dialog role=\"alertdialog\">\n  <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n  <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n  <sp-dialog-footer>\n    <button\n      sp-button\n      variant=\"secondary\"\n      (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n    >\n      {{ secondaryActionLabel }}\n    </button>\n    <button\n      sp-button\n      variant=\"primary\"\n      (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n    >\n      {{ primaryActionLabel }}\n    </button>\n  </sp-dialog-footer>\n</sp-dialog>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "component", type: DialogComponent, selector: "sp-dialog", inputs: ["size"] }, { kind: "component", type: DialogHeaderComponent, selector: "sp-dialog-header" }, { kind: "directive", type: DialogContentDirective, selector: "sp-dialog-content, [sp-dialog-content]" }, { kind: "component", type: DialogFooterComponent, selector: "sp-dialog-footer", inputs: ["stretch", "orientation"] }] });
+ConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ConfirmationDialogComponent, selector: "sp-confirmation-dialog", inputs: { heading: "heading", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryActionSelected: "primaryActionSelected", secondaryActionSelected: "secondaryActionSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true }], exportAs: ["spConfirmationDialog"], ngImport: i0, template: "<sp-dialog role=\"alertdialog\">\n  <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n  <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n  <sp-dialog-footer>\n    <button\n      sp-button\n      variant=\"secondary\"\n      (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n    >\n      {{ secondaryActionLabel }}\n    </button>\n    <button\n      sp-button\n      variant=\"primary\"\n      (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n    >\n      {{ primaryActionLabel }}\n    </button>\n  </sp-dialog-footer>\n</sp-dialog>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "component", type: DialogComponent, selector: "sp-dialog", inputs: ["size"] }, { kind: "component", type: DialogHeaderComponent, selector: "sp-dialog-header" }, { kind: "directive", type: DialogContentDirective, selector: "sp-dialog-content, [sp-dialog-content]" }, { kind: "component", type: DialogFooterComponent, selector: "sp-dialog-footer", inputs: ["stretch", "orientation"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-confirmation-dialog', exportAs: 'spConfirmationDialog', template: "<sp-dialog role=\"alertdialog\">\n  <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n  <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n  <sp-dialog-footer>\n    <button\n      sp-button\n      variant=\"secondary\"\n      (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n    >\n      {{ secondaryActionLabel }}\n    </button>\n    <button\n      sp-button\n      variant=\"primary\"\n      (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n    >\n      {{ primaryActionLabel }}\n    </button>\n  </sp-dialog-footer>\n</sp-dialog>\n" }]
@@ -7384,7 +7410,7 @@ class DangerDialogComponent {
     }
 }
 DangerDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DangerDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DangerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DangerDialogComponent, selector: "sp-danger-dialog", inputs: { heading: "heading", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryActionSelected: "primaryActionSelected", secondaryActionSelected: "secondaryActionSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true }], exportAs: ["spDangerDialog"], ngImport: i0, template: "<sp-dialog role=\"alertdialog\">\n  <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n  <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n  <sp-dialog-footer>\n    <button\n      sp-button\n      variant=\"secondary\"\n      (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n    >\n      {{ secondaryActionLabel }}\n    </button>\n    <button\n      sp-button\n      variant=\"dangerSecondary\"\n      (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n    >\n      {{ primaryActionLabel }}\n    </button>\n  </sp-dialog-footer>\n</sp-dialog>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "component", type: DialogComponent, selector: "sp-dialog", inputs: ["size"] }, { kind: "component", type: DialogHeaderComponent, selector: "sp-dialog-header" }, { kind: "directive", type: DialogContentDirective, selector: "sp-dialog-content, [sp-dialog-content]" }, { kind: "component", type: DialogFooterComponent, selector: "sp-dialog-footer", inputs: ["stretch", "orientation"] }] });
+DangerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DangerDialogComponent, selector: "sp-danger-dialog", inputs: { heading: "heading", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryActionSelected: "primaryActionSelected", secondaryActionSelected: "secondaryActionSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true }], exportAs: ["spDangerDialog"], ngImport: i0, template: "<sp-dialog role=\"alertdialog\">\n  <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n  <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n  <sp-dialog-footer>\n    <button\n      sp-button\n      variant=\"secondary\"\n      (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n    >\n      {{ secondaryActionLabel }}\n    </button>\n    <button\n      sp-button\n      variant=\"dangerSecondary\"\n      (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n    >\n      {{ primaryActionLabel }}\n    </button>\n  </sp-dialog-footer>\n</sp-dialog>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "iconAlign", "type"] }, { kind: "component", type: DialogComponent, selector: "sp-dialog", inputs: ["size"] }, { kind: "component", type: DialogHeaderComponent, selector: "sp-dialog-header" }, { kind: "directive", type: DialogContentDirective, selector: "sp-dialog-content, [sp-dialog-content]" }, { kind: "component", type: DialogFooterComponent, selector: "sp-dialog-footer", inputs: ["stretch", "orientation"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DangerDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-danger-dialog', exportAs: 'spDangerDialog', template: "<sp-dialog role=\"alertdialog\">\n  <sp-dialog-header *ngIf=\"heading\">{{ heading }}</sp-dialog-header>\n  <sp-dialog-content><ng-content></ng-content></sp-dialog-content>\n  <sp-dialog-footer>\n    <button\n      sp-button\n      variant=\"secondary\"\n      (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n    >\n      {{ secondaryActionLabel }}\n    </button>\n    <button\n      sp-button\n      variant=\"dangerSecondary\"\n      (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n    >\n      {{ primaryActionLabel }}\n    </button>\n  </sp-dialog-footer>\n</sp-dialog>\n" }]
@@ -7461,7 +7487,7 @@ class PanelHeaderComponent {
     }
 }
 PanelHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PanelHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PanelHeaderComponent, selector: "sp-panel-header", inputs: { subheading: "subheading" }, outputs: { closeEventEmitter: "closeClicked" }, hostDirectives: [{ directive: PanelHeaderDirective, inputs: ["id", "id"] }], ngImport: i0, template: "<div class=\"sapphire-panel-panel-header\" _spUseComponentStyles>\n  <ng-content select=\"[spPanelBackButton]\"></ng-content>\n  <div class=\"sapphire-panel-panel-heading-container\" _spUseComponentStyles>\n    <h4 sp-heading><ng-content></ng-content></h4>\n    <div\n      *ngIf=\"!!subheading\"\n      class=\"sapphire-panel-panel-header-subheading\"\n      _spUseComponentStyles\n    >\n      {{ subheading }}\n    </div>\n  </div>\n  <div\n    class=\"sapphire-panel-panel-header-close-button-container\"\n    _spUseComponentStyles\n  >\n    <button\n      sp-icon-button\n      variant=\"tertiary\"\n      appearance=\"ghost\"\n      size=\"large\"\n      (click)=\"close($event)\"\n      spPanelCloseButton\n    >\n      <sp-icon name=\"close\"></sp-icon>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "fontVariant"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }, { kind: "directive", type: PanelCloseButtonDirective, selector: "button[spPanelCloseButton]" }] });
+PanelHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PanelHeaderComponent, selector: "sp-panel-header", inputs: { subheading: "subheading" }, outputs: { closeEventEmitter: "closeClicked" }, hostDirectives: [{ directive: PanelHeaderDirective, inputs: ["id", "id"] }], ngImport: i0, template: "<div class=\"sapphire-panel-panel-header\" _spUseComponentStyles>\n  <ng-content select=\"[spPanelBackButton]\"></ng-content>\n  <div class=\"sapphire-panel-panel-heading-container\" _spUseComponentStyles>\n    <h4 sp-heading><ng-content></ng-content></h4>\n    <div\n      *ngIf=\"!!subheading\"\n      class=\"sapphire-panel-panel-header-subheading\"\n      _spUseComponentStyles\n    >\n      {{ subheading }}\n    </div>\n  </div>\n  <div\n    class=\"sapphire-panel-panel-header-close-button-container\"\n    _spUseComponentStyles\n  >\n    <button\n      sp-icon-button\n      variant=\"tertiary\"\n      appearance=\"ghost\"\n      size=\"large\"\n      (click)=\"close($event)\"\n      spPanelCloseButton\n    >\n      <sp-icon name=\"close\"></sp-icon>\n    </button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "fontVariant"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }, { kind: "directive", type: PanelCloseButtonDirective, selector: "button[spPanelCloseButton]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-panel-header', hostDirectives: [{ directive: PanelHeaderDirective, inputs: ['id'] }], template: "<div class=\"sapphire-panel-panel-header\" _spUseComponentStyles>\n  <ng-content select=\"[spPanelBackButton]\"></ng-content>\n  <div class=\"sapphire-panel-panel-heading-container\" _spUseComponentStyles>\n    <h4 sp-heading><ng-content></ng-content></h4>\n    <div\n      *ngIf=\"!!subheading\"\n      class=\"sapphire-panel-panel-header-subheading\"\n      _spUseComponentStyles\n    >\n      {{ subheading }}\n    </div>\n  </div>\n  <div\n    class=\"sapphire-panel-panel-header-close-button-container\"\n    _spUseComponentStyles\n  >\n    <button\n      sp-icon-button\n      variant=\"tertiary\"\n      appearance=\"ghost\"\n      size=\"large\"\n      (click)=\"close($event)\"\n      spPanelCloseButton\n    >\n      <sp-icon name=\"close\"></sp-icon>\n    </button>\n  </div>\n</div>\n" }]
@@ -7513,7 +7539,7 @@ class PanelComponent extends ModalBaseComponent {
         this.size = 'large';
     }
 }
-PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, deps: [{ token: i1$6.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, deps: [{ token: i1$5.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
 PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PanelComponent, selector: "sp-panel", inputs: { size: "size" }, host: { properties: { "class.sapphire-panel--small": "size === \"small\"", "class.sapphire-panel--visible": "!dialogRef.closing" }, classAttribute: "sapphire-panel" }, queries: [{ propertyName: "header", first: true, predicate: PanelHeaderDirective, descendants: true }, { propertyName: "content", first: true, predicate: PanelContentComponent, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content select=\"sp-panel-header, [spPanelHeader]\"></ng-content>\n<ng-content select=\"sp-panel-content\"></ng-content>\n<ng-content select=\"sp-panel-footer, [spPanelFooter]\"></ng-content>\n", styles: [".sapphire-panel{background-color:var(--sapphire-panel-color-background);font-family:var(--sapphire-panel-font-name);color:var(--sapphire-panel-color-content);box-sizing:border-box;overflow:hidden;max-width:100%;display:flex;flex-direction:column;height:100%;outline:0;transition:transform var(--sapphire-panel-time-transition) ease-in-out;transform:translate(100%);width:var(--sapphire-panel-size-width-l)}.sapphire-panel-inline{display:flex;flex-direction:column;background-color:var(--sapphire-panel-color-background);font-family:var(--sapphire-panel-font-name);color:var(--sapphire-panel-color-content)}.sapphire-panel--visible{transform:translate(0)}.sapphire-panel--small{width:var(--sapphire-panel-size-width-s)}.sapphire-panel-header{flex-shrink:0}.sapphire-panel-body{overflow-y:auto;overflow-x:hidden;flex-grow:1;padding:0 var(--sapphire-panel-size-spacing-side)}.sapphire-panel-body.sapphire-panel-body--no-padding{padding:0}.sapphire-panel-footer{flex-shrink:0}.sapphire-panel-panel-heading-container{flex:1;padding:var(--sapphire-panel-size-spacing-heading-vertical) 0}.sapphire-panel-panel-header{flex-shrink:0;display:flex;justify-content:space-between;padding:var(--sapphire-panel-size-spacing-header-vertical) var(--sapphire-panel-size-spacing-side);gap:var(--sapphire-panel-size-spacing-header-gap)}.sapphire-panel-panel-header-subheading{color:var(--sapphire-panel-color-subheading);margin-top:var(--sapphire-panel-size-spacing-heading-gap)}.sapphire-panel-panel-footer{padding:var(--sapphire-panel-size-spacing-footer-top) var(--sapphire-panel-size-spacing-side) var(--sapphire-panel-size-spacing-footer-bottom) var(--sapphire-panel-size-spacing-side)}.sapphire-panel-panel-header-close-button-container{margin-left:var(--sapphire-panel-size-spacing-close-icon-left)}.sapphire-panel-header+.sapphire-panel-body{border-top:var(--sapphire-panel-size-border) solid transparent}.sapphire-panel-header+.sapphire-panel-body.sapphire-panel-body--scrolled{border-top:var(--sapphire-panel-size-border) solid var(--sapphire-panel-color-separator)}.sapphire-panel-body+.sapphire-panel-footer{border-top:var(--sapphire-panel-size-border) solid transparent}.sapphire-panel-body.sapphire-panel-body--scrollable+.sapphire-panel-footer{border-top:var(--sapphire-panel-size-border) solid var(--sapphire-panel-color-separator)}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
@@ -7522,7 +7548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         '[class.sapphire-panel--small]': 'size === "small"',
                         '[class.sapphire-panel--visible]': '!dialogRef.closing',
                     }, hostDirectives: [UseComponentStylesOnHost], template: "<ng-content select=\"sp-panel-header, [spPanelHeader]\"></ng-content>\n<ng-content select=\"sp-panel-content\"></ng-content>\n<ng-content select=\"sp-panel-footer, [spPanelFooter]\"></ng-content>\n", styles: [".sapphire-panel{background-color:var(--sapphire-panel-color-background);font-family:var(--sapphire-panel-font-name);color:var(--sapphire-panel-color-content);box-sizing:border-box;overflow:hidden;max-width:100%;display:flex;flex-direction:column;height:100%;outline:0;transition:transform var(--sapphire-panel-time-transition) ease-in-out;transform:translate(100%);width:var(--sapphire-panel-size-width-l)}.sapphire-panel-inline{display:flex;flex-direction:column;background-color:var(--sapphire-panel-color-background);font-family:var(--sapphire-panel-font-name);color:var(--sapphire-panel-color-content)}.sapphire-panel--visible{transform:translate(0)}.sapphire-panel--small{width:var(--sapphire-panel-size-width-s)}.sapphire-panel-header{flex-shrink:0}.sapphire-panel-body{overflow-y:auto;overflow-x:hidden;flex-grow:1;padding:0 var(--sapphire-panel-size-spacing-side)}.sapphire-panel-body.sapphire-panel-body--no-padding{padding:0}.sapphire-panel-footer{flex-shrink:0}.sapphire-panel-panel-heading-container{flex:1;padding:var(--sapphire-panel-size-spacing-heading-vertical) 0}.sapphire-panel-panel-header{flex-shrink:0;display:flex;justify-content:space-between;padding:var(--sapphire-panel-size-spacing-header-vertical) var(--sapphire-panel-size-spacing-side);gap:var(--sapphire-panel-size-spacing-header-gap)}.sapphire-panel-panel-header-subheading{color:var(--sapphire-panel-color-subheading);margin-top:var(--sapphire-panel-size-spacing-heading-gap)}.sapphire-panel-panel-footer{padding:var(--sapphire-panel-size-spacing-footer-top) var(--sapphire-panel-size-spacing-side) var(--sapphire-panel-size-spacing-footer-bottom) var(--sapphire-panel-size-spacing-side)}.sapphire-panel-panel-header-close-button-container{margin-left:var(--sapphire-panel-size-spacing-close-icon-left)}.sapphire-panel-header+.sapphire-panel-body{border-top:var(--sapphire-panel-size-border) solid transparent}.sapphire-panel-header+.sapphire-panel-body.sapphire-panel-body--scrolled{border-top:var(--sapphire-panel-size-border) solid var(--sapphire-panel-color-separator)}.sapphire-panel-body+.sapphire-panel-footer{border-top:var(--sapphire-panel-size-border) solid transparent}.sapphire-panel-body.sapphire-panel-body--scrollable+.sapphire-panel-footer{border-top:var(--sapphire-panel-size-border) solid var(--sapphire-panel-color-separator)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$6.DialogRef }]; }, propDecorators: { size: [{
+        }], ctorParameters: function () { return [{ type: i1$5.DialogRef }]; }, propDecorators: { size: [{
                 type: Input
             }], header: [{
                 type: ContentChild,
@@ -7918,7 +7944,7 @@ class PaginationComponent {
     }
 }
 PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PaginationComponent, selector: "sp-pagination", inputs: { pageSize: "pageSize", itemCount: "itemCount", page: "page", pageSizeOptions: "pageSizeOptions", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"sapphire-pagination\">\n  <sp-basic-select\n    *ngIf=\"pageSizeOptions\"\n    placeholder=\"Select an option\"\n    (valueChange)=\"_onPageSizeChange($event)\"\n    [value]=\"'' + pageSize\"\n    [disabled]=\"!!disabled\"\n    aria-label=\"Number of items per page\"\n    variant=\"tertiary-ghost\"\n  >\n    <sp-option\n      *ngFor=\"let pageSizeOption of pageSizeOptions\"\n      [value]=\"'' + pageSizeOption\"\n      >{{ pageSizeOption + ' items per page' }}</sp-option\n    >\n  </sp-basic-select>\n  <span class=\"sapphire-pagination__controls\">\n    <span class=\"sapphire-pagination__text--emphasized\">\n      {{ startItemIndex }} -\n      {{ endItemIndex }}\n      <span class=\"sapphire-pagination__text\"> of </span>\n      {{ itemCount }}\n    </span>\n    <button\n      sp-icon-button\n      variant=\"tertiary\"\n      appearance=\"ghost\"\n      size=\"small\"\n      (click)=\"_onPageChange('previous')\"\n      [disabled]=\"_isPreviousPageButtonDisabled() || !!disabled\"\n      aria-label=\"Previous\"\n    >\n      <sp-icon name=\"chevronLeft\"></sp-icon></button\n    ><button\n      sp-icon-button\n      variant=\"tertiary\"\n      appearance=\"ghost\"\n      size=\"small\"\n      (click)=\"_onPageChange('next')\"\n      [disabled]=\"_isNextPageButtonDisabled() || !!disabled\"\n      aria-label=\"Next\"\n    >\n      <sp-icon name=\"chevronRight\"></sp-icon>\n    </button>\n  </span>\n</div>\n", styles: [".sapphire-pagination{display:flex;justify-content:flex-end;align-items:center;padding:var(--sapphire-pagination-size-spacing-container-vertical) var(--sapphire-pagination-size-spacing-container-horizontal);background-color:var(--sapphire-pagination-color-background);font-family:var(--sapphire-pagination-font-name);font-size:var(--sapphire-pagination-size-font-page);height:var(--sapphire-pagination-size-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-pagination__controls{display:flex;align-items:center;justify-content:flex-end;flex-grow:1;color:var(--sapphire-pagination-color-text);gap:var(--sapphire-pagination-size-spacing-controls-horizontal)}.sapphire-pagination__text{font-weight:var(--sapphire-pagination-font-weight-alphabetic-text);padding-left:var(--sapphire-pagination-size-spacing-text-horizontal);padding-right:var(--sapphire-pagination-size-spacing-text-horizontal)}.sapphire-pagination__text--emphasized{font-weight:var(--sapphire-pagination-font-weight-numeric-text)}.sapphire-pagination__ellipsis{display:flex;justify-content:center;align-items:center;height:var(--sapphire-pagination-size-ellipsis);width:var(--sapphire-pagination-size-ellipsis);font-size:var(--sapphire-pagination-size-font-ellipsis);font-weight:var(--sapphire-pagination-font-weight-numeric-text)}sp-basic-select{margin-left:calc(-1 * var(--sapphire-button-size-spacing-horizontal-m))}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OptionComponent, selector: "sp-option", inputs: ["value", "disabled"] }, { kind: "component", type: BasicSelectComponent, selector: "sp-basic-select", inputs: ["size", "variant"], exportAs: ["spBasicSelect"] }, { kind: "directive", type: BasicSingleSelectDirective, selector: "sp-basic-select:not([multiple])" }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }] });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PaginationComponent, selector: "sp-pagination", inputs: { pageSize: "pageSize", itemCount: "itemCount", page: "page", pageSizeOptions: "pageSizeOptions", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"sapphire-pagination\">\n  <sp-basic-select\n    *ngIf=\"pageSizeOptions\"\n    placeholder=\"Select an option\"\n    (valueChange)=\"_onPageSizeChange($event)\"\n    [value]=\"'' + pageSize\"\n    [disabled]=\"!!disabled\"\n    aria-label=\"Number of items per page\"\n    variant=\"tertiary-ghost\"\n  >\n    <sp-option\n      *ngFor=\"let pageSizeOption of pageSizeOptions\"\n      [value]=\"'' + pageSizeOption\"\n      >{{ pageSizeOption + ' items per page' }}</sp-option\n    >\n  </sp-basic-select>\n  <span class=\"sapphire-pagination__controls\">\n    <span class=\"sapphire-pagination__text--emphasized\">\n      {{ startItemIndex }} -\n      {{ endItemIndex }}\n      <span class=\"sapphire-pagination__text\"> of </span>\n      {{ itemCount }}\n    </span>\n    <button\n      sp-icon-button\n      variant=\"tertiary\"\n      appearance=\"ghost\"\n      size=\"small\"\n      (click)=\"_onPageChange('previous')\"\n      [disabled]=\"_isPreviousPageButtonDisabled() || !!disabled\"\n      aria-label=\"Previous\"\n    >\n      <sp-icon name=\"chevronLeft\"></sp-icon></button\n    ><button\n      sp-icon-button\n      variant=\"tertiary\"\n      appearance=\"ghost\"\n      size=\"small\"\n      (click)=\"_onPageChange('next')\"\n      [disabled]=\"_isNextPageButtonDisabled() || !!disabled\"\n      aria-label=\"Next\"\n    >\n      <sp-icon name=\"chevronRight\"></sp-icon>\n    </button>\n  </span>\n</div>\n", styles: [".sapphire-pagination{display:flex;justify-content:flex-end;align-items:center;padding:var(--sapphire-pagination-size-spacing-container-vertical) var(--sapphire-pagination-size-spacing-container-horizontal);background-color:var(--sapphire-pagination-color-background);font-family:var(--sapphire-pagination-font-name);font-size:var(--sapphire-pagination-size-font-page);height:var(--sapphire-pagination-size-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-pagination__controls{display:flex;align-items:center;justify-content:flex-end;flex-grow:1;color:var(--sapphire-pagination-color-text);gap:var(--sapphire-pagination-size-spacing-controls-horizontal)}.sapphire-pagination__text{font-weight:var(--sapphire-pagination-font-weight-alphabetic-text);padding-left:var(--sapphire-pagination-size-spacing-text-horizontal);padding-right:var(--sapphire-pagination-size-spacing-text-horizontal)}.sapphire-pagination__text--emphasized{font-weight:var(--sapphire-pagination-font-weight-numeric-text)}.sapphire-pagination__ellipsis{display:flex;justify-content:center;align-items:center;height:var(--sapphire-pagination-size-ellipsis);width:var(--sapphire-pagination-size-ellipsis);font-size:var(--sapphire-pagination-size-font-ellipsis);font-weight:var(--sapphire-pagination-font-weight-numeric-text)}sp-basic-select{margin-left:calc(-1 * var(--sapphire-button-size-spacing-horizontal-m))}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OptionComponent, selector: "sp-option", inputs: ["value", "disabled"] }, { kind: "component", type: BasicSelectComponent, selector: "sp-basic-select", inputs: ["size", "variant"], exportAs: ["spBasicSelect"] }, { kind: "directive", type: BasicSingleSelectDirective, selector: "sp-basic-select:not([multiple])" }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "appearance", "surface", "size", "disabled", "type"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-pagination', template: "<div class=\"sapphire-pagination\">\n  <sp-basic-select\n    *ngIf=\"pageSizeOptions\"\n    placeholder=\"Select an option\"\n    (valueChange)=\"_onPageSizeChange($event)\"\n    [value]=\"'' + pageSize\"\n    [disabled]=\"!!disabled\"\n    aria-label=\"Number of items per page\"\n    variant=\"tertiary-ghost\"\n  >\n    <sp-option\n      *ngFor=\"let pageSizeOption of pageSizeOptions\"\n      [value]=\"'' + pageSizeOption\"\n      >{{ pageSizeOption + ' items per page' }}</sp-option\n    >\n  </sp-basic-select>\n  <span class=\"sapphire-pagination__controls\">\n    <span class=\"sapphire-pagination__text--emphasized\">\n      {{ startItemIndex }} -\n      {{ endItemIndex }}\n      <span class=\"sapphire-pagination__text\"> of </span>\n      {{ itemCount }}\n    </span>\n    <button\n      sp-icon-button\n      variant=\"tertiary\"\n      appearance=\"ghost\"\n      size=\"small\"\n      (click)=\"_onPageChange('previous')\"\n      [disabled]=\"_isPreviousPageButtonDisabled() || !!disabled\"\n      aria-label=\"Previous\"\n    >\n      <sp-icon name=\"chevronLeft\"></sp-icon></button\n    ><button\n      sp-icon-button\n      variant=\"tertiary\"\n      appearance=\"ghost\"\n      size=\"small\"\n      (click)=\"_onPageChange('next')\"\n      [disabled]=\"_isNextPageButtonDisabled() || !!disabled\"\n      aria-label=\"Next\"\n    >\n      <sp-icon name=\"chevronRight\"></sp-icon>\n    </button>\n  </span>\n</div>\n", styles: [".sapphire-pagination{display:flex;justify-content:flex-end;align-items:center;padding:var(--sapphire-pagination-size-spacing-container-vertical) var(--sapphire-pagination-size-spacing-container-horizontal);background-color:var(--sapphire-pagination-color-background);font-family:var(--sapphire-pagination-font-name);font-size:var(--sapphire-pagination-size-font-page);height:var(--sapphire-pagination-size-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-pagination__controls{display:flex;align-items:center;justify-content:flex-end;flex-grow:1;color:var(--sapphire-pagination-color-text);gap:var(--sapphire-pagination-size-spacing-controls-horizontal)}.sapphire-pagination__text{font-weight:var(--sapphire-pagination-font-weight-alphabetic-text);padding-left:var(--sapphire-pagination-size-spacing-text-horizontal);padding-right:var(--sapphire-pagination-size-spacing-text-horizontal)}.sapphire-pagination__text--emphasized{font-weight:var(--sapphire-pagination-font-weight-numeric-text)}.sapphire-pagination__ellipsis{display:flex;justify-content:center;align-items:center;height:var(--sapphire-pagination-size-ellipsis);width:var(--sapphire-pagination-size-ellipsis);font-size:var(--sapphire-pagination-size-font-ellipsis);font-weight:var(--sapphire-pagination-font-weight-numeric-text)}sp-basic-select{margin-left:calc(-1 * var(--sapphire-button-size-spacing-horizontal-m))}\n"] }]