@educarehq/solaris-ui 2.0.2 → 2.0.3

package/fesm2022/educarehq-solaris-ui.mjs

@@ -32497,7 +32497,7 @@ var SolarisSelectComponent = class SolarisSelectComponent extends SolarisFormCon
 		],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<solaris-form-field\n  [class.solaris-select--panel-open]=\"panelOpen()\"\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"!!prefix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  solaris-popover-trigger\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"0\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverTopConnected]=\"true\"\n  [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n\n  <div\n    #triggerEl\n    class=\"solaris-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    [style.min-width]=\"resolvedTriggerMinWidth()\"\n    solaris-form-field-trigger\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    @if (searchable() && panelOpen()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"solaris-select__search-input\"\n        [attr.placeholder]=\"searchPlaceholderText()\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n        (click)=\"$event.stopPropagation()\"\n        role=\"searchbox\"\n        autocomplete=\"off\"\n      />\n    } @else {\n      <span class=\"solaris-select__value\">\n        @if (displayText()) {\n          <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\n        } @else {\n          <span class=\"solaris-select__placeholder\">{{\n            placeholderText()\n          }}</span>\n        }\n      </span>\n    }\n\n    <span class=\"solaris-select__actions\">\n      @if (canClear() && !loading()) {\n        <button\n          type=\"button\"\n          class=\"solaris-select__clear\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue(); $event.stopPropagation()\"\n          tabindex=\"-1\"\n        >\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\n        </button>\n      }\n\n      @if (!loading()) {\n        <solaris-icon\n          class=\"solaris-select__dropdown-icon\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n          size=\"sm\"\n        />\n      }\n    </span>\n  </div>\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n  <div\n    class=\"solaris-select__panel\"\n    role=\"listbox\"\n    [attr.id]=\"panelId\"\n    tabindex=\"-1\"\n    (click)=\"onPanelClick($event)\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    @if (loading()) {\n      <div class=\"solaris-select__loading\">\n        <span class=\"solaris-select__loading-text\">{{\n          loadingTextValue()\n        }}</span>\n      </div>\n    } @else if (showNoResults()) {\n      <div class=\"solaris-select__no-results\">\n        <span class=\"solaris-select__no-results-text\">{{\n          noResultsTextValue()\n        }}</span>\n      </div>\n    } @else if (showEmpty()) {\n      <div class=\"solaris-select__empty\">\n        <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"solaris-select__options\"\n        [style.max-height]=\"panelMaxHeight()\"\n      >\n        <ng-content select=\"solaris-option, solaris-option-group\" />\n      </div>\n    }\n  </div>\n</ng-template>\n",
+		template: "<solaris-form-field\n  [class.solaris-select--panel-open]=\"panelOpen()\"\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"!!prefix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  solaris-popover-trigger\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"0\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverTopConnected]=\"true\"\n  [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n\n  <div\n    #triggerEl\n    class=\"solaris-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    [style.min-width]=\"resolvedTriggerMinWidth()\"\n    solaris-form-field-trigger\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    @if (searchable() && panelOpen()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"solaris-select__search-input\"\n        [attr.placeholder]=\"searchPlaceholderText()\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n        (click)=\"$event.stopPropagation()\"\n        role=\"searchbox\"\n        autocomplete=\"off\"\n      />\n    } @else {\n      <span class=\"solaris-select__value\">\n        @if (displayText()) {\n          <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\n        } @else {\n          <span class=\"solaris-select__placeholder\">{{\n            placeholderText()\n          }}</span>\n        }\n      </span>\n    }\n\n    <span class=\"solaris-select__actions\">\n      @if (canClear() && !loading()) {\n        <button\n          type=\"button\"\n          class=\"solaris-select__clear\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue(); $event.stopPropagation()\"\n          tabindex=\"-1\"\n        >\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\n        </button>\n      }\n\n      @if (!loading()) {\n        <solaris-icon\n          class=\"solaris-select__dropdown-icon\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n          size=\"sm\"\n        />\n      }\n    </span>\n  </div>\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n  <div\n    class=\"solaris-select__panel\"\n    role=\"listbox\"\n    [attr.id]=\"panelId\"\n    tabindex=\"-1\"\n    (click)=\"onPanelClick($event)\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    @if (loading()) {\n      <div class=\"solaris-select__loading\">\n        <span class=\"solaris-select__loading-text\">{{\n          loadingTextValue()\n        }}</span>\n      </div>\n    } @else if (showNoResults()) {\n      <div class=\"solaris-select__no-results\">\n        <span class=\"solaris-select__no-results-text\">{{\n          noResultsTextValue()\n        }}</span>\n      </div>\n    } @else if (showEmpty()) {\n      <div class=\"solaris-select__empty\">\n        <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"solaris-select__options\"\n        [style.max-height]=\"panelMaxHeight()\"\n      >\n        <ng-content select=\"solaris-option, solaris-option-group\" />\n      </div>\n    }\n  </div>\n</ng-template>\n",
 		styles: [":host{--solaris-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-select-font-size: var(--solaris-font-size-sm);--solaris-select-value-color: var(--solaris-neutral-text-body);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-trigger-gap: var(--solaris-spacing-4);--solaris-select-dropdown-icon-size: var(--solaris-font-size-lg);--solaris-select-value-min-width: 0;--solaris-select-value-flex: 1;--solaris-select-actions-margin-inline-start: auto;--solaris-select-placeholder-color: var(--solaris-neutral-text-secondary);--solaris-select-placeholder-opacity: var(--solaris-opacity-70);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-select__trigger{flex:1;padding:0;min-width:0;border:none;display:flex;outline:none;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-select-trigger-gap)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:var(--solaris-select-value-flex);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{display:inline-block;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height);font-variant-numeric:tabular-nums;min-width:var(--solaris-select-value-min-width)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:var(--solaris-select-actions-margin-inline-start)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-select__clear:hover{color:var(--solaris-neutral-text-body)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size)}.solaris-select__dropdown-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-select__search-input{flex:1;margin:0;padding:0;width:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-3)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}.solaris-select__panel{animation:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}[data-reduced-motion=true] .solaris-select__panel{animation:none}\n"],
 		dependencies: [
 			{
@@ -32545,6 +32545,11 @@ var SolarisSelectComponent = class SolarisSelectComponent extends SolarisFormCon
 				type: SolarisFormPrefixDirective,
 				selector: "[solaris-form-prefix]"
 			},
+			{
+				kind: "directive",
+				type: SolarisFormSuffixDirective,
+				selector: "[solaris-form-suffix]"
+			},
 			{
 				kind: "component",
 				type: SolarisIconComponent,
@@ -32618,6 +32623,7 @@ i0.ɵɵngDeclareClassMetadata({
 				SolarisFormFieldComponent,
 				SolarisFormFieldTriggerDirective,
 				SolarisFormPrefixDirective,
+				SolarisFormSuffixDirective,
 				SolarisIconComponent,
 				SolarisPopoverDirective,
 				SolarisPopoverTriggerDirective
@@ -32647,7 +32653,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.aria-label]": "ariaLabelText() ?? null",
 				"[attr.data-has-value]": "hasValue() ? \"\" : null"
 			},
-			template: "<solaris-form-field\n  [class.solaris-select--panel-open]=\"panelOpen()\"\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"!!prefix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  solaris-popover-trigger\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"0\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverTopConnected]=\"true\"\n  [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n\n  <div\n    #triggerEl\n    class=\"solaris-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    [style.min-width]=\"resolvedTriggerMinWidth()\"\n    solaris-form-field-trigger\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    @if (searchable() && panelOpen()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"solaris-select__search-input\"\n        [attr.placeholder]=\"searchPlaceholderText()\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n        (click)=\"$event.stopPropagation()\"\n        role=\"searchbox\"\n        autocomplete=\"off\"\n      />\n    } @else {\n      <span class=\"solaris-select__value\">\n        @if (displayText()) {\n          <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\n        } @else {\n          <span class=\"solaris-select__placeholder\">{{\n            placeholderText()\n          }}</span>\n        }\n      </span>\n    }\n\n    <span class=\"solaris-select__actions\">\n      @if (canClear() && !loading()) {\n        <button\n          type=\"button\"\n          class=\"solaris-select__clear\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue(); $event.stopPropagation()\"\n          tabindex=\"-1\"\n        >\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\n        </button>\n      }\n\n      @if (!loading()) {\n        <solaris-icon\n          class=\"solaris-select__dropdown-icon\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n          size=\"sm\"\n        />\n      }\n    </span>\n  </div>\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n  <div\n    class=\"solaris-select__panel\"\n    role=\"listbox\"\n    [attr.id]=\"panelId\"\n    tabindex=\"-1\"\n    (click)=\"onPanelClick($event)\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    @if (loading()) {\n      <div class=\"solaris-select__loading\">\n        <span class=\"solaris-select__loading-text\">{{\n          loadingTextValue()\n        }}</span>\n      </div>\n    } @else if (showNoResults()) {\n      <div class=\"solaris-select__no-results\">\n        <span class=\"solaris-select__no-results-text\">{{\n          noResultsTextValue()\n        }}</span>\n      </div>\n    } @else if (showEmpty()) {\n      <div class=\"solaris-select__empty\">\n        <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"solaris-select__options\"\n        [style.max-height]=\"panelMaxHeight()\"\n      >\n        <ng-content select=\"solaris-option, solaris-option-group\" />\n      </div>\n    }\n  </div>\n</ng-template>\n",
+			template: "<solaris-form-field\n  [class.solaris-select--panel-open]=\"panelOpen()\"\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"!!prefix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  solaris-popover-trigger\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"0\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverTopConnected]=\"true\"\n  [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n\n  <div\n    #triggerEl\n    class=\"solaris-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    [style.min-width]=\"resolvedTriggerMinWidth()\"\n    solaris-form-field-trigger\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    @if (searchable() && panelOpen()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"solaris-select__search-input\"\n        [attr.placeholder]=\"searchPlaceholderText()\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown)=\"onSearchKeydown($event)\"\n        (click)=\"$event.stopPropagation()\"\n        role=\"searchbox\"\n        autocomplete=\"off\"\n      />\n    } @else {\n      <span class=\"solaris-select__value\">\n        @if (displayText()) {\n          <span class=\"solaris-select__value-text\">{{ displayText() }}</span>\n        } @else {\n          <span class=\"solaris-select__placeholder\">{{\n            placeholderText()\n          }}</span>\n        }\n      </span>\n    }\n\n    <span class=\"solaris-select__actions\">\n      @if (canClear() && !loading()) {\n        <button\n          type=\"button\"\n          class=\"solaris-select__clear\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue(); $event.stopPropagation()\"\n          tabindex=\"-1\"\n        >\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\n        </button>\n      }\n\n      @if (!loading()) {\n        <solaris-icon\n          class=\"solaris-select__dropdown-icon\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n          size=\"sm\"\n        />\n      }\n    </span>\n  </div>\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n  <div\n    class=\"solaris-select__panel\"\n    role=\"listbox\"\n    [attr.id]=\"panelId\"\n    tabindex=\"-1\"\n    (click)=\"onPanelClick($event)\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    @if (loading()) {\n      <div class=\"solaris-select__loading\">\n        <span class=\"solaris-select__loading-text\">{{\n          loadingTextValue()\n        }}</span>\n      </div>\n    } @else if (showNoResults()) {\n      <div class=\"solaris-select__no-results\">\n        <span class=\"solaris-select__no-results-text\">{{\n          noResultsTextValue()\n        }}</span>\n      </div>\n    } @else if (showEmpty()) {\n      <div class=\"solaris-select__empty\">\n        <span class=\"solaris-select__empty-text\">{{ emptyTextValue() }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"solaris-select__options\"\n        [style.max-height]=\"panelMaxHeight()\"\n      >\n        <ng-content select=\"solaris-option, solaris-option-group\" />\n      </div>\n    }\n  </div>\n</ng-template>\n",
 			styles: [":host{--solaris-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-select-font-size: var(--solaris-font-size-sm);--solaris-select-value-color: var(--solaris-neutral-text-body);--solaris-select-line-height: var(--solaris-line-height-md);--solaris-select-trigger-gap: var(--solaris-spacing-4);--solaris-select-dropdown-icon-size: var(--solaris-font-size-lg);--solaris-select-value-min-width: 0;--solaris-select-value-flex: 1;--solaris-select-actions-margin-inline-start: auto;--solaris-select-placeholder-color: var(--solaris-neutral-text-secondary);--solaris-select-placeholder-opacity: var(--solaris-opacity-70);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-select__trigger{flex:1;padding:0;min-width:0;border:none;display:flex;outline:none;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-select-trigger-gap)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-select--panel-open .solaris-form-field__message-row{display:none}.solaris-select__value{flex:var(--solaris-select-value-flex);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-select__value-text{display:inline-block;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height);font-variant-numeric:tabular-nums;min-width:var(--solaris-select-value-min-width)}.solaris-select__placeholder{font-size:var(--solaris-select-font-size);color:var(--solaris-select-placeholder-color);line-height:var(--solaris-select-line-height);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:var(--solaris-select-actions-margin-inline-start)}.solaris-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-select__clear:hover{color:var(--solaris-neutral-text-body)}.solaris-select__dropdown-icon solaris-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size)}.solaris-select__dropdown-icon{width:var(--solaris-select-dropdown-icon-size);height:var(--solaris-select-dropdown-icon-size);color:var(--solaris-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-select__dropdown-icon{transform:rotate(180deg)}.solaris-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-select__search-input{flex:1;margin:0;padding:0;width:0;min-width:0;border:none;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-select-value-color);font-size:var(--solaris-select-font-size);line-height:var(--solaris-select-line-height)}.solaris-select__search-input::placeholder{color:var(--solaris-select-placeholder-color);opacity:var(--solaris-select-placeholder-opacity)}.solaris-select__loading,.solaris-select__no-results,.solaris-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-3);padding:var(--solaris-spacing-3)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-select__dropdown-icon,.solaris-select__clear{transition:none}.solaris-select__panel{animation:none}}[data-reduced-motion=true] .solaris-select__dropdown-icon,[data-reduced-motion=true] .solaris-select__clear{transition:none}[data-reduced-motion=true] .solaris-select__panel{animation:none}\n"]
 		}]
 	}],
@@ -34546,7 +34552,7 @@ var SolarisDateRangePickerComponent = class SolarisDateRangePickerComponent exte
 		}],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n} @else {\n  <solaris-form-field\n    [control]=\"this\"\n    [label]=\"labelText()\"\n    [hint]=\"hintText()\"\n    [error]=\"errorText()\"\n    [appearance]=\"appearance()\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    [radius]=\"radius()\"\n    [invalid]=\"isEffectivelyInvalid()\"\n    [required]=\"requiredInput()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    [loading]=\"loading()\"\n    [hasSuffixAction]=\"!!projectedSuffixAction()\"\n    solaris-popover-trigger\n    [solarisPopoverTriggerFor]=\"rangePopover\"\n    [solarisPopoverDisabled]=\"\n      isEffectivelyDisabled() || isEffectivelyReadonly()\n    \"\n    [solarisPopoverPlacement]=\"'bottom'\"\n    [solarisPopoverAlign]=\"'start'\"\n    [solarisPopoverPadding]=\"'none'\"\n    [solarisPopoverFitContent]=\"true\"\n    [solarisPopoverMaxWidth]=\"'calc(100vw - var(--solaris-spacing-4))'\"\n    [solarisPopoverRadius]=\"radius()\"\n    [solarisPopoverAriaHasPopup]=\"'dialog'\"\n    (solarisPopoverOpened)=\"onPanelOpened()\"\n    (solarisPopoverClosed)=\"onPanelClosed()\"\n  >\n    <ng-content\n      select=\"[solaris-form-prefix]\"\n      ngProjectAs=\"[solaris-form-prefix]\"\n    />\n    <ng-content\n      select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n      ngProjectAs=\"[solaris-form-suffix-action]\"\n    />\n    <ng-content\n      select=\"[solaris-form-suffix]\"\n      ngProjectAs=\"[solaris-form-suffix]\"\n    />\n    <ng-content\n      select=\"[solaris-form-label-action]\"\n      ngProjectAs=\"[solaris-form-label-action]\"\n    />\n    @if (prefix(); as prefixName) {\n      <span solaris-form-prefix>\n        <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n      </span>\n    }\n    <button\n      #triggerButton\n      type=\"button\"\n      class=\"solaris-date-range-picker__trigger\"\n      [id]=\"id\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n      [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onInputKeydown($event)\"\n    >\n      {{ rangeDisplay() || placeholderText() }}\n    </button>\n\n    <button\n      type=\"button\"\n      appearance=\"ghost\"\n      solaris-icon-button\n      solaris-form-suffix\n      solaris-form-suffix-action\n      class=\"solaris-date-range-picker__calendar-trigger\"\n      [size]=\"size()\"\n      [density]=\"effectiveDensity()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      [attr.aria-label]=\"calendarLabel()\"\n    >\n      <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n    </button>\n    @if (canClear() && !loading()) {\n      <button\n        type=\"button\"\n        solaris-form-suffix\n        class=\"solaris-date-range-picker__clear\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n        [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n        (click)=\"clearValue(); $event.stopPropagation()\"\n        tabindex=\"-1\"\n      >\n        <solaris-icon name=\"x\" [decorative]=\"true\" />\n      </button>\n    }\n    @if (suffix(); as suffixName) {\n      <span solaris-form-suffix>\n        <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n      </span>\n    }\n  </solaris-form-field>\n}\n\n<ng-template #rangePopover=\"solarisPopover\" #panelTpl solaris-popover>\n  <div\n    [attr.role]=\"inline() ? 'group' : 'dialog'\"\n    [attr.aria-label]=\"calendarLabel()\"\n    class=\"solaris-date-range-picker__panel\"\n  >\n    <nav\n      class=\"solaris-date-range-picker__presets\"\n      [attr.aria-label]=\"presetsLabel()\"\n    >\n      @if (presets().length > 0) {\n        @for (preset of presets(); track preset.id) {\n          <button\n            type=\"button\"\n            class=\"solaris-date-range-picker__preset\"\n            [attr.data-active]=\"activePresetId() === preset.id ? '' : null\"\n            (click)=\"selectPreset(preset)\"\n          >\n            {{ presetLabel(preset) }}\n          </button>\n        }\n      }\n      <button\n        type=\"button\"\n        class=\"solaris-date-range-picker__preset\"\n        [attr.data-active]=\"activePresetId() === 'custom' ? '' : null\"\n        (click)=\"selectCustom()\"\n      >\n        {{ customLabel() }}\n      </button>\n    </nav>\n    <div class=\"solaris-date-range-picker__content\">\n      <div class=\"solaris-date-range-picker__calendars\">\n        <solaris-date-calendar\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [range]=\"pending()\"\n          [month]=\"displayedMonth()\"\n          [locale]=\"resolvedLocale()\"\n          [disabledDates]=\"disabledDates()\"\n          [weekStartsOn]=\"weekStartsOn()\"\n          [disablePast]=\"disablePast()\"\n          [disableFuture]=\"disableFuture()\"\n          [nextMonthLabel]=\"nextMonthLabel()\"\n          (selectedChange)=\"selectDate($event)\"\n          (monthChange)=\"setDisplayedMonth($event)\"\n          [previousMonthLabel]=\"previousMonthLabel()\"\n        />\n        <span\n          class=\"solaris-date-range-picker__calendar-divider\"\n          aria-hidden=\"true\"\n        ></span>\n        <solaris-date-calendar\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [range]=\"pending()\"\n          [month]=\"nextMonth()\"\n          [locale]=\"resolvedLocale()\"\n          [disabledDates]=\"disabledDates()\"\n          [weekStartsOn]=\"weekStartsOn()\"\n          [disablePast]=\"disablePast()\"\n          [disableFuture]=\"disableFuture()\"\n          [nextMonthLabel]=\"nextMonthLabel()\"\n          (selectedChange)=\"selectDate($event)\"\n          (monthChange)=\"setDisplayedMonth($event)\"\n          [previousMonthLabel]=\"previousMonthLabel()\"\n        />\n      </div>\n      <footer class=\"solaris-date-range-picker__footer\">\n        <div class=\"solaris-date-range-picker__inputs\">\n          <input\n            type=\"text\"\n            solaris-input\n            (blur)=\"onBlur()\"\n            density=\"compact\"\n            autocomplete=\"off\"\n            [fullWidth]=\"false\"\n            inputmode=\"numeric\"\n            (focus)=\"onFocus()\"\n            [value]=\"startDisplay()\"\n            (click)=\"onInputClick($event)\"\n            [attr.aria-label]=\"startLabel()\"\n            [disabled]=\"isStartDisabled()\"\n            [readonly]=\"isStartReadonly()\"\n            [attr.aria-disabled]=\"isStartDisabled() ? 'true' : null\"\n            (input)=\"onInput('start', $event)\"\n            (keydown)=\"onPanelInputKeydown($event)\"\n          />\n          <span class=\"solaris-date-range-picker__separator\" aria-hidden=\"true\"\n            >-</span\n          >\n          <input\n            type=\"text\"\n            solaris-input\n            (blur)=\"onBlur()\"\n            density=\"compact\"\n            [fullWidth]=\"false\"\n            autocomplete=\"off\"\n            (focus)=\"onFocus()\"\n            inputmode=\"numeric\"\n            [value]=\"endDisplay()\"\n            [attr.aria-label]=\"endLabel()\"\n            (click)=\"onInputClick($event)\"\n            [disabled]=\"isEndDisabled()\"\n            [readonly]=\"isEndReadonly()\"\n            [attr.aria-disabled]=\"isEndDisabled() ? 'true' : null\"\n            (input)=\"onInput('end', $event)\"\n            (keydown)=\"onPanelInputKeydown($event)\"\n          />\n        </div>\n        <div class=\"solaris-date-range-picker__actions\">\n          <button\n            type=\"button\"\n            solaris-button\n            density=\"compact\"\n            appearance=\"ghost\"\n            data-density=\"compact\"\n            (click)=\"clearPending()\"\n          >\n            {{ clearButtonLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            solaris-button\n            density=\"compact\"\n            (click)=\"cancel()\"\n            appearance=\"outline\"\n            data-density=\"compact\"\n          >\n            {{ cancelLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            solaris-button\n            color=\"primary\"\n            (click)=\"apply()\"\n            density=\"compact\"\n            data-density=\"compact\"\n          >\n            {{ applyLabel() }}\n          </button>\n        </div>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n",
+		template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n} @else {\n  <solaris-form-field\n    [control]=\"this\"\n    [label]=\"labelText()\"\n    [hint]=\"hintText()\"\n    [error]=\"errorText()\"\n    [appearance]=\"appearance()\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    [radius]=\"radius()\"\n    [invalid]=\"isEffectivelyInvalid()\"\n    [required]=\"requiredInput()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    [loading]=\"loading()\"\n    [hasSuffixAction]=\"!!projectedSuffixAction()\"\n    solaris-popover-trigger\n    [solarisPopoverTriggerFor]=\"rangePopover\"\n    [solarisPopoverDisabled]=\"\n      isEffectivelyDisabled() || isEffectivelyReadonly()\n    \"\n    [solarisPopoverPlacement]=\"'bottom'\"\n    [solarisPopoverAlign]=\"'start'\"\n    [solarisPopoverPadding]=\"'none'\"\n    [solarisPopoverFitContent]=\"true\"\n    [solarisPopoverMaxWidth]=\"'calc(100vw - var(--solaris-spacing-4))'\"\n    [solarisPopoverRadius]=\"radius()\"\n    [solarisPopoverAriaHasPopup]=\"'dialog'\"\n    (solarisPopoverOpened)=\"onPanelOpened()\"\n    (solarisPopoverClosed)=\"onPanelClosed()\"\n  >\n    <ng-content\n      select=\"[solaris-form-prefix]\"\n      ngProjectAs=\"[solaris-form-prefix]\"\n    />\n    <ng-content\n      select=\"[solaris-form-suffix-action]\"\n      ngProjectAs=\"[solaris-form-suffix-action]\"\n    />\n    <ng-content\n      select=\"[solaris-form-suffix]\"\n      ngProjectAs=\"[solaris-form-suffix]\"\n    />\n    <ng-content\n      select=\"[solaris-form-label-action]\"\n      ngProjectAs=\"[solaris-form-label-action]\"\n    />\n    @if (prefix(); as prefixName) {\n      <span solaris-form-prefix>\n        <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n      </span>\n    }\n    <button\n      #triggerButton\n      type=\"button\"\n      class=\"solaris-date-range-picker__trigger\"\n      [id]=\"id\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n      [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onInputKeydown($event)\"\n    >\n      {{ rangeDisplay() || placeholderText() }}\n    </button>\n\n    <button\n      type=\"button\"\n      appearance=\"ghost\"\n      solaris-icon-button\n      solaris-form-suffix\n      solaris-form-suffix-action\n      class=\"solaris-date-range-picker__calendar-trigger\"\n      [size]=\"size()\"\n      [density]=\"effectiveDensity()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      [attr.aria-label]=\"calendarLabel()\"\n    >\n      <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n    </button>\n    @if (canClear() && !loading()) {\n      <button\n        type=\"button\"\n        solaris-form-suffix\n        class=\"solaris-date-range-picker__clear\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n        [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n        (click)=\"clearValue(); $event.stopPropagation()\"\n        tabindex=\"-1\"\n      >\n        <solaris-icon name=\"x\" [decorative]=\"true\" />\n      </button>\n    }\n    @if (suffix(); as suffixName) {\n      <span solaris-form-suffix>\n        <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n      </span>\n    }\n  </solaris-form-field>\n}\n\n<ng-template #rangePopover=\"solarisPopover\" #panelTpl solaris-popover>\n  <div\n    [attr.role]=\"inline() ? 'group' : 'dialog'\"\n    [attr.aria-label]=\"calendarLabel()\"\n    class=\"solaris-date-range-picker__panel\"\n  >\n    <nav\n      class=\"solaris-date-range-picker__presets\"\n      [attr.aria-label]=\"presetsLabel()\"\n    >\n      @if (presets().length > 0) {\n        @for (preset of presets(); track preset.id) {\n          <button\n            type=\"button\"\n            class=\"solaris-date-range-picker__preset\"\n            [attr.data-active]=\"activePresetId() === preset.id ? '' : null\"\n            (click)=\"selectPreset(preset)\"\n          >\n            {{ presetLabel(preset) }}\n          </button>\n        }\n      }\n      <button\n        type=\"button\"\n        class=\"solaris-date-range-picker__preset\"\n        [attr.data-active]=\"activePresetId() === 'custom' ? '' : null\"\n        (click)=\"selectCustom()\"\n      >\n        {{ customLabel() }}\n      </button>\n    </nav>\n    <div class=\"solaris-date-range-picker__content\">\n      <div class=\"solaris-date-range-picker__calendars\">\n        <solaris-date-calendar\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [range]=\"pending()\"\n          [month]=\"displayedMonth()\"\n          [locale]=\"resolvedLocale()\"\n          [disabledDates]=\"disabledDates()\"\n          [weekStartsOn]=\"weekStartsOn()\"\n          [disablePast]=\"disablePast()\"\n          [disableFuture]=\"disableFuture()\"\n          [nextMonthLabel]=\"nextMonthLabel()\"\n          (selectedChange)=\"selectDate($event)\"\n          (monthChange)=\"setDisplayedMonth($event)\"\n          [previousMonthLabel]=\"previousMonthLabel()\"\n        />\n        <span\n          class=\"solaris-date-range-picker__calendar-divider\"\n          aria-hidden=\"true\"\n        ></span>\n        <solaris-date-calendar\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [range]=\"pending()\"\n          [month]=\"nextMonth()\"\n          [locale]=\"resolvedLocale()\"\n          [disabledDates]=\"disabledDates()\"\n          [weekStartsOn]=\"weekStartsOn()\"\n          [disablePast]=\"disablePast()\"\n          [disableFuture]=\"disableFuture()\"\n          [nextMonthLabel]=\"nextMonthLabel()\"\n          (selectedChange)=\"selectDate($event)\"\n          (monthChange)=\"setDisplayedMonth($event)\"\n          [previousMonthLabel]=\"previousMonthLabel()\"\n        />\n      </div>\n      <footer class=\"solaris-date-range-picker__footer\">\n        <div class=\"solaris-date-range-picker__inputs\">\n          <input\n            type=\"text\"\n            solaris-input\n            (blur)=\"onBlur()\"\n            density=\"compact\"\n            autocomplete=\"off\"\n            [fullWidth]=\"false\"\n            inputmode=\"numeric\"\n            (focus)=\"onFocus()\"\n            [value]=\"startDisplay()\"\n            (click)=\"onInputClick($event)\"\n            [attr.aria-label]=\"startLabel()\"\n            [disabled]=\"isStartDisabled()\"\n            [readonly]=\"isStartReadonly()\"\n            [attr.aria-disabled]=\"isStartDisabled() ? 'true' : null\"\n            (input)=\"onInput('start', $event)\"\n            (keydown)=\"onPanelInputKeydown($event)\"\n          />\n          <span class=\"solaris-date-range-picker__separator\" aria-hidden=\"true\"\n            >-</span\n          >\n          <input\n            type=\"text\"\n            solaris-input\n            (blur)=\"onBlur()\"\n            density=\"compact\"\n            [fullWidth]=\"false\"\n            autocomplete=\"off\"\n            (focus)=\"onFocus()\"\n            inputmode=\"numeric\"\n            [value]=\"endDisplay()\"\n            [attr.aria-label]=\"endLabel()\"\n            (click)=\"onInputClick($event)\"\n            [disabled]=\"isEndDisabled()\"\n            [readonly]=\"isEndReadonly()\"\n            [attr.aria-disabled]=\"isEndDisabled() ? 'true' : null\"\n            (input)=\"onInput('end', $event)\"\n            (keydown)=\"onPanelInputKeydown($event)\"\n          />\n        </div>\n        <div class=\"solaris-date-range-picker__actions\">\n          <button\n            type=\"button\"\n            solaris-button\n            density=\"compact\"\n            appearance=\"ghost\"\n            data-density=\"compact\"\n            (click)=\"clearPending()\"\n          >\n            {{ clearButtonLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            solaris-button\n            density=\"compact\"\n            (click)=\"cancel()\"\n            appearance=\"outline\"\n            data-density=\"compact\"\n          >\n            {{ cancelLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            solaris-button\n            color=\"primary\"\n            (click)=\"apply()\"\n            density=\"compact\"\n            data-density=\"compact\"\n          >\n            {{ applyLabel() }}\n          </button>\n        </div>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n",
 		styles: [":host{display:block;--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-sm )}:host([data-size=sm][data-density=compact]),:host([data-size=sm][data-density=normal]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-xs)}:host([data-size=sm][data-density=comfortable]),:host([data-size=md][data-density=compact]),:host([data-size=md][data-density=normal]),:host([data-size=lg][data-density=compact]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm)}:host([data-size=md][data-density=comfortable]),:host([data-size=lg][data-density=normal]),:host([data-size=lg][data-density=comfortable]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-md);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-md )}[solaris-button].solaris-date-range-picker__calendar-trigger,.solaris-date-range-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-range-picker__calendar-trigger:hover,[solaris-button].solaris-date-range-picker__calendar-trigger:active,.solaris-date-range-picker__calendar-trigger:hover,.solaris-date-range-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-range-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-range-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-range-picker__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-range-picker__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-date-range-picker__panel{animation:none}.solaris-date-range-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-range-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-range-picker__clear{transition:none}.solaris-date-range-picker__inputs,.solaris-date-range-picker__actions{display:flex;align-items:center}.solaris-date-range-picker__trigger{width:100%;min-width:0;padding:0;border:0;color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-date-range-picker-trigger-font-size)/var(--solaris-date-range-picker-trigger-line-height) var(--solaris-font-family-sans)}.solaris-date-range-picker__trigger:focus-visible,.solaris-date-range-picker__preset:focus-visible{outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-focus-ring-color);outline-offset:var(--solaris-focus-ring-offset)}.solaris-date-range-picker__trigger:disabled{cursor:not-allowed;color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__inputs{gap:var(--solaris-spacing-2);min-width:0}.solaris-date-range-picker__inputs input{flex:0 0 calc(var(--solaris-spacing-17) + var(--solaris-spacing-8));width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-8))}.solaris-date-range-picker__separator{color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__panel{display:grid;width:fit-content;grid-template-columns:auto auto;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-date-range-picker__presets{display:grid;align-content:start;gap:var(--solaris-spacing-1);min-width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-4));padding-block:var(--solaris-spacing-3);padding-inline:var(--solaris-spacing-3) var(--solaris-spacing-4);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__preset{position:relative;min-height:var(--solaris-spacing-8);padding:0 var(--solaris-spacing-2);border:0;border-radius:var(--solaris-radius-sm);color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-date-range-picker__preset:hover{background:var(--solaris-neutral-subtle)}.solaris-date-range-picker__preset[data-active]:after{position:absolute;inset-block:0;inset-inline-start:calc(var(--solaris-spacing-3) * -1);width:var(--solaris-border-width-md);background:var(--solaris-primary-solid);content:\"\"}.solaris-date-range-picker__content{display:grid;min-width:max-content}.solaris-date-range-picker__calendars{display:grid;align-items:start;grid-template-columns:auto auto auto}.solaris-date-range-picker__calendars solaris-date-calendar{margin:var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{align-self:stretch;width:var(--solaris-border-width-sm);background:var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__footer{display:flex;gap:var(--solaris-spacing-4);align-items:center;justify-content:space-between;padding:var(--solaris-spacing-3);border-block-start:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__actions{gap:var(--solaris-spacing-2)}@media(width<=640px){.solaris-date-range-picker__panel{box-sizing:border-box;min-width:0;width:min(100%,var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16) + var(--solaris-spacing-3) * 2);max-width:100%;grid-template-columns:minmax(0,1fr);gap:0}.solaris-date-range-picker__presets{box-sizing:border-box;display:flex;flex-wrap:nowrap;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;padding-inline:var(--solaris-spacing-1);border-block-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle);border-inline-end:0}.solaris-date-range-picker__preset{flex:0 0 auto;min-height:var(--solaris-spacing-10);border-radius:0;scroll-snap-align:start;white-space:nowrap}.solaris-date-range-picker__preset[data-active]:after{inset-block:auto 0;inset-inline:var(--solaris-spacing-2);width:auto;height:var(--solaris-border-width-md)}.solaris-date-range-picker__content{box-sizing:border-box;width:100%;min-width:0}.solaris-date-range-picker__calendars{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);justify-items:center}.solaris-date-range-picker__calendars solaris-date-calendar{margin:0}.solaris-date-range-picker__calendars ::ng-deep .solaris-date-calendar{box-sizing:border-box;max-width:100%;padding:0 var(--solaris-spacing-3) var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{display:none}.solaris-date-range-picker__calendars solaris-date-calendar:last-child{display:none}.solaris-date-range-picker__footer{box-sizing:border-box;width:100%;min-width:0;flex-direction:column;gap:var(--solaris-spacing-2);align-items:stretch}.solaris-date-range-picker__inputs input{flex:1 1 0;width:auto;min-width:0}.solaris-date-range-picker__actions{width:100%;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--solaris-spacing-1)}.solaris-date-range-picker__actions [solaris-button]{width:100%;min-width:0}}\n"],
 		dependencies: [
 			{
@@ -34784,7 +34790,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.data-density]": "effectiveDensity()",
 				"[attr.data-open]": "panelOpen() ? \"\" : null"
 			},
-			template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n} @else {\n  <solaris-form-field\n    [control]=\"this\"\n    [label]=\"labelText()\"\n    [hint]=\"hintText()\"\n    [error]=\"errorText()\"\n    [appearance]=\"appearance()\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    [radius]=\"radius()\"\n    [invalid]=\"isEffectivelyInvalid()\"\n    [required]=\"requiredInput()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    [loading]=\"loading()\"\n    [hasSuffixAction]=\"!!projectedSuffixAction()\"\n    solaris-popover-trigger\n    [solarisPopoverTriggerFor]=\"rangePopover\"\n    [solarisPopoverDisabled]=\"\n      isEffectivelyDisabled() || isEffectivelyReadonly()\n    \"\n    [solarisPopoverPlacement]=\"'bottom'\"\n    [solarisPopoverAlign]=\"'start'\"\n    [solarisPopoverPadding]=\"'none'\"\n    [solarisPopoverFitContent]=\"true\"\n    [solarisPopoverMaxWidth]=\"'calc(100vw - var(--solaris-spacing-4))'\"\n    [solarisPopoverRadius]=\"radius()\"\n    [solarisPopoverAriaHasPopup]=\"'dialog'\"\n    (solarisPopoverOpened)=\"onPanelOpened()\"\n    (solarisPopoverClosed)=\"onPanelClosed()\"\n  >\n    <ng-content\n      select=\"[solaris-form-prefix]\"\n      ngProjectAs=\"[solaris-form-prefix]\"\n    />\n    <ng-content\n      select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n      ngProjectAs=\"[solaris-form-suffix-action]\"\n    />\n    <ng-content\n      select=\"[solaris-form-suffix]\"\n      ngProjectAs=\"[solaris-form-suffix]\"\n    />\n    <ng-content\n      select=\"[solaris-form-label-action]\"\n      ngProjectAs=\"[solaris-form-label-action]\"\n    />\n    @if (prefix(); as prefixName) {\n      <span solaris-form-prefix>\n        <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n      </span>\n    }\n    <button\n      #triggerButton\n      type=\"button\"\n      class=\"solaris-date-range-picker__trigger\"\n      [id]=\"id\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n      [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onInputKeydown($event)\"\n    >\n      {{ rangeDisplay() || placeholderText() }}\n    </button>\n\n    <button\n      type=\"button\"\n      appearance=\"ghost\"\n      solaris-icon-button\n      solaris-form-suffix\n      solaris-form-suffix-action\n      class=\"solaris-date-range-picker__calendar-trigger\"\n      [size]=\"size()\"\n      [density]=\"effectiveDensity()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      [attr.aria-label]=\"calendarLabel()\"\n    >\n      <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n    </button>\n    @if (canClear() && !loading()) {\n      <button\n        type=\"button\"\n        solaris-form-suffix\n        class=\"solaris-date-range-picker__clear\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n        [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n        (click)=\"clearValue(); $event.stopPropagation()\"\n        tabindex=\"-1\"\n      >\n        <solaris-icon name=\"x\" [decorative]=\"true\" />\n      </button>\n    }\n    @if (suffix(); as suffixName) {\n      <span solaris-form-suffix>\n        <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n      </span>\n    }\n  </solaris-form-field>\n}\n\n<ng-template #rangePopover=\"solarisPopover\" #panelTpl solaris-popover>\n  <div\n    [attr.role]=\"inline() ? 'group' : 'dialog'\"\n    [attr.aria-label]=\"calendarLabel()\"\n    class=\"solaris-date-range-picker__panel\"\n  >\n    <nav\n      class=\"solaris-date-range-picker__presets\"\n      [attr.aria-label]=\"presetsLabel()\"\n    >\n      @if (presets().length > 0) {\n        @for (preset of presets(); track preset.id) {\n          <button\n            type=\"button\"\n            class=\"solaris-date-range-picker__preset\"\n            [attr.data-active]=\"activePresetId() === preset.id ? '' : null\"\n            (click)=\"selectPreset(preset)\"\n          >\n            {{ presetLabel(preset) }}\n          </button>\n        }\n      }\n      <button\n        type=\"button\"\n        class=\"solaris-date-range-picker__preset\"\n        [attr.data-active]=\"activePresetId() === 'custom' ? '' : null\"\n        (click)=\"selectCustom()\"\n      >\n        {{ customLabel() }}\n      </button>\n    </nav>\n    <div class=\"solaris-date-range-picker__content\">\n      <div class=\"solaris-date-range-picker__calendars\">\n        <solaris-date-calendar\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [range]=\"pending()\"\n          [month]=\"displayedMonth()\"\n          [locale]=\"resolvedLocale()\"\n          [disabledDates]=\"disabledDates()\"\n          [weekStartsOn]=\"weekStartsOn()\"\n          [disablePast]=\"disablePast()\"\n          [disableFuture]=\"disableFuture()\"\n          [nextMonthLabel]=\"nextMonthLabel()\"\n          (selectedChange)=\"selectDate($event)\"\n          (monthChange)=\"setDisplayedMonth($event)\"\n          [previousMonthLabel]=\"previousMonthLabel()\"\n        />\n        <span\n          class=\"solaris-date-range-picker__calendar-divider\"\n          aria-hidden=\"true\"\n        ></span>\n        <solaris-date-calendar\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [range]=\"pending()\"\n          [month]=\"nextMonth()\"\n          [locale]=\"resolvedLocale()\"\n          [disabledDates]=\"disabledDates()\"\n          [weekStartsOn]=\"weekStartsOn()\"\n          [disablePast]=\"disablePast()\"\n          [disableFuture]=\"disableFuture()\"\n          [nextMonthLabel]=\"nextMonthLabel()\"\n          (selectedChange)=\"selectDate($event)\"\n          (monthChange)=\"setDisplayedMonth($event)\"\n          [previousMonthLabel]=\"previousMonthLabel()\"\n        />\n      </div>\n      <footer class=\"solaris-date-range-picker__footer\">\n        <div class=\"solaris-date-range-picker__inputs\">\n          <input\n            type=\"text\"\n            solaris-input\n            (blur)=\"onBlur()\"\n            density=\"compact\"\n            autocomplete=\"off\"\n            [fullWidth]=\"false\"\n            inputmode=\"numeric\"\n            (focus)=\"onFocus()\"\n            [value]=\"startDisplay()\"\n            (click)=\"onInputClick($event)\"\n            [attr.aria-label]=\"startLabel()\"\n            [disabled]=\"isStartDisabled()\"\n            [readonly]=\"isStartReadonly()\"\n            [attr.aria-disabled]=\"isStartDisabled() ? 'true' : null\"\n            (input)=\"onInput('start', $event)\"\n            (keydown)=\"onPanelInputKeydown($event)\"\n          />\n          <span class=\"solaris-date-range-picker__separator\" aria-hidden=\"true\"\n            >-</span\n          >\n          <input\n            type=\"text\"\n            solaris-input\n            (blur)=\"onBlur()\"\n            density=\"compact\"\n            [fullWidth]=\"false\"\n            autocomplete=\"off\"\n            (focus)=\"onFocus()\"\n            inputmode=\"numeric\"\n            [value]=\"endDisplay()\"\n            [attr.aria-label]=\"endLabel()\"\n            (click)=\"onInputClick($event)\"\n            [disabled]=\"isEndDisabled()\"\n            [readonly]=\"isEndReadonly()\"\n            [attr.aria-disabled]=\"isEndDisabled() ? 'true' : null\"\n            (input)=\"onInput('end', $event)\"\n            (keydown)=\"onPanelInputKeydown($event)\"\n          />\n        </div>\n        <div class=\"solaris-date-range-picker__actions\">\n          <button\n            type=\"button\"\n            solaris-button\n            density=\"compact\"\n            appearance=\"ghost\"\n            data-density=\"compact\"\n            (click)=\"clearPending()\"\n          >\n            {{ clearButtonLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            solaris-button\n            density=\"compact\"\n            (click)=\"cancel()\"\n            appearance=\"outline\"\n            data-density=\"compact\"\n          >\n            {{ cancelLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            solaris-button\n            color=\"primary\"\n            (click)=\"apply()\"\n            density=\"compact\"\n            data-density=\"compact\"\n          >\n            {{ applyLabel() }}\n          </button>\n        </div>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n",
+			template: "@if (inline()) {\n  <ng-container [ngTemplateOutlet]=\"panelTpl\" />\n} @else {\n  <solaris-form-field\n    [control]=\"this\"\n    [label]=\"labelText()\"\n    [hint]=\"hintText()\"\n    [error]=\"errorText()\"\n    [appearance]=\"appearance()\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    [radius]=\"radius()\"\n    [invalid]=\"isEffectivelyInvalid()\"\n    [required]=\"requiredInput()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    [loading]=\"loading()\"\n    [hasSuffixAction]=\"!!projectedSuffixAction()\"\n    solaris-popover-trigger\n    [solarisPopoverTriggerFor]=\"rangePopover\"\n    [solarisPopoverDisabled]=\"\n      isEffectivelyDisabled() || isEffectivelyReadonly()\n    \"\n    [solarisPopoverPlacement]=\"'bottom'\"\n    [solarisPopoverAlign]=\"'start'\"\n    [solarisPopoverPadding]=\"'none'\"\n    [solarisPopoverFitContent]=\"true\"\n    [solarisPopoverMaxWidth]=\"'calc(100vw - var(--solaris-spacing-4))'\"\n    [solarisPopoverRadius]=\"radius()\"\n    [solarisPopoverAriaHasPopup]=\"'dialog'\"\n    (solarisPopoverOpened)=\"onPanelOpened()\"\n    (solarisPopoverClosed)=\"onPanelClosed()\"\n  >\n    <ng-content\n      select=\"[solaris-form-prefix]\"\n      ngProjectAs=\"[solaris-form-prefix]\"\n    />\n    <ng-content\n      select=\"[solaris-form-suffix-action]\"\n      ngProjectAs=\"[solaris-form-suffix-action]\"\n    />\n    <ng-content\n      select=\"[solaris-form-suffix]\"\n      ngProjectAs=\"[solaris-form-suffix]\"\n    />\n    <ng-content\n      select=\"[solaris-form-label-action]\"\n      ngProjectAs=\"[solaris-form-label-action]\"\n    />\n    @if (prefix(); as prefixName) {\n      <span solaris-form-prefix>\n        <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n      </span>\n    }\n    <button\n      #triggerButton\n      type=\"button\"\n      class=\"solaris-date-range-picker__trigger\"\n      [id]=\"id\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n      [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (keydown)=\"onInputKeydown($event)\"\n    >\n      {{ rangeDisplay() || placeholderText() }}\n    </button>\n\n    <button\n      type=\"button\"\n      appearance=\"ghost\"\n      solaris-icon-button\n      solaris-form-suffix\n      solaris-form-suffix-action\n      class=\"solaris-date-range-picker__calendar-trigger\"\n      [size]=\"size()\"\n      [density]=\"effectiveDensity()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      [attr.aria-label]=\"calendarLabel()\"\n    >\n      <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n    </button>\n    @if (canClear() && !loading()) {\n      <button\n        type=\"button\"\n        solaris-form-suffix\n        class=\"solaris-date-range-picker__clear\"\n        [attr.aria-label]=\"clearAriaLabel()\"\n        [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n        (click)=\"clearValue(); $event.stopPropagation()\"\n        tabindex=\"-1\"\n      >\n        <solaris-icon name=\"x\" [decorative]=\"true\" />\n      </button>\n    }\n    @if (suffix(); as suffixName) {\n      <span solaris-form-suffix>\n        <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n      </span>\n    }\n  </solaris-form-field>\n}\n\n<ng-template #rangePopover=\"solarisPopover\" #panelTpl solaris-popover>\n  <div\n    [attr.role]=\"inline() ? 'group' : 'dialog'\"\n    [attr.aria-label]=\"calendarLabel()\"\n    class=\"solaris-date-range-picker__panel\"\n  >\n    <nav\n      class=\"solaris-date-range-picker__presets\"\n      [attr.aria-label]=\"presetsLabel()\"\n    >\n      @if (presets().length > 0) {\n        @for (preset of presets(); track preset.id) {\n          <button\n            type=\"button\"\n            class=\"solaris-date-range-picker__preset\"\n            [attr.data-active]=\"activePresetId() === preset.id ? '' : null\"\n            (click)=\"selectPreset(preset)\"\n          >\n            {{ presetLabel(preset) }}\n          </button>\n        }\n      }\n      <button\n        type=\"button\"\n        class=\"solaris-date-range-picker__preset\"\n        [attr.data-active]=\"activePresetId() === 'custom' ? '' : null\"\n        (click)=\"selectCustom()\"\n      >\n        {{ customLabel() }}\n      </button>\n    </nav>\n    <div class=\"solaris-date-range-picker__content\">\n      <div class=\"solaris-date-range-picker__calendars\">\n        <solaris-date-calendar\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [range]=\"pending()\"\n          [month]=\"displayedMonth()\"\n          [locale]=\"resolvedLocale()\"\n          [disabledDates]=\"disabledDates()\"\n          [weekStartsOn]=\"weekStartsOn()\"\n          [disablePast]=\"disablePast()\"\n          [disableFuture]=\"disableFuture()\"\n          [nextMonthLabel]=\"nextMonthLabel()\"\n          (selectedChange)=\"selectDate($event)\"\n          (monthChange)=\"setDisplayedMonth($event)\"\n          [previousMonthLabel]=\"previousMonthLabel()\"\n        />\n        <span\n          class=\"solaris-date-range-picker__calendar-divider\"\n          aria-hidden=\"true\"\n        ></span>\n        <solaris-date-calendar\n          [min]=\"min()\"\n          [max]=\"max()\"\n          [range]=\"pending()\"\n          [month]=\"nextMonth()\"\n          [locale]=\"resolvedLocale()\"\n          [disabledDates]=\"disabledDates()\"\n          [weekStartsOn]=\"weekStartsOn()\"\n          [disablePast]=\"disablePast()\"\n          [disableFuture]=\"disableFuture()\"\n          [nextMonthLabel]=\"nextMonthLabel()\"\n          (selectedChange)=\"selectDate($event)\"\n          (monthChange)=\"setDisplayedMonth($event)\"\n          [previousMonthLabel]=\"previousMonthLabel()\"\n        />\n      </div>\n      <footer class=\"solaris-date-range-picker__footer\">\n        <div class=\"solaris-date-range-picker__inputs\">\n          <input\n            type=\"text\"\n            solaris-input\n            (blur)=\"onBlur()\"\n            density=\"compact\"\n            autocomplete=\"off\"\n            [fullWidth]=\"false\"\n            inputmode=\"numeric\"\n            (focus)=\"onFocus()\"\n            [value]=\"startDisplay()\"\n            (click)=\"onInputClick($event)\"\n            [attr.aria-label]=\"startLabel()\"\n            [disabled]=\"isStartDisabled()\"\n            [readonly]=\"isStartReadonly()\"\n            [attr.aria-disabled]=\"isStartDisabled() ? 'true' : null\"\n            (input)=\"onInput('start', $event)\"\n            (keydown)=\"onPanelInputKeydown($event)\"\n          />\n          <span class=\"solaris-date-range-picker__separator\" aria-hidden=\"true\"\n            >-</span\n          >\n          <input\n            type=\"text\"\n            solaris-input\n            (blur)=\"onBlur()\"\n            density=\"compact\"\n            [fullWidth]=\"false\"\n            autocomplete=\"off\"\n            (focus)=\"onFocus()\"\n            inputmode=\"numeric\"\n            [value]=\"endDisplay()\"\n            [attr.aria-label]=\"endLabel()\"\n            (click)=\"onInputClick($event)\"\n            [disabled]=\"isEndDisabled()\"\n            [readonly]=\"isEndReadonly()\"\n            [attr.aria-disabled]=\"isEndDisabled() ? 'true' : null\"\n            (input)=\"onInput('end', $event)\"\n            (keydown)=\"onPanelInputKeydown($event)\"\n          />\n        </div>\n        <div class=\"solaris-date-range-picker__actions\">\n          <button\n            type=\"button\"\n            solaris-button\n            density=\"compact\"\n            appearance=\"ghost\"\n            data-density=\"compact\"\n            (click)=\"clearPending()\"\n          >\n            {{ clearButtonLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            solaris-button\n            density=\"compact\"\n            (click)=\"cancel()\"\n            appearance=\"outline\"\n            data-density=\"compact\"\n          >\n            {{ cancelLabel() }}\n          </button>\n          <button\n            type=\"button\"\n            solaris-button\n            color=\"primary\"\n            (click)=\"apply()\"\n            density=\"compact\"\n            data-density=\"compact\"\n          >\n            {{ applyLabel() }}\n          </button>\n        </div>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n",
 			styles: [":host{display:block;--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-sm )}:host([data-size=sm][data-density=compact]),:host([data-size=sm][data-density=normal]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-xs)}:host([data-size=sm][data-density=comfortable]),:host([data-size=md][data-density=compact]),:host([data-size=md][data-density=normal]),:host([data-size=lg][data-density=compact]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-sm)}:host([data-size=md][data-density=comfortable]),:host([data-size=lg][data-density=normal]),:host([data-size=lg][data-density=comfortable]){--solaris-date-range-picker-trigger-font-size: var(--solaris-font-size-md);--solaris-date-range-picker-trigger-line-height: var( --solaris-line-height-md )}[solaris-button].solaris-date-range-picker__calendar-trigger,.solaris-date-range-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-range-picker__calendar-trigger:hover,[solaris-button].solaris-date-range-picker__calendar-trigger:active,.solaris-date-range-picker__calendar-trigger:hover,.solaris-date-range-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-range-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-range-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-range-picker__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-range-picker__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-date-range-picker__panel{animation:none}.solaris-date-range-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-range-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-range-picker__clear{transition:none}.solaris-date-range-picker__inputs,.solaris-date-range-picker__actions{display:flex;align-items:center}.solaris-date-range-picker__trigger{width:100%;min-width:0;padding:0;border:0;color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-date-range-picker-trigger-font-size)/var(--solaris-date-range-picker-trigger-line-height) var(--solaris-font-family-sans)}.solaris-date-range-picker__trigger:focus-visible,.solaris-date-range-picker__preset:focus-visible{outline:var(--solaris-focus-ring-width) var(--solaris-focus-ring-style) var(--solaris-focus-ring-color);outline-offset:var(--solaris-focus-ring-offset)}.solaris-date-range-picker__trigger:disabled{cursor:not-allowed;color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__inputs{gap:var(--solaris-spacing-2);min-width:0}.solaris-date-range-picker__inputs input{flex:0 0 calc(var(--solaris-spacing-17) + var(--solaris-spacing-8));width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-8))}.solaris-date-range-picker__separator{color:var(--solaris-neutral-text-secondary)}.solaris-date-range-picker__panel{display:grid;width:fit-content;grid-template-columns:auto auto;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-date-range-picker__presets{display:grid;align-content:start;gap:var(--solaris-spacing-1);min-width:calc(var(--solaris-spacing-17) + var(--solaris-spacing-4));padding-block:var(--solaris-spacing-3);padding-inline:var(--solaris-spacing-3) var(--solaris-spacing-4);border-inline-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__preset{position:relative;min-height:var(--solaris-spacing-8);padding:0 var(--solaris-spacing-2);border:0;border-radius:var(--solaris-radius-sm);color:var(--solaris-neutral-text-body);text-align:start;background:transparent;cursor:pointer;font:var(--solaris-font-weight-regular) var(--solaris-font-size-sm)/var(--solaris-line-height-md) var(--solaris-font-family-sans)}.solaris-date-range-picker__preset:hover{background:var(--solaris-neutral-subtle)}.solaris-date-range-picker__preset[data-active]:after{position:absolute;inset-block:0;inset-inline-start:calc(var(--solaris-spacing-3) * -1);width:var(--solaris-border-width-md);background:var(--solaris-primary-solid);content:\"\"}.solaris-date-range-picker__content{display:grid;min-width:max-content}.solaris-date-range-picker__calendars{display:grid;align-items:start;grid-template-columns:auto auto auto}.solaris-date-range-picker__calendars solaris-date-calendar{margin:var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{align-self:stretch;width:var(--solaris-border-width-sm);background:var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__footer{display:flex;gap:var(--solaris-spacing-4);align-items:center;justify-content:space-between;padding:var(--solaris-spacing-3);border-block-start:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle)}.solaris-date-range-picker__actions{gap:var(--solaris-spacing-2)}@media(width<=640px){.solaris-date-range-picker__panel{box-sizing:border-box;min-width:0;width:min(100%,var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16) + var(--solaris-spacing-3) * 2);max-width:100%;grid-template-columns:minmax(0,1fr);gap:0}.solaris-date-range-picker__presets{box-sizing:border-box;display:flex;flex-wrap:nowrap;min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;padding-inline:var(--solaris-spacing-1);border-block-end:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-subtle);border-inline-end:0}.solaris-date-range-picker__preset{flex:0 0 auto;min-height:var(--solaris-spacing-10);border-radius:0;scroll-snap-align:start;white-space:nowrap}.solaris-date-range-picker__preset[data-active]:after{inset-block:auto 0;inset-inline:var(--solaris-spacing-2);width:auto;height:var(--solaris-border-width-md)}.solaris-date-range-picker__content{box-sizing:border-box;width:100%;min-width:0}.solaris-date-range-picker__calendars{width:100%;min-width:0;grid-template-columns:minmax(0,1fr);justify-items:center}.solaris-date-range-picker__calendars solaris-date-calendar{margin:0}.solaris-date-range-picker__calendars ::ng-deep .solaris-date-calendar{box-sizing:border-box;max-width:100%;padding:0 var(--solaris-spacing-3) var(--solaris-spacing-3)}.solaris-date-range-picker__calendar-divider{display:none}.solaris-date-range-picker__calendars solaris-date-calendar:last-child{display:none}.solaris-date-range-picker__footer{box-sizing:border-box;width:100%;min-width:0;flex-direction:column;gap:var(--solaris-spacing-2);align-items:stretch}.solaris-date-range-picker__inputs input{flex:1 1 0;width:auto;min-width:0}.solaris-date-range-picker__actions{width:100%;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--solaris-spacing-1)}.solaris-date-range-picker__actions [solaris-button]{width:100%;min-width:0}}\n"]
 		}]
 	}],
@@ -43766,7 +43772,7 @@ var SolarisMultiSelectComponent = class SolarisMultiSelectComponent extends Sola
 		],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<solaris-form-field\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"!!prefix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  solaris-popover-trigger\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n  [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"0\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverTopConnected]=\"true\"\n  [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n\n  <div\n    #triggerEl\n    class=\"solaris-multi-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    [style.min-width.px]=\"contentMinWidth() || null\"\n    solaris-form-field-trigger\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n      @if (displayMode() === 'auto') {\n        @if (hasValue()) {\n          @if (showCountOnly()) {\n            <span\n              class=\"solaris-multi-select__chip\"\n              [solarisTooltip]=\"countTooltipText()\"\n              [solarisTooltipTrigger]=\"'hover'\"\n              tabindex=\"0\"\n            >\n              <span class=\"solaris-multi-select__chip-label\">{{\n                summaryText()\n              }}</span>\n            </span>\n          } @else {\n            <div\n              class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n            >\n              @for (opt of autoVisibleChips(); track opt) {\n                <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n                  <span class=\"solaris-multi-select__chip-label\">{{\n                    getOptionDisplayLabel(opt)\n                  }}</span>\n                  @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n                    <button\n                      type=\"button\"\n                      class=\"solaris-multi-select__chip-remove\"\n                      [attr.aria-label]=\"removeChipAriaLabel()\"\n                      (click)=\"removeChip(opt, $event)\"\n                      tabindex=\"-1\"\n                    >\n                      <solaris-icon name=\"x\" [decorative]=\"true\" />\n                    </button>\n                  }\n                </span>\n              }\n              @if (autoShowOverflow()) {\n                <span\n                  class=\"solaris-multi-select__chip-overflow\"\n                  [solarisTooltip]=\"autoOverflowTooltipText()\"\n                  [solarisTooltipTrigger]=\"'hover'\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"\n                    '+ ' +\n                    autoOverflowCount() +\n                    ' ' +\n                    selectedLabels().join(', ')\n                  \"\n                  >+{{ autoOverflowCount() }}</span\n                >\n              }\n            </div>\n          }\n        }\n        @if (searchable() && panelOpen()) {\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"solaris-multi-select__search-input\"\n            [attr.placeholder]=\"searchPlaceholderText()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n            (click)=\"$event.stopPropagation()\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n          />\n        }\n        @if (!hasValue() && !(searchable() && panelOpen())) {\n          <span class=\"solaris-multi-select__value\">\n            <span class=\"solaris-multi-select__placeholder\">{{\n              placeholderText()\n            }}</span>\n          </span>\n        }\n      } @else {\n        @if (searchable() && panelOpen()) {\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"solaris-multi-select__search-input\"\n            [attr.placeholder]=\"searchPlaceholderText()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n            (click)=\"$event.stopPropagation()\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n          />\n        } @else {\n          @if (hasValue()) {\n            @if (displayMode() === 'chips') {\n              <div class=\"solaris-multi-select__chips\">\n                @for (\n                  opt of selectedOptions().slice(0, maxVisibleChips());\n                  track opt\n                ) {\n                  <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n                    <span class=\"solaris-multi-select__chip-label\">{{\n                      getOptionDisplayLabel(opt)\n                    }}</span>\n                    @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n                      <button\n                        type=\"button\"\n                        class=\"solaris-multi-select__chip-remove\"\n                        [attr.aria-label]=\"removeChipAriaLabel()\"\n                        (click)=\"removeChip(opt, $event)\"\n                        tabindex=\"-1\"\n                      >\n                        <solaris-icon name=\"x\" [decorative]=\"true\" />\n                      </button>\n                    }\n                  </span>\n                }\n                @if (overflowCount() > 0) {\n                  <span\n                    class=\"solaris-multi-select__chip-overflow\"\n                    [attr.aria-label]=\"\n                      '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n                    \"\n                  >\n                    {{ overflowText() }}\n                  </span>\n                }\n              </div>\n            } @else if (displayMode() === 'comma') {\n              <span class=\"solaris-multi-select__value\">\n                <span class=\"solaris-multi-select__value-text\">{{\n                  commaText()\n                }}</span>\n              </span>\n            } @else {\n              <span\n                class=\"solaris-multi-select__chip\"\n                [solarisTooltip]=\"countTooltipText()\"\n                [solarisTooltipTrigger]=\"'hover'\"\n                tabindex=\"0\"\n              >\n                <span class=\"solaris-multi-select__chip-label\">{{\n                  summaryText()\n                }}</span>\n              </span>\n            }\n          } @else {\n            <span class=\"solaris-multi-select__value\">\n              <span class=\"solaris-multi-select__placeholder\">{{\n                placeholderText()\n              }}</span>\n            </span>\n          }\n        }\n      }\n    </div>\n\n    <span class=\"solaris-multi-select__actions\">\n      @if (canClear() && !loading()) {\n        <button\n          type=\"button\"\n          class=\"solaris-multi-select__clear\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue(); $event.stopPropagation()\"\n          tabindex=\"-1\"\n        >\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\n        </button>\n      }\n\n      @if (!loading()) {\n        <solaris-icon\n          class=\"solaris-multi-select__dropdown-icon\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n          size=\"sm\"\n        />\n      }\n    </span>\n  </div>\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n  <div\n    class=\"solaris-multi-select__panel\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"'true'\"\n    [attr.id]=\"panelId\"\n    tabindex=\"-1\"\n    (click)=\"onPanelClick($event)\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    @if (selectAll() && !loading()) {\n      <div\n        class=\"solaris-multi-select__select-all\"\n        role=\"option\"\n        aria-selected=\"false\"\n        tabindex=\"-1\"\n        (click)=\"handleSelectAll()\"\n        (keydown.enter)=\"handleSelectAll()\"\n        (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n        [class.solaris-multi-select__select-all--readonly]=\"\n          isEffectivelyReadonly()\n        \"\n      >\n        <span\n          class=\"solaris-multi-select__select-all-checkbox\"\n          [class.solaris-multi-select__select-all-checkbox--checked]=\"\n            isAllSelected()\n          \"\n          [class.solaris-multi-select__select-all-checkbox--partial]=\"\n            isPartialSelected()\n          \"\n        >\n          @if (isAllSelected()) {\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n              <solaris-icon name=\"check\" [decorative]=\"true\" />\n            </span>\n          } @else if (isPartialSelected()) {\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n              <solaris-icon name=\"minus\" [decorative]=\"true\" />\n            </span>\n          }\n        </span>\n        <span class=\"solaris-multi-select__select-all-label\">{{\n          selectAllLabelText()\n        }}</span>\n      </div>\n    }\n\n    @if (loading()) {\n      <div class=\"solaris-multi-select__loading\">\n        <span class=\"solaris-multi-select__loading-text\">{{\n          loadingTextValue()\n        }}</span>\n      </div>\n    } @else if (showNoResults()) {\n      <div class=\"solaris-multi-select__no-results\">\n        <span class=\"solaris-multi-select__no-results-text\">{{\n          noResultsTextValue()\n        }}</span>\n      </div>\n    } @else if (showEmpty()) {\n      <div class=\"solaris-multi-select__empty\">\n        <span class=\"solaris-multi-select__empty-text\">{{\n          emptyTextValue()\n        }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"solaris-multi-select__options\"\n        [style.max-height]=\"panelMaxHeight()\"\n      >\n        <ng-content select=\"solaris-option, solaris-option-group\" />\n      </div>\n    }\n  </div>\n</ng-template>\n",
+		template: "<solaris-form-field\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"!!prefix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  solaris-popover-trigger\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n  [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"0\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverTopConnected]=\"true\"\n  [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n\n  <div\n    #triggerEl\n    class=\"solaris-multi-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    [style.min-width.px]=\"contentMinWidth() || null\"\n    solaris-form-field-trigger\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n      @if (displayMode() === 'auto') {\n        @if (hasValue()) {\n          @if (showCountOnly()) {\n            <span\n              class=\"solaris-multi-select__chip\"\n              [solarisTooltip]=\"countTooltipText()\"\n              [solarisTooltipTrigger]=\"'hover'\"\n              tabindex=\"0\"\n            >\n              <span class=\"solaris-multi-select__chip-label\">{{\n                summaryText()\n              }}</span>\n            </span>\n          } @else {\n            <div\n              class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n            >\n              @for (opt of autoVisibleChips(); track opt) {\n                <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n                  <span class=\"solaris-multi-select__chip-label\">{{\n                    getOptionDisplayLabel(opt)\n                  }}</span>\n                  @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n                    <button\n                      type=\"button\"\n                      class=\"solaris-multi-select__chip-remove\"\n                      [attr.aria-label]=\"removeChipAriaLabel()\"\n                      (click)=\"removeChip(opt, $event)\"\n                      tabindex=\"-1\"\n                    >\n                      <solaris-icon name=\"x\" [decorative]=\"true\" />\n                    </button>\n                  }\n                </span>\n              }\n              @if (autoShowOverflow()) {\n                <span\n                  class=\"solaris-multi-select__chip-overflow\"\n                  [solarisTooltip]=\"autoOverflowTooltipText()\"\n                  [solarisTooltipTrigger]=\"'hover'\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"\n                    '+ ' +\n                    autoOverflowCount() +\n                    ' ' +\n                    selectedLabels().join(', ')\n                  \"\n                  >+{{ autoOverflowCount() }}</span\n                >\n              }\n            </div>\n          }\n        }\n        @if (searchable() && panelOpen()) {\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"solaris-multi-select__search-input\"\n            [attr.placeholder]=\"searchPlaceholderText()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n            (click)=\"$event.stopPropagation()\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n          />\n        }\n        @if (!hasValue() && !(searchable() && panelOpen())) {\n          <span class=\"solaris-multi-select__value\">\n            <span class=\"solaris-multi-select__placeholder\">{{\n              placeholderText()\n            }}</span>\n          </span>\n        }\n      } @else {\n        @if (searchable() && panelOpen()) {\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"solaris-multi-select__search-input\"\n            [attr.placeholder]=\"searchPlaceholderText()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n            (click)=\"$event.stopPropagation()\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n          />\n        } @else {\n          @if (hasValue()) {\n            @if (displayMode() === 'chips') {\n              <div class=\"solaris-multi-select__chips\">\n                @for (\n                  opt of selectedOptions().slice(0, maxVisibleChips());\n                  track opt\n                ) {\n                  <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n                    <span class=\"solaris-multi-select__chip-label\">{{\n                      getOptionDisplayLabel(opt)\n                    }}</span>\n                    @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n                      <button\n                        type=\"button\"\n                        class=\"solaris-multi-select__chip-remove\"\n                        [attr.aria-label]=\"removeChipAriaLabel()\"\n                        (click)=\"removeChip(opt, $event)\"\n                        tabindex=\"-1\"\n                      >\n                        <solaris-icon name=\"x\" [decorative]=\"true\" />\n                      </button>\n                    }\n                  </span>\n                }\n                @if (overflowCount() > 0) {\n                  <span\n                    class=\"solaris-multi-select__chip-overflow\"\n                    [attr.aria-label]=\"\n                      '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n                    \"\n                  >\n                    {{ overflowText() }}\n                  </span>\n                }\n              </div>\n            } @else if (displayMode() === 'comma') {\n              <span class=\"solaris-multi-select__value\">\n                <span class=\"solaris-multi-select__value-text\">{{\n                  commaText()\n                }}</span>\n              </span>\n            } @else {\n              <span\n                class=\"solaris-multi-select__chip\"\n                [solarisTooltip]=\"countTooltipText()\"\n                [solarisTooltipTrigger]=\"'hover'\"\n                tabindex=\"0\"\n              >\n                <span class=\"solaris-multi-select__chip-label\">{{\n                  summaryText()\n                }}</span>\n              </span>\n            }\n          } @else {\n            <span class=\"solaris-multi-select__value\">\n              <span class=\"solaris-multi-select__placeholder\">{{\n                placeholderText()\n              }}</span>\n            </span>\n          }\n        }\n      }\n    </div>\n\n    <span class=\"solaris-multi-select__actions\">\n      @if (canClear() && !loading()) {\n        <button\n          type=\"button\"\n          class=\"solaris-multi-select__clear\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue(); $event.stopPropagation()\"\n          tabindex=\"-1\"\n        >\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\n        </button>\n      }\n\n      @if (!loading()) {\n        <solaris-icon\n          class=\"solaris-multi-select__dropdown-icon\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n          size=\"sm\"\n        />\n      }\n    </span>\n  </div>\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n  <div\n    class=\"solaris-multi-select__panel\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"'true'\"\n    [attr.id]=\"panelId\"\n    tabindex=\"-1\"\n    (click)=\"onPanelClick($event)\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    @if (selectAll() && !loading()) {\n      <div\n        class=\"solaris-multi-select__select-all\"\n        role=\"option\"\n        aria-selected=\"false\"\n        tabindex=\"-1\"\n        (click)=\"handleSelectAll()\"\n        (keydown.enter)=\"handleSelectAll()\"\n        (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n        [class.solaris-multi-select__select-all--readonly]=\"\n          isEffectivelyReadonly()\n        \"\n      >\n        <span\n          class=\"solaris-multi-select__select-all-checkbox\"\n          [class.solaris-multi-select__select-all-checkbox--checked]=\"\n            isAllSelected()\n          \"\n          [class.solaris-multi-select__select-all-checkbox--partial]=\"\n            isPartialSelected()\n          \"\n        >\n          @if (isAllSelected()) {\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n              <solaris-icon name=\"check\" [decorative]=\"true\" />\n            </span>\n          } @else if (isPartialSelected()) {\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n              <solaris-icon name=\"minus\" [decorative]=\"true\" />\n            </span>\n          }\n        </span>\n        <span class=\"solaris-multi-select__select-all-label\">{{\n          selectAllLabelText()\n        }}</span>\n      </div>\n    }\n\n    @if (loading()) {\n      <div class=\"solaris-multi-select__loading\">\n        <span class=\"solaris-multi-select__loading-text\">{{\n          loadingTextValue()\n        }}</span>\n      </div>\n    } @else if (showNoResults()) {\n      <div class=\"solaris-multi-select__no-results\">\n        <span class=\"solaris-multi-select__no-results-text\">{{\n          noResultsTextValue()\n        }}</span>\n      </div>\n    } @else if (showEmpty()) {\n      <div class=\"solaris-multi-select__empty\">\n        <span class=\"solaris-multi-select__empty-text\">{{\n          emptyTextValue()\n        }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"solaris-multi-select__options\"\n        [style.max-height]=\"panelMaxHeight()\"\n      >\n        <ng-content select=\"solaris-option, solaris-option-group\" />\n      </div>\n    }\n  </div>\n</ng-template>\n",
 		styles: [":host{--solaris-on-primary: var(--solaris-primary-on-solid);--solaris-surface-hover: var(--solaris-neutral-subtle);--solaris-primary-muted: var(--solaris-primary-soft);--solaris-multi-select-chip-gap: var(--solaris-spacing-5);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-multi-select-font-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-color: var(--solaris-neutral-text-body);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-value-color: var(--solaris-neutral-text-body);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-checkbox-radius: var(--solaris-radius-sm);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-placeholder-color: var( --solaris-neutral-text-secondary );--solaris-multi-select-chip-remove-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-background: var(--solaris-neutral-subtle);--solaris-multi-select-placeholder-opacity: var(--solaris-opacity-70);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-multi-select__trigger{flex:1;padding:0;min-width:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-4)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-multi-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-3)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:auto}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__clear:hover{color:var(--solaris-neutral-text-body)}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;width:0;border:none;min-width:0;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-multi-select-checkbox-size);height:var(--solaris-multi-select-checkbox-size);border-radius:var(--solaris-multi-select-checkbox-radius);background:var(--solaris-neutral-default);border:var(--solaris-multi-select-checkbox-border-width) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-solid);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;box-sizing:border-box;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-multi-select-checkbox-icon-size);height:var(--solaris-multi-select-checkbox-icon-size);font-size:var(--solaris-multi-select-checkbox-icon-size)}.solaris-multi-select__select-all-checkbox-icon solaris-icon{width:1em;height:1em}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:var(--solaris-opacity-50)}:host([data-size=sm][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-4);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-6);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}.solaris-multi-select__panel{animation:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}[data-reduced-motion=true] .solaris-multi-select__panel{animation:none}\n"],
 		dependencies: [
 			{
@@ -43814,6 +43820,11 @@ var SolarisMultiSelectComponent = class SolarisMultiSelectComponent extends Sola
 				type: SolarisFormPrefixDirective,
 				selector: "[solaris-form-prefix]"
 			},
+			{
+				kind: "directive",
+				type: SolarisFormSuffixDirective,
+				selector: "[solaris-form-suffix]"
+			},
 			{
 				kind: "component",
 				type: SolarisIconComponent,
@@ -43923,6 +43934,7 @@ i0.ɵɵngDeclareClassMetadata({
 				SolarisFormFieldComponent,
 				SolarisFormFieldTriggerDirective,
 				SolarisFormPrefixDirective,
+				SolarisFormSuffixDirective,
 				SolarisIconComponent,
 				SolarisPopoverDirective,
 				SolarisPopoverTriggerDirective,
@@ -43953,7 +43965,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.aria-label]": "ariaLabelText() ?? null",
 				"[attr.data-has-value]": "hasValue() ? \"\" : null"
 			},
-			template: "<solaris-form-field\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"!!prefix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  solaris-popover-trigger\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n  [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"0\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverTopConnected]=\"true\"\n  [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n\n  <div\n    #triggerEl\n    class=\"solaris-multi-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    [style.min-width.px]=\"contentMinWidth() || null\"\n    solaris-form-field-trigger\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n      @if (displayMode() === 'auto') {\n        @if (hasValue()) {\n          @if (showCountOnly()) {\n            <span\n              class=\"solaris-multi-select__chip\"\n              [solarisTooltip]=\"countTooltipText()\"\n              [solarisTooltipTrigger]=\"'hover'\"\n              tabindex=\"0\"\n            >\n              <span class=\"solaris-multi-select__chip-label\">{{\n                summaryText()\n              }}</span>\n            </span>\n          } @else {\n            <div\n              class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n            >\n              @for (opt of autoVisibleChips(); track opt) {\n                <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n                  <span class=\"solaris-multi-select__chip-label\">{{\n                    getOptionDisplayLabel(opt)\n                  }}</span>\n                  @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n                    <button\n                      type=\"button\"\n                      class=\"solaris-multi-select__chip-remove\"\n                      [attr.aria-label]=\"removeChipAriaLabel()\"\n                      (click)=\"removeChip(opt, $event)\"\n                      tabindex=\"-1\"\n                    >\n                      <solaris-icon name=\"x\" [decorative]=\"true\" />\n                    </button>\n                  }\n                </span>\n              }\n              @if (autoShowOverflow()) {\n                <span\n                  class=\"solaris-multi-select__chip-overflow\"\n                  [solarisTooltip]=\"autoOverflowTooltipText()\"\n                  [solarisTooltipTrigger]=\"'hover'\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"\n                    '+ ' +\n                    autoOverflowCount() +\n                    ' ' +\n                    selectedLabels().join(', ')\n                  \"\n                  >+{{ autoOverflowCount() }}</span\n                >\n              }\n            </div>\n          }\n        }\n        @if (searchable() && panelOpen()) {\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"solaris-multi-select__search-input\"\n            [attr.placeholder]=\"searchPlaceholderText()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n            (click)=\"$event.stopPropagation()\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n          />\n        }\n        @if (!hasValue() && !(searchable() && panelOpen())) {\n          <span class=\"solaris-multi-select__value\">\n            <span class=\"solaris-multi-select__placeholder\">{{\n              placeholderText()\n            }}</span>\n          </span>\n        }\n      } @else {\n        @if (searchable() && panelOpen()) {\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"solaris-multi-select__search-input\"\n            [attr.placeholder]=\"searchPlaceholderText()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n            (click)=\"$event.stopPropagation()\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n          />\n        } @else {\n          @if (hasValue()) {\n            @if (displayMode() === 'chips') {\n              <div class=\"solaris-multi-select__chips\">\n                @for (\n                  opt of selectedOptions().slice(0, maxVisibleChips());\n                  track opt\n                ) {\n                  <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n                    <span class=\"solaris-multi-select__chip-label\">{{\n                      getOptionDisplayLabel(opt)\n                    }}</span>\n                    @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n                      <button\n                        type=\"button\"\n                        class=\"solaris-multi-select__chip-remove\"\n                        [attr.aria-label]=\"removeChipAriaLabel()\"\n                        (click)=\"removeChip(opt, $event)\"\n                        tabindex=\"-1\"\n                      >\n                        <solaris-icon name=\"x\" [decorative]=\"true\" />\n                      </button>\n                    }\n                  </span>\n                }\n                @if (overflowCount() > 0) {\n                  <span\n                    class=\"solaris-multi-select__chip-overflow\"\n                    [attr.aria-label]=\"\n                      '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n                    \"\n                  >\n                    {{ overflowText() }}\n                  </span>\n                }\n              </div>\n            } @else if (displayMode() === 'comma') {\n              <span class=\"solaris-multi-select__value\">\n                <span class=\"solaris-multi-select__value-text\">{{\n                  commaText()\n                }}</span>\n              </span>\n            } @else {\n              <span\n                class=\"solaris-multi-select__chip\"\n                [solarisTooltip]=\"countTooltipText()\"\n                [solarisTooltipTrigger]=\"'hover'\"\n                tabindex=\"0\"\n              >\n                <span class=\"solaris-multi-select__chip-label\">{{\n                  summaryText()\n                }}</span>\n              </span>\n            }\n          } @else {\n            <span class=\"solaris-multi-select__value\">\n              <span class=\"solaris-multi-select__placeholder\">{{\n                placeholderText()\n              }}</span>\n            </span>\n          }\n        }\n      }\n    </div>\n\n    <span class=\"solaris-multi-select__actions\">\n      @if (canClear() && !loading()) {\n        <button\n          type=\"button\"\n          class=\"solaris-multi-select__clear\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue(); $event.stopPropagation()\"\n          tabindex=\"-1\"\n        >\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\n        </button>\n      }\n\n      @if (!loading()) {\n        <solaris-icon\n          class=\"solaris-multi-select__dropdown-icon\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n          size=\"sm\"\n        />\n      }\n    </span>\n  </div>\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n  <div\n    class=\"solaris-multi-select__panel\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"'true'\"\n    [attr.id]=\"panelId\"\n    tabindex=\"-1\"\n    (click)=\"onPanelClick($event)\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    @if (selectAll() && !loading()) {\n      <div\n        class=\"solaris-multi-select__select-all\"\n        role=\"option\"\n        aria-selected=\"false\"\n        tabindex=\"-1\"\n        (click)=\"handleSelectAll()\"\n        (keydown.enter)=\"handleSelectAll()\"\n        (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n        [class.solaris-multi-select__select-all--readonly]=\"\n          isEffectivelyReadonly()\n        \"\n      >\n        <span\n          class=\"solaris-multi-select__select-all-checkbox\"\n          [class.solaris-multi-select__select-all-checkbox--checked]=\"\n            isAllSelected()\n          \"\n          [class.solaris-multi-select__select-all-checkbox--partial]=\"\n            isPartialSelected()\n          \"\n        >\n          @if (isAllSelected()) {\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n              <solaris-icon name=\"check\" [decorative]=\"true\" />\n            </span>\n          } @else if (isPartialSelected()) {\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n              <solaris-icon name=\"minus\" [decorative]=\"true\" />\n            </span>\n          }\n        </span>\n        <span class=\"solaris-multi-select__select-all-label\">{{\n          selectAllLabelText()\n        }}</span>\n      </div>\n    }\n\n    @if (loading()) {\n      <div class=\"solaris-multi-select__loading\">\n        <span class=\"solaris-multi-select__loading-text\">{{\n          loadingTextValue()\n        }}</span>\n      </div>\n    } @else if (showNoResults()) {\n      <div class=\"solaris-multi-select__no-results\">\n        <span class=\"solaris-multi-select__no-results-text\">{{\n          noResultsTextValue()\n        }}</span>\n      </div>\n    } @else if (showEmpty()) {\n      <div class=\"solaris-multi-select__empty\">\n        <span class=\"solaris-multi-select__empty-text\">{{\n          emptyTextValue()\n        }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"solaris-multi-select__options\"\n        [style.max-height]=\"panelMaxHeight()\"\n      >\n        <ng-content select=\"solaris-option, solaris-option-group\" />\n      </div>\n    }\n  </div>\n</ng-template>\n",
+			template: "<solaris-form-field\n  [control]=\"this\"\n  [label]=\"labelText()\"\n  [hint]=\"hintText()\"\n  [error]=\"errorText()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [required]=\"requiredInput()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"!!prefix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  solaris-popover-trigger\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverTriggerFor]=\"matchWidthPopover\"\n  [class.solaris-multi-select--panel-open]=\"panelOpen()\"\n  [solarisPopoverMatchTriggerWidth]=\"panelMatchTriggerWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"0\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverTopConnected]=\"true\"\n  [solarisPopoverMinWidth]=\"effectivePanelMinWidth()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverScrollStrategy]=\"'reposition'\"\n  [solarisPopoverCloseOnEscape]=\"false\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix(); as iconName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"iconName\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n\n  <div\n    #triggerEl\n    class=\"solaris-multi-select__trigger\"\n    [id]=\"elementId() + '--trigger'\"\n    [style.min-width.px]=\"contentMinWidth() || null\"\n    solaris-form-field-trigger\n    role=\"combobox\"\n    tabindex=\"0\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [attr.aria-controls]=\"panelOpen() ? panelId : null\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-activedescendant]=\"activeDescendantId()\"\n    [attr.aria-labelledby]=\"ariaLabelledbyText() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy() ?? null\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <div class=\"solaris-multi-select__trigger-content\" #triggerContent>\n      @if (displayMode() === 'auto') {\n        @if (hasValue()) {\n          @if (showCountOnly()) {\n            <span\n              class=\"solaris-multi-select__chip\"\n              [solarisTooltip]=\"countTooltipText()\"\n              [solarisTooltipTrigger]=\"'hover'\"\n              tabindex=\"0\"\n            >\n              <span class=\"solaris-multi-select__chip-label\">{{\n                summaryText()\n              }}</span>\n            </span>\n          } @else {\n            <div\n              class=\"solaris-multi-select__chips solaris-multi-select__chips--auto\"\n            >\n              @for (opt of autoVisibleChips(); track opt) {\n                <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n                  <span class=\"solaris-multi-select__chip-label\">{{\n                    getOptionDisplayLabel(opt)\n                  }}</span>\n                  @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n                    <button\n                      type=\"button\"\n                      class=\"solaris-multi-select__chip-remove\"\n                      [attr.aria-label]=\"removeChipAriaLabel()\"\n                      (click)=\"removeChip(opt, $event)\"\n                      tabindex=\"-1\"\n                    >\n                      <solaris-icon name=\"x\" [decorative]=\"true\" />\n                    </button>\n                  }\n                </span>\n              }\n              @if (autoShowOverflow()) {\n                <span\n                  class=\"solaris-multi-select__chip-overflow\"\n                  [solarisTooltip]=\"autoOverflowTooltipText()\"\n                  [solarisTooltipTrigger]=\"'hover'\"\n                  tabindex=\"0\"\n                  [attr.aria-label]=\"\n                    '+ ' +\n                    autoOverflowCount() +\n                    ' ' +\n                    selectedLabels().join(', ')\n                  \"\n                  >+{{ autoOverflowCount() }}</span\n                >\n              }\n            </div>\n          }\n        }\n        @if (searchable() && panelOpen()) {\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"solaris-multi-select__search-input\"\n            [attr.placeholder]=\"searchPlaceholderText()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n            (click)=\"$event.stopPropagation()\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n          />\n        }\n        @if (!hasValue() && !(searchable() && panelOpen())) {\n          <span class=\"solaris-multi-select__value\">\n            <span class=\"solaris-multi-select__placeholder\">{{\n              placeholderText()\n            }}</span>\n          </span>\n        }\n      } @else {\n        @if (searchable() && panelOpen()) {\n          <input\n            #searchInput\n            type=\"text\"\n            class=\"solaris-multi-select__search-input\"\n            [attr.placeholder]=\"searchPlaceholderText()\"\n            [value]=\"searchQuery()\"\n            (input)=\"onSearchInput($event)\"\n            (keydown)=\"onSearchKeydown($event)\"\n            (click)=\"$event.stopPropagation()\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n          />\n        } @else {\n          @if (hasValue()) {\n            @if (displayMode() === 'chips') {\n              <div class=\"solaris-multi-select__chips\">\n                @for (\n                  opt of selectedOptions().slice(0, maxVisibleChips());\n                  track opt\n                ) {\n                  <span class=\"solaris-multi-select__chip\" role=\"listitem\">\n                    <span class=\"solaris-multi-select__chip-label\">{{\n                      getOptionDisplayLabel(opt)\n                    }}</span>\n                    @if (!isEffectivelyDisabled() && !isEffectivelyReadonly()) {\n                      <button\n                        type=\"button\"\n                        class=\"solaris-multi-select__chip-remove\"\n                        [attr.aria-label]=\"removeChipAriaLabel()\"\n                        (click)=\"removeChip(opt, $event)\"\n                        tabindex=\"-1\"\n                      >\n                        <solaris-icon name=\"x\" [decorative]=\"true\" />\n                      </button>\n                    }\n                  </span>\n                }\n                @if (overflowCount() > 0) {\n                  <span\n                    class=\"solaris-multi-select__chip-overflow\"\n                    [attr.aria-label]=\"\n                      '+ ' + overflowCount() + ' ' + selectedLabels().join(', ')\n                    \"\n                  >\n                    {{ overflowText() }}\n                  </span>\n                }\n              </div>\n            } @else if (displayMode() === 'comma') {\n              <span class=\"solaris-multi-select__value\">\n                <span class=\"solaris-multi-select__value-text\">{{\n                  commaText()\n                }}</span>\n              </span>\n            } @else {\n              <span\n                class=\"solaris-multi-select__chip\"\n                [solarisTooltip]=\"countTooltipText()\"\n                [solarisTooltipTrigger]=\"'hover'\"\n                tabindex=\"0\"\n              >\n                <span class=\"solaris-multi-select__chip-label\">{{\n                  summaryText()\n                }}</span>\n              </span>\n            }\n          } @else {\n            <span class=\"solaris-multi-select__value\">\n              <span class=\"solaris-multi-select__placeholder\">{{\n                placeholderText()\n              }}</span>\n            </span>\n          }\n        }\n      }\n    </div>\n\n    <span class=\"solaris-multi-select__actions\">\n      @if (canClear() && !loading()) {\n        <button\n          type=\"button\"\n          class=\"solaris-multi-select__clear\"\n          [attr.aria-label]=\"clearAriaLabel()\"\n          (click)=\"clearValue(); $event.stopPropagation()\"\n          tabindex=\"-1\"\n        >\n          <solaris-icon name=\"x\" [decorative]=\"true\" />\n        </button>\n      }\n\n      @if (!loading()) {\n        <solaris-icon\n          class=\"solaris-multi-select__dropdown-icon\"\n          name=\"chevron-down\"\n          [decorative]=\"true\"\n          size=\"sm\"\n        />\n      }\n    </span>\n  </div>\n</solaris-form-field>\n\n<ng-template #matchWidthPopover=\"solarisPopover\" solaris-popover>\n  <div\n    class=\"solaris-multi-select__panel\"\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"'true'\"\n    [attr.id]=\"panelId\"\n    tabindex=\"-1\"\n    (click)=\"onPanelClick($event)\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    @if (selectAll() && !loading()) {\n      <div\n        class=\"solaris-multi-select__select-all\"\n        role=\"option\"\n        aria-selected=\"false\"\n        tabindex=\"-1\"\n        (click)=\"handleSelectAll()\"\n        (keydown.enter)=\"handleSelectAll()\"\n        (keydown.space)=\"handleSelectAll(); $event.preventDefault()\"\n        [class.solaris-multi-select__select-all--readonly]=\"\n          isEffectivelyReadonly()\n        \"\n      >\n        <span\n          class=\"solaris-multi-select__select-all-checkbox\"\n          [class.solaris-multi-select__select-all-checkbox--checked]=\"\n            isAllSelected()\n          \"\n          [class.solaris-multi-select__select-all-checkbox--partial]=\"\n            isPartialSelected()\n          \"\n        >\n          @if (isAllSelected()) {\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n              <solaris-icon name=\"check\" [decorative]=\"true\" />\n            </span>\n          } @else if (isPartialSelected()) {\n            <span class=\"solaris-multi-select__select-all-checkbox-icon\">\n              <solaris-icon name=\"minus\" [decorative]=\"true\" />\n            </span>\n          }\n        </span>\n        <span class=\"solaris-multi-select__select-all-label\">{{\n          selectAllLabelText()\n        }}</span>\n      </div>\n    }\n\n    @if (loading()) {\n      <div class=\"solaris-multi-select__loading\">\n        <span class=\"solaris-multi-select__loading-text\">{{\n          loadingTextValue()\n        }}</span>\n      </div>\n    } @else if (showNoResults()) {\n      <div class=\"solaris-multi-select__no-results\">\n        <span class=\"solaris-multi-select__no-results-text\">{{\n          noResultsTextValue()\n        }}</span>\n      </div>\n    } @else if (showEmpty()) {\n      <div class=\"solaris-multi-select__empty\">\n        <span class=\"solaris-multi-select__empty-text\">{{\n          emptyTextValue()\n        }}</span>\n      </div>\n    } @else {\n      <div\n        class=\"solaris-multi-select__options\"\n        [style.max-height]=\"panelMaxHeight()\"\n      >\n        <ng-content select=\"solaris-option, solaris-option-group\" />\n      </div>\n    }\n  </div>\n</ng-template>\n",
 			styles: [":host{--solaris-on-primary: var(--solaris-primary-on-solid);--solaris-surface-hover: var(--solaris-neutral-subtle);--solaris-primary-muted: var(--solaris-primary-soft);--solaris-multi-select-chip-gap: var(--solaris-spacing-5);--solaris-multi-select-chip-radius: var(--solaris-radius-sm);--solaris-multi-select-icon-color: var(--solaris-neutral-text-secondary);--solaris-multi-select-font-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-color: var(--solaris-neutral-text-body);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-value-color: var(--solaris-neutral-text-body);--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-checkbox-radius: var(--solaris-radius-sm);--solaris-multi-select-line-height: var(--solaris-line-height-md);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-select-all-height: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-placeholder-color: var( --solaris-neutral-text-secondary );--solaris-multi-select-chip-remove-size: var(--solaris-font-size-sm);--solaris-multi-select-chip-background: var(--solaris-neutral-subtle);--solaris-multi-select-placeholder-opacity: var(--solaris-opacity-70);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1);outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;font-family:var(--solaris-font-family-sans),system-ui}.solaris-multi-select__trigger{flex:1;padding:0;min-width:0;border:none;outline:none;display:flex;cursor:pointer;align-items:center;box-sizing:border-box;background:transparent;gap:var(--solaris-spacing-4)}:host ::ng-deep .solaris-form-field__message-row{margin-top:0}:host ::ng-deep solaris-form-field[data-loading] .solaris-multi-select__trigger{padding-inline-end:var(--solaris-form-field-affix-size)}:host ::ng-deep .solaris-multi-select--panel-open .solaris-form-field__message-row{display:none}.solaris-multi-select__trigger-content{flex:1;min-width:0;display:flex;overflow:hidden;align-items:center;gap:var(--solaris-spacing-3)}.solaris-multi-select__value{flex:none;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__value-text{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__placeholder{font-size:var(--solaris-multi-select-font-size);color:var(--solaris-multi-select-placeholder-color);line-height:var(--solaris-multi-select-line-height);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__chips{flex:1;min-width:0;display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;gap:var(--solaris-multi-select-chip-gap)}.solaris-multi-select__chips--auto{flex:none;flex-wrap:nowrap}.solaris-multi-select__chips--auto .solaris-multi-select__chip{flex-shrink:0}.solaris-multi-select__chip{align-items:center;white-space:nowrap;display:inline-flex;gap:var(--solaris-spacing-1);line-height:var(--solaris-line-height-sm);color:var(--solaris-multi-select-chip-color);font-size:var(--solaris-multi-select-chip-font-size);border-radius:var(--solaris-multi-select-chip-radius);background:var(--solaris-multi-select-chip-background);border:var(--solaris-border-width-sm) solid var(--solaris-neutral-border-default);padding:var(--solaris-multi-select-chip-padding-y) var(--solaris-multi-select-chip-padding-x)}.solaris-multi-select__chip-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-multi-select__chip-remove solaris-icon{width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size)}.solaris-multi-select__chip-remove{padding:0;border:none;display:flex;flex-shrink:0;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;color:var(--solaris-multi-select-icon-color);width:var(--solaris-multi-select-chip-remove-size);height:var(--solaris-multi-select-chip-remove-size);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__chip-remove:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__chip-overflow{flex-shrink:0;white-space:nowrap;color:var(--solaris-multi-select-icon-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--solaris-spacing-3);margin-inline-start:auto}.solaris-multi-select__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-multi-select-icon-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__clear:hover{color:var(--solaris-neutral-text-body)}.solaris-multi-select__dropdown-icon solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-multi-select__dropdown-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-multi-select-icon-color);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-multi-select__dropdown-icon{transform:rotate(180deg)}.solaris-multi-select__panel{display:flex;overflow-y:auto;flex-direction:column;overscroll-behavior:contain;animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}.solaris-multi-select__search-input{flex:1;margin:0;padding:0;width:0;border:none;min-width:0;outline:none;font-family:inherit;box-sizing:border-box;background:transparent;color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__search-input::placeholder{color:var(--solaris-multi-select-placeholder-color);opacity:var(--solaris-multi-select-placeholder-opacity)}.solaris-multi-select__loading,.solaris-multi-select__no-results,.solaris-multi-select__empty{display:flex;align-items:center;justify-content:center;color:var(--solaris-neutral-text-secondary);padding:var(--solaris-spacing-4);font-size:var(--solaris-font-size-sm);line-height:var(--solaris-line-height-md)}.solaris-multi-select__options{display:flex;flex-direction:column;gap:var(--solaris-spacing-1);padding:var(--solaris-spacing-1) var(--solaris-spacing-2)}.solaris-multi-select__select-all{display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--solaris-spacing-2);min-height:var(--solaris-multi-select-select-all-height);padding:var(--solaris-spacing-2) var(--solaris-spacing-3);transition:background var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-multi-select__select-all:hover{background:var(--solaris-surface-hover)}.solaris-multi-select__select-all-checkbox{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;justify-content:center;width:var(--solaris-multi-select-checkbox-size);height:var(--solaris-multi-select-checkbox-size);border-radius:var(--solaris-multi-select-checkbox-radius);background:var(--solaris-neutral-default);border:var(--solaris-multi-select-checkbox-border-width) solid var(--solaris-primary-border)}.solaris-multi-select__select-all-checkbox--checked{background:var(--solaris-primary-solid);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox--partial{background:var(--solaris-primary-muted);border-color:var(--solaris-primary-solid)}.solaris-multi-select__select-all-checkbox-icon{display:flex;align-items:center;box-sizing:border-box;justify-content:center;color:var(--solaris-on-primary);width:var(--solaris-multi-select-checkbox-icon-size);height:var(--solaris-multi-select-checkbox-icon-size);font-size:var(--solaris-multi-select-checkbox-icon-size)}.solaris-multi-select__select-all-checkbox-icon solaris-icon{width:1em;height:1em}.solaris-multi-select__select-all-label{color:var(--solaris-multi-select-value-color);font-size:var(--solaris-multi-select-font-size);line-height:var(--solaris-multi-select-line-height)}.solaris-multi-select__select-all--readonly{cursor:default;opacity:var(--solaris-opacity-50)}:host([data-size=sm][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-2);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=compact]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-1);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-3);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: var(--solaris-spacing-8);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=normal]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-size=sm][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-2);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-4);--solaris-multi-select-chip-font-size: var(--solaris-font-size-xs);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-7) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-5);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=md][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-3);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-5);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: calc( var(--solaris-spacing-8) + var(--solaris-spacing-2) );--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-6);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-1)}:host([data-size=lg][data-density=comfortable]){--solaris-multi-select-chip-padding-y: var(--solaris-spacing-4);--solaris-multi-select-chip-padding-x: var(--solaris-spacing-6);--solaris-multi-select-chip-font-size: var(--solaris-font-size-sm);--solaris-multi-select-checkbox-size: var(--solaris-spacing-9);--solaris-multi-select-checkbox-icon-size: var(--solaris-spacing-7);--solaris-multi-select-checkbox-border-width: var(--solaris-spacing-2)}:host([data-disabled]){cursor:not-allowed}:host([data-readonly]){cursor:default}@media(prefers-reduced-motion:reduce){.solaris-multi-select__dropdown-icon,.solaris-multi-select__clear{transition:none}.solaris-multi-select__panel{animation:none}}[data-reduced-motion=true] .solaris-multi-select__dropdown-icon,[data-reduced-motion=true] .solaris-multi-select__clear{transition:none}[data-reduced-motion=true] .solaris-multi-select__panel{animation:none}\n"]
 		}]
 	}],
@@ -47276,7 +47288,7 @@ var SolarisDatePickerComponent = class SolarisDatePickerComponent extends Solari
 		}],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<solaris-form-field\n  [control]=\"this\"\n  [radius]=\"radius()\"\n  [hint]=\"hintText()\"\n  [label]=\"labelText()\"\n  [error]=\"errorText()\"\n  solaris-popover-trigger\n  [appearance]=\"appearance()\"\n  [required]=\"requiredInput()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [solarisPopoverPadding]=\"'md'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [loading]=\"loading()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAriaHasPopup]=\"'dialog'\"\n  (solarisPopoverOpened)=\"onPanelOpened()\"\n  (solarisPopoverClosed)=\"onPanelClosed()\"\n  [solarisPopoverTriggerFor]=\"calendarPopover\"\n  [solarisPopoverDisabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix(); as prefixName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    [id]=\"id\"\n    type=\"text\"\n    #inputElement\n    solaris-input\n    autocomplete=\"off\"\n    inputmode=\"numeric\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [value]=\"displayValue()\"\n    (focus)=\"onInputFocus()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n    (click)=\"$event.stopPropagation()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    [attr.placeholder]=\"placeholderText()\"\n    [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n  />\n\n  <button\n    type=\"button\"\n    appearance=\"ghost\"\n    solaris-icon-button\n    solaris-form-suffix\n    solaris-form-suffix-action\n    class=\"solaris-date-picker__calendar-trigger\"\n    [size]=\"size()\"\n    [density]=\"effectiveDensity()\"\n    [attr.aria-label]=\"calendarButtonLabelText()\"\n    [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n  >\n    <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n  </button>\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-date-picker__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n\n<ng-template #calendarPopover=\"solarisPopover\" solaris-popover>\n  <div\n    role=\"dialog\"\n    class=\"solaris-date-picker__panel\"\n    [attr.aria-label]=\"calendarButtonLabelText()\"\n  >\n    <solaris-date-calendar\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [selected]=\"value()\"\n      [month]=\"displayedMonth()\"\n      [locale]=\"resolvedLocale()\"\n      [disabledDates]=\"disabledDates()\"\n      [weekStartsOn]=\"weekStartsOn()\"\n      [disablePast]=\"disablePast()\"\n      [disableFuture]=\"disableFuture()\"\n      [nextMonthLabel]=\"nextMonthLabel()\"\n      (selectedChange)=\"selectDate($event)\"\n      (monthChange)=\"setDisplayedMonth($event)\"\n      [previousMonthLabel]=\"previousMonthLabel()\"\n    />\n  </div>\n</ng-template>\n",
+		template: "<solaris-form-field\n  [control]=\"this\"\n  [radius]=\"radius()\"\n  [hint]=\"hintText()\"\n  [label]=\"labelText()\"\n  [error]=\"errorText()\"\n  solaris-popover-trigger\n  [appearance]=\"appearance()\"\n  [required]=\"requiredInput()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [solarisPopoverPadding]=\"'md'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [loading]=\"loading()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAriaHasPopup]=\"'dialog'\"\n  (solarisPopoverOpened)=\"onPanelOpened()\"\n  (solarisPopoverClosed)=\"onPanelClosed()\"\n  [solarisPopoverTriggerFor]=\"calendarPopover\"\n  [solarisPopoverDisabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix(); as prefixName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    [id]=\"id\"\n    type=\"text\"\n    #inputElement\n    solaris-input\n    autocomplete=\"off\"\n    inputmode=\"numeric\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [value]=\"displayValue()\"\n    (focus)=\"onInputFocus()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n    (click)=\"$event.stopPropagation()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    [attr.placeholder]=\"placeholderText()\"\n    [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n  />\n\n  <button\n    type=\"button\"\n    appearance=\"ghost\"\n    solaris-icon-button\n    solaris-form-suffix\n    solaris-form-suffix-action\n    class=\"solaris-date-picker__calendar-trigger\"\n    [size]=\"size()\"\n    [density]=\"effectiveDensity()\"\n    [attr.aria-label]=\"calendarButtonLabelText()\"\n    [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n  >\n    <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n  </button>\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-date-picker__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n\n<ng-template #calendarPopover=\"solarisPopover\" solaris-popover>\n  <div\n    role=\"dialog\"\n    class=\"solaris-date-picker__panel\"\n    [attr.aria-label]=\"calendarButtonLabelText()\"\n  >\n    <solaris-date-calendar\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [selected]=\"value()\"\n      [month]=\"displayedMonth()\"\n      [locale]=\"resolvedLocale()\"\n      [disabledDates]=\"disabledDates()\"\n      [weekStartsOn]=\"weekStartsOn()\"\n      [disablePast]=\"disablePast()\"\n      [disableFuture]=\"disableFuture()\"\n      [nextMonthLabel]=\"nextMonthLabel()\"\n      (selectedChange)=\"selectDate($event)\"\n      (monthChange)=\"setDisplayedMonth($event)\"\n      [previousMonthLabel]=\"previousMonthLabel()\"\n    />\n  </div>\n</ng-template>\n",
 		styles: [":host{display:block}.solaris-date-picker__panel{width:calc(var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16));animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}[solaris-button].solaris-date-picker__calendar-trigger,.solaris-date-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-picker__calendar-trigger:hover,[solaris-button].solaris-date-picker__calendar-trigger:active,.solaris-date-picker__calendar-trigger:hover,.solaris-date-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-picker__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-picker__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-date-picker__panel{animation:none}.solaris-date-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-picker__clear{transition:none}\n"],
 		dependencies: [
 			{
@@ -47479,7 +47491,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.data-density]": "effectiveDensity()",
 				"[attr.data-open]": "panelOpen() ? \"\" : null"
 			},
-			template: "<solaris-form-field\n  [control]=\"this\"\n  [radius]=\"radius()\"\n  [hint]=\"hintText()\"\n  [label]=\"labelText()\"\n  [error]=\"errorText()\"\n  solaris-popover-trigger\n  [appearance]=\"appearance()\"\n  [required]=\"requiredInput()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [solarisPopoverPadding]=\"'md'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [loading]=\"loading()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAriaHasPopup]=\"'dialog'\"\n  (solarisPopoverOpened)=\"onPanelOpened()\"\n  (solarisPopoverClosed)=\"onPanelClosed()\"\n  [solarisPopoverTriggerFor]=\"calendarPopover\"\n  [solarisPopoverDisabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix(); as prefixName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    [id]=\"id\"\n    type=\"text\"\n    #inputElement\n    solaris-input\n    autocomplete=\"off\"\n    inputmode=\"numeric\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [value]=\"displayValue()\"\n    (focus)=\"onInputFocus()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n    (click)=\"$event.stopPropagation()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    [attr.placeholder]=\"placeholderText()\"\n    [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n  />\n\n  <button\n    type=\"button\"\n    appearance=\"ghost\"\n    solaris-icon-button\n    solaris-form-suffix\n    solaris-form-suffix-action\n    class=\"solaris-date-picker__calendar-trigger\"\n    [size]=\"size()\"\n    [density]=\"effectiveDensity()\"\n    [attr.aria-label]=\"calendarButtonLabelText()\"\n    [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n  >\n    <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n  </button>\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-date-picker__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n\n<ng-template #calendarPopover=\"solarisPopover\" solaris-popover>\n  <div\n    role=\"dialog\"\n    class=\"solaris-date-picker__panel\"\n    [attr.aria-label]=\"calendarButtonLabelText()\"\n  >\n    <solaris-date-calendar\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [selected]=\"value()\"\n      [month]=\"displayedMonth()\"\n      [locale]=\"resolvedLocale()\"\n      [disabledDates]=\"disabledDates()\"\n      [weekStartsOn]=\"weekStartsOn()\"\n      [disablePast]=\"disablePast()\"\n      [disableFuture]=\"disableFuture()\"\n      [nextMonthLabel]=\"nextMonthLabel()\"\n      (selectedChange)=\"selectDate($event)\"\n      (monthChange)=\"setDisplayedMonth($event)\"\n      [previousMonthLabel]=\"previousMonthLabel()\"\n    />\n  </div>\n</ng-template>\n",
+			template: "<solaris-form-field\n  [control]=\"this\"\n  [radius]=\"radius()\"\n  [hint]=\"hintText()\"\n  [label]=\"labelText()\"\n  [error]=\"errorText()\"\n  solaris-popover-trigger\n  [appearance]=\"appearance()\"\n  [required]=\"requiredInput()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [solarisPopoverPadding]=\"'md'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [invalid]=\"isEffectivelyInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [loading]=\"loading()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAriaHasPopup]=\"'dialog'\"\n  (solarisPopoverOpened)=\"onPanelOpened()\"\n  (solarisPopoverClosed)=\"onPanelClosed()\"\n  [solarisPopoverTriggerFor]=\"calendarPopover\"\n  [solarisPopoverDisabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix(); as prefixName) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefixName\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    [id]=\"id\"\n    type=\"text\"\n    #inputElement\n    solaris-input\n    autocomplete=\"off\"\n    inputmode=\"numeric\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [value]=\"displayValue()\"\n    (focus)=\"onInputFocus()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onInputKeydown($event)\"\n    (click)=\"$event.stopPropagation()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    [attr.placeholder]=\"placeholderText()\"\n    [attr.aria-describedby]=\"describedByIds.join(' ') || null\"\n  />\n\n  <button\n    type=\"button\"\n    appearance=\"ghost\"\n    solaris-icon-button\n    solaris-form-suffix\n    solaris-form-suffix-action\n    class=\"solaris-date-picker__calendar-trigger\"\n    [size]=\"size()\"\n    [density]=\"effectiveDensity()\"\n    [attr.aria-label]=\"calendarButtonLabelText()\"\n    [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n  >\n    <solaris-icon name=\"calendar\" [decorative]=\"true\" />\n  </button>\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-date-picker__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix(); as suffixName) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffixName\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n\n<ng-template #calendarPopover=\"solarisPopover\" solaris-popover>\n  <div\n    role=\"dialog\"\n    class=\"solaris-date-picker__panel\"\n    [attr.aria-label]=\"calendarButtonLabelText()\"\n  >\n    <solaris-date-calendar\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [selected]=\"value()\"\n      [month]=\"displayedMonth()\"\n      [locale]=\"resolvedLocale()\"\n      [disabledDates]=\"disabledDates()\"\n      [weekStartsOn]=\"weekStartsOn()\"\n      [disablePast]=\"disablePast()\"\n      [disableFuture]=\"disableFuture()\"\n      [nextMonthLabel]=\"nextMonthLabel()\"\n      (selectedChange)=\"selectDate($event)\"\n      (monthChange)=\"setDisplayedMonth($event)\"\n      [previousMonthLabel]=\"previousMonthLabel()\"\n    />\n  </div>\n</ng-template>\n",
 			styles: [":host{display:block}.solaris-date-picker__panel{width:calc(var(--solaris-spacing-17) * 2 + var(--solaris-spacing-16));animation:solaris-motion-overlay-enter-top var(--solaris-motion-duration-normal) var(--solaris-motion-easing-decelerate) both}[solaris-button].solaris-date-picker__calendar-trigger,.solaris-date-picker__calendar-trigger{color:var(--solaris-neutral-text-secondary)!important;background:transparent!important;cursor:pointer}[solaris-button].solaris-date-picker__calendar-trigger:hover,[solaris-button].solaris-date-picker__calendar-trigger:active,.solaris-date-picker__calendar-trigger:hover,.solaris-date-picker__calendar-trigger:active{color:var(--solaris-neutral-text-heading)!important;background:transparent!important}.solaris-date-picker__calendar-trigger solaris-icon{cursor:pointer}.solaris-date-picker__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-date-picker__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-date-picker__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-date-picker__panel{animation:none}.solaris-date-picker__clear{transition:none}}[data-reduced-motion=true] .solaris-date-picker__panel{animation:none}[data-reduced-motion=true] .solaris-date-picker__clear{transition:none}\n"]
 		}]
 	}],
@@ -50723,7 +50735,7 @@ var SolarisPasswordFieldComponent = class SolarisPasswordFieldComponent extends
 		}],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonlyInput()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    #inputElement\n    solaris-input\n    [type]=\"inputType()\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonlyInput()\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (focus)=\"onInputFocus()\"\n    [value]=\"internalValue()\"\n    (input)=\"onInput($event)\"\n    [attr.name]=\"name() ?? null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.autocomplete]=\"autocomplete() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (showToggle()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      solaris-form-suffix-action\n      (click)=\"toggleVisibility()\"\n      [attr.aria-label]=\"toggleLabel()\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      class=\"solaris-password-field__toggle\"\n    >\n      <solaris-icon\n        [decorative]=\"true\"\n        [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n      />\n    </button>\n  }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n  <div class=\"solaris-password-field__requirements\" role=\"list\">\n    @for (req of requirementList(); track req.key) {\n      <div\n        class=\"solaris-password-field__requirement\"\n        role=\"listitem\"\n        [attr.data-met]=\"req.met\"\n      >\n        <solaris-icon\n          class=\"solaris-password-field__requirement-icon\"\n          [name]=\"req.met ? 'check' : 'x'\"\n          [decorative]=\"true\"\n        />\n        <span class=\"solaris-password-field__requirement-label\">\n          {{ req.label }}\n        </span>\n      </div>\n    }\n  </div>\n}\n\n@if (showStrength() && internalValue().length > 0) {\n  <div\n    class=\"solaris-password-field__strength\"\n    [attr.data-level]=\"strengthLevel()\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    <div class=\"solaris-password-field__strength-bar\">\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() !== 'empty'\"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"\n          strengthLevel() === 'medium' || strengthLevel() === 'strong'\n        \"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() === 'strong'\"\n      ></div>\n    </div>\n    <span class=\"solaris-password-field__strength-label\">\n      {{ strengthLabelText() }}\n    </span>\n  </div>\n}\n",
+		template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonlyInput()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    #inputElement\n    solaris-input\n    [type]=\"inputType()\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonlyInput()\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (focus)=\"onInputFocus()\"\n    [value]=\"internalValue()\"\n    (input)=\"onInput($event)\"\n    [attr.name]=\"name() ?? null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.autocomplete]=\"autocomplete() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (showToggle()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      solaris-form-suffix-action\n      (click)=\"toggleVisibility()\"\n      [attr.aria-label]=\"toggleLabel()\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      class=\"solaris-password-field__toggle\"\n    >\n      <solaris-icon\n        [decorative]=\"true\"\n        [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n      />\n    </button>\n  }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n  <div class=\"solaris-password-field__requirements\" role=\"list\">\n    @for (req of requirementList(); track req.key) {\n      <div\n        class=\"solaris-password-field__requirement\"\n        role=\"listitem\"\n        [attr.data-met]=\"req.met\"\n      >\n        <solaris-icon\n          class=\"solaris-password-field__requirement-icon\"\n          [name]=\"req.met ? 'check' : 'x'\"\n          [decorative]=\"true\"\n        />\n        <span class=\"solaris-password-field__requirement-label\">\n          {{ req.label }}\n        </span>\n      </div>\n    }\n  </div>\n}\n\n@if (showStrength() && internalValue().length > 0) {\n  <div\n    class=\"solaris-password-field__strength\"\n    [attr.data-level]=\"strengthLevel()\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    <div class=\"solaris-password-field__strength-bar\">\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() !== 'empty'\"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"\n          strengthLevel() === 'medium' || strengthLevel() === 'strong'\n        \"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() === 'strong'\"\n      ></div>\n    </div>\n    <span class=\"solaris-password-field__strength-label\">\n      {{ strengthLabelText() }}\n    </span>\n  </div>\n}\n",
 		styles: [":host{--solaris-password-field-strength-height: var(--solaris-spacing-3);--solaris-password-field-strength-gap: var(--solaris-spacing-2);--solaris-password-field-requirement-gap: var(--solaris-spacing-1);--solaris-password-field-strength-radius: var(--solaris-radius-sm);--solaris-password-field-requirement-color: var( --solaris-neutral-text-secondary );--solaris-password-field-strength-bar-bg: var(--solaris-neutral-sunken);--solaris-password-field-strength-weak-color: var( --solaris-danger-foreground );--solaris-password-field-requirement-met-color: var( --solaris-success-foreground );--solaris-password-field-strength-medium-color: var( --solaris-warning-foreground );--solaris-password-field-strength-strong-color: var( --solaris-success-foreground );--solaris-password-field-requirement-unmet-color: var( --solaris-danger-foreground );display:block;box-sizing:border-box}:host(:not([data-full-width])){display:inline-block;width:auto}.solaris-password-field__toggle:disabled{cursor:not-allowed;pointer-events:none;opacity:var(--solaris-opacity-50)}.solaris-password-field__toggle{margin:0;padding:0;padding-inline:var(--solaris-density-padding-sm);border:none;font:inherit;line-height:var(--solaris-line-height-none);cursor:pointer;appearance:none;background:none;color:var(--solaris-neutral-text-secondary);box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-password-field__toggle:hover,.solaris-password-field__toggle:active{color:var(--solaris-neutral-text-heading)}.solaris-form-suffix solaris-icon{cursor:pointer;width:1em;height:1em;transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__toggle solaris-icon{width:1em;height:1em}:host([data-size=sm][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-sm)}:host([data-size=sm][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=sm][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=md][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=lg][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-2xl)}.solaris-password-field__requirements{padding:0;display:flex;list-style:none;flex-direction:column;margin-top:var(--solaris-spacing-2);gap:var(--solaris-password-field-requirement-gap)}.solaris-password-field__requirement{display:flex;align-items:center;gap:var(--solaris-spacing-1);font-size:var(--solaris-font-size-sm);color:var(--solaris-password-field-requirement-unmet-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__requirement[data-met=true]{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement-icon{width:1em;height:1em;flex-shrink:0}.solaris-password-field__requirement[data-met=true] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement[data-met=false] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-unmet-color)}.solaris-password-field__strength{display:flex;align-items:center;margin-top:var(--solaris-spacing-1);gap:var(--solaris-password-field-strength-gap)}.solaris-password-field__strength-bar{flex:1;display:flex;gap:var(--solaris-spacing-2);min-width:var(--solaris-spacing-15);height:var(--solaris-password-field-strength-height)}.solaris-password-field__strength-segment{flex:1;height:100%;background:var(--solaris-password-field-strength-bar-bg);border-radius:var(--solaris-password-field-strength-radius);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__strength[data-level=weak] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-weak-color)}.solaris-password-field__strength[data-level=medium] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-medium-color)}.solaris-password-field__strength[data-level=strong] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-strong-color)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;display:none!important}.solaris-password-field__strength-label{flex-shrink:0;white-space:nowrap;color:var(--solaris-neutral-text-secondary);font-size:var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-password-field__requirement,.solaris-password-field__strength-segment{transition:none}}\n"],
 		dependencies: [
 			{
@@ -50778,6 +50790,11 @@ var SolarisPasswordFieldComponent = class SolarisPasswordFieldComponent extends
 					"fullWidth"
 				]
 			},
+			{
+				kind: "directive",
+				type: SolarisFormPrefixDirective,
+				selector: "[solaris-form-prefix]"
+			},
 			{
 				kind: "directive",
 				type: SolarisFormSuffixDirective,
@@ -50821,6 +50838,7 @@ i0.ɵɵngDeclareClassMetadata({
 				FormsModule,
 				SolarisFormFieldComponent,
 				SolarisInputDirective,
+				SolarisFormPrefixDirective,
 				SolarisFormSuffixDirective,
 				SolarisFormSuffixActionDirective,
 				SolarisIconComponent
@@ -50839,7 +50857,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.data-density]": "effectiveDensity()",
 				"[attr.data-full-width]": "fullWidth() || undefined"
 			},
-			template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonlyInput()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    #inputElement\n    solaris-input\n    [type]=\"inputType()\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonlyInput()\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (focus)=\"onInputFocus()\"\n    [value]=\"internalValue()\"\n    (input)=\"onInput($event)\"\n    [attr.name]=\"name() ?? null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.autocomplete]=\"autocomplete() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (showToggle()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      solaris-form-suffix-action\n      (click)=\"toggleVisibility()\"\n      [attr.aria-label]=\"toggleLabel()\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      class=\"solaris-password-field__toggle\"\n    >\n      <solaris-icon\n        [decorative]=\"true\"\n        [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n      />\n    </button>\n  }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n  <div class=\"solaris-password-field__requirements\" role=\"list\">\n    @for (req of requirementList(); track req.key) {\n      <div\n        class=\"solaris-password-field__requirement\"\n        role=\"listitem\"\n        [attr.data-met]=\"req.met\"\n      >\n        <solaris-icon\n          class=\"solaris-password-field__requirement-icon\"\n          [name]=\"req.met ? 'check' : 'x'\"\n          [decorative]=\"true\"\n        />\n        <span class=\"solaris-password-field__requirement-label\">\n          {{ req.label }}\n        </span>\n      </div>\n    }\n  </div>\n}\n\n@if (showStrength() && internalValue().length > 0) {\n  <div\n    class=\"solaris-password-field__strength\"\n    [attr.data-level]=\"strengthLevel()\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    <div class=\"solaris-password-field__strength-bar\">\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() !== 'empty'\"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"\n          strengthLevel() === 'medium' || strengthLevel() === 'strong'\n        \"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() === 'strong'\"\n      ></div>\n    </div>\n    <span class=\"solaris-password-field__strength-label\">\n      {{ strengthLabelText() }}\n    </span>\n  </div>\n}\n",
+			template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonlyInput()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    #inputElement\n    solaris-input\n    [type]=\"inputType()\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonlyInput()\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (focus)=\"onInputFocus()\"\n    [value]=\"internalValue()\"\n    (input)=\"onInput($event)\"\n    [attr.name]=\"name() ?? null\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.autocomplete]=\"autocomplete() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n  />\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  @if (showToggle()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      solaris-form-suffix-action\n      (click)=\"toggleVisibility()\"\n      [attr.aria-label]=\"toggleLabel()\"\n      [disabled]=\"isEffectivelyDisabled()\"\n      class=\"solaris-password-field__toggle\"\n    >\n      <solaris-icon\n        [decorative]=\"true\"\n        [name]=\"_visibleState() ? 'eye-off' : 'eye'\"\n      />\n    </button>\n  }\n</solaris-form-field>\n\n@if (showRequirements() && effectivePolicy()) {\n  <div class=\"solaris-password-field__requirements\" role=\"list\">\n    @for (req of requirementList(); track req.key) {\n      <div\n        class=\"solaris-password-field__requirement\"\n        role=\"listitem\"\n        [attr.data-met]=\"req.met\"\n      >\n        <solaris-icon\n          class=\"solaris-password-field__requirement-icon\"\n          [name]=\"req.met ? 'check' : 'x'\"\n          [decorative]=\"true\"\n        />\n        <span class=\"solaris-password-field__requirement-label\">\n          {{ req.label }}\n        </span>\n      </div>\n    }\n  </div>\n}\n\n@if (showStrength() && internalValue().length > 0) {\n  <div\n    class=\"solaris-password-field__strength\"\n    [attr.data-level]=\"strengthLevel()\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    <div class=\"solaris-password-field__strength-bar\">\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() !== 'empty'\"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"\n          strengthLevel() === 'medium' || strengthLevel() === 'strong'\n        \"\n      ></div>\n      <div\n        class=\"solaris-password-field__strength-segment\"\n        [attr.data-active]=\"strengthLevel() === 'strong'\"\n      ></div>\n    </div>\n    <span class=\"solaris-password-field__strength-label\">\n      {{ strengthLabelText() }}\n    </span>\n  </div>\n}\n",
 			styles: [":host{--solaris-password-field-strength-height: var(--solaris-spacing-3);--solaris-password-field-strength-gap: var(--solaris-spacing-2);--solaris-password-field-requirement-gap: var(--solaris-spacing-1);--solaris-password-field-strength-radius: var(--solaris-radius-sm);--solaris-password-field-requirement-color: var( --solaris-neutral-text-secondary );--solaris-password-field-strength-bar-bg: var(--solaris-neutral-sunken);--solaris-password-field-strength-weak-color: var( --solaris-danger-foreground );--solaris-password-field-requirement-met-color: var( --solaris-success-foreground );--solaris-password-field-strength-medium-color: var( --solaris-warning-foreground );--solaris-password-field-strength-strong-color: var( --solaris-success-foreground );--solaris-password-field-requirement-unmet-color: var( --solaris-danger-foreground );display:block;box-sizing:border-box}:host(:not([data-full-width])){display:inline-block;width:auto}.solaris-password-field__toggle:disabled{cursor:not-allowed;pointer-events:none;opacity:var(--solaris-opacity-50)}.solaris-password-field__toggle{margin:0;padding:0;padding-inline:var(--solaris-density-padding-sm);border:none;font:inherit;line-height:var(--solaris-line-height-none);cursor:pointer;appearance:none;background:none;color:var(--solaris-neutral-text-secondary);box-shadow:none;align-items:center;justify-content:center;-webkit-appearance:none}.solaris-password-field__toggle:hover,.solaris-password-field__toggle:active{color:var(--solaris-neutral-text-heading)}.solaris-form-suffix solaris-icon{cursor:pointer;width:1em;height:1em;transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__toggle solaris-icon{width:1em;height:1em}:host([data-size=sm][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-sm)}:host([data-size=sm][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=sm][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-md)}:host([data-size=md][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=md][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=compact]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-lg)}:host([data-size=lg][data-density=normal]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-xl)}:host([data-size=lg][data-density=comfortable]) .solaris-password-field__toggle solaris-icon{font-size:var(--solaris-font-size-2xl)}.solaris-password-field__requirements{padding:0;display:flex;list-style:none;flex-direction:column;margin-top:var(--solaris-spacing-2);gap:var(--solaris-password-field-requirement-gap)}.solaris-password-field__requirement{display:flex;align-items:center;gap:var(--solaris-spacing-1);font-size:var(--solaris-font-size-sm);color:var(--solaris-password-field-requirement-unmet-color);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__requirement[data-met=true]{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement-icon{width:1em;height:1em;flex-shrink:0}.solaris-password-field__requirement[data-met=true] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-met-color)}.solaris-password-field__requirement[data-met=false] .solaris-password-field__requirement-icon{color:var(--solaris-password-field-requirement-unmet-color)}.solaris-password-field__strength{display:flex;align-items:center;margin-top:var(--solaris-spacing-1);gap:var(--solaris-password-field-strength-gap)}.solaris-password-field__strength-bar{flex:1;display:flex;gap:var(--solaris-spacing-2);min-width:var(--solaris-spacing-15);height:var(--solaris-password-field-strength-height)}.solaris-password-field__strength-segment{flex:1;height:100%;background:var(--solaris-password-field-strength-bar-bg);border-radius:var(--solaris-password-field-strength-radius);transition:background-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-password-field__strength[data-level=weak] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-weak-color)}.solaris-password-field__strength[data-level=medium] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-medium-color)}.solaris-password-field__strength[data-level=strong] .solaris-password-field__strength-segment[data-active=true]{background-color:var(--solaris-password-field-strength-strong-color)}input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}input[type=password]::-webkit-credentials-auto-fill-button,input[type=password]::-webkit-contacts-auto-fill-button{visibility:hidden;pointer-events:none;display:none!important}.solaris-password-field__strength-label{flex-shrink:0;white-space:nowrap;color:var(--solaris-neutral-text-secondary);font-size:var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-password-field__requirement,.solaris-password-field__strength-segment{transition:none}}\n"]
 		}]
 	}],
@@ -51799,7 +51817,7 @@ var SolarisEmailFieldComponent = class SolarisEmailFieldComponent extends Solari
 		}],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonlyInput()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    type=\"email\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonlyInput()\"\n    (focus)=\"onInputFocus()\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (input)=\"onInput($event)\"\n    [value]=\"internalValue()\"\n    [attr.inputmode]=\"'email'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-email-field__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || readonlyInput()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n",
+		template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonlyInput()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    type=\"email\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonlyInput()\"\n    (focus)=\"onInputFocus()\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (input)=\"onInput($event)\"\n    [value]=\"internalValue()\"\n    [attr.inputmode]=\"'email'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-email-field__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || readonlyInput()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n",
 		styles: [":host{display:block;box-sizing:border-box}.solaris-email-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-email-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-email-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-email-field__clear{transition:none}}[data-reduced-motion=true] .solaris-email-field__clear{transition:none}\n"],
 		dependencies: [
 			{
@@ -51914,7 +51932,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.data-size]": "size()",
 				"[attr.data-density]": "effectiveDensity()"
 			},
-			template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonlyInput()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    type=\"email\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonlyInput()\"\n    (focus)=\"onInputFocus()\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (input)=\"onInput($event)\"\n    [value]=\"internalValue()\"\n    [attr.inputmode]=\"'email'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-email-field__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || readonlyInput()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n",
+			template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"readonlyInput()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <ng-content\n    select=\"[solaris-form-prefix]\"\n    ngProjectAs=\"[solaris-form-prefix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  @if (prefix() && !projectedPrefix()) {\n    <span solaris-form-prefix>\n      <solaris-icon [name]=\"prefix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n  <input\n    type=\"email\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"readonlyInput()\"\n    (focus)=\"onInputFocus()\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (input)=\"onInput($event)\"\n    [value]=\"internalValue()\"\n    [attr.inputmode]=\"'email'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"maxLength() ?? null\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-email-field__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || readonlyInput()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n",
 			styles: [":host{display:block;box-sizing:border-box}.solaris-email-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-email-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-email-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-email-field__clear{transition:none}}[data-reduced-motion=true] .solaris-email-field__clear{transition:none}\n"]
 		}]
 	}],
@@ -53427,7 +53445,7 @@ var SolarisPhoneFieldComponent = class SolarisPhoneFieldComponent extends Solari
 		}],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  solaris-popover-trigger\n  [solarisPopoverTriggerFor]=\"countryPopover\"\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"8\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  <button\n    type=\"button\"\n    class=\"solaris-phone-field__country\"\n    solaris-form-prefix\n    [attr.aria-label]=\"countryButtonLabelText()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [disabled]=\"!canOpen()\"\n    (click)=\"onCountryToggle($event)\"\n  >\n    <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\n    <span\n      class=\"solaris-phone-field__flag\"\n      [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n    ></span>\n    <solaris-icon\n      class=\"solaris-phone-field__chevron\"\n      name=\"chevron-down\"\n      [decorative]=\"true\"\n    />\n  </button>\n\n  <span class=\"solaris-phone-field__dial-code\"\n    >+{{ selectedCallingCode() }}</span\n  >\n\n  <input\n    type=\"tel\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    (focus)=\"onInputFocus()\"\n    (click)=\"onInputClick($event)\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (input)=\"onInput($event)\"\n    [value]=\"displayValue()\"\n    [attr.inputmode]=\"'tel'\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"effectiveMaxLength()\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-phone-field__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n\n<ng-template #countryPopover=\"solarisPopover\" solaris-popover>\n  <solaris-phone-country-list\n    [countries]=\"countries()\"\n    [selectedCode]=\"effectiveCountry()\"\n    [searchable]=\"searchable()\"\n    [searchPlaceholder]=\"searchPlaceholderText()\"\n    [noResultsText]=\"noResultsTextValue()\"\n    [emptyText]=\"emptyTextValue()\"\n    [maxHeight]=\"panelMaxHeight()\"\n    (countrySelected)=\"selectCountry($event)\"\n    (closeRequest)=\"closeCountryPanel()\"\n  />\n</ng-template>\n",
+		template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  solaris-popover-trigger\n  [solarisPopoverTriggerFor]=\"countryPopover\"\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"8\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  <button\n    type=\"button\"\n    class=\"solaris-phone-field__country\"\n    solaris-form-prefix\n    [attr.aria-label]=\"countryButtonLabelText()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [disabled]=\"!canOpen()\"\n    (click)=\"onCountryToggle($event)\"\n  >\n    <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\n    <span\n      class=\"solaris-phone-field__flag\"\n      [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n    ></span>\n    <solaris-icon\n      class=\"solaris-phone-field__chevron\"\n      name=\"chevron-down\"\n      [decorative]=\"true\"\n    />\n  </button>\n\n  <span class=\"solaris-phone-field__dial-code\"\n    >+{{ selectedCallingCode() }}</span\n  >\n\n  <input\n    type=\"tel\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    (focus)=\"onInputFocus()\"\n    (click)=\"onInputClick($event)\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (input)=\"onInput($event)\"\n    [value]=\"displayValue()\"\n    [attr.inputmode]=\"'tel'\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"effectiveMaxLength()\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-phone-field__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n\n<ng-template #countryPopover=\"solarisPopover\" solaris-popover>\n  <solaris-phone-country-list\n    [countries]=\"countries()\"\n    [selectedCode]=\"effectiveCountry()\"\n    [searchable]=\"searchable()\"\n    [searchPlaceholder]=\"searchPlaceholderText()\"\n    [noResultsText]=\"noResultsTextValue()\"\n    [emptyText]=\"emptyTextValue()\"\n    [maxHeight]=\"panelMaxHeight()\"\n    (countrySelected)=\"selectCountry($event)\"\n    (closeRequest)=\"closeCountryPanel()\"\n  />\n</ng-template>\n",
 		styles: [":host{--solaris-phone-field-country-gap: var(--solaris-spacing-1);--solaris-phone-field-country-padding-inline: var(--solaris-spacing-2);--solaris-phone-field-dial-code-color: var(--solaris-neutral-text-secondary);--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs);--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-neutral-text-body);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md)}:host .solaris-phone-field__country.solaris-form-prefix:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-primary-solid)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-phone-field__flag{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-phone-field-flag-size);font-size:var(--solaris-phone-field-flag-size);line-height:1}.solaris-phone-field__flag svg{display:block;width:100%;height:auto}:host .solaris-phone-field__country .solaris-phone-field__chevron{flex-shrink:0;color:var(--solaris-neutral-text-secondary);block-size:var(--solaris-phone-field-chevron-size);inline-size:var(--solaris-phone-field-chevron-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-phone-field__chevron{transform:rotate(180deg)}.solaris-phone-field__dial-code{flex:0 0 auto;-webkit-user-select:none;user-select:none;cursor:default;color:var(--solaris-phone-field-dial-code-color);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md);margin-inline-end:var(--solaris-spacing-1)}:host([data-size=sm][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=sm][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=sm][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=md][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=md][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=md][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=lg][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=lg][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=lg][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}.solaris-phone-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-phone-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-phone-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__clear{transition:none}}[data-reduced-motion=true] .solaris-phone-field__clear{transition:none}\n"],
 		dependencies: [
 			{
@@ -53608,7 +53626,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.data-open]": "panelOpen() ? \"\" : null",
 				"[attr.data-density]": "effectiveDensity()"
 			},
-			template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  solaris-popover-trigger\n  [solarisPopoverTriggerFor]=\"countryPopover\"\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"8\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  <button\n    type=\"button\"\n    class=\"solaris-phone-field__country\"\n    solaris-form-prefix\n    [attr.aria-label]=\"countryButtonLabelText()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [disabled]=\"!canOpen()\"\n    (click)=\"onCountryToggle($event)\"\n  >\n    <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\n    <span\n      class=\"solaris-phone-field__flag\"\n      [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n    ></span>\n    <solaris-icon\n      class=\"solaris-phone-field__chevron\"\n      name=\"chevron-down\"\n      [decorative]=\"true\"\n    />\n  </button>\n\n  <span class=\"solaris-phone-field__dial-code\"\n    >+{{ selectedCallingCode() }}</span\n  >\n\n  <input\n    type=\"tel\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    (focus)=\"onInputFocus()\"\n    (click)=\"onInputClick($event)\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (input)=\"onInput($event)\"\n    [value]=\"displayValue()\"\n    [attr.inputmode]=\"'tel'\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"effectiveMaxLength()\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-phone-field__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n\n<ng-template #countryPopover=\"solarisPopover\" solaris-popover>\n  <solaris-phone-country-list\n    [countries]=\"countries()\"\n    [selectedCode]=\"effectiveCountry()\"\n    [searchable]=\"searchable()\"\n    [searchPlaceholder]=\"searchPlaceholderText()\"\n    [noResultsText]=\"noResultsTextValue()\"\n    [emptyText]=\"emptyTextValue()\"\n    [maxHeight]=\"panelMaxHeight()\"\n    (countrySelected)=\"selectCountry($event)\"\n    (closeRequest)=\"closeCountryPanel()\"\n  />\n</ng-template>\n",
+			template: "<solaris-form-field\n  [control]=\"this\"\n  [hint]=\"hint()\"\n  [label]=\"label()\"\n  [radius]=\"radius()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [hintKey]=\"hintKey()\"\n  [labelKey]=\"labelKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [appearance]=\"appearance()\"\n  [invalid]=\"isFieldInvalid()\"\n  [error]=\"error() || computedError()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [loading]=\"loading()\"\n  [hasPrefix]=\"hasPrefix()\"\n  [hasSuffix]=\"hasSuffix()\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n  solaris-popover-trigger\n  [solarisPopoverTriggerFor]=\"countryPopover\"\n  [solarisPopoverDisabled]=\"!canOpen()\"\n  [solarisPopoverPlacement]=\"'bottom'\"\n  [solarisPopoverAlign]=\"'start'\"\n  [solarisPopoverOffset]=\"8\"\n  [solarisPopoverPadding]=\"'none'\"\n  [solarisPopoverRadius]=\"radius()\"\n  [solarisPopoverMaxWidth]=\"panelMaxWidth()\"\n  [solarisPopoverAppearance]=\"popoverAppearance()\"\n  [solarisPopoverAutoFocus]=\"'first-tabbable'\"\n  [solarisPopoverAriaHasPopup]=\"'listbox'\"\n>\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-suffix]\"\n    ngProjectAs=\"[solaris-form-suffix]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n  <button\n    type=\"button\"\n    class=\"solaris-phone-field__country\"\n    solaris-form-prefix\n    [attr.aria-label]=\"countryButtonLabelText()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"panelOpen() ? 'true' : 'false'\"\n    [disabled]=\"!canOpen()\"\n    (click)=\"onCountryToggle($event)\"\n  >\n    <!-- SECURITY_EXCEPTION: flag SVG already vetted by solarisSafeHtml pipe (isTrustedFlagSvg). -->\n    <span\n      class=\"solaris-phone-field__flag\"\n      [innerHTML]=\"selectedFlag() | solarisSafeHtml\"\n    ></span>\n    <solaris-icon\n      class=\"solaris-phone-field__chevron\"\n      name=\"chevron-down\"\n      [decorative]=\"true\"\n    />\n  </button>\n\n  <span class=\"solaris-phone-field__dial-code\"\n    >+{{ selectedCallingCode() }}</span\n  >\n\n  <input\n    type=\"tel\"\n    #inputElement\n    solaris-input\n    data-bwignore=\"true\"\n    [density]=\"effectiveDensity()\"\n    [size]=\"size()\"\n    (blur)=\"onInputBlur()\"\n    [readonly]=\"isEffectivelyReadonly()\"\n    (focus)=\"onInputFocus()\"\n    (click)=\"onInputClick($event)\"\n    [attr.id]=\"fieldId() ?? null\"\n    [attr.aria-describedby]=\"ariaDescribedBy()\"\n    (input)=\"onInput($event)\"\n    [value]=\"displayValue()\"\n    [attr.inputmode]=\"'tel'\"\n    [attr.autocapitalize]=\"'none'\"\n    [attr.spellcheck]=\"'false'\"\n    [attr.name]=\"name() ?? null\"\n    [attr.autocomplete]=\"autocomplete()\"\n    [disabled]=\"isEffectivelyDisabled()\"\n    [attr.maxlength]=\"effectiveMaxLength()\"\n    [attr.placeholder]=\"placeholderText() || null\"\n  />\n\n  @if (canClear() && !loading()) {\n    <button\n      type=\"button\"\n      solaris-form-suffix\n      class=\"solaris-phone-field__clear\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"isEffectivelyDisabled() || isEffectivelyReadonly()\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      tabindex=\"-1\"\n    >\n      <solaris-icon name=\"x\" [decorative]=\"true\" />\n    </button>\n  }\n  @if (suffix() && !projectedSuffix()) {\n    <span solaris-form-suffix>\n      <solaris-icon [name]=\"suffix() ?? ''\" [decorative]=\"true\" />\n    </span>\n  }\n</solaris-form-field>\n\n<ng-template #countryPopover=\"solarisPopover\" solaris-popover>\n  <solaris-phone-country-list\n    [countries]=\"countries()\"\n    [selectedCode]=\"effectiveCountry()\"\n    [searchable]=\"searchable()\"\n    [searchPlaceholder]=\"searchPlaceholderText()\"\n    [noResultsText]=\"noResultsTextValue()\"\n    [emptyText]=\"emptyTextValue()\"\n    [maxHeight]=\"panelMaxHeight()\"\n    (countrySelected)=\"selectCountry($event)\"\n    (closeRequest)=\"closeCountryPanel()\"\n  />\n</ng-template>\n",
 			styles: [":host{--solaris-phone-field-country-gap: var(--solaris-spacing-1);--solaris-phone-field-country-padding-inline: var(--solaris-spacing-2);--solaris-phone-field-dial-code-color: var(--solaris-neutral-text-secondary);--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs);--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);display:block;box-sizing:border-box}:host .solaris-phone-field__country.solaris-form-prefix{all:unset;display:inline-flex;box-sizing:border-box;align-items:center;gap:var(--solaris-phone-field-country-gap);padding-inline:var(--solaris-phone-field-country-padding-inline);cursor:pointer;color:var(--solaris-neutral-text-body);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md)}:host .solaris-phone-field__country.solaris-form-prefix:focus-visible{outline-offset:var(--solaris-focus-ring-offset);outline:var(--solaris-focus-ring-width) solid var(--solaris-primary-solid)}:host .solaris-phone-field__country.solaris-form-prefix[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-phone-field__flag{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--solaris-phone-field-flag-size);font-size:var(--solaris-phone-field-flag-size);line-height:1}.solaris-phone-field__flag svg{display:block;width:100%;height:auto}:host .solaris-phone-field__country .solaris-phone-field__chevron{flex-shrink:0;color:var(--solaris-neutral-text-secondary);block-size:var(--solaris-phone-field-chevron-size);inline-size:var(--solaris-phone-field-chevron-size);transition:transform var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}:host([data-open]) .solaris-phone-field__chevron{transform:rotate(180deg)}.solaris-phone-field__dial-code{flex:0 0 auto;-webkit-user-select:none;user-select:none;cursor:default;color:var(--solaris-phone-field-dial-code-color);font-size:var(--solaris-phone-field-country-font-size);line-height:var(--solaris-line-height-md);margin-inline-end:var(--solaris-spacing-1)}:host([data-size=sm][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=sm][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=sm][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-xs);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-2xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=md][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=md][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=md][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-sm);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-xs);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}:host([data-size=lg][data-density=compact]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-sm );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: calc( var(--solaris-spacing-5) + var(--solaris-border-width-md) )}:host([data-size=lg][data-density=normal]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-md );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-2xs)}:host([data-size=lg][data-density=comfortable]){--solaris-phone-field-country-font-size: var(--solaris-font-size-md);--solaris-phone-field-country-padding-inline: var( --solaris-density-padding-lg );--solaris-phone-field-flag-size: var(--solaris-font-size-sm);--solaris-phone-field-chevron-size: var(--solaris-font-size-xs)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__chevron{transition:none}}.solaris-phone-field__clear solaris-icon{width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg)}.solaris-phone-field__clear{padding:0;border:none;display:flex;cursor:pointer;border-radius:50%;align-items:center;justify-content:center;background:transparent;width:var(--solaris-font-size-lg);height:var(--solaris-font-size-lg);color:var(--solaris-neutral-text-secondary);transition:color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-phone-field__clear:hover{color:var(--solaris-neutral-text-heading)}@media(prefers-reduced-motion:reduce){.solaris-phone-field__clear{transition:none}}[data-reduced-motion=true] .solaris-phone-field__clear{transition:none}\n"]
 		}]
 	}],
@@ -54587,7 +54605,7 @@ var SolarisOtpInputComponent = class SolarisOtpInputComponent extends SolarisFor
 		}],
 		usesInheritance: true,
 		ngImport: i0,
-		template: "<solaris-form-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [error]=\"error() || computedError()\"\n  [labelKey]=\"labelKey()\"\n  [hintKey]=\"hintKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isFieldInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [loading]=\"loading()\"\n  [control]=\"this\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <div\n    class=\"solaris-otp-input__boxes\"\n    solaris-form-field-trigger\n    role=\"group\"\n    [attr.aria-label]=\"groupAriaLabel() || null\"\n  >\n    @for (box of boxes(); track $index; let index = $index) {\n      <input\n        #box\n        type=\"text\"\n        class=\"solaris-otp-input__box\"\n        [attr.inputmode]=\"inputmode()\"\n        maxlength=\"1\"\n        autocomplete=\"one-time-code\"\n        [attr.aria-label]=\"boxAriaLabel(index)\"\n        [attr.aria-describedby]=\"ariaDescribedBy()\"\n        [attr.data-active]=\"focusedIndex() === index ? '' : null\"\n        [value]=\"box\"\n        [disabled]=\"isEffectivelyDisabled() || loading()\"\n        [readonly]=\"isEffectivelyReadonly()\"\n        (input)=\"onBoxInput($event, index)\"\n        (keydown)=\"onBoxKeydown($event, index)\"\n        (paste)=\"onBoxPaste($event, index)\"\n        (focus)=\"onBoxFocus(index)\"\n        (blur)=\"onBoxBlur()\"\n      />\n      @if (showSeparatorAfter(index)) {\n        <span class=\"solaris-otp-input__separator\" aria-hidden=\"true\">-</span>\n      }\n    }\n  </div>\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n",
+		template: "<solaris-form-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [error]=\"error() || computedError()\"\n  [labelKey]=\"labelKey()\"\n  [hintKey]=\"hintKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isFieldInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [loading]=\"loading()\"\n  [control]=\"this\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <div\n    class=\"solaris-otp-input__boxes\"\n    solaris-form-field-trigger\n    role=\"group\"\n    [attr.aria-label]=\"groupAriaLabel() || null\"\n  >\n    @for (box of boxes(); track $index; let index = $index) {\n      <input\n        #box\n        type=\"text\"\n        class=\"solaris-otp-input__box\"\n        [attr.inputmode]=\"inputmode()\"\n        maxlength=\"1\"\n        autocomplete=\"one-time-code\"\n        [attr.aria-label]=\"boxAriaLabel(index)\"\n        [attr.aria-describedby]=\"ariaDescribedBy()\"\n        [attr.data-active]=\"focusedIndex() === index ? '' : null\"\n        [value]=\"box\"\n        [disabled]=\"isEffectivelyDisabled() || loading()\"\n        [readonly]=\"isEffectivelyReadonly()\"\n        (input)=\"onBoxInput($event, index)\"\n        (keydown)=\"onBoxKeydown($event, index)\"\n        (paste)=\"onBoxPaste($event, index)\"\n        (focus)=\"onBoxFocus(index)\"\n        (blur)=\"onBoxBlur()\"\n      />\n      @if (showSeparatorAfter(index)) {\n        <span class=\"solaris-otp-input__separator\" aria-hidden=\"true\">-</span>\n      }\n    }\n  </div>\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n",
 		styles: [":host{--solaris-otp-input-gap: var(--solaris-spacing-2);--solaris-otp-input-box-radius: var(--solaris-radius-sm);--solaris-otp-input-box-border-color: var(--solaris-neutral-border-subtle);--solaris-otp-input-box-border-width: var(--solaris-border-width-sm);--solaris-otp-input-box-background: transparent;--solaris-otp-input-box-color: var(--solaris-neutral-text-body);--solaris-otp-input-box-active-border-color: var( --solaris-neutral-border-strong );--solaris-otp-input-box-error-border-color: var(--solaris-danger-solid);--solaris-otp-input-box-width: calc( var(--solaris-control-height-normal-md) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-normal-md) * 1.15 );--solaris-otp-input-separator-color: var(--solaris-neutral-text-secondary);--solaris-otp-input-box-font-size: var(--solaris-font-size-sm);display:block;box-sizing:border-box}:host solaris-form-field ::ng-deep .solaris-form-field__control-wrapper{border:0 transparent;background:transparent}:host([data-radius=none]){--solaris-otp-input-box-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-otp-input-box-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-otp-input-box-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-otp-input-box-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-otp-input-box-radius: var(--solaris-radius-full)}:host([data-density=compact]){--solaris-otp-input-box-font-size: var(--solaris-font-size-xs);--solaris-otp-input-gap: var(--solaris-spacing-1)}:host([data-density=normal]){--solaris-otp-input-box-font-size: var(--solaris-font-size-sm);--solaris-otp-input-gap: var(--solaris-spacing-2)}:host([data-density=comfortable]){--solaris-otp-input-box-font-size: var(--solaris-font-size-md);--solaris-otp-input-gap: var(--solaris-spacing-3)}.solaris-otp-input__boxes{display:flex;box-sizing:border-box;align-items:center;gap:var(--solaris-otp-input-gap);padding-block:var(--solaris-spacing-2)}.solaris-otp-input__box{box-sizing:border-box;width:var(--solaris-otp-input-box-width);height:var(--solaris-otp-input-box-height);margin:0;padding:0;text-align:center;color:var(--solaris-otp-input-box-color);font-size:var(--solaris-otp-input-box-font-size);line-height:var(--solaris-line-height-none);background:var(--solaris-otp-input-box-background);border-radius:var(--solaris-otp-input-box-radius);border:var(--solaris-otp-input-box-border-width) solid var(--solaris-otp-input-box-border-color);transition:border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-otp-input__box:focus{outline:none;border-color:var(--solaris-otp-input-box-active-border-color);box-shadow:none}.solaris-otp-input__box[data-active]{border-color:var(--solaris-otp-input-box-active-border-color)}.solaris-otp-input__box[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-otp-input__box:hover:not([disabled]){border-color:var(--solaris-otp-input-box-active-border-color)}:host([data-appearance=surface]){--solaris-otp-input-box-background: var(--solaris-neutral-subtle);--solaris-otp-input-box-border-width: 0}:host([data-appearance=filled]){--solaris-otp-input-box-background: var(--solaris-neutral-subtle);--solaris-otp-input-box-border-width: var(--solaris-border-width-sm)}:host([data-invalid]) .solaris-otp-input__box{border-color:var(--solaris-otp-input-box-error-border-color)}:host([data-size=sm][data-density=compact]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-compact-sm) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-compact-sm) * 1.15 )}:host([data-size=md][data-density=compact]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-compact-md) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-compact-md) * 1.15 )}:host([data-size=lg][data-density=compact]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-compact-lg) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-compact-lg) * 1.15 )}:host([data-size=sm][data-density=normal]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-normal-sm) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-normal-sm) * 1.15 )}:host([data-size=md][data-density=normal]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-normal-md) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-normal-md) * 1.15 )}:host([data-size=lg][data-density=normal]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-normal-lg) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-normal-lg) * 1.15 )}:host([data-size=sm][data-density=comfortable]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-comfortable-sm) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-comfortable-sm) * 1.15 )}:host([data-size=md][data-density=comfortable]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-comfortable-md) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-comfortable-md) * 1.15 )}:host([data-size=lg][data-density=comfortable]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-comfortable-lg) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-comfortable-lg) * 1.15 )}.solaris-otp-input__separator{flex:0 0 auto;-webkit-user-select:none;user-select:none;color:var(--solaris-otp-input-separator-color);font-size:var(--solaris-otp-input-box-font-size);line-height:var(--solaris-line-height-none)}@media(prefers-reduced-motion:reduce){.solaris-otp-input__box{transition:none}}\n"],
 		dependencies: [
 			{
@@ -54674,7 +54692,7 @@ i0.ɵɵngDeclareClassMetadata({
 				"[attr.data-char-type]": "charType()",
 				"[attr.data-invalid]": "isFieldInvalid() ? \"\" : null"
 			},
-			template: "<solaris-form-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [error]=\"error() || computedError()\"\n  [labelKey]=\"labelKey()\"\n  [hintKey]=\"hintKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isFieldInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [loading]=\"loading()\"\n  [control]=\"this\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <div\n    class=\"solaris-otp-input__boxes\"\n    solaris-form-field-trigger\n    role=\"group\"\n    [attr.aria-label]=\"groupAriaLabel() || null\"\n  >\n    @for (box of boxes(); track $index; let index = $index) {\n      <input\n        #box\n        type=\"text\"\n        class=\"solaris-otp-input__box\"\n        [attr.inputmode]=\"inputmode()\"\n        maxlength=\"1\"\n        autocomplete=\"one-time-code\"\n        [attr.aria-label]=\"boxAriaLabel(index)\"\n        [attr.aria-describedby]=\"ariaDescribedBy()\"\n        [attr.data-active]=\"focusedIndex() === index ? '' : null\"\n        [value]=\"box\"\n        [disabled]=\"isEffectivelyDisabled() || loading()\"\n        [readonly]=\"isEffectivelyReadonly()\"\n        (input)=\"onBoxInput($event, index)\"\n        (keydown)=\"onBoxKeydown($event, index)\"\n        (paste)=\"onBoxPaste($event, index)\"\n        (focus)=\"onBoxFocus(index)\"\n        (blur)=\"onBoxBlur()\"\n      />\n      @if (showSeparatorAfter(index)) {\n        <span class=\"solaris-otp-input__separator\" aria-hidden=\"true\">-</span>\n      }\n    }\n  </div>\n  <ng-content\n    select=\"[solaris-form-suffix][solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n",
+			template: "<solaris-form-field\n  [label]=\"label()\"\n  [hint]=\"hint()\"\n  [error]=\"error() || computedError()\"\n  [labelKey]=\"labelKey()\"\n  [hintKey]=\"hintKey()\"\n  [errorKey]=\"errorKey()\"\n  [required]=\"requiredInput()\"\n  [optional]=\"optional()\"\n  [appearance]=\"appearance()\"\n  [density]=\"effectiveDensity()\"\n  [size]=\"size()\"\n  [radius]=\"radius()\"\n  [invalid]=\"isFieldInvalid()\"\n  [disabled]=\"isEffectivelyDisabled()\"\n  [readonly]=\"isEffectivelyReadonly()\"\n  [loading]=\"loading()\"\n  [control]=\"this\"\n  [hasSuffixAction]=\"!!projectedSuffixAction()\"\n>\n  <div\n    class=\"solaris-otp-input__boxes\"\n    solaris-form-field-trigger\n    role=\"group\"\n    [attr.aria-label]=\"groupAriaLabel() || null\"\n  >\n    @for (box of boxes(); track $index; let index = $index) {\n      <input\n        #box\n        type=\"text\"\n        class=\"solaris-otp-input__box\"\n        [attr.inputmode]=\"inputmode()\"\n        maxlength=\"1\"\n        autocomplete=\"one-time-code\"\n        [attr.aria-label]=\"boxAriaLabel(index)\"\n        [attr.aria-describedby]=\"ariaDescribedBy()\"\n        [attr.data-active]=\"focusedIndex() === index ? '' : null\"\n        [value]=\"box\"\n        [disabled]=\"isEffectivelyDisabled() || loading()\"\n        [readonly]=\"isEffectivelyReadonly()\"\n        (input)=\"onBoxInput($event, index)\"\n        (keydown)=\"onBoxKeydown($event, index)\"\n        (paste)=\"onBoxPaste($event, index)\"\n        (focus)=\"onBoxFocus(index)\"\n        (blur)=\"onBoxBlur()\"\n      />\n      @if (showSeparatorAfter(index)) {\n        <span class=\"solaris-otp-input__separator\" aria-hidden=\"true\">-</span>\n      }\n    }\n  </div>\n  <ng-content\n    select=\"[solaris-form-suffix-action]\"\n    ngProjectAs=\"[solaris-form-suffix-action]\"\n  />\n  <ng-content\n    select=\"[solaris-form-label-action]\"\n    ngProjectAs=\"[solaris-form-label-action]\"\n  />\n</solaris-form-field>\n",
 			styles: [":host{--solaris-otp-input-gap: var(--solaris-spacing-2);--solaris-otp-input-box-radius: var(--solaris-radius-sm);--solaris-otp-input-box-border-color: var(--solaris-neutral-border-subtle);--solaris-otp-input-box-border-width: var(--solaris-border-width-sm);--solaris-otp-input-box-background: transparent;--solaris-otp-input-box-color: var(--solaris-neutral-text-body);--solaris-otp-input-box-active-border-color: var( --solaris-neutral-border-strong );--solaris-otp-input-box-error-border-color: var(--solaris-danger-solid);--solaris-otp-input-box-width: calc( var(--solaris-control-height-normal-md) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-normal-md) * 1.15 );--solaris-otp-input-separator-color: var(--solaris-neutral-text-secondary);--solaris-otp-input-box-font-size: var(--solaris-font-size-sm);display:block;box-sizing:border-box}:host solaris-form-field ::ng-deep .solaris-form-field__control-wrapper{border:0 transparent;background:transparent}:host([data-radius=none]){--solaris-otp-input-box-radius: var(--solaris-radius-none)}:host([data-radius=sm]){--solaris-otp-input-box-radius: var(--solaris-radius-sm)}:host([data-radius=md]){--solaris-otp-input-box-radius: var(--solaris-radius-md)}:host([data-radius=lg]){--solaris-otp-input-box-radius: var(--solaris-radius-lg)}:host([data-radius=xl]){--solaris-otp-input-box-radius: var(--solaris-radius-full)}:host([data-density=compact]){--solaris-otp-input-box-font-size: var(--solaris-font-size-xs);--solaris-otp-input-gap: var(--solaris-spacing-1)}:host([data-density=normal]){--solaris-otp-input-box-font-size: var(--solaris-font-size-sm);--solaris-otp-input-gap: var(--solaris-spacing-2)}:host([data-density=comfortable]){--solaris-otp-input-box-font-size: var(--solaris-font-size-md);--solaris-otp-input-gap: var(--solaris-spacing-3)}.solaris-otp-input__boxes{display:flex;box-sizing:border-box;align-items:center;gap:var(--solaris-otp-input-gap);padding-block:var(--solaris-spacing-2)}.solaris-otp-input__box{box-sizing:border-box;width:var(--solaris-otp-input-box-width);height:var(--solaris-otp-input-box-height);margin:0;padding:0;text-align:center;color:var(--solaris-otp-input-box-color);font-size:var(--solaris-otp-input-box-font-size);line-height:var(--solaris-line-height-none);background:var(--solaris-otp-input-box-background);border-radius:var(--solaris-otp-input-box-radius);border:var(--solaris-otp-input-box-border-width) solid var(--solaris-otp-input-box-border-color);transition:border-color var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard),box-shadow var(--solaris-motion-duration-normal) var(--solaris-motion-easing-standard)}.solaris-otp-input__box:focus{outline:none;border-color:var(--solaris-otp-input-box-active-border-color);box-shadow:none}.solaris-otp-input__box[data-active]{border-color:var(--solaris-otp-input-box-active-border-color)}.solaris-otp-input__box[disabled]{cursor:not-allowed;opacity:var(--solaris-opacity-50)}.solaris-otp-input__box:hover:not([disabled]){border-color:var(--solaris-otp-input-box-active-border-color)}:host([data-appearance=surface]){--solaris-otp-input-box-background: var(--solaris-neutral-subtle);--solaris-otp-input-box-border-width: 0}:host([data-appearance=filled]){--solaris-otp-input-box-background: var(--solaris-neutral-subtle);--solaris-otp-input-box-border-width: var(--solaris-border-width-sm)}:host([data-invalid]) .solaris-otp-input__box{border-color:var(--solaris-otp-input-box-error-border-color)}:host([data-size=sm][data-density=compact]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-compact-sm) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-compact-sm) * 1.15 )}:host([data-size=md][data-density=compact]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-compact-md) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-compact-md) * 1.15 )}:host([data-size=lg][data-density=compact]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-compact-lg) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-compact-lg) * 1.15 )}:host([data-size=sm][data-density=normal]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-normal-sm) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-normal-sm) * 1.15 )}:host([data-size=md][data-density=normal]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-normal-md) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-normal-md) * 1.15 )}:host([data-size=lg][data-density=normal]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-normal-lg) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-normal-lg) * 1.15 )}:host([data-size=sm][data-density=comfortable]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-comfortable-sm) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-comfortable-sm) * 1.15 )}:host([data-size=md][data-density=comfortable]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-comfortable-md) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-comfortable-md) * 1.15 )}:host([data-size=lg][data-density=comfortable]){--solaris-otp-input-box-width: calc( var(--solaris-control-height-comfortable-lg) * .9 );--solaris-otp-input-box-height: calc( var(--solaris-control-height-comfortable-lg) * 1.15 )}.solaris-otp-input__separator{flex:0 0 auto;-webkit-user-select:none;user-select:none;color:var(--solaris-otp-input-separator-color);font-size:var(--solaris-otp-input-box-font-size);line-height:var(--solaris-line-height-none)}@media(prefers-reduced-motion:reduce){.solaris-otp-input__box{transition:none}}\n"]
 		}]
 	}],