@skyux/forms 11.0.0-alpha.9 → 11.0.0-beta.1

package/fesm2022/skyux-forms.mjs

@@ -1,24 +1,24 @@
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule, formatNumber } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Pipe, Component, ChangeDetectionStrategy, Input, Directive, InjectionToken, inject, HostBinding, numberAttribute, booleanAttribute, Injectable, ChangeDetectorRef, EventEmitter, ElementRef, Output, ViewChild, Self, Optional, ContentChildren, RendererFactory2, Renderer2, input, ViewEncapsulation, ContentChild, forwardRef, HostListener } from '@angular/core';
-import * as i3$1 from '@angular/forms';
+import { NgModule, Pipe, Component, ChangeDetectionStrategy, Input, Directive, InjectionToken, inject, booleanAttribute, HostBinding, numberAttribute, EventEmitter, ChangeDetectorRef, ElementRef, Output, ViewChild, Injectable, Self, Optional, ContentChildren, RendererFactory2, Renderer2, ViewEncapsulation, ContentChild, forwardRef, HostListener } from '@angular/core';
+import * as i2 from '@angular/forms';
 import { NG_VALIDATORS, FormsModule, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR, FormControlDirective, FormControlName, NgModel, NgControl } from '@angular/forms';
-import * as i3 from '@skyux/i18n';
+import * as i1$1 from '@skyux/i18n';
 import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
-import * as i1$1 from '@skyux/core';
+import * as i1$3 from '@skyux/core';
 import { SkyIdModule, SkyIdService, SkyLogService, SkyTrimModule, SkyLiveAnnouncerService, SkyContentInfoProvider, SkyMediaBreakpoints } from '@skyux/core';
-import * as i5 from '@skyux/help-inline';
+import * as i4 from '@skyux/help-inline';
 import { SkyHelpInlineModule } from '@skyux/help-inline';
-import * as i6 from '@skyux/icon';
+import * as i5 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
-import * as i1 from '@skyux/indicators';
+import * as i1$2 from '@skyux/indicators';
 import { SkyStatusIndicatorModule } from '@skyux/indicators';
-import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import * as i4 from '@skyux/theme';
+import * as i4$1 from '@skyux/theme';
 import { SkyThemeComponentClassDirective, SkyThemeModule } from '@skyux/theme';
-import { BehaviorSubject, Subject, ReplaySubject } from 'rxjs';
+import { BehaviorSubject, Subject, ReplaySubject, takeUntil as takeUntil$1 } from 'rxjs';
 import { takeUntil, take } from 'rxjs/operators';
+import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 /* istanbul ignore file */
 /**
@@ -80,7 +80,7 @@ const RESOURCES = {
         skyux_file_attachment_button_label_replace_file_label: {
             message: 'Replace file {0} for',
         },
-        skyux_file_attachment_file_item_delete: { message: 'Delete file' },
+        skyux_file_attachment_file_item_delete: { message: 'Delete {0}' },
         skyux_file_attachment_file_item_remove: { message: 'Remove file {0} for' },
         skyux_file_attachment_file_size_b_plural: { message: '{0} bytes' },
         skyux_file_attachment_file_size_b_singular: { message: '{0} byte' },
@@ -144,8 +144,6 @@ const RESOURCES = {
         skyux_input_box_help_inline_aria_label: {
             message: 'Show help content for {0}',
         },
-        skyux_checkbox_required_label_text: { message: 'This selection' },
-        skyux_radio_group_required_label_text: { message: 'This selection' },
     },
 };
 SkyLibResourcesService.addResources(RESOURCES);
@@ -158,9 +156,9 @@ class SkyFormsResourcesProvider {
  * Import into any component library module that needs to use resource strings.
  */
 class SkyFormsResourcesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyFormsResourcesModule, exports: [SkyI18nModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormsResourcesModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFormsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkyFormsResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFormsResourcesModule, providers: [
             {
                 provide: SKY_LIB_RESOURCES_PROVIDERS,
                 useClass: SkyFormsResourcesProvider,
@@ -168,7 +166,7 @@ class SkyFormsResourcesModule {
             },
         ], imports: [SkyI18nModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormsResourcesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFormsResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
@@ -215,10 +213,10 @@ class SkyCharacterCounterScreenReaderPipe {
         }
         return this.#previousAnnouncementPoint.toLocaleString();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCharacterCounterScreenReaderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyCharacterCounterScreenReaderPipe, isStandalone: true, name: "skyCharacterCounterScreenReader" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCharacterCounterScreenReaderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkyCharacterCounterScreenReaderPipe, isStandalone: true, name: "skyCharacterCounterScreenReader" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCharacterCounterScreenReaderPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCharacterCounterScreenReaderPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyCharacterCounterScreenReader',
@@ -247,12 +245,12 @@ class SkyCharacterCounterIndicatorComponent {
         this.#_characterCountLimit = limit;
         this.#changeDetector.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", inputs: { characterCount: "characterCount", characterCountLimit: "characterCountLimit" }, ngImport: i0, template: "<span\n  class=\"sky-character-count-label sky-deemphasized\"\n  [ngClass]=\"{ 'sky-error-label': characterCount > characterCountLimit }\"\n>\n  {{ characterCount + '/' + characterCountLimit }}\n</span>\n<span aria-live=\"polite\" class=\"sky-screen-reader-only\">\n  <ng-container\n    *ngIf=\"characterCount > characterCountLimit; else screenReaderCountMessage\"\n    >{{ 'skyux_character_count_over_limit' | skyLibResources }}</ng-container\n  >\n  <ng-template #screenReaderCountMessage>\n    <ng-container\n      *ngIf=\"\n        characterCount\n          | skyCharacterCounterScreenReader\n            : characterCountLimit as screenReaderCount\n      \"\n      >{{\n        'skyux_character_count_message'\n          | skyLibResources: screenReaderCount : characterCountLimit\n      }}</ng-container\n    >\n  </ng-template>\n</span>\n", styles: [":host{flex-shrink:.0001}.sky-character-count-label.sky-error-label{margin:0}.sky-character-count-label.sky-error-label:before{font-style:normal}.sky-screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SkyCharacterCounterScreenReaderPipe, name: "skyCharacterCounterScreenReader" }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", inputs: { characterCount: "characterCount", characterCountLimit: "characterCountLimit" }, ngImport: i0, template: "<span\n  class=\"sky-character-count-label sky-deemphasized\"\n  [ngClass]=\"{ 'sky-error-label': characterCount > characterCountLimit }\"\n>\n  {{ characterCount + '/' + characterCountLimit }}\n</span>\n<span aria-live=\"polite\" class=\"sky-screen-reader-only\">\n  @if (characterCount > characterCountLimit) {\n    <ng-container>{{\n      'skyux_character_count_over_limit' | skyLibResources\n    }}</ng-container>\n  } @else {\n    @if (\n      characterCount | skyCharacterCounterScreenReader: characterCountLimit;\n      as screenReaderCount\n    ) {\n      <ng-container>{{\n        'skyux_character_count_message'\n          | skyLibResources: screenReaderCount : characterCountLimit\n      }}</ng-container>\n    }\n  }\n</span>\n", styles: [":host{flex-shrink:.0001}.sky-character-count-label.sky-error-label{margin:0}.sky-character-count-label.sky-error-label:before{font-style:normal}.sky-screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyCharacterCounterScreenReaderPipe, name: "skyCharacterCounterScreenReader" }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCharacterCounterIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-character-counter-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"sky-character-count-label sky-deemphasized\"\n  [ngClass]=\"{ 'sky-error-label': characterCount > characterCountLimit }\"\n>\n  {{ characterCount + '/' + characterCountLimit }}\n</span>\n<span aria-live=\"polite\" class=\"sky-screen-reader-only\">\n  <ng-container\n    *ngIf=\"characterCount > characterCountLimit; else screenReaderCountMessage\"\n    >{{ 'skyux_character_count_over_limit' | skyLibResources }}</ng-container\n  >\n  <ng-template #screenReaderCountMessage>\n    <ng-container\n      *ngIf=\"\n        characterCount\n          | skyCharacterCounterScreenReader\n            : characterCountLimit as screenReaderCount\n      \"\n      >{{\n        'skyux_character_count_message'\n          | skyLibResources: screenReaderCount : characterCountLimit\n      }}</ng-container\n    >\n  </ng-template>\n</span>\n", styles: [":host{flex-shrink:.0001}.sky-character-count-label.sky-error-label{margin:0}.sky-character-count-label.sky-error-label:before{font-style:normal}.sky-screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}\n"] }]
+            args: [{ selector: 'sky-character-counter-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"sky-character-count-label sky-deemphasized\"\n  [ngClass]=\"{ 'sky-error-label': characterCount > characterCountLimit }\"\n>\n  {{ characterCount + '/' + characterCountLimit }}\n</span>\n<span aria-live=\"polite\" class=\"sky-screen-reader-only\">\n  @if (characterCount > characterCountLimit) {\n    <ng-container>{{\n      'skyux_character_count_over_limit' | skyLibResources\n    }}</ng-container>\n  } @else {\n    @if (\n      characterCount | skyCharacterCounterScreenReader: characterCountLimit;\n      as screenReaderCount\n    ) {\n      <ng-container>{{\n        'skyux_character_count_message'\n          | skyLibResources: screenReaderCount : characterCountLimit\n      }}</ng-container>\n    }\n  }\n</span>\n", styles: [":host{flex-shrink:.0001}.sky-character-count-label.sky-error-label{margin:0}.sky-character-count-label.sky-error-label:before{font-style:normal}.sky-screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { characterCount: [{
                 type: Input
             }], characterCountLimit: [{
@@ -325,8 +323,8 @@ class SkyCharacterCounterInputDirective {
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     #validatorChange = () => { };
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCharacterCounterInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: SkyCharacterCounterInputDirective, selector: "[skyCharacterCounter]", inputs: { skyCharacterCounterIndicator: "skyCharacterCounterIndicator", skyCharacterCounterLimit: "skyCharacterCounterLimit" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCharacterCounterInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: SkyCharacterCounterInputDirective, selector: "[skyCharacterCounter]", inputs: { skyCharacterCounterIndicator: "skyCharacterCounterIndicator", skyCharacterCounterLimit: "skyCharacterCounterLimit" }, providers: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: SkyCharacterCounterInputDirective,
@@ -334,7 +332,7 @@ class SkyCharacterCounterInputDirective {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCharacterCounterInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCharacterCounterInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyCharacterCounter]',
@@ -353,20 +351,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
             }] } });
 
 class SkyCharacterCounterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCharacterCounterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyCharacterCounterModule, declarations: [SkyCharacterCounterInputDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCharacterCounterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkyCharacterCounterModule, declarations: [SkyCharacterCounterInputDirective,
             SkyCharacterCounterIndicatorComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             SkyCharacterCounterScreenReaderPipe,
             SkyFormsResourcesModule], exports: [SkyCharacterCounterInputDirective,
             SkyCharacterCounterIndicatorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCharacterCounterModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCharacterCounterModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             SkyFormsResourcesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCharacterCounterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCharacterCounterModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -407,29 +405,31 @@ class SkyFormErrorComponent {
             throw new Error('The `sky-form-error` component is not supported in the provided context.');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyFormErrorComponent, isStandalone: true, selector: "sky-form-error", inputs: { errorName: "errorName", errorText: "errorText" }, ngImport: i0, template: `
-    <sky-status-indicator
-      *ngIf="formErrors"
-      class="sky-form-error"
-      descriptionType="error"
-      indicatorType="danger"
-    >
-      {{ errorText }}
-    </sky-status-indicator>
-  `, isInline: true, styles: [":host{display:block;margin-top:var(--sky-margin-stacked-xs)}\n"], dependencies: [{ kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i1.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: SkyFormErrorComponent, isStandalone: true, selector: "sky-form-error", inputs: { errorName: "errorName", errorText: "errorText" }, ngImport: i0, template: `
+    @if (formErrors) {
+      <sky-status-indicator
+        class="sky-form-error"
+        descriptionType="error"
+        indicatorType="danger"
+      >
+        {{ errorText }}
+      </sky-status-indicator>
+    }
+  `, isInline: true, styles: [":host{display:block;margin-top:var(--sky-margin-stacked-xs)}\n"], dependencies: [{ kind: "ngmodule", type: SkyStatusIndicatorModule }, { kind: "component", type: i1$2.λ10, selector: "sky-status-indicator", inputs: ["indicatorType", "descriptionType", "customDescription", "helpPopoverContent", "helpPopoverTitle", "helpKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFormErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-form-error', standalone: true, imports: [SkyStatusIndicatorModule, CommonModule], template: `
-    <sky-status-indicator
-      *ngIf="formErrors"
-      class="sky-form-error"
-      descriptionType="error"
-      indicatorType="danger"
-    >
-      {{ errorText }}
-    </sky-status-indicator>
+            args: [{ selector: 'sky-form-error', standalone: true, imports: [SkyStatusIndicatorModule], template: `
+    @if (formErrors) {
+      <sky-status-indicator
+        class="sky-form-error"
+        descriptionType="error"
+        indicatorType="danger"
+      >
+        {{ errorText }}
+      </sky-status-indicator>
+    }
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;margin-top:var(--sky-margin-stacked-xs)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { errorName: [{
                 type: Input,
@@ -440,11 +440,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
             }] } });
 
 class SkyFormErrorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormErrorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyFormErrorModule, imports: [SkyFormErrorComponent], exports: [SkyFormErrorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormErrorModule, imports: [SkyFormErrorComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFormErrorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkyFormErrorModule, imports: [SkyFormErrorComponent], exports: [SkyFormErrorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFormErrorModule, imports: [SkyFormErrorComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormErrorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFormErrorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SkyFormErrorComponent],
@@ -458,32 +458,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
 class SkyFormErrorsComponent {
     constructor() {
         /**
-         * Indicates whether to show error messages, which might only be true if the
-         * form control is touched or dirty.
+         * Indicates whether the parent component's control is touched
+         */
+        this.touched = false;
+        /**
+         * Indicates whether the parent component's control is dirty
          */
-        this.showErrors = true;
+        this.dirty = false;
         this.ariaAtomic = 'true';
         this.ariaLive = 'assertive';
         this.ariaRelevant = 'all';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.2", type: SkyFormErrorsComponent, isStandalone: true, selector: "sky-form-errors", inputs: { errors: "errors", labelText: "labelText", showErrors: ["showErrors", "showErrors", coerceBooleanProperty] }, host: { properties: { "attr.aria-atomic": "this.ariaAtomic", "attr.aria-live": "this.ariaLive", "attr.aria-relevant": "this.ariaRelevant" } }, ngImport: i0, template: "<ng-container *ngIf=\"labelText && showErrors\">\n  <ng-container *ngIf=\"errors\">\n    <sky-form-error\n      *ngIf=\"errors['required']\"\n      errorName=\"required\"\n      [errorText]=\"'skyux_form_error_required' | skyLibResources: labelText\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['maxlength'] as maxLengthError\"\n      errorName=\"maxlength\"\n      [errorText]=\"\n        'skyux_form_error_maxlength'\n          | skyLibResources: labelText : maxLengthError.requiredLength\n      \"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['minlength'] as minLengthError\"\n      errorName=\"minlength\"\n      [errorText]=\"\n        'skyux_form_error_minlength'\n          | skyLibResources: labelText : minLengthError.requiredLength\n      \"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyDate'] && errors['skyDate']['invalid']\"\n      errorName=\"invalidDate\"\n      [errorText]=\"'skyux_form_error_date' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyDate'] && errors['skyDate']['minDate']\"\n      errorName=\"minDate\"\n      [errorText]=\"'skyux_form_error_date_min' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyDate'] && errors['skyDate']['maxDate']\"\n      errorName=\"maxDate\"\n      [errorText]=\"'skyux_form_error_date_max' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyFuzzyDate'] && errors['skyFuzzyDate']['futureDisabled']\"\n      errorName=\"fuzzyFutureDisabled\"\n      [errorText]=\"\n        'skyux_form_error_fuzzy_date_future_disabled' | skyLibResources\n      \"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyFuzzyDate'] && errors['skyFuzzyDate']['invalid']\"\n      errorName=\"fuzzyInvalidDate\"\n      [errorText]=\"'skyux_form_error_fuzzy_date_invalid' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyFuzzyDate'] && errors['skyFuzzyDate']['maxDate']\"\n      errorName=\"fuzzyMaxDate\"\n      [errorText]=\"'skyux_form_error_fuzzy_date_max_date' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyFuzzyDate'] && errors['skyFuzzyDate']['minDate']\"\n      errorName=\"fuzzyMinDate\"\n      [errorText]=\"'skyux_form_error_fuzzy_date_min_date' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyFuzzyDate'] && errors['skyFuzzyDate']['yearRequired']\"\n      errorName=\"fuzzyYearRequired\"\n      [errorText]=\"\n        'skyux_form_error_fuzzy_date_year_required' | skyLibResources\n      \"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyEmail']\"\n      errorName=\"email\"\n      [errorText]=\"'skyux_form_error_email' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyPhoneField']\"\n      errorName=\"phone\"\n      [errorText]=\"'skyux_form_error_phone' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyTime']\"\n      errorName=\"time\"\n      [errorText]=\"'skyux_form_error_time' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyUrl']\"\n      errorName=\"url\"\n      [errorText]=\"'skyux_form_error_url' | skyLibResources\"\n    />\n  </ng-container>\n  <ng-content />\n</ng-container>\n", styles: [":host,sky-status-indicator{display:block;line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFormErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: SkyFormErrorsComponent, isStandalone: true, selector: "sky-form-errors", inputs: { errors: "errors", labelText: "labelText", touched: ["touched", "touched", booleanAttribute], dirty: ["dirty", "dirty", booleanAttribute] }, host: { properties: { "attr.aria-atomic": "this.ariaAtomic", "attr.aria-live": "this.ariaLive", "attr.aria-relevant": "this.ariaRelevant" } }, ngImport: i0, template: "@if (labelText) {\n  @if (touched) {\n    @if (errors?.['required']) {\n      <sky-form-error\n        errorName=\"required\"\n        [errorText]=\"'skyux_form_error_required' | skyLibResources: labelText\"\n      />\n    }\n\n    @if (errors?.['minlength']; as minLengthError) {\n      <sky-form-error\n        errorName=\"minlength\"\n        [errorText]=\"\n          'skyux_form_error_minlength'\n            | skyLibResources: labelText : minLengthError.requiredLength\n        \"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['invalid']) {\n      <sky-form-error\n        errorName=\"invalidDate\"\n        [errorText]=\"'skyux_form_error_date' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['minDate']) {\n      <sky-form-error\n        errorName=\"minDate\"\n        [errorText]=\"'skyux_form_error_date_min' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['maxDate']) {\n      <sky-form-error\n        errorName=\"maxDate\"\n        [errorText]=\"'skyux_form_error_date_max' | skyLibResources\"\n      />\n    }\n\n    @if (\n      errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['futureDisabled']\n    ) {\n      <sky-form-error\n        errorName=\"fuzzyFutureDisabled\"\n        [errorText]=\"\n          'skyux_form_error_fuzzy_date_future_disabled' | skyLibResources\n        \"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['invalid']) {\n      <sky-form-error\n        errorName=\"fuzzyInvalidDate\"\n        [errorText]=\"'skyux_form_error_fuzzy_date_invalid' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['maxDate']) {\n      <sky-form-error\n        errorName=\"fuzzyMaxDate\"\n        [errorText]=\"'skyux_form_error_fuzzy_date_max_date' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['minDate']) {\n      <sky-form-error\n        errorName=\"fuzzyMinDate\"\n        [errorText]=\"'skyux_form_error_fuzzy_date_min_date' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['yearRequired']) {\n      <sky-form-error\n        errorName=\"fuzzyYearRequired\"\n        [errorText]=\"\n          'skyux_form_error_fuzzy_date_year_required' | skyLibResources\n        \"\n      />\n    }\n\n    @if (errors?.['skyEmail']) {\n      <sky-form-error\n        errorName=\"email\"\n        [errorText]=\"'skyux_form_error_email' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyPhoneField']) {\n      <sky-form-error\n        errorName=\"phone\"\n        [errorText]=\"'skyux_form_error_phone' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyTime']) {\n      <sky-form-error\n        errorName=\"time\"\n        [errorText]=\"'skyux_form_error_time' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyUrl']) {\n      <sky-form-error\n        errorName=\"url\"\n        [errorText]=\"'skyux_form_error_url' | skyLibResources\"\n      />\n    }\n  }\n\n  @if (touched || dirty) {\n    @if (errors?.['maxlength']; as maxLengthError) {\n      <sky-form-error\n        errorName=\"maxlength\"\n        [errorText]=\"\n          'skyux_form_error_maxlength'\n            | skyLibResources: labelText : maxLengthError.requiredLength\n        \"\n      />\n    }\n    <ng-content />\n  }\n}\n", styles: ["sky-status-indicator{display:block;line-height:normal}\n"], dependencies: [{ kind: "ngmodule", type: SkyIdModule }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormErrorsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFormErrorsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-form-errors', standalone: true, imports: [
-                        CommonModule,
-                        SkyIdModule,
-                        SkyFormErrorComponent,
-                        SkyFormsResourcesModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"labelText && showErrors\">\n  <ng-container *ngIf=\"errors\">\n    <sky-form-error\n      *ngIf=\"errors['required']\"\n      errorName=\"required\"\n      [errorText]=\"'skyux_form_error_required' | skyLibResources: labelText\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['maxlength'] as maxLengthError\"\n      errorName=\"maxlength\"\n      [errorText]=\"\n        'skyux_form_error_maxlength'\n          | skyLibResources: labelText : maxLengthError.requiredLength\n      \"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['minlength'] as minLengthError\"\n      errorName=\"minlength\"\n      [errorText]=\"\n        'skyux_form_error_minlength'\n          | skyLibResources: labelText : minLengthError.requiredLength\n      \"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyDate'] && errors['skyDate']['invalid']\"\n      errorName=\"invalidDate\"\n      [errorText]=\"'skyux_form_error_date' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyDate'] && errors['skyDate']['minDate']\"\n      errorName=\"minDate\"\n      [errorText]=\"'skyux_form_error_date_min' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyDate'] && errors['skyDate']['maxDate']\"\n      errorName=\"maxDate\"\n      [errorText]=\"'skyux_form_error_date_max' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyFuzzyDate'] && errors['skyFuzzyDate']['futureDisabled']\"\n      errorName=\"fuzzyFutureDisabled\"\n      [errorText]=\"\n        'skyux_form_error_fuzzy_date_future_disabled' | skyLibResources\n      \"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyFuzzyDate'] && errors['skyFuzzyDate']['invalid']\"\n      errorName=\"fuzzyInvalidDate\"\n      [errorText]=\"'skyux_form_error_fuzzy_date_invalid' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyFuzzyDate'] && errors['skyFuzzyDate']['maxDate']\"\n      errorName=\"fuzzyMaxDate\"\n      [errorText]=\"'skyux_form_error_fuzzy_date_max_date' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyFuzzyDate'] && errors['skyFuzzyDate']['minDate']\"\n      errorName=\"fuzzyMinDate\"\n      [errorText]=\"'skyux_form_error_fuzzy_date_min_date' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyFuzzyDate'] && errors['skyFuzzyDate']['yearRequired']\"\n      errorName=\"fuzzyYearRequired\"\n      [errorText]=\"\n        'skyux_form_error_fuzzy_date_year_required' | skyLibResources\n      \"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyEmail']\"\n      errorName=\"email\"\n      [errorText]=\"'skyux_form_error_email' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyPhoneField']\"\n      errorName=\"phone\"\n      [errorText]=\"'skyux_form_error_phone' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyTime']\"\n      errorName=\"time\"\n      [errorText]=\"'skyux_form_error_time' | skyLibResources\"\n    />\n\n    <sky-form-error\n      *ngIf=\"errors['skyUrl']\"\n      errorName=\"url\"\n      [errorText]=\"'skyux_form_error_url' | skyLibResources\"\n    />\n  </ng-container>\n  <ng-content />\n</ng-container>\n", styles: [":host,sky-status-indicator{display:block;line-height:normal}\n"] }]
+            args: [{ selector: 'sky-form-errors', standalone: true, imports: [SkyIdModule, SkyFormErrorComponent, SkyFormsResourcesModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (labelText) {\n  @if (touched) {\n    @if (errors?.['required']) {\n      <sky-form-error\n        errorName=\"required\"\n        [errorText]=\"'skyux_form_error_required' | skyLibResources: labelText\"\n      />\n    }\n\n    @if (errors?.['minlength']; as minLengthError) {\n      <sky-form-error\n        errorName=\"minlength\"\n        [errorText]=\"\n          'skyux_form_error_minlength'\n            | skyLibResources: labelText : minLengthError.requiredLength\n        \"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['invalid']) {\n      <sky-form-error\n        errorName=\"invalidDate\"\n        [errorText]=\"'skyux_form_error_date' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['minDate']) {\n      <sky-form-error\n        errorName=\"minDate\"\n        [errorText]=\"'skyux_form_error_date_min' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyDate'] && errors?.['skyDate']['maxDate']) {\n      <sky-form-error\n        errorName=\"maxDate\"\n        [errorText]=\"'skyux_form_error_date_max' | skyLibResources\"\n      />\n    }\n\n    @if (\n      errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['futureDisabled']\n    ) {\n      <sky-form-error\n        errorName=\"fuzzyFutureDisabled\"\n        [errorText]=\"\n          'skyux_form_error_fuzzy_date_future_disabled' | skyLibResources\n        \"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['invalid']) {\n      <sky-form-error\n        errorName=\"fuzzyInvalidDate\"\n        [errorText]=\"'skyux_form_error_fuzzy_date_invalid' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['maxDate']) {\n      <sky-form-error\n        errorName=\"fuzzyMaxDate\"\n        [errorText]=\"'skyux_form_error_fuzzy_date_max_date' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['minDate']) {\n      <sky-form-error\n        errorName=\"fuzzyMinDate\"\n        [errorText]=\"'skyux_form_error_fuzzy_date_min_date' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyFuzzyDate'] && errors?.['skyFuzzyDate']['yearRequired']) {\n      <sky-form-error\n        errorName=\"fuzzyYearRequired\"\n        [errorText]=\"\n          'skyux_form_error_fuzzy_date_year_required' | skyLibResources\n        \"\n      />\n    }\n\n    @if (errors?.['skyEmail']) {\n      <sky-form-error\n        errorName=\"email\"\n        [errorText]=\"'skyux_form_error_email' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyPhoneField']) {\n      <sky-form-error\n        errorName=\"phone\"\n        [errorText]=\"'skyux_form_error_phone' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyTime']) {\n      <sky-form-error\n        errorName=\"time\"\n        [errorText]=\"'skyux_form_error_time' | skyLibResources\"\n      />\n    }\n\n    @if (errors?.['skyUrl']) {\n      <sky-form-error\n        errorName=\"url\"\n        [errorText]=\"'skyux_form_error_url' | skyLibResources\"\n      />\n    }\n  }\n\n  @if (touched || dirty) {\n    @if (errors?.['maxlength']; as maxLengthError) {\n      <sky-form-error\n        errorName=\"maxlength\"\n        [errorText]=\"\n          'skyux_form_error_maxlength'\n            | skyLibResources: labelText : maxLengthError.requiredLength\n        \"\n      />\n    }\n    <ng-content />\n  }\n}\n", styles: ["sky-status-indicator{display:block;line-height:normal}\n"] }]
         }], propDecorators: { errors: [{
                 type: Input
             }], labelText: [{
                 type: Input
-            }], showErrors: [{
+            }], touched: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], dirty: [{
                 type: Input,
-                args: [{ transform: coerceBooleanProperty }]
+                args: [{ transform: booleanAttribute }]
             }], ariaAtomic: [{
                 type: HostBinding,
                 args: ['attr.aria-atomic']
@@ -499,11 +500,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
  * @internal
  */
 class SkyFormErrorsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormErrorsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyFormErrorsModule, imports: [SkyFormErrorsComponent, SkyFormErrorComponent], exports: [SkyFormErrorsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormErrorsModule, imports: [SkyFormErrorsComponent, SkyFormErrorComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFormErrorsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkyFormErrorsModule, imports: [SkyFormErrorsComponent, SkyFormErrorComponent], exports: [SkyFormErrorsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFormErrorsModule, imports: [SkyFormErrorsComponent, SkyFormErrorComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormErrorsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFormErrorsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SkyFormErrorsComponent, SkyFormErrorComponent],
@@ -590,17 +591,17 @@ class SkyCheckboxGroupComponent {
         this.stackedLg = !this.headingLevel && this.stacked;
         this.stackedXL = !!this.headingLevel && this.stacked;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.2", type: SkyCheckboxGroupComponent, isStandalone: true, selector: "sky-checkbox-group", inputs: { helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", headingText: "headingText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], headingLevel: ["headingLevel", "headingLevel", numberAttribute], headingStyle: ["headingStyle", "headingStyle", numberAttribute4$1], hintText: "hintText", required: ["required", "required", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stackedLg", "class.sky-margin-stacked-xl": "this.stackedXL" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: SkyCheckboxGroupComponent, isStandalone: true, selector: "sky-checkbox-group", inputs: { helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", headingText: "headingText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], headingLevel: ["headingLevel", "headingLevel", numberAttribute], headingStyle: ["headingStyle", "headingStyle", numberAttribute4$1], hintText: "hintText", required: ["required", "required", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stackedLg", "class.sky-margin-stacked-xl": "this.stackedXL" } }, providers: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: SkyCheckboxGroupComponent,
                 multi: true,
             },
             { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-        ], ngImport: i0, template: "<fieldset\n  class=\"sky-checkbox-group\"\n  [attr.aria-invalid]=\"!!formGroup?.errors\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-errormessage]=\"\n    headingText && formGroup?.errors ? errorId : undefined\n  \"\n>\n  <legend\n    class=\"sky-control-label\"\n    [ngClass]=\"{\n      'sky-screen-reader-only': headingHidden,\n      'sky-margin-stacked-xs': !!hintText,\n      'sky-margin-stacked-sm': !hintText\n    }\"\n  >\n    <span\n      class=\"sky-margin-inline-xs\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n    >\n      <span *ngIf=\"!headingLevel\" [class]=\"'sky-heading-text ' + headingClass\">\n        {{ headingText }}\n      </span>\n      <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h3>\n      <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h4>\n      <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h5> </span\n    ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n      'skyux_checkbox_group_required' | skyLibResources\n    }}</span\n    ><sky-help-inline\n      *ngIf=\"helpPopoverContent || helpKey\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"headingText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </legend>\n  <div\n    skyId\n    [ngClass]=\"{\n      'sky-font-deemphasized sky-margin-stacked-lg sky-checkbox-group-hint-text':\n        !!hintText\n    }\"\n    #hintTextEl=\"skyId\"\n  >\n    {{ hintText }}\n  </div>\n  <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n    <ng-content select=\"sky-checkbox[icon]\" />\n  </span>\n  <span class=\"sky-checkbox-group-stacked\">\n    <ng-content select=\"sky-checkbox\" />\n  </span>\n</fieldset>\n<sky-form-errors\n  *ngIf=\"headingText && formGroup?.errors\"\n  [id]=\"errorId\"\n  [attr.data-sky-id]=\"formErrorsDataId\"\n  [errors]=\"formGroup?.errors\"\n  [labelText]=\"headingText\"\n  [showErrors]=\"formGroup?.touched || formGroup?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host{display:block}h3,h4,h5{margin:0;display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
+        ], ngImport: i0, template: "<fieldset\n  class=\"sky-checkbox-group\"\n  [attr.aria-invalid]=\"!!formGroup?.errors\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-errormessage]=\"\n    headingText && formGroup?.errors ? errorId : undefined\n  \"\n>\n  <legend\n    class=\"sky-control-label\"\n    [ngClass]=\"{\n      'sky-screen-reader-only': headingHidden,\n      'sky-margin-stacked-xs': !!hintText,\n      'sky-margin-stacked-sm': !hintText\n    }\"\n  >\n    <span\n      class=\"sky-margin-inline-xs\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n    >\n      @if (headingLevel === 3) {\n        <h3 [class]=\"headingClass\">\n          {{ headingText }}\n        </h3>\n      } @else if (headingLevel === 4) {\n        <h4 [class]=\"headingClass\">\n          {{ headingText }}\n        </h4>\n      } @else if (headingLevel === 5) {\n        <h5 [class]=\"headingClass\">\n          {{ headingText }}\n        </h5>\n      } @else {\n        <span [class]=\"'sky-heading-text ' + headingClass\">\n          {{ headingText }}\n        </span>\n      }\n    </span>\n    @if (required) {\n      <span class=\"sky-screen-reader-only\">{{\n        'skyux_checkbox_group_required' | skyLibResources\n      }}</span>\n    }\n    @if (helpPopoverContent || helpKey) {\n      <sky-help-inline\n        [helpKey]=\"helpKey\"\n        [labelText]=\"headingText\"\n        [popoverTitle]=\"helpPopoverTitle\"\n        [popoverContent]=\"helpPopoverContent\"\n      />\n    }\n  </legend>\n  <div\n    #hintTextEl=\"skyId\"\n    skyId\n    [ngClass]=\"{\n      'sky-font-deemphasized sky-margin-stacked-lg sky-checkbox-group-hint-text':\n        !!hintText\n    }\"\n  >\n    {{ hintText }}\n  </div>\n  <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n    <ng-content select=\"sky-checkbox[icon]\" />\n  </span>\n  <span class=\"sky-checkbox-group-stacked\">\n    <ng-content select=\"sky-checkbox\" />\n  </span>\n</fieldset>\n<sky-form-errors\n  [id]=\"errorId\"\n  [attr.data-sky-id]=\"formErrorsDataId\"\n  [errors]=\"formGroup?.errors\"\n  [labelText]=\"headingText\"\n  [touched]=\"formGroup?.touched\"\n  [dirty]=\"formGroup?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host{display:block}h3,h4,h5{margin:0;display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCheckboxGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCheckboxGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-checkbox-group', standalone: true, imports: [
                         CommonModule,
@@ -615,7 +616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
                             multi: true,
                         },
                         { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-                    ], template: "<fieldset\n  class=\"sky-checkbox-group\"\n  [attr.aria-invalid]=\"!!formGroup?.errors\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-errormessage]=\"\n    headingText && formGroup?.errors ? errorId : undefined\n  \"\n>\n  <legend\n    class=\"sky-control-label\"\n    [ngClass]=\"{\n      'sky-screen-reader-only': headingHidden,\n      'sky-margin-stacked-xs': !!hintText,\n      'sky-margin-stacked-sm': !hintText\n    }\"\n  >\n    <span\n      class=\"sky-margin-inline-xs\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n    >\n      <span *ngIf=\"!headingLevel\" [class]=\"'sky-heading-text ' + headingClass\">\n        {{ headingText }}\n      </span>\n      <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h3>\n      <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h4>\n      <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h5> </span\n    ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n      'skyux_checkbox_group_required' | skyLibResources\n    }}</span\n    ><sky-help-inline\n      *ngIf=\"helpPopoverContent || helpKey\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"headingText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </legend>\n  <div\n    skyId\n    [ngClass]=\"{\n      'sky-font-deemphasized sky-margin-stacked-lg sky-checkbox-group-hint-text':\n        !!hintText\n    }\"\n    #hintTextEl=\"skyId\"\n  >\n    {{ hintText }}\n  </div>\n  <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n    <ng-content select=\"sky-checkbox[icon]\" />\n  </span>\n  <span class=\"sky-checkbox-group-stacked\">\n    <ng-content select=\"sky-checkbox\" />\n  </span>\n</fieldset>\n<sky-form-errors\n  *ngIf=\"headingText && formGroup?.errors\"\n  [id]=\"errorId\"\n  [attr.data-sky-id]=\"formErrorsDataId\"\n  [errors]=\"formGroup?.errors\"\n  [labelText]=\"headingText\"\n  [showErrors]=\"formGroup?.touched || formGroup?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host{display:block}h3,h4,h5{margin:0;display:inline-block}\n"] }]
+                    ], template: "<fieldset\n  class=\"sky-checkbox-group\"\n  [attr.aria-invalid]=\"!!formGroup?.errors\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-errormessage]=\"\n    headingText && formGroup?.errors ? errorId : undefined\n  \"\n>\n  <legend\n    class=\"sky-control-label\"\n    [ngClass]=\"{\n      'sky-screen-reader-only': headingHidden,\n      'sky-margin-stacked-xs': !!hintText,\n      'sky-margin-stacked-sm': !hintText\n    }\"\n  >\n    <span\n      class=\"sky-margin-inline-xs\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n    >\n      @if (headingLevel === 3) {\n        <h3 [class]=\"headingClass\">\n          {{ headingText }}\n        </h3>\n      } @else if (headingLevel === 4) {\n        <h4 [class]=\"headingClass\">\n          {{ headingText }}\n        </h4>\n      } @else if (headingLevel === 5) {\n        <h5 [class]=\"headingClass\">\n          {{ headingText }}\n        </h5>\n      } @else {\n        <span [class]=\"'sky-heading-text ' + headingClass\">\n          {{ headingText }}\n        </span>\n      }\n    </span>\n    @if (required) {\n      <span class=\"sky-screen-reader-only\">{{\n        'skyux_checkbox_group_required' | skyLibResources\n      }}</span>\n    }\n    @if (helpPopoverContent || helpKey) {\n      <sky-help-inline\n        [helpKey]=\"helpKey\"\n        [labelText]=\"headingText\"\n        [popoverTitle]=\"helpPopoverTitle\"\n        [popoverContent]=\"helpPopoverContent\"\n      />\n    }\n  </legend>\n  <div\n    #hintTextEl=\"skyId\"\n    skyId\n    [ngClass]=\"{\n      'sky-font-deemphasized sky-margin-stacked-lg sky-checkbox-group-hint-text':\n        !!hintText\n    }\"\n  >\n    {{ hintText }}\n  </div>\n  <span class=\"sky-checkbox-group-inline sky-switch-icon-group\">\n    <ng-content select=\"sky-checkbox[icon]\" />\n  </span>\n  <span class=\"sky-checkbox-group-stacked\">\n    <ng-content select=\"sky-checkbox\" />\n  </span>\n</fieldset>\n<sky-form-errors\n  [id]=\"errorId\"\n  [attr.data-sky-id]=\"formErrorsDataId\"\n  [errors]=\"formGroup?.errors\"\n  [labelText]=\"headingText\"\n  [touched]=\"formGroup?.touched\"\n  [dirty]=\"formGroup?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host{display:block}h3,h4,h5{margin:0;display:inline-block}\n"] }]
         }], propDecorators: { helpPopoverContent: [{
                 type: Input
             }], helpPopoverTitle: [{
@@ -665,12 +666,12 @@ class SkyCheckboxLabelTextLabelComponent {
         return this.#_labelText;
     }
     #_labelText;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCheckboxLabelTextLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyCheckboxLabelTextLabelComponent, selector: "sky-checkbox-label-text-label", inputs: { labelHidden: "labelHidden", labelText: "labelText" }, ngImport: i0, template: "<span *ngIf=\"!labelHidden\" class=\"sky-switch-label\">{{ labelText }}</span>\n", styles: [".sky-switch-label:not(.sky-theme-modern *){margin-right:0}\n", ":is(.sky-theme-modern .sky-switch-label){margin-right:0}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCheckboxLabelTextLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: SkyCheckboxLabelTextLabelComponent, selector: "sky-checkbox-label-text-label", inputs: { labelHidden: "labelHidden", labelText: "labelText" }, ngImport: i0, template: "@if (!labelHidden) {\n  <span class=\"sky-switch-label\">{{ labelText }}</span>\n}\n", styles: [".sky-switch-label:not(.sky-theme-modern *){margin-right:0}\n", ":is(.sky-theme-modern .sky-switch-label){margin-right:0}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCheckboxLabelTextLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCheckboxLabelTextLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-checkbox-label-text-label', template: "<span *ngIf=\"!labelHidden\" class=\"sky-switch-label\">{{ labelText }}</span>\n", styles: [".sky-switch-label:not(.sky-theme-modern *){margin-right:0}\n", ":is(.sky-theme-modern .sky-switch-label){margin-right:0}\n"] }]
+            args: [{ selector: 'sky-checkbox-label-text-label', template: "@if (!labelHidden) {\n  <span class=\"sky-switch-label\">{{ labelText }}</span>\n}\n", styles: [".sky-switch-label:not(.sky-theme-modern *){margin-right:0}\n", ":is(.sky-theme-modern .sky-switch-label){margin-right:0}\n"] }]
         }], propDecorators: { labelHidden: [{
                 type: Input
             }], labelText: [{
@@ -684,66 +685,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
  * @deprecated Use `labelText` input on `sky-checkbox-component` instead.
  */
 class SkyCheckboxLabelComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCheckboxLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyCheckboxLabelComponent, selector: "sky-checkbox-label", ngImport: i0, template: "<span class=\"sky-switch-label\"\n  ><span skyTrim><ng-content /></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\" /></span\n></span>\n", dependencies: [{ kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCheckboxLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyCheckboxLabelComponent, selector: "sky-checkbox-label", ngImport: i0, template: "<span class=\"sky-switch-label\"\n  ><span skyTrim><ng-content /></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\" /></span\n></span>\n", dependencies: [{ kind: "directive", type: i1$3.λ4, selector: "[skyTrim]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCheckboxLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCheckboxLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-checkbox-label', template: "<span class=\"sky-switch-label\"\n  ><span skyTrim><ng-content /></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\" /></span\n></span>\n" }]
         }] });
 
-/**
- * Requires child form field components of field groups to use label text.
- * @internal
- */
-class SkyFormFieldLabelTextRequiredService {
-    #loggerService = inject(SkyLogService);
-    validateLabelText(text) {
-        if (typeof text === 'undefined') {
-            this.#loggerService.error('All form fields within <sky-field-group> must have `labelText` set on initialization.');
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormFieldLabelTextRequiredService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormFieldLabelTextRequiredService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormFieldLabelTextRequiredService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * Hide form field components of field groups that are missing label text.
- * @internal
- */
-class SkyFormFieldLabelTextRequiredDirective {
-    #changeDetector = inject(ChangeDetectorRef);
-    #labelTextRequiredSvc = inject(SkyFormFieldLabelTextRequiredService, {
-        optional: true,
-    });
-    ngOnInit() {
-        if (this.#labelTextRequiredSvc) {
-            if (this.labelText === undefined) {
-                this.display = 'none';
-                this.#changeDetector.markForCheck();
-            }
-            this.#labelTextRequiredSvc.validateLabelText(this.labelText);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormFieldLabelTextRequiredDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: SkyFormFieldLabelTextRequiredDirective, isStandalone: true, selector: "[skyFormFieldLabelTextRequired]", inputs: { labelText: "labelText" }, host: { properties: { "style.display": "this.display" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFormFieldLabelTextRequiredDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[skyFormFieldLabelTextRequired]',
-                    standalone: true,
-                }]
-        }], propDecorators: { labelText: [{
-                type: Input
-            }], display: [{
-                type: HostBinding,
-                args: ['style.display']
-            }] } });
-
 /**
  * Replaces the HTML input element with `type="checkbox"`. When users select a checkbox, its value
  * is driven through an `ngModel` attribute that you specify on the `sky-checkbox` element.
@@ -1050,8 +999,8 @@ class SkyCheckboxComponent {
     #toggle() {
         this.checked = !this.checked;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.2", type: SkyCheckboxComponent, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: ["disabled", "disabled", booleanAttribute], tabindex: "tabindex", name: "name", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", icon: "icon", checkboxType: "checkboxType", checked: "checked", indeterminate: "indeterminate", required: ["required", "required", booleanAttribute], labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange", indeterminateChange: "indeterminateChange" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: SkyCheckboxComponent, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: ["disabled", "disabled", booleanAttribute], tabindex: "tabindex", name: "name", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", icon: "icon", checkboxType: "checkboxType", checked: "checked", indeterminate: "indeterminate", required: ["required", "required", booleanAttribute], labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange", indeterminateChange: "indeterminateChange" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked" } }, providers: [
             { provide: NG_VALIDATORS, useExisting: SkyCheckboxComponent, multi: true },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -1059,17 +1008,11 @@ class SkyCheckboxComponent {
                 multi: true,
             },
             { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i4.SkyThemeComponentClassDirective }, { directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], ngImport: i0, template: "<span class=\"sky-checkbox-outer-wrapper\">\n  <label\n    class=\"sky-checkbox-wrapper sky-switch\"\n    [ngClass]=\"{\n      'sky-control-label-required': isCheckboxRequired,\n      'sky-switch-disabled': disabled,\n      'sky-margin-inline-xs': labelText && !icon\n    }\"\n  >\n    <input\n      class=\"sky-checkbox-input sky-switch-input\"\n      type=\"checkbox\"\n      [id]=\"inputId\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      [name]=\"name\"\n      [required]=\"isCheckboxRequired\"\n      [tabIndex]=\"tabindex\"\n      [attr.aria-label]=\"labelText || label\"\n      [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n      [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n      [attr.aria-required]=\"isCheckboxRequired ? true : null\"\n      [attr.aria-invalid]=\"!!control?.errors\"\n      [attr.aria-errormessage]=\"\n        labelText && control?.errors ? errorId : undefined\n      \"\n      [ngClass]=\"{\n        'sky-switch-invalid':\n          (control?.touched || control?.dirty) && control?.errors\n      }\"\n      (blur)=\"onInputBlur()\"\n      (change)=\"onInteractionEvent($event)\"\n      #inputEl\n    />\n    <span\n      class=\"sky-switch-control sky-rounded-corners\"\n      [ngClass]=\"{\n        'sky-switch-control-icon': icon,\n        'sky-switch-control-info': checkboxType === 'info',\n        'sky-switch-control-success': checkboxType === 'success',\n        'sky-switch-control-warning': checkboxType === 'warning',\n        'sky-switch-control-danger': checkboxType === 'danger'\n      }\"\n    >\n      <sky-icon\n        *ngIf=\"icon; else checkedOrIndeterminateTemplate\"\n        [fixedWidth]=\"true\"\n        [icon]=\"icon\"\n      />\n      <ng-template #checkedOrIndeterminateTemplate>\n        <sky-icon\n          *ngIf=\"!indeterminate && checked\"\n          class=\"sky-checkbox-icon-modern-checked\"\n          [fixedWidth]=\"true\"\n          icon=\"check\"\n        />\n        <sky-icon\n          *ngIf=\"indeterminate\"\n          class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n          [fixedWidth]=\"true\"\n          icon=\"square\"\n        />\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"labelText; else labelElement\">\n      <sky-checkbox-label-text-label\n        [labelText]=\"labelText\"\n        [labelHidden]=\"labelHidden\"\n      />\n    </ng-container>\n    <ng-template #labelElement>\n      <ng-content select=\"sky-checkbox-label\" />\n    </ng-template>\n  </label>\n  <sky-help-inline\n    *ngIf=\"(helpPopoverContent || helpKey) && labelText\"\n    class=\"sky-checkbox-help-inline\"\n    [helpKey]=\"helpKey\"\n    [labelText]=\"labelText\"\n    [popoverTitle]=\"helpPopoverTitle\"\n    [popoverContent]=\"helpPopoverContent\"\n  />\n</span>\n<span skyId #hintTextEl=\"skyId\">\n  <div\n    *ngIf=\"hintText\"\n    class=\"sky-font-deemphasized sky-checkbox-hint-text sky-checkbox-form-margin\"\n  >\n    {{ hintText }}\n  </div>\n</span>\n<sky-form-errors\n  class=\"sky-checkbox-form-margin\"\n  *ngIf=\"labelText && control?.errors\"\n  [id]=\"errorId\"\n  [errors]=\"control?.errors\"\n  [labelText]=\"'skyux_checkbox_required_label_text' | skyLibResources\"\n  [showErrors]=\"control?.touched || control?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-checkbox-outer-wrapper:not(.sky-theme-modern *){display:inline-flex}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *) .sky-checkbox-help-inline{display:inline-flex}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *) .sky-checkbox-icon-indeterminate{font-size:14px}.sky-checkbox-hint-text:not(.sky-theme-modern *){margin-top:var(--sky-margin-stacked-xs)}.sky-checkbox-form-margin:not(.sky-theme-modern *){margin-left:calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host.sky-margin-stacked-lg.sky-cmp-theme-default{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-default{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-default:not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}\n", ":is(.sky-theme-modern .sky-checkbox-outer-wrapper){display:inline-flex}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-help-inline{display:inline-flex}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-indeterminate{font-size:14px}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-modern-checked,:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-modern-indeterminate{color:#1870b8}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-switch-control{border-radius:6px}:is(.sky-theme-modern .sky-checkbox-hint-text){margin-top:var(--sky-margin-stacked-xs)}:is(.sky-theme-modern .sky-checkbox-form-margin){margin-left:calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) :host.sky-margin-stacked-lg.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) :host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) :host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-modern:not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: SkyCheckboxLabelTextLabelComponent, selector: "sky-checkbox-label-text-label", inputs: ["labelHidden", "labelText"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: i4$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<span class=\"sky-checkbox-outer-wrapper\">\n  <label\n    class=\"sky-checkbox-wrapper sky-switch\"\n    [ngClass]=\"{\n      'sky-control-label-required': isCheckboxRequired,\n      'sky-switch-disabled': disabled,\n      'sky-margin-inline-xs': labelText && !icon\n    }\"\n  >\n    <input\n      #inputEl\n      class=\"sky-checkbox-input sky-switch-input\"\n      type=\"checkbox\"\n      [id]=\"inputId\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      [name]=\"name\"\n      [required]=\"isCheckboxRequired\"\n      [tabIndex]=\"tabindex\"\n      [attr.aria-label]=\"labelText || label\"\n      [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n      [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n      [attr.aria-required]=\"isCheckboxRequired ? true : null\"\n      [attr.aria-invalid]=\"!!control?.errors\"\n      [attr.aria-errormessage]=\"\n        labelText && control?.errors ? errorId : undefined\n      \"\n      [ngClass]=\"{\n        'sky-switch-invalid':\n          (control?.touched || control?.dirty) && control?.errors\n      }\"\n      (blur)=\"onInputBlur()\"\n      (change)=\"onInteractionEvent($event)\"\n    />\n    <span\n      class=\"sky-switch-control sky-rounded-corners\"\n      [ngClass]=\"{\n        'sky-switch-control-icon': icon,\n        'sky-switch-control-info': checkboxType === 'info',\n        'sky-switch-control-success': checkboxType === 'success',\n        'sky-switch-control-warning': checkboxType === 'warning',\n        'sky-switch-control-danger': checkboxType === 'danger'\n      }\"\n    >\n      @if (icon) {\n        <sky-icon [fixedWidth]=\"true\" [icon]=\"icon\" />\n      } @else {\n        @if (indeterminate) {\n          <sky-icon\n            class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n            icon=\"square\"\n            [fixedWidth]=\"true\"\n          />\n        } @else if (checked) {\n          <sky-icon\n            class=\"sky-checkbox-icon-modern-checked\"\n            icon=\"check\"\n            [fixedWidth]=\"true\"\n          />\n        }\n      }\n    </span>\n\n    @if (labelText) {\n      <sky-checkbox-label-text-label\n        [labelText]=\"labelText\"\n        [labelHidden]=\"labelHidden\"\n      />\n    } @else {\n      <ng-content select=\"sky-checkbox-label\" />\n    }\n  </label>\n  @if ((helpPopoverContent || helpKey) && labelText) {\n    <sky-help-inline\n      class=\"sky-checkbox-help-inline\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  }\n</span>\n<span #hintTextEl=\"skyId\" skyId>\n  @if (hintText) {\n    <div\n      class=\"sky-font-deemphasized sky-checkbox-hint-text sky-checkbox-form-margin\"\n    >\n      {{ hintText }}\n    </div>\n  }\n</span>\n<sky-form-errors\n  [class.sky-checkbox-form-margin]=\"labelText && control?.errors\"\n  [id]=\"errorId\"\n  [errors]=\"control?.errors\"\n  [labelText]=\"labelText\"\n  [touched]=\"control?.touched\"\n  [dirty]=\"control?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-cmp-theme-default{display:inline-block}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *){display:flex}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *) .sky-checkbox-help-inline{display:inline-flex}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *) .sky-checkbox-icon-indeterminate{font-size:14px}.sky-checkbox-hint-text:not(.sky-theme-modern *){margin-top:var(--sky-margin-stacked-xs)}.sky-checkbox-form-margin:not(.sky-theme-modern *){display:block;margin-left:calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host.sky-margin-stacked-lg.sky-cmp-theme-default{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-default{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-default:not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}\n", ":host-context(.sky-theme-modern) :host.sky-cmp-theme-modern{display:inline-block}:is(.sky-theme-modern .sky-checkbox-outer-wrapper){display:flex}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-help-inline{display:inline-flex}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-indeterminate{font-size:14px}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-modern-checked,:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-modern-indeterminate{color:#1870b8}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-switch-control{border-radius:6px}:is(.sky-theme-modern .sky-checkbox-hint-text){margin-top:var(--sky-margin-stacked-xs)}:is(.sky-theme-modern .sky-checkbox-form-margin){display:block;margin-left:calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) :host.sky-margin-stacked-lg.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) :host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) :host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-modern:not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "component", type: SkyCheckboxLabelTextLabelComponent, selector: "sky-checkbox-label-text-label", inputs: ["labelHidden", "labelText"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-checkbox', hostDirectives: [
-                        SkyThemeComponentClassDirective,
-                        {
-                            directive: SkyFormFieldLabelTextRequiredDirective,
-                            inputs: ['labelText'],
-                        },
-                    ], providers: [
+            args: [{ selector: 'sky-checkbox', hostDirectives: [SkyThemeComponentClassDirective], providers: [
                         { provide: NG_VALIDATORS, useExisting: SkyCheckboxComponent, multi: true },
                         {
                             provide: NG_VALUE_ACCESSOR,
@@ -1077,7 +1020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
                             multi: true,
                         },
                         { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-                    ], template: "<span class=\"sky-checkbox-outer-wrapper\">\n  <label\n    class=\"sky-checkbox-wrapper sky-switch\"\n    [ngClass]=\"{\n      'sky-control-label-required': isCheckboxRequired,\n      'sky-switch-disabled': disabled,\n      'sky-margin-inline-xs': labelText && !icon\n    }\"\n  >\n    <input\n      class=\"sky-checkbox-input sky-switch-input\"\n      type=\"checkbox\"\n      [id]=\"inputId\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      [name]=\"name\"\n      [required]=\"isCheckboxRequired\"\n      [tabIndex]=\"tabindex\"\n      [attr.aria-label]=\"labelText || label\"\n      [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n      [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n      [attr.aria-required]=\"isCheckboxRequired ? true : null\"\n      [attr.aria-invalid]=\"!!control?.errors\"\n      [attr.aria-errormessage]=\"\n        labelText && control?.errors ? errorId : undefined\n      \"\n      [ngClass]=\"{\n        'sky-switch-invalid':\n          (control?.touched || control?.dirty) && control?.errors\n      }\"\n      (blur)=\"onInputBlur()\"\n      (change)=\"onInteractionEvent($event)\"\n      #inputEl\n    />\n    <span\n      class=\"sky-switch-control sky-rounded-corners\"\n      [ngClass]=\"{\n        'sky-switch-control-icon': icon,\n        'sky-switch-control-info': checkboxType === 'info',\n        'sky-switch-control-success': checkboxType === 'success',\n        'sky-switch-control-warning': checkboxType === 'warning',\n        'sky-switch-control-danger': checkboxType === 'danger'\n      }\"\n    >\n      <sky-icon\n        *ngIf=\"icon; else checkedOrIndeterminateTemplate\"\n        [fixedWidth]=\"true\"\n        [icon]=\"icon\"\n      />\n      <ng-template #checkedOrIndeterminateTemplate>\n        <sky-icon\n          *ngIf=\"!indeterminate && checked\"\n          class=\"sky-checkbox-icon-modern-checked\"\n          [fixedWidth]=\"true\"\n          icon=\"check\"\n        />\n        <sky-icon\n          *ngIf=\"indeterminate\"\n          class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n          [fixedWidth]=\"true\"\n          icon=\"square\"\n        />\n      </ng-template>\n    </span>\n\n    <ng-container *ngIf=\"labelText; else labelElement\">\n      <sky-checkbox-label-text-label\n        [labelText]=\"labelText\"\n        [labelHidden]=\"labelHidden\"\n      />\n    </ng-container>\n    <ng-template #labelElement>\n      <ng-content select=\"sky-checkbox-label\" />\n    </ng-template>\n  </label>\n  <sky-help-inline\n    *ngIf=\"(helpPopoverContent || helpKey) && labelText\"\n    class=\"sky-checkbox-help-inline\"\n    [helpKey]=\"helpKey\"\n    [labelText]=\"labelText\"\n    [popoverTitle]=\"helpPopoverTitle\"\n    [popoverContent]=\"helpPopoverContent\"\n  />\n</span>\n<span skyId #hintTextEl=\"skyId\">\n  <div\n    *ngIf=\"hintText\"\n    class=\"sky-font-deemphasized sky-checkbox-hint-text sky-checkbox-form-margin\"\n  >\n    {{ hintText }}\n  </div>\n</span>\n<sky-form-errors\n  class=\"sky-checkbox-form-margin\"\n  *ngIf=\"labelText && control?.errors\"\n  [id]=\"errorId\"\n  [errors]=\"control?.errors\"\n  [labelText]=\"'skyux_checkbox_required_label_text' | skyLibResources\"\n  [showErrors]=\"control?.touched || control?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-checkbox-outer-wrapper:not(.sky-theme-modern *){display:inline-flex}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *) .sky-checkbox-help-inline{display:inline-flex}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *) .sky-checkbox-icon-indeterminate{font-size:14px}.sky-checkbox-hint-text:not(.sky-theme-modern *){margin-top:var(--sky-margin-stacked-xs)}.sky-checkbox-form-margin:not(.sky-theme-modern *){margin-left:calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host.sky-margin-stacked-lg.sky-cmp-theme-default{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-default{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-default:not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}\n", ":is(.sky-theme-modern .sky-checkbox-outer-wrapper){display:inline-flex}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-help-inline{display:inline-flex}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-indeterminate{font-size:14px}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-modern-checked,:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-modern-indeterminate{color:#1870b8}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-switch-control{border-radius:6px}:is(.sky-theme-modern .sky-checkbox-hint-text){margin-top:var(--sky-margin-stacked-xs)}:is(.sky-theme-modern .sky-checkbox-form-margin){margin-left:calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) :host.sky-margin-stacked-lg.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) :host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) :host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-modern:not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}\n"] }]
+                    ], template: "<span class=\"sky-checkbox-outer-wrapper\">\n  <label\n    class=\"sky-checkbox-wrapper sky-switch\"\n    [ngClass]=\"{\n      'sky-control-label-required': isCheckboxRequired,\n      'sky-switch-disabled': disabled,\n      'sky-margin-inline-xs': labelText && !icon\n    }\"\n  >\n    <input\n      #inputEl\n      class=\"sky-checkbox-input sky-switch-input\"\n      type=\"checkbox\"\n      [id]=\"inputId\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled\"\n      [name]=\"name\"\n      [required]=\"isCheckboxRequired\"\n      [tabIndex]=\"tabindex\"\n      [attr.aria-label]=\"labelText || label\"\n      [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n      [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n      [attr.aria-required]=\"isCheckboxRequired ? true : null\"\n      [attr.aria-invalid]=\"!!control?.errors\"\n      [attr.aria-errormessage]=\"\n        labelText && control?.errors ? errorId : undefined\n      \"\n      [ngClass]=\"{\n        'sky-switch-invalid':\n          (control?.touched || control?.dirty) && control?.errors\n      }\"\n      (blur)=\"onInputBlur()\"\n      (change)=\"onInteractionEvent($event)\"\n    />\n    <span\n      class=\"sky-switch-control sky-rounded-corners\"\n      [ngClass]=\"{\n        'sky-switch-control-icon': icon,\n        'sky-switch-control-info': checkboxType === 'info',\n        'sky-switch-control-success': checkboxType === 'success',\n        'sky-switch-control-warning': checkboxType === 'warning',\n        'sky-switch-control-danger': checkboxType === 'danger'\n      }\"\n    >\n      @if (icon) {\n        <sky-icon [fixedWidth]=\"true\" [icon]=\"icon\" />\n      } @else {\n        @if (indeterminate) {\n          <sky-icon\n            class=\"sky-checkbox-icon-indeterminate sky-checkbox-icon-modern-indeterminate\"\n            icon=\"square\"\n            [fixedWidth]=\"true\"\n          />\n        } @else if (checked) {\n          <sky-icon\n            class=\"sky-checkbox-icon-modern-checked\"\n            icon=\"check\"\n            [fixedWidth]=\"true\"\n          />\n        }\n      }\n    </span>\n\n    @if (labelText) {\n      <sky-checkbox-label-text-label\n        [labelText]=\"labelText\"\n        [labelHidden]=\"labelHidden\"\n      />\n    } @else {\n      <ng-content select=\"sky-checkbox-label\" />\n    }\n  </label>\n  @if ((helpPopoverContent || helpKey) && labelText) {\n    <sky-help-inline\n      class=\"sky-checkbox-help-inline\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  }\n</span>\n<span #hintTextEl=\"skyId\" skyId>\n  @if (hintText) {\n    <div\n      class=\"sky-font-deemphasized sky-checkbox-hint-text sky-checkbox-form-margin\"\n    >\n      {{ hintText }}\n    </div>\n  }\n</span>\n<sky-form-errors\n  [class.sky-checkbox-form-margin]=\"labelText && control?.errors\"\n  [id]=\"errorId\"\n  [errors]=\"control?.errors\"\n  [labelText]=\"labelText\"\n  [touched]=\"control?.touched\"\n  [dirty]=\"control?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-cmp-theme-default{display:inline-block}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *){display:flex}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *) .sky-checkbox-help-inline{display:inline-flex}.sky-checkbox-outer-wrapper:not(.sky-theme-modern *) .sky-checkbox-icon-indeterminate{font-size:14px}.sky-checkbox-hint-text:not(.sky-theme-modern *){margin-top:var(--sky-margin-stacked-xs)}.sky-checkbox-form-margin:not(.sky-theme-modern *){display:block;margin-left:calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host.sky-margin-stacked-lg.sky-cmp-theme-default{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-default{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-default:not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}\n", ":host-context(.sky-theme-modern) :host.sky-cmp-theme-modern{display:inline-block}:is(.sky-theme-modern .sky-checkbox-outer-wrapper){display:flex}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-help-inline{display:inline-flex}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-indeterminate{font-size:14px}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-modern-checked,:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-icon-modern-indeterminate{color:#1870b8}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}:is(.sky-theme-modern .sky-checkbox-outer-wrapper) .sky-switch-control{border-radius:6px}:is(.sky-theme-modern .sky-checkbox-hint-text){margin-top:var(--sky-margin-stacked-xs)}:is(.sky-theme-modern .sky-checkbox-form-margin){display:block;margin-left:calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) :host.sky-margin-stacked-lg.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) :host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) :host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host.sky-cmp-theme-modern:not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], labelledBy: [{
@@ -1135,8 +1078,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
             }] } });
 
 class SkyCheckboxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyCheckboxModule, declarations: [SkyCheckboxComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkyCheckboxModule, declarations: [SkyCheckboxComponent,
             SkyCheckboxLabelComponent,
             SkyCheckboxLabelTextLabelComponent], imports: [CommonModule,
             FormsModule,
@@ -1151,7 +1094,7 @@ class SkyCheckboxModule {
             SkyCheckboxLabelComponent,
             SkyCheckboxGroupComponent,
             SkyFormErrorModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCheckboxModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCheckboxModule, imports: [CommonModule,
             FormsModule,
             SkyCheckboxGroupComponent,
             SkyFormErrorModule,
@@ -1162,7 +1105,7 @@ class SkyCheckboxModule {
             SkyIdModule,
             SkyTrimModule, SkyFormErrorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyCheckboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyCheckboxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1222,12 +1165,12 @@ class SkyFieldGroupComponent {
     set headingStyle(value) {
         this.headingClass = `sky-font-heading-${value}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFieldGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.2", type: SkyFieldGroupComponent, isStandalone: true, selector: "sky-field-group", inputs: { headingText: "headingText", hintText: "hintText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], headingLevel: ["headingLevel", "headingLevel", numberAttribute3], headingStyle: ["headingStyle", "headingStyle", numberAttribute3], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey" }, host: { properties: { "class.sky-margin-stacked-xl": "this.stacked" } }, providers: [SkyFormFieldLabelTextRequiredService], ngImport: i0, template: "<fieldset\n  class=\"sky-field-group\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n>\n  <span class=\"sky-field-group-legend-wrapper\">\n    <legend\n      [ngClass]=\"{\n        'sky-screen-reader-only': headingHidden,\n        'sky-margin-inline-xs': helpPopoverContent\n      }\"\n    >\n      <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h3>\n      <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h4>\n    </legend>\n    <sky-help-inline\n      *ngIf=\"helpPopoverContent || helpKey\"\n      class=\"sky-field-group-help-inline\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"headingText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </span>\n  <div skyId #hintTextEl=\"skyId\">\n    <div\n      *ngIf=\"hintText\"\n      class=\"sky-field-group-hint-text sky-font-deemphasized\"\n    >\n      {{ hintText }}\n    </div>\n  </div>\n  <div class=\"sky-field-group-content\">\n    <ng-content />\n  </div>\n</fieldset>\n", styles: [":host{display:block}.sky-field-group-hint-text{margin-top:var(--sky-margin-stacked-xs)}.sky-field-group-content{margin-top:var(--sky-margin-stacked-sm)}h3,h4{margin:0}.sky-field-group-legend-wrapper{display:inline-flex}sky-help-inline{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFieldGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: SkyFieldGroupComponent, isStandalone: true, selector: "sky-field-group", inputs: { headingText: "headingText", hintText: "hintText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], headingLevel: ["headingLevel", "headingLevel", numberAttribute3], headingStyle: ["headingStyle", "headingStyle", numberAttribute3], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey" }, host: { properties: { "class.sky-margin-stacked-xl": "this.stacked" } }, ngImport: i0, template: "<fieldset\n  class=\"sky-field-group\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n>\n  <span class=\"sky-field-group-legend-wrapper\">\n    <legend\n      [ngClass]=\"{\n        'sky-screen-reader-only': headingHidden,\n        'sky-margin-inline-xs': helpPopoverContent\n      }\"\n    >\n      @if (headingLevel === 3) {\n        <h3 [class]=\"headingClass\">\n          {{ headingText }}\n        </h3>\n      } @else if (headingLevel === 4) {\n        <h4 [class]=\"headingClass\">\n          {{ headingText }}\n        </h4>\n      }\n    </legend>\n    @if (helpPopoverContent || helpKey) {\n      <sky-help-inline\n        class=\"sky-field-group-help-inline\"\n        [helpKey]=\"helpKey\"\n        [labelText]=\"headingText\"\n        [popoverTitle]=\"helpPopoverTitle\"\n        [popoverContent]=\"helpPopoverContent\"\n      />\n    }\n  </span>\n  <div #hintTextEl=\"skyId\" skyId>\n    @if (hintText) {\n      <div class=\"sky-field-group-hint-text sky-font-deemphasized\">\n        {{ hintText }}\n      </div>\n    }\n  </div>\n  <div class=\"sky-field-group-content\">\n    <ng-content />\n  </div>\n</fieldset>\n", styles: [":host{display:block}.sky-field-group-hint-text{margin-top:var(--sky-margin-stacked-xs)}.sky-field-group-content{margin-top:var(--sky-margin-stacked-sm)}h3,h4{margin:0}.sky-field-group-legend-wrapper{display:inline-flex}sky-help-inline{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFieldGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFieldGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-field-group', standalone: true, imports: [CommonModule, SkyHelpInlineModule, SkyIdModule], providers: [SkyFormFieldLabelTextRequiredService], template: "<fieldset\n  class=\"sky-field-group\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n>\n  <span class=\"sky-field-group-legend-wrapper\">\n    <legend\n      [ngClass]=\"{\n        'sky-screen-reader-only': headingHidden,\n        'sky-margin-inline-xs': helpPopoverContent\n      }\"\n    >\n      <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h3>\n      <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h4>\n    </legend>\n    <sky-help-inline\n      *ngIf=\"helpPopoverContent || helpKey\"\n      class=\"sky-field-group-help-inline\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"headingText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </span>\n  <div skyId #hintTextEl=\"skyId\">\n    <div\n      *ngIf=\"hintText\"\n      class=\"sky-field-group-hint-text sky-font-deemphasized\"\n    >\n      {{ hintText }}\n    </div>\n  </div>\n  <div class=\"sky-field-group-content\">\n    <ng-content />\n  </div>\n</fieldset>\n", styles: [":host{display:block}.sky-field-group-hint-text{margin-top:var(--sky-margin-stacked-xs)}.sky-field-group-content{margin-top:var(--sky-margin-stacked-sm)}h3,h4{margin:0}.sky-field-group-legend-wrapper{display:inline-flex}sky-help-inline{display:inline-flex}\n"] }]
+            args: [{ selector: 'sky-field-group', standalone: true, imports: [CommonModule, SkyHelpInlineModule, SkyIdModule], template: "<fieldset\n  class=\"sky-field-group\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n>\n  <span class=\"sky-field-group-legend-wrapper\">\n    <legend\n      [ngClass]=\"{\n        'sky-screen-reader-only': headingHidden,\n        'sky-margin-inline-xs': helpPopoverContent\n      }\"\n    >\n      @if (headingLevel === 3) {\n        <h3 [class]=\"headingClass\">\n          {{ headingText }}\n        </h3>\n      } @else if (headingLevel === 4) {\n        <h4 [class]=\"headingClass\">\n          {{ headingText }}\n        </h4>\n      }\n    </legend>\n    @if (helpPopoverContent || helpKey) {\n      <sky-help-inline\n        class=\"sky-field-group-help-inline\"\n        [helpKey]=\"helpKey\"\n        [labelText]=\"headingText\"\n        [popoverTitle]=\"helpPopoverTitle\"\n        [popoverContent]=\"helpPopoverContent\"\n      />\n    }\n  </span>\n  <div #hintTextEl=\"skyId\" skyId>\n    @if (hintText) {\n      <div class=\"sky-field-group-hint-text sky-font-deemphasized\">\n        {{ hintText }}\n      </div>\n    }\n  </div>\n  <div class=\"sky-field-group-content\">\n    <ng-content />\n  </div>\n</fieldset>\n", styles: [":host{display:block}.sky-field-group-hint-text{margin-top:var(--sky-margin-stacked-xs)}.sky-field-group-content{margin-top:var(--sky-margin-stacked-sm)}h3,h4{margin:0}.sky-field-group-legend-wrapper{display:inline-flex}sky-help-inline{display:inline-flex}\n"] }]
         }], propDecorators: { headingText: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1257,11 +1200,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
             }] } });
 
 class SkyFieldGroupModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFieldGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyFieldGroupModule, imports: [SkyFieldGroupComponent], exports: [SkyFieldGroupComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFieldGroupModule, imports: [SkyFieldGroupComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFieldGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkyFieldGroupModule, imports: [SkyFieldGroupComponent], exports: [SkyFieldGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFieldGroupModule, imports: [SkyFieldGroupComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFieldGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFieldGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [SkyFieldGroupComponent],
@@ -1285,12 +1228,12 @@ class SkyFileAttachmentLabelComponent {
                 'on the `sky-file-attachment` component instead.',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyFileAttachmentLabelComponent, isStandalone: true, selector: "sky-file-attachment-label", viewQueries: [{ propertyName: "labelContentId", first: true, predicate: ["labelContentId"], descendants: true }], ngImport: i0, template: "<span class=\"sky-control-label\"\n  ><span skyId skyTrim #labelContentId=\"skyId\"><ng-content /></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\" /></span\n></span>\n", styles: [":host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyTrimModule }, { kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyFileAttachmentLabelComponent, isStandalone: true, selector: "sky-file-attachment-label", viewQueries: [{ propertyName: "labelContentId", first: true, predicate: ["labelContentId"], descendants: true }], ngImport: i0, template: "<span class=\"sky-control-label\"\n  ><span skyId skyTrim #labelContentId=\"skyId\"><ng-content /></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\" /></span\n></span>\n", styles: [":host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyTrimModule }, { kind: "directive", type: i1$3.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentLabelComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, SkyIdModule, SkyTrimModule], selector: 'sky-file-attachment-label', standalone: true, template: "<span class=\"sky-control-label\"\n  ><span skyId skyTrim #labelContentId=\"skyId\"><ng-content /></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\" /></span\n></span>\n", styles: [":host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [SkyIdModule, SkyTrimModule], selector: 'sky-file-attachment-label', standalone: true, template: "<span class=\"sky-control-label\"\n  ><span skyId skyTrim #labelContentId=\"skyId\"><ng-content /></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\" /></span\n></span>\n", styles: [":host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { labelContentId: [{
                 type: ViewChild,
                 args: ['labelContentId']
@@ -1342,16 +1285,36 @@ class SkyFileSizePipe {
         // TODO: Need to implement the async `getString` method in a breaking change.
         return this.#resourcesService.getStringForLocale({ locale: this.#defaultLocale }, key, ...args);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileSizePipe, deps: [{ token: i3.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyFileSizePipe, isStandalone: true, name: "skyFileSize" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileSizePipe, deps: [{ token: i1$1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkyFileSizePipe, isStandalone: true, name: "skyFileSize" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileSizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileSizePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyFileSize',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i3.SkyLibResourcesService }] });
+        }], ctorParameters: () => [{ type: i1$1.SkyLibResourcesService }] });
+
+/**
+ * Joins an array of IDs with a single space.
+ * @internal
+ */
+class SkyFileAttachmentJoinIdsPipe {
+    transform(...ids) {
+        // Remove undefined values and join with a " ".
+        return ids && ids.filter((id) => id).join(' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentJoinIdsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentJoinIdsPipe, isStandalone: true, name: "skyFileAttachmentJoinIds" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentJoinIdsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'skyFileAttachmentJoinIds',
+                    standalone: true,
+                }]
+        }] });
 
 /**
  * @internal
@@ -1447,10 +1410,10 @@ class SkyFileAttachmentService {
     #getMimeMainType(type) {
         return type.substr(0, type.indexOf('/'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentService, decorators: [{
             type: Injectable
         }] });
 
@@ -1515,15 +1478,14 @@ class SkyFileItemService {
         }
         return fileType.toUpperCase();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileItemService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileItemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileItemService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileItemService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileItemService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
-let uniqueId = 0;
 const MAX_FILE_SIZE_DEFAULT$1 = 500000;
 const MIN_FILE_SIZE_DEFAULT$1 = 0;
 /**
@@ -1557,9 +1519,11 @@ class SkyFileAttachmentComponent {
         const isNewValue = value !== this.value && value !== null;
         if (isNewValue) {
             if (value) {
+                this.isData = value.url?.startsWith('data:');
                 this.isImage = this.#fileItemService.isImage(value);
             }
             else {
+                this.isData = false;
                 this.isImage = false;
             }
             this.#setFileName(value);
@@ -1576,7 +1540,6 @@ class SkyFileAttachmentComponent {
             (this.ngControl?.control?.hasValidator(Validators.required) ?? false));
     }
     #enterEventTarget;
-    #fileAttachmentId;
     #ngUnsubscribe;
     #_maxFileSize;
     #_minFileSize;
@@ -1605,11 +1568,11 @@ class SkyFileAttachmentComponent {
         this.stacked = false;
         /**
          * Fires when users add or remove files.
+         * @deprecated Subscribe to the form control's `valueChanges` event instead.
          */
         this.fileChange = new EventEmitter();
         /**
-         * Fires when users select the file name link. Make sure to bind the event.
-         * If you do not, the file name link will be a dead link.
+         * Fires when users select the file name link.
          */
         this.fileClick = new EventEmitter();
         this.acceptedOver = false;
@@ -1627,7 +1590,7 @@ class SkyFileAttachmentComponent {
         this.showFileAttachmentButton = true;
         this.truncatedFileName = '';
         this.isImage = false;
-        this.#fileAttachmentId = uniqueId++;
+        this.isData = false;
         this.#ngUnsubscribe = new Subject();
         this.#_maxFileSize = MAX_FILE_SIZE_DEFAULT$1;
         this.#_minFileSize = MIN_FILE_SIZE_DEFAULT$1;
@@ -1635,6 +1598,7 @@ class SkyFileAttachmentComponent {
         this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
         this.#resourcesSvc = inject(SkyLibResourcesService);
         this.errorId = this.#idSvc.generateId();
+        this.labelId = this.#idSvc.generateId();
         // istanbul ignore next
         // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
         this.#onChange = (_) => {
@@ -1650,8 +1614,6 @@ class SkyFileAttachmentComponent {
         this.#fileItemService = fileItemService;
         this.ngControl = ngControl;
         this.#themeSvc = themeSvc;
-        this.labelElementId = `sky-file-attachment-label-${this.#fileAttachmentId}`;
-        this.fileDropDescriptionElementId = `sky-file-attachment-drop-description-${this.#fileAttachmentId}`;
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
@@ -1899,21 +1861,17 @@ class SkyFileAttachmentComponent {
     // istanbul ignore next
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     #onTouched;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyFileAttachmentService }, { token: SkyFileItemService }, { token: i3$1.NgControl, optional: true, self: true }, { token: i4.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.2", type: SkyFileAttachmentComponent, isStandalone: true, selector: "sky-file-attachment", inputs: { acceptedTypes: "acceptedTypes", acceptedTypesErrorMessage: "acceptedTypesErrorMessage", disabled: ["disabled", "disabled", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", maxFileSize: "maxFileSize", minFileSize: "minFileSize", stacked: ["stacked", "stacked", booleanAttribute], validateFn: "validateFn", required: ["required", "required", booleanAttribute] }, outputs: { fileChange: "fileChange", fileClick: "fileClick" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyFileAttachmentService }, { token: SkyFileItemService }, { token: i2.NgControl, optional: true, self: true }, { token: i4$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: SkyFileAttachmentComponent, isStandalone: true, selector: "sky-file-attachment", inputs: { acceptedTypes: "acceptedTypes", acceptedTypesErrorMessage: "acceptedTypesErrorMessage", disabled: ["disabled", "disabled", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", maxFileSize: "maxFileSize", minFileSize: "minFileSize", stacked: ["stacked", "stacked", booleanAttribute], validateFn: "validateFn", required: ["required", "required", booleanAttribute] }, outputs: { fileChange: "fileChange", fileClick: "fileClick" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked" } }, providers: [
             SkyFileAttachmentService,
             { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-        ], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], hostDirectives: [{ directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], ngImport: i0, template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [attr.id]=\"labelElementId\"\n    [ngClass]=\"{\n      'sky-control-label-required':\n        !labelText && isRequired && hasLabelComponent\n    }\"\n  >\n    <ng-container *ngIf=\"labelText; else labelContent\">\n      <span\n        *ngIf=\"!labelHidden\"\n        class=\"sky-control-label sky-margin-inline-xs\"\n        [ngClass]=\"{\n          'sky-control-label-required': isRequired\n        }\"\n        >{{ labelText }}</span\n      ><sky-help-inline\n        *ngIf=\"helpPopoverContent || helpKey\"\n        [labelText]=\"labelText\"\n        [helpKey]=\"helpKey\"\n        [popoverTitle]=\"helpPopoverTitle\"\n        [popoverContent]=\"helpPopoverContent\"\n      />\n    </ng-container>\n    <span\n      class=\"sky-screen-reader-only\"\n      *ngIf=\"isRequired && (hasLabelComponent || labelText)\"\n      >{{ 'skyux_file_attachment_required' | skyLibResources }}</span\n    >\n  </div>\n  <div\n    class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      aria-hidden=\"true\"\n      class=\"sky-screen-reader-only\"\n      role=\"tooltip\"\n      [attr.id]=\"fileDropDescriptionElementId\"\n    >\n      {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n    </div>\n    <input\n      hidden\n      tabindex=\"-1\"\n      type=\"file\"\n      [attr.accept]=\"acceptedTypes || null\"\n      [disabled]=\"disabled\"\n      [required]=\"isRequired\"\n      (change)=\"fileChangeEvent($event)\"\n      #fileInput\n    />\n    <ng-container *ngIf=\"showFileAttachmentButton\">\n      <button\n        *ngIf=\"showFileAttachmentButton\"\n        class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n        type=\"button\"\n        skyId\n        [attr.aria-describedby]=\"\n          (hintText ? hintTextEl.id + ' ' : '') + fileDropDescriptionElementId\n        \"\n        [attr.aria-label]=\"\n          value\n            ? ('skyux_file_attachment_button_label_replace_file_label'\n              | skyLibResources: fileName)\n            : ('skyux_file_attachment_button_label_choose_file_label'\n              | skyLibResources)\n        \"\n        [attr.aria-labelledby]=\"\n          attachButton.id +\n          ' ' +\n          (labelText\n            ? labelElementId\n            : hasLabelComponent\n              ? labelComponents?.get(0)?.labelContentId?.id\n              : undefined)\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"onDropClicked()\"\n        #attachButton=\"skyId\"\n      >\n        <sky-icon icon=\"folder-open-o\" />\n        {{\n          value\n            ? ('skyux_file_attachment_button_label_replace_file'\n              | skyLibResources)\n            : ('skyux_file_attachment_button_label_choose_file'\n              | skyLibResources)\n        }}\n      </button>\n    </ng-container>\n    <sky-icon\n      *ngIf=\"value && !isImage && currentThemeName === 'modern'\"\n      class=\"sky-file-attachment-icon sky-deemphasized\"\n      icon=\"file-o\"\n      size=\"2x\"\n    />\n    <span\n      *ngIf=\"value || currentThemeName === 'default'\"\n      class=\"sky-file-attachment-name\"\n    >\n      <a\n        *ngIf=\"value; else noFile\"\n        [attr.title]=\"fileName\"\n        (click)=\"emitClick()\"\n      >\n        {{ truncatedFileName }}\n      </a>\n    </span>\n    <ng-template #noFile>\n      <span class=\"sky-file-attachment-none sky-deemphasized\">\n        {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n      </span>\n    </ng-template>\n    <button\n      *ngIf=\"value\"\n      class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n      skyId\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_file_attachment_file_item_remove' | skyLibResources: fileName\n      \"\n      [attr.aria-labelledby]=\"\n        deleteButton.id +\n        ' ' +\n        (hasLabelComponent\n          ? labelComponents?.get(0)?.labelContentId?.id\n          : undefined)\n      \"\n      [disabled]=\"disabled\"\n      [skyThemeClass]=\"{\n        'sky-btn-icon-borderless': 'modern'\n      }\"\n      (click)=\"deleteFileAttachment()\"\n      #deleteButton=\"skyId\"\n    >\n      <sky-icon icon=\"trash-o\" size=\"md\" />\n    </button>\n  </div>\n\n  <img\n    *ngIf=\"value && isImage\"\n    class=\"sky-file-attachment-preview-img\"\n    [alt]=\"\n      'skyux_file_attachment_file_upload_image_preview_alt_text'\n        | skyLibResources\n    \"\n    [src]=\"value.url\"\n  />\n</div>\n<div skyId #hintTextEl=\"skyId\">\n  <div\n    *ngIf=\"hintText\"\n    class=\"sky-font-deemphasized sky-file-attachment-hint-text\"\n  >\n    {{ hintText }}\n  </div>\n</div>\n\n<sky-form-errors\n  *ngIf=\"labelText && (ngControl?.control?.errors || fileErrorValidation)\"\n  [id]=\"errorId\"\n  [errors]=\"\n    ngControl?.errors !== null ? ngControl?.errors : fileErrorValidation\n  \"\n  [labelText]=\"labelText\"\n  [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'fileType'\"\n    [errorName]=\"'fileType'\"\n    [errorText]=\"\n      acceptedTypesErrorMessage ??\n        'skyux_file_attachment_file_type_error_label_text'\n        | skyLibResources: fileErrorParam\n    \"\n  />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'maxFileSize'\"\n    [errorName]=\"'maxFileSize'\"\n    [errorText]=\"\n      'skyux_file_attachment_max_file_size_error_label_text'\n        | skyLibResources: (fileErrorParam | skyFileSize)\n    \"\n  />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'minFileSize'\"\n    [errorName]=\"'minFileSize'\"\n    [errorText]=\"\n      'skyux_file_attachment_min_file_size_error_label_text'\n        | skyLibResources: (fileErrorParam | skyFileSize)\n    \"\n  />\n</sky-form-errors>\n\n<ng-template #labelContent>\n  <ng-content select=\"sky-file-attachment-label\" />\n</ng-template>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-attachment-wrapper{display:inline-block}.sky-file-attachment-upload{padding-right:8px;display:block;border:1px solid transparent}.sky-file-attachment-accept{border-color:#72bf44;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}.sky-file-attachment-reject{border-color:#ef4044;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044}.sky-file-attachment-name{padding:0 5px}.sky-file-attachment-name a{cursor:pointer}.sky-file-attachment-delete{border:none;color:#cdcfd2;cursor:pointer;padding:0}.sky-file-attachment-delete:hover{color:#979ba2;transition:color .15s}.sky-file-attachment-preview-img{max-width:25%;height:auto;box-shadow:0 0 5px #666;margin:10px}.sky-file-attachment-hint-text{margin-top:var(--sky-margin-stacked-xs)}:host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-none{font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "labelComponents", predicate: SkyFileAttachmentLabelComponent }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInputRef"], descendants: true }], ngImport: i0, template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [ngClass]=\"{\n      'sky-control-label-required':\n        !labelText && isRequired && hasLabelComponent\n    }\"\n  >\n    @if (labelText) {\n      @if (!labelHidden) {\n        <span\n          class=\"sky-control-label sky-margin-inline-xs\"\n          [attr.id]=\"labelId\"\n          [ngClass]=\"{\n            'sky-control-label-required': isRequired\n          }\"\n          >{{ labelText }}</span\n        >\n      }\n    } @else {\n      <ng-content select=\"sky-file-attachment-label\" />\n    }\n    @if (isRequired && (hasLabelComponent || labelText)) {\n      <span class=\"sky-screen-reader-only\">{{\n        'skyux_file_attachment_required' | skyLibResources\n      }}</span>\n    }\n    @if (labelText && (helpPopoverContent || helpKey)) {\n      <sky-help-inline\n        [labelText]=\"labelText\"\n        [helpKey]=\"helpKey\"\n        [popoverTitle]=\"helpPopoverTitle\"\n        [popoverContent]=\"helpPopoverContent\"\n      />\n    }\n  </div>\n  <div\n    class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      #fileDropDescriptionRef=\"skyId\"\n      aria-hidden=\"true\"\n      class=\"sky-screen-reader-only\"\n      role=\"tooltip\"\n      skyId\n    >\n      {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n    </div>\n    <input\n      #fileInputRef\n      hidden\n      tabindex=\"-1\"\n      type=\"file\"\n      [attr.accept]=\"acceptedTypes || null\"\n      [disabled]=\"disabled\"\n      [required]=\"isRequired\"\n      (change)=\"fileChangeEvent($event)\"\n    />\n    @if (showFileAttachmentButton) {\n      <button\n        class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n        type=\"button\"\n        [attr.aria-describedby]=\"\n          hintText && hintTextEl.id\n            | skyFileAttachmentJoinIds: fileDropDescriptionRef.id\n        \"\n        [attr.aria-labelledby]=\"\n          attachButtonLabelRef.id\n            | skyFileAttachmentJoinIds\n              : (labelText\n                  ? labelId\n                  : labelComponents?.get(0)?.labelContentId?.id)\n        \"\n        [attr.aria-invalid]=\"!!(ngControl?.errors ?? fileErrorValidation)\"\n        [attr.aria-errormessage]=\"\n          !!(ngControl?.errors ?? fileErrorValidation) ? errorId : undefined\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"onDropClicked()\"\n      >\n        <sky-icon icon=\"folder-open-o\" />\n        {{\n          value\n            ? ('skyux_file_attachment_button_label_replace_file'\n              | skyLibResources)\n            : ('skyux_file_attachment_button_label_choose_file'\n              | skyLibResources)\n        }}\n      </button>\n    }\n    @if (value && !isImage && currentThemeName === 'modern') {\n      <sky-icon\n        class=\"sky-file-attachment-icon sky-deemphasized\"\n        icon=\"file-o\"\n        size=\"2x\"\n      />\n    }\n    @if (value || currentThemeName === 'default') {\n      <span class=\"sky-file-attachment-file-link\">\n        @if (value) {\n          <a\n            [href]=\"isData ? value.url : undefined\"\n            [download]=\"isData ? value.file.name : undefined\"\n            [attr.title]=\"fileName\"\n            (click)=\"emitClick()\"\n          >\n            {{ truncatedFileName }}\n          </a>\n        } @else {\n          <span class=\"sky-file-attachment-none sky-deemphasized\">\n            {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n          </span>\n        }\n      </span>\n    }\n\n    @if (value) {\n      <button\n        class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n        type=\"button\"\n        [attr.aria-labelledby]=\"\n          deleteButtonLabelRef.id\n            | skyFileAttachmentJoinIds\n              : (labelText\n                  ? labelId\n                  : labelComponents?.get(0)?.labelContentId?.id)\n        \"\n        [disabled]=\"disabled\"\n        [skyThemeClass]=\"{\n          'sky-btn-icon-borderless': 'modern'\n        }\"\n        (click)=\"deleteFileAttachment()\"\n      >\n        <sky-icon icon=\"trash-o\" size=\"md\" />\n      </button>\n    }\n  </div>\n\n  @if (value && isImage) {\n    <img\n      class=\"sky-file-attachment-preview-img\"\n      [alt]=\"\n        'skyux_file_attachment_file_upload_image_preview_alt_text'\n          | skyLibResources\n      \"\n      [src]=\"value.url\"\n    />\n  }\n</div>\n<div #hintTextEl=\"skyId\" skyId>\n  @if (hintText) {\n    <div class=\"sky-font-deemphasized sky-file-attachment-hint-text\">\n      {{ hintText }}\n    </div>\n  }\n</div>\n\n<sky-form-errors\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors ?? fileErrorValidation\"\n  [labelText]=\"labelText\"\n  [touched]=\"ngControl?.touched\"\n  [dirty]=\"ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n  @if (ngControl?.touched) {\n    @if (fileErrorName === 'fileType') {\n      <sky-form-error\n        [errorName]=\"'fileType'\"\n        [errorText]=\"\n          acceptedTypesErrorMessage ??\n            'skyux_file_attachment_file_type_error_label_text'\n            | skyLibResources: fileErrorParam\n        \"\n      />\n    } @else if (fileErrorName === 'maxFileSize') {\n      <sky-form-error\n        [errorName]=\"'maxFileSize'\"\n        [errorText]=\"\n          'skyux_file_attachment_max_file_size_error_label_text'\n            | skyLibResources: (fileErrorParam | skyFileSize)\n        \"\n      />\n    } @else if (fileErrorName === 'minFileSize') {\n      <sky-form-error\n        [errorName]=\"'minFileSize'\"\n        [errorText]=\"\n          'skyux_file_attachment_min_file_size_error_label_text'\n            | skyLibResources: (fileErrorParam | skyFileSize)\n        \"\n      />\n    }\n  }\n</sky-form-errors>\n\n<span\n  #attachButtonLabelRef=\"skyId\"\n  aria-hidden=\"true\"\n  class=\"sky-screen-reader-only\"\n  skyId\n>\n  {{\n    value\n      ? ('skyux_file_attachment_button_label_replace_file_label'\n        | skyLibResources: fileName)\n      : ('skyux_file_attachment_button_label_choose_file_label'\n        | skyLibResources)\n  }}\n</span>\n\n<span\n  #deleteButtonLabelRef=\"skyId\"\n  aria-hidden=\"true\"\n  class=\"sky-screen-reader-only\"\n  skyId\n>\n  {{ 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName }}\n</span>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-attachment-wrapper{display:inline-block}.sky-file-attachment-upload{padding-right:8px;display:block;border:1px solid transparent}.sky-file-attachment-accept{border-color:#72bf44;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}.sky-file-attachment-reject{border-color:#ef4044;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044}.sky-file-attachment-file-link{padding:0 5px}.sky-file-attachment-file-link a{cursor:pointer}.sky-file-attachment-delete{border:none;color:#cdcfd2;cursor:pointer;padding:0}.sky-file-attachment-delete:hover{color:#979ba2;transition:color .15s}.sky-file-attachment-preview-img{max-width:25%;height:auto;box-shadow:0 0 5px #666;margin:10px}.sky-file-attachment-hint-text{margin-top:var(--sky-margin-stacked-xs)}:host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-none{font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-file-link{margin:10px 10px 0 0;padding:0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-file-link{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyFileAttachmentJoinIdsPipe, name: "skyFileAttachmentJoinIds" }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i4$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
-                        {
-                            directive: SkyFormFieldLabelTextRequiredDirective,
-                            inputs: ['labelText'],
-                        },
-                    ], imports: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
+                        SkyFileAttachmentJoinIdsPipe,
                         SkyFileSizePipe,
                         SkyFormErrorComponent,
                         SkyFormErrorsComponent,
@@ -1925,12 +1883,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
                     ], providers: [
                         SkyFileAttachmentService,
                         { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-                    ], selector: 'sky-file-attachment', standalone: true, template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [attr.id]=\"labelElementId\"\n    [ngClass]=\"{\n      'sky-control-label-required':\n        !labelText && isRequired && hasLabelComponent\n    }\"\n  >\n    <ng-container *ngIf=\"labelText; else labelContent\">\n      <span\n        *ngIf=\"!labelHidden\"\n        class=\"sky-control-label sky-margin-inline-xs\"\n        [ngClass]=\"{\n          'sky-control-label-required': isRequired\n        }\"\n        >{{ labelText }}</span\n      ><sky-help-inline\n        *ngIf=\"helpPopoverContent || helpKey\"\n        [labelText]=\"labelText\"\n        [helpKey]=\"helpKey\"\n        [popoverTitle]=\"helpPopoverTitle\"\n        [popoverContent]=\"helpPopoverContent\"\n      />\n    </ng-container>\n    <span\n      class=\"sky-screen-reader-only\"\n      *ngIf=\"isRequired && (hasLabelComponent || labelText)\"\n      >{{ 'skyux_file_attachment_required' | skyLibResources }}</span\n    >\n  </div>\n  <div\n    class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      aria-hidden=\"true\"\n      class=\"sky-screen-reader-only\"\n      role=\"tooltip\"\n      [attr.id]=\"fileDropDescriptionElementId\"\n    >\n      {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n    </div>\n    <input\n      hidden\n      tabindex=\"-1\"\n      type=\"file\"\n      [attr.accept]=\"acceptedTypes || null\"\n      [disabled]=\"disabled\"\n      [required]=\"isRequired\"\n      (change)=\"fileChangeEvent($event)\"\n      #fileInput\n    />\n    <ng-container *ngIf=\"showFileAttachmentButton\">\n      <button\n        *ngIf=\"showFileAttachmentButton\"\n        class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n        type=\"button\"\n        skyId\n        [attr.aria-describedby]=\"\n          (hintText ? hintTextEl.id + ' ' : '') + fileDropDescriptionElementId\n        \"\n        [attr.aria-label]=\"\n          value\n            ? ('skyux_file_attachment_button_label_replace_file_label'\n              | skyLibResources: fileName)\n            : ('skyux_file_attachment_button_label_choose_file_label'\n              | skyLibResources)\n        \"\n        [attr.aria-labelledby]=\"\n          attachButton.id +\n          ' ' +\n          (labelText\n            ? labelElementId\n            : hasLabelComponent\n              ? labelComponents?.get(0)?.labelContentId?.id\n              : undefined)\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"onDropClicked()\"\n        #attachButton=\"skyId\"\n      >\n        <sky-icon icon=\"folder-open-o\" />\n        {{\n          value\n            ? ('skyux_file_attachment_button_label_replace_file'\n              | skyLibResources)\n            : ('skyux_file_attachment_button_label_choose_file'\n              | skyLibResources)\n        }}\n      </button>\n    </ng-container>\n    <sky-icon\n      *ngIf=\"value && !isImage && currentThemeName === 'modern'\"\n      class=\"sky-file-attachment-icon sky-deemphasized\"\n      icon=\"file-o\"\n      size=\"2x\"\n    />\n    <span\n      *ngIf=\"value || currentThemeName === 'default'\"\n      class=\"sky-file-attachment-name\"\n    >\n      <a\n        *ngIf=\"value; else noFile\"\n        [attr.title]=\"fileName\"\n        (click)=\"emitClick()\"\n      >\n        {{ truncatedFileName }}\n      </a>\n    </span>\n    <ng-template #noFile>\n      <span class=\"sky-file-attachment-none sky-deemphasized\">\n        {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n      </span>\n    </ng-template>\n    <button\n      *ngIf=\"value\"\n      class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n      skyId\n      type=\"button\"\n      [attr.aria-label]=\"\n        'skyux_file_attachment_file_item_remove' | skyLibResources: fileName\n      \"\n      [attr.aria-labelledby]=\"\n        deleteButton.id +\n        ' ' +\n        (hasLabelComponent\n          ? labelComponents?.get(0)?.labelContentId?.id\n          : undefined)\n      \"\n      [disabled]=\"disabled\"\n      [skyThemeClass]=\"{\n        'sky-btn-icon-borderless': 'modern'\n      }\"\n      (click)=\"deleteFileAttachment()\"\n      #deleteButton=\"skyId\"\n    >\n      <sky-icon icon=\"trash-o\" size=\"md\" />\n    </button>\n  </div>\n\n  <img\n    *ngIf=\"value && isImage\"\n    class=\"sky-file-attachment-preview-img\"\n    [alt]=\"\n      'skyux_file_attachment_file_upload_image_preview_alt_text'\n        | skyLibResources\n    \"\n    [src]=\"value.url\"\n  />\n</div>\n<div skyId #hintTextEl=\"skyId\">\n  <div\n    *ngIf=\"hintText\"\n    class=\"sky-font-deemphasized sky-file-attachment-hint-text\"\n  >\n    {{ hintText }}\n  </div>\n</div>\n\n<sky-form-errors\n  *ngIf=\"labelText && (ngControl?.control?.errors || fileErrorValidation)\"\n  [id]=\"errorId\"\n  [errors]=\"\n    ngControl?.errors !== null ? ngControl?.errors : fileErrorValidation\n  \"\n  [labelText]=\"labelText\"\n  [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'fileType'\"\n    [errorName]=\"'fileType'\"\n    [errorText]=\"\n      acceptedTypesErrorMessage ??\n        'skyux_file_attachment_file_type_error_label_text'\n        | skyLibResources: fileErrorParam\n    \"\n  />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'maxFileSize'\"\n    [errorName]=\"'maxFileSize'\"\n    [errorText]=\"\n      'skyux_file_attachment_max_file_size_error_label_text'\n        | skyLibResources: (fileErrorParam | skyFileSize)\n    \"\n  />\n  <sky-form-error\n    *ngIf=\"fileErrorName === 'minFileSize'\"\n    [errorName]=\"'minFileSize'\"\n    [errorText]=\"\n      'skyux_file_attachment_min_file_size_error_label_text'\n        | skyLibResources: (fileErrorParam | skyFileSize)\n    \"\n  />\n</sky-form-errors>\n\n<ng-template #labelContent>\n  <ng-content select=\"sky-file-attachment-label\" />\n</ng-template>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-attachment-wrapper{display:inline-block}.sky-file-attachment-upload{padding-right:8px;display:block;border:1px solid transparent}.sky-file-attachment-accept{border-color:#72bf44;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}.sky-file-attachment-reject{border-color:#ef4044;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044}.sky-file-attachment-name{padding:0 5px}.sky-file-attachment-name a{cursor:pointer}.sky-file-attachment-delete{border:none;color:#cdcfd2;cursor:pointer;padding:0}.sky-file-attachment-delete:hover{color:#979ba2;transition:color .15s}.sky-file-attachment-preview-img{max-width:25%;height:auto;box-shadow:0 0 5px #666;margin:10px}.sky-file-attachment-hint-text{margin-top:var(--sky-margin-stacked-xs)}:host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-none{font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-name{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i3$1.NgControl, decorators: [{
+                    ], selector: 'sky-file-attachment', standalone: true, template: "<div class=\"sky-file-attachment-wrapper\">\n  <div\n    class=\"sky-file-attachment-label-wrapper\"\n    [ngClass]=\"{\n      'sky-control-label-required':\n        !labelText && isRequired && hasLabelComponent\n    }\"\n  >\n    @if (labelText) {\n      @if (!labelHidden) {\n        <span\n          class=\"sky-control-label sky-margin-inline-xs\"\n          [attr.id]=\"labelId\"\n          [ngClass]=\"{\n            'sky-control-label-required': isRequired\n          }\"\n          >{{ labelText }}</span\n        >\n      }\n    } @else {\n      <ng-content select=\"sky-file-attachment-label\" />\n    }\n    @if (isRequired && (hasLabelComponent || labelText)) {\n      <span class=\"sky-screen-reader-only\">{{\n        'skyux_file_attachment_required' | skyLibResources\n      }}</span>\n    }\n    @if (labelText && (helpPopoverContent || helpKey)) {\n      <sky-help-inline\n        [labelText]=\"labelText\"\n        [helpKey]=\"helpKey\"\n        [popoverTitle]=\"helpPopoverTitle\"\n        [popoverContent]=\"helpPopoverContent\"\n      />\n    }\n  </div>\n  <div\n    class=\"sky-file-attachment-upload sky-file-attachment sky-file-attachment-target\"\n    [ngClass]=\"{\n      'sky-file-attachment-accept': acceptedOver,\n      'sky-file-attachment-reject': rejectedOver\n    }\"\n    (dragenter)=\"fileDragEnter($event)\"\n    (dragover)=\"fileDragOver($event)\"\n    (dragleave)=\"fileDragLeave($event)\"\n    (drop)=\"fileDrop($event)\"\n  >\n    <div\n      #fileDropDescriptionRef=\"skyId\"\n      aria-hidden=\"true\"\n      class=\"sky-screen-reader-only\"\n      role=\"tooltip\"\n      skyId\n    >\n      {{ 'skyux_file_attachment_file_upload_drag_or_click' | skyLibResources }}\n    </div>\n    <input\n      #fileInputRef\n      hidden\n      tabindex=\"-1\"\n      type=\"file\"\n      [attr.accept]=\"acceptedTypes || null\"\n      [disabled]=\"disabled\"\n      [required]=\"isRequired\"\n      (change)=\"fileChangeEvent($event)\"\n    />\n    @if (showFileAttachmentButton) {\n      <button\n        class=\"sky-file-attachment-btn sky-btn sky-btn-default\"\n        type=\"button\"\n        [attr.aria-describedby]=\"\n          hintText && hintTextEl.id\n            | skyFileAttachmentJoinIds: fileDropDescriptionRef.id\n        \"\n        [attr.aria-labelledby]=\"\n          attachButtonLabelRef.id\n            | skyFileAttachmentJoinIds\n              : (labelText\n                  ? labelId\n                  : labelComponents?.get(0)?.labelContentId?.id)\n        \"\n        [attr.aria-invalid]=\"!!(ngControl?.errors ?? fileErrorValidation)\"\n        [attr.aria-errormessage]=\"\n          !!(ngControl?.errors ?? fileErrorValidation) ? errorId : undefined\n        \"\n        [disabled]=\"disabled\"\n        (click)=\"onDropClicked()\"\n      >\n        <sky-icon icon=\"folder-open-o\" />\n        {{\n          value\n            ? ('skyux_file_attachment_button_label_replace_file'\n              | skyLibResources)\n            : ('skyux_file_attachment_button_label_choose_file'\n              | skyLibResources)\n        }}\n      </button>\n    }\n    @if (value && !isImage && currentThemeName === 'modern') {\n      <sky-icon\n        class=\"sky-file-attachment-icon sky-deemphasized\"\n        icon=\"file-o\"\n        size=\"2x\"\n      />\n    }\n    @if (value || currentThemeName === 'default') {\n      <span class=\"sky-file-attachment-file-link\">\n        @if (value) {\n          <a\n            [href]=\"isData ? value.url : undefined\"\n            [download]=\"isData ? value.file.name : undefined\"\n            [attr.title]=\"fileName\"\n            (click)=\"emitClick()\"\n          >\n            {{ truncatedFileName }}\n          </a>\n        } @else {\n          <span class=\"sky-file-attachment-none sky-deemphasized\">\n            {{ 'skyux_file_attachment_label_no_file_chosen' | skyLibResources }}\n          </span>\n        }\n      </span>\n    }\n\n    @if (value) {\n      <button\n        class=\"sky-btn sky-btn-borderless sky-file-attachment-delete\"\n        type=\"button\"\n        [attr.aria-labelledby]=\"\n          deleteButtonLabelRef.id\n            | skyFileAttachmentJoinIds\n              : (labelText\n                  ? labelId\n                  : labelComponents?.get(0)?.labelContentId?.id)\n        \"\n        [disabled]=\"disabled\"\n        [skyThemeClass]=\"{\n          'sky-btn-icon-borderless': 'modern'\n        }\"\n        (click)=\"deleteFileAttachment()\"\n      >\n        <sky-icon icon=\"trash-o\" size=\"md\" />\n      </button>\n    }\n  </div>\n\n  @if (value && isImage) {\n    <img\n      class=\"sky-file-attachment-preview-img\"\n      [alt]=\"\n        'skyux_file_attachment_file_upload_image_preview_alt_text'\n          | skyLibResources\n      \"\n      [src]=\"value.url\"\n    />\n  }\n</div>\n<div #hintTextEl=\"skyId\" skyId>\n  @if (hintText) {\n    <div class=\"sky-font-deemphasized sky-file-attachment-hint-text\">\n      {{ hintText }}\n    </div>\n  }\n</div>\n\n<sky-form-errors\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors ?? fileErrorValidation\"\n  [labelText]=\"labelText\"\n  [touched]=\"ngControl?.touched\"\n  [dirty]=\"ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n  @if (ngControl?.touched) {\n    @if (fileErrorName === 'fileType') {\n      <sky-form-error\n        [errorName]=\"'fileType'\"\n        [errorText]=\"\n          acceptedTypesErrorMessage ??\n            'skyux_file_attachment_file_type_error_label_text'\n            | skyLibResources: fileErrorParam\n        \"\n      />\n    } @else if (fileErrorName === 'maxFileSize') {\n      <sky-form-error\n        [errorName]=\"'maxFileSize'\"\n        [errorText]=\"\n          'skyux_file_attachment_max_file_size_error_label_text'\n            | skyLibResources: (fileErrorParam | skyFileSize)\n        \"\n      />\n    } @else if (fileErrorName === 'minFileSize') {\n      <sky-form-error\n        [errorName]=\"'minFileSize'\"\n        [errorText]=\"\n          'skyux_file_attachment_min_file_size_error_label_text'\n            | skyLibResources: (fileErrorParam | skyFileSize)\n        \"\n      />\n    }\n  }\n</sky-form-errors>\n\n<span\n  #attachButtonLabelRef=\"skyId\"\n  aria-hidden=\"true\"\n  class=\"sky-screen-reader-only\"\n  skyId\n>\n  {{\n    value\n      ? ('skyux_file_attachment_button_label_replace_file_label'\n        | skyLibResources: fileName)\n      : ('skyux_file_attachment_button_label_choose_file_label'\n        | skyLibResources)\n  }}\n</span>\n\n<span\n  #deleteButtonLabelRef=\"skyId\"\n  aria-hidden=\"true\"\n  class=\"sky-screen-reader-only\"\n  skyId\n>\n  {{ 'skyux_file_attachment_file_item_remove' | skyLibResources: fileName }}\n</span>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-attachment-wrapper{display:inline-block}.sky-file-attachment-upload{padding-right:8px;display:block;border:1px solid transparent}.sky-file-attachment-accept{border-color:#72bf44;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}.sky-file-attachment-reject{border-color:#ef4044;border-style:dashed;border-width:1px;border-radius:5px;color:#212327}:host(.ng-invalid.ng-dirty) .sky-file-attachment-btn{box-shadow:0 0 8px #ef404499;border:1px solid #ef4044}.sky-file-attachment-file-link{padding:0 5px}.sky-file-attachment-file-link a{cursor:pointer}.sky-file-attachment-delete{border:none;color:#cdcfd2;cursor:pointer;padding:0}.sky-file-attachment-delete:hover{color:#979ba2;transition:color .15s}.sky-file-attachment-preview-img{max-width:25%;height:auto;box-shadow:0 0 5px #666;margin:10px}.sky-file-attachment-hint-text{margin-top:var(--sky-margin-stacked-xs)}:host-context(.sky-theme-modern) .sky-control-label{color:#686c73;font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-none{font-size:13px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-file-link{margin:10px 10px 0 0;padding:0}:host-context(.sky-theme-modern) .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}.sky-theme-modern .sky-control-label{color:#686c73;font-size:13px}.sky-theme-modern .sky-file-attachment-none{font-size:13px}.sky-theme-modern .sky-file-attachment-wrapper{display:flex;flex-wrap:wrap}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-label-wrapper{width:100%}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-preview-img{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:none;margin:0 10px 0 0;width:100px;flex:0;order:1}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-btn{margin:0 10px 0 0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-icon{margin:5px 10px 5px 5px}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload{flex:1;order:2;display:flex;align-items:flex-start}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-upload .sky-file-attachment-file-link{margin:10px 10px 0 0;padding:0}.sky-theme-modern .sky-file-attachment-wrapper .sky-file-attachment-delete{width:40px;height:40px;color:#686c73!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyFileAttachmentService }, { type: SkyFileItemService }, { type: i2.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i4.SkyThemeService, decorators: [{
+                }] }, { type: i4$1.SkyThemeService, decorators: [{
                     type: Optional
                 }] }], propDecorators: { acceptedTypes: [{
                 type: Input
@@ -1973,20 +1931,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
                 args: [{ transform: booleanAttribute }]
             }], inputEl: [{
                 type: ViewChild,
-                args: ['fileInput']
+                args: ['fileInputRef']
             }], labelComponents: [{
                 type: ContentChildren,
                 args: [SkyFileAttachmentLabelComponent]
             }] } });
 
 class SkyFileAttachmentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentModule, imports: [SkyFileAttachmentComponent, SkyFileAttachmentLabelComponent], exports: [SkyFileAttachmentComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentModule, imports: [SkyFileAttachmentComponent, SkyFileAttachmentLabelComponent], exports: [SkyFileAttachmentComponent,
             SkyFileAttachmentLabelComponent,
             SkyFormErrorModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentModule, imports: [SkyFileAttachmentComponent, SkyFileAttachmentLabelComponent, SkyFormErrorModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentModule, imports: [SkyFileAttachmentComponent, SkyFileAttachmentLabelComponent, SkyFormErrorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -2230,20 +2188,18 @@ class SkyFileDropComponent {
             this.rejectedFiles = rejectedFileArray;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.2", type: SkyFileDropComponent, isStandalone: true, selector: "sky-file-drop", inputs: { fileUploadAriaLabel: "fileUploadAriaLabel", linkUploadAriaLabel: "linkUploadAriaLabel", minFileSize: "minFileSize", maxFileSize: "maxFileSize", multiple: "multiple", validateFn: "validateFn", acceptedTypes: "acceptedTypes", acceptedTypesErrorMessage: "acceptedTypesErrorMessage", noClick: "noClick", allowLinks: "allowLinks", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", required: ["required", "required", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, outputs: { filesChanged: "filesChanged", linkInputBlur: "linkInputBlur", linkChanged: "linkChanged" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: SkyFileDropComponent, isStandalone: true, selector: "sky-file-drop", inputs: { fileUploadAriaLabel: "fileUploadAriaLabel", linkUploadAriaLabel: "linkUploadAriaLabel", minFileSize: "minFileSize", maxFileSize: "maxFileSize", multiple: "multiple", validateFn: "validateFn", acceptedTypes: "acceptedTypes", acceptedTypesErrorMessage: "acceptedTypesErrorMessage", noClick: "noClick", allowLinks: "allowLinks", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", required: ["required", "required", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, outputs: { filesChanged: "filesChanged", linkInputBlur: "linkInputBlur", linkChanged: "linkChanged" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked" } }, providers: [
             SkyFileAttachmentService,
             { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], hostDirectives: [{ directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], ngImport: i0, template: "<fieldset>\n  <legend\n    *ngIf=\"labelText\"\n    class=\"sky-control-label sky-font-body-default sky-margin-stacked-xs\"\n    [ngClass]=\"{\n      'sky-screen-reader-only': labelHidden\n    }\"\n  >\n    <span\n      class=\"sky-margin-inline-xs\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n      >{{ labelText }}</span\n    ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n      'skyux_file_attachment_required' | skyLibResources\n    }}</span\n    ><sky-help-inline\n      *ngIf=\"helpPopoverContent || helpKey\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </legend>\n  <div\n    class=\"sky-file-drop-row\"\n    [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n  >\n    <div\n      class=\"sky-file-drop-col\"\n      [ngClass]=\"{\n        'sky-file-drop-accept': acceptedOver,\n        'sky-file-drop-reject': rejectedOver\n      }\"\n    >\n      <button\n        class=\"sky-file-drop sky-file-drop-target\"\n        type=\"button\"\n        (click)=\"dropClicked()\"\n        (dragover)=\"fileDragOver($event)\"\n        (dragenter)=\"fileDragEnter($event)\"\n        (dragleave)=\"fileDragLeave($event)\"\n        (drop)=\"fileDrop($event)\"\n        [attr.aria-label]=\"\n          fileUploadAriaLabel ||\n          ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n        \"\n        [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n        [attr.aria-invalid]=\"!!rejectedFiles.length\"\n        [attr.aria-errormessage]=\"\n          labelText && rejectedFiles.length ? errorId : undefined\n        \"\n      ></button>\n\n      <input\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        type=\"file\"\n        class=\"sky-file-input-hidden\"\n        [attr.multiple]=\"multiple ? multiple : null\"\n        [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n        (change)=\"fileChangeEvent($event)\"\n        #fileInput\n      />\n\n      <div\n        class=\"sky-file-drop-contents sky-padding-even-default\"\n        *ngIf=\"customEl.children.length === 0\"\n      >\n        <div class=\"sky-file-drop-contents-not-over\">\n          <div class=\"sky-file-drop-text-header sky-font-display-3\">\n            {{\n              'skyux_file_attachment_file_upload_drag_file_here'\n                | skyLibResources\n            }}\n          </div>\n          <div class=\"sky-file-drop-text\">\n            {{\n              'skyux_file_attachment_file_upload_or_click_to_browse'\n                | skyLibResources\n            }}\n          </div>\n          <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\" />\n        </div>\n\n        <!-- This will appear when file is dragged over and is valid -->\n        <div class=\"sky-file-drop-contents-accept\">\n          <div class=\"sky-file-drop-text-header sky-font-display-3\">\n            {{\n              'skyux_file_attachment_file_upload_drop_files_here'\n                | skyLibResources\n            }}\n          </div>\n          <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\" />\n        </div>\n\n        <!-- This will appear when file is dragged over and is invalid -->\n        <div class=\"sky-file-drop-contents-reject\">\n          <div class=\"sky-file-drop-text-header sky-font-display-3\">\n            {{\n              'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n            }}\n          </div>\n          <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n        </div>\n      </div>\n\n      <div class=\"sky-file-drop-contents-custom\" #customEl>\n        <ng-content />\n      </div>\n    </div>\n    <div class=\"sky-file-drop-col\" *ngIf=\"allowLinks\">\n      <div class=\"sky-file-drop-contents sky-padding-even-default\">\n        <div class=\"sky-file-drop-link\">\n          <div class=\"sky-file-drop-link-header\">\n            <div class=\"sky-file-drop-text-header sky-font-display-3\">\n              {{\n                'skyux_file_attachment_file_upload_link_label' | skyLibResources\n              }}\n            </div>\n          </div>\n          <div class=\"sky-margin-stacked-xs\">\n            <input\n              type=\"text\"\n              class=\"sky-form-control\"\n              [attr.aria-label]=\"\n                linkUploadAriaLabel ||\n                ('skyux_file_attachment_file_upload_link_label'\n                  | skyLibResources)\n              \"\n              [attr.aria-describedby]=\"uploadHintText.id\"\n              [attr.aria-invalid]=\"!!rejectedFiles.length\"\n              [attr.aria-errormessage]=\"\n                labelText && rejectedFiles.length ? errorId : undefined\n              \"\n              [(ngModel)]=\"linkUrl\"\n              (blur)=\"onLinkBlur()\"\n              (keyup)=\"addLinkEnter($event)\"\n            />\n          </div>\n          <div\n            skyId\n            #uploadHintText=\"skyId\"\n            class=\"sky-font-deemphasized sky-file-drop-hint-text sky-margin-stacked-sm\"\n          >\n            {{\n              'skyux_file_attachment_file_upload_link_placeholder'\n                | skyLibResources\n            }}\n          </div>\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-primary\"\n            [disabled]=\"!linkUrl\"\n            (click)=\"addLink($event)\"\n          >\n            {{\n              'skyux_file_attachment_file_upload_link_done' | skyLibResources\n            }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div skyId #hintTextEl=\"skyId\">\n    <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-file-drop-hint-text\">\n      {{ hintText }}\n    </div>\n  </div>\n</fieldset>\n<sky-form-errors\n  *ngIf=\"labelText && rejectedFiles.length\"\n  class=\"sky-file-drop-errors\"\n  [id]=\"errorId\"\n  [labelText]=\"labelText\"\n  [showErrors]=\"rejectedFiles.length\"\n>\n  <div *ngFor=\"let rejectedFile of rejectedFiles\">\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'fileType'\"\n      errorName=\"fileType\"\n      [errorText]=\"\n        'skyux_file_attachment_file_type_error_label_text_with_name'\n          | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'maxFileSize'\"\n      errorName=\"maxFileSize\"\n      [errorText]=\"\n        acceptedTypesErrorMessage ??\n          'skyux_file_attachment_max_file_size_error_label_text_with_name'\n          | skyLibResources\n            : rejectedFile.file.name\n            : (rejectedFile.errorParam | skyFileSize)\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'minFileSize'\"\n      errorName=\"minFileSize\"\n      [errorText]=\"\n        'skyux_file_attachment_min_file_size_error_label_text_with_name'\n          | skyLibResources\n            : rejectedFile.file.name\n            : (rejectedFile.errorParam | skyFileSize)\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'validate' && rejectedFile.errorParam\"\n      errorName=\"validate\"\n      [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n    />\n  </div>\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-drop-col{padding-left:5px;padding-right:5px;position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-col:not(:last-of-type){margin-bottom:10px}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:10px}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-col:not(:last-of-type){margin-bottom:0}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:0}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;inset:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;background-color:#eeeeef;color:#212327;cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:5px}.sky-file-drop-no-click .sky-file-drop-contents{cursor:default}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-margin-stacked-xs)}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:1px}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:#72bf44;color:#212327}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:#ef4044;color:#212327}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:40px;max-height:40px;margin-top:10px}.sky-file-drop-link{cursor:default}.sky-file-drop-text-header{margin:0}.sky-file-drop-text{font-size:15px;margin-top:5px;margin-bottom:20px}.sky-file-drop-text,.sky-file-drop-text-header{line-height:1.1;display:block}.sky-file-upload-icon{color:#686c73}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-file-drop-errors{margin-bottom:10px}:host-context(.sky-theme-modern) .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}.sky-theme-modern .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<fieldset>\n  @if (labelText) {\n    <legend\n      class=\"sky-control-label sky-font-body-default sky-margin-stacked-xs\"\n      [ngClass]=\"{\n        'sky-screen-reader-only': labelHidden\n      }\"\n    >\n      <span\n        class=\"sky-margin-inline-xs\"\n        [ngClass]=\"{\n          'sky-control-label-required': required\n        }\"\n        >{{ labelText }}</span\n      >\n      @if (required) {\n        <span class=\"sky-screen-reader-only\">{{\n          'skyux_file_attachment_required' | skyLibResources\n        }}</span>\n      }\n      @if (helpPopoverContent || helpKey) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"labelText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n    </legend>\n  }\n  <div\n    class=\"sky-file-drop-row\"\n    [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n  >\n    <div\n      class=\"sky-file-drop-col\"\n      [ngClass]=\"{\n        'sky-file-drop-accept': acceptedOver,\n        'sky-file-drop-reject': rejectedOver\n      }\"\n    >\n      <button\n        class=\"sky-file-drop sky-file-drop-target\"\n        type=\"button\"\n        [attr.aria-label]=\"\n          fileUploadAriaLabel ||\n          ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n        \"\n        [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n        [attr.aria-invalid]=\"!!rejectedFiles.length\"\n        [attr.aria-errormessage]=\"\n          labelText && rejectedFiles.length ? errorId : undefined\n        \"\n        (click)=\"dropClicked()\"\n        (dragover)=\"fileDragOver($event)\"\n        (dragenter)=\"fileDragEnter($event)\"\n        (dragleave)=\"fileDragLeave($event)\"\n        (drop)=\"fileDrop($event)\"\n      ></button>\n\n      <input\n        #fileInput\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        type=\"file\"\n        class=\"sky-file-input-hidden\"\n        [attr.multiple]=\"multiple ? multiple : null\"\n        [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n        (change)=\"fileChangeEvent($event)\"\n      />\n\n      @if (customEl.children.length === 0) {\n        <div class=\"sky-file-drop-contents sky-padding-even-default\">\n          <div class=\"sky-file-drop-contents-not-over\">\n            <div class=\"sky-file-drop-text-header sky-font-display-3\">\n              {{\n                'skyux_file_attachment_file_upload_drag_file_here'\n                  | skyLibResources\n              }}\n            </div>\n            <div class=\"sky-file-drop-text\">\n              {{\n                'skyux_file_attachment_file_upload_or_click_to_browse'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\" />\n          </div>\n\n          <!-- This will appear when file is dragged over and is valid -->\n          <div class=\"sky-file-drop-contents-accept\">\n            <div class=\"sky-file-drop-text-header sky-font-display-3\">\n              {{\n                'skyux_file_attachment_file_upload_drop_files_here'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\" />\n          </div>\n\n          <!-- This will appear when file is dragged over and is invalid -->\n          <div class=\"sky-file-drop-contents-reject\">\n            <div class=\"sky-file-drop-text-header sky-font-display-3\">\n              {{\n                'skyux_file_attachment_file_upload_invalid_file'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n          </div>\n        </div>\n      }\n\n      <div #customEl class=\"sky-file-drop-contents-custom\">\n        <ng-content />\n      </div>\n    </div>\n    @if (allowLinks) {\n      <div class=\"sky-file-drop-col\">\n        <div class=\"sky-file-drop-contents sky-padding-even-default\">\n          <div class=\"sky-file-drop-link\">\n            <div class=\"sky-file-drop-link-header\">\n              <div class=\"sky-file-drop-text-header sky-font-display-3\">\n                {{\n                  'skyux_file_attachment_file_upload_link_label'\n                    | skyLibResources\n                }}\n              </div>\n            </div>\n            <div class=\"sky-margin-stacked-xs\">\n              <input\n                type=\"text\"\n                class=\"sky-form-control\"\n                [attr.aria-label]=\"\n                  linkUploadAriaLabel ||\n                  ('skyux_file_attachment_file_upload_link_label'\n                    | skyLibResources)\n                \"\n                [attr.aria-describedby]=\"uploadHintText.id\"\n                [attr.aria-invalid]=\"!!rejectedFiles.length\"\n                [attr.aria-errormessage]=\"\n                  labelText && rejectedFiles.length ? errorId : undefined\n                \"\n                [(ngModel)]=\"linkUrl\"\n                (blur)=\"onLinkBlur()\"\n                (keyup)=\"addLinkEnter($event)\"\n              />\n            </div>\n            <div\n              #uploadHintText=\"skyId\"\n              skyId\n              class=\"sky-font-deemphasized sky-file-drop-hint-text sky-margin-stacked-sm\"\n            >\n              {{\n                'skyux_file_attachment_file_upload_link_placeholder'\n                  | skyLibResources\n              }}\n            </div>\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-primary\"\n              [disabled]=\"!linkUrl\"\n              (click)=\"addLink($event)\"\n            >\n              {{\n                'skyux_file_attachment_file_upload_link_done' | skyLibResources\n              }}\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n  <div #hintTextEl=\"skyId\" skyId>\n    @if (hintText) {\n      <div class=\"sky-font-deemphasized sky-file-drop-hint-text\">\n        {{ hintText }}\n      </div>\n    }\n  </div>\n</fieldset>\n<sky-form-errors\n  [class.sky-file-drop-errors]=\"labelText && rejectedFiles.length\"\n  [id]=\"errorId\"\n  [labelText]=\"labelText\"\n  [touched]=\"rejectedFiles.length > 0\"\n>\n  @for (rejectedFile of rejectedFiles; track rejectedFile) {\n    <div>\n      @if (rejectedFile.errorType === 'fileType') {\n        <sky-form-error\n          errorName=\"fileType\"\n          [errorText]=\"\n            'skyux_file_attachment_file_type_error_label_text_with_name'\n              | skyLibResources\n                : rejectedFile.file.name\n                : rejectedFile.errorParam\n          \"\n        />\n      } @else if (rejectedFile.errorType === 'maxFileSize') {\n        <sky-form-error\n          errorName=\"maxFileSize\"\n          [errorText]=\"\n            acceptedTypesErrorMessage ??\n              'skyux_file_attachment_max_file_size_error_label_text_with_name'\n              | skyLibResources\n                : rejectedFile.file.name\n                : (rejectedFile.errorParam | skyFileSize)\n          \"\n        />\n      } @else if (rejectedFile.errorType === 'minFileSize') {\n        <sky-form-error\n          errorName=\"minFileSize\"\n          [errorText]=\"\n            'skyux_file_attachment_min_file_size_error_label_text_with_name'\n              | skyLibResources\n                : rejectedFile.file.name\n                : (rejectedFile.errorParam | skyFileSize)\n          \"\n        />\n      } @else if (\n        rejectedFile.errorType === 'validate' && rejectedFile.errorParam\n      ) {\n        <sky-form-error\n          errorName=\"validate\"\n          [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n        />\n      }\n    </div>\n  }\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-drop-col{padding-left:5px;padding-right:5px;position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-col:not(:last-of-type){margin-bottom:10px}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:10px}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-col:not(:last-of-type){margin-bottom:0}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:0}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;inset:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;background-color:#eeeeef;color:#212327;cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:5px}.sky-file-drop-no-click .sky-file-drop-contents{cursor:default}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-margin-stacked-xs)}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:1px}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:#72bf44;color:#212327}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:#ef4044;color:#212327}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:40px;max-height:40px;margin-top:10px}.sky-file-drop-link{cursor:default}.sky-file-drop-text-header{margin:0}.sky-file-drop-text{font-size:15px;margin-top:5px;margin-bottom:20px}.sky-file-drop-text,.sky-file-drop-text-header{line-height:1.1;display:block}.sky-file-upload-icon{color:#686c73}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-file-drop-errors{margin-bottom:10px}:host-context(.sky-theme-modern) .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}.sky-theme-modern .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "component", type: SkyFormErrorComponent, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyHelpInlineModule }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "ngmodule", type: SkyIdModule }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileDropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileDropComponent, decorators: [{
             type: Component,
-            args: [{ hostDirectives: [
-                        {
-                            directive: SkyFormFieldLabelTextRequiredDirective,
-                            inputs: ['labelText'],
-                        },
-                    ], imports: [
+            args: [{ selector: 'sky-file-drop', providers: [
+                        SkyFileAttachmentService,
+                        { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
+                    ], standalone: true, imports: [
                         CommonModule,
                         FormsModule,
                         SkyFileSizePipe,
@@ -2253,10 +2209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
                         SkyHelpInlineModule,
                         SkyIconModule,
                         SkyIdModule,
-                    ], providers: [
-                        SkyFileAttachmentService,
-                        { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-                    ], selector: 'sky-file-drop', standalone: true, template: "<fieldset>\n  <legend\n    *ngIf=\"labelText\"\n    class=\"sky-control-label sky-font-body-default sky-margin-stacked-xs\"\n    [ngClass]=\"{\n      'sky-screen-reader-only': labelHidden\n    }\"\n  >\n    <span\n      class=\"sky-margin-inline-xs\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n      >{{ labelText }}</span\n    ><span class=\"sky-screen-reader-only\" *ngIf=\"required\">{{\n      'skyux_file_attachment_required' | skyLibResources\n    }}</span\n    ><sky-help-inline\n      *ngIf=\"helpPopoverContent || helpKey\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </legend>\n  <div\n    class=\"sky-file-drop-row\"\n    [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n  >\n    <div\n      class=\"sky-file-drop-col\"\n      [ngClass]=\"{\n        'sky-file-drop-accept': acceptedOver,\n        'sky-file-drop-reject': rejectedOver\n      }\"\n    >\n      <button\n        class=\"sky-file-drop sky-file-drop-target\"\n        type=\"button\"\n        (click)=\"dropClicked()\"\n        (dragover)=\"fileDragOver($event)\"\n        (dragenter)=\"fileDragEnter($event)\"\n        (dragleave)=\"fileDragLeave($event)\"\n        (drop)=\"fileDrop($event)\"\n        [attr.aria-label]=\"\n          fileUploadAriaLabel ||\n          ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n        \"\n        [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n        [attr.aria-invalid]=\"!!rejectedFiles.length\"\n        [attr.aria-errormessage]=\"\n          labelText && rejectedFiles.length ? errorId : undefined\n        \"\n      ></button>\n\n      <input\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        type=\"file\"\n        class=\"sky-file-input-hidden\"\n        [attr.multiple]=\"multiple ? multiple : null\"\n        [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n        (change)=\"fileChangeEvent($event)\"\n        #fileInput\n      />\n\n      <div\n        class=\"sky-file-drop-contents sky-padding-even-default\"\n        *ngIf=\"customEl.children.length === 0\"\n      >\n        <div class=\"sky-file-drop-contents-not-over\">\n          <div class=\"sky-file-drop-text-header sky-font-display-3\">\n            {{\n              'skyux_file_attachment_file_upload_drag_file_here'\n                | skyLibResources\n            }}\n          </div>\n          <div class=\"sky-file-drop-text\">\n            {{\n              'skyux_file_attachment_file_upload_or_click_to_browse'\n                | skyLibResources\n            }}\n          </div>\n          <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\" />\n        </div>\n\n        <!-- This will appear when file is dragged over and is valid -->\n        <div class=\"sky-file-drop-contents-accept\">\n          <div class=\"sky-file-drop-text-header sky-font-display-3\">\n            {{\n              'skyux_file_attachment_file_upload_drop_files_here'\n                | skyLibResources\n            }}\n          </div>\n          <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\" />\n        </div>\n\n        <!-- This will appear when file is dragged over and is invalid -->\n        <div class=\"sky-file-drop-contents-reject\">\n          <div class=\"sky-file-drop-text-header sky-font-display-3\">\n            {{\n              'skyux_file_attachment_file_upload_invalid_file' | skyLibResources\n            }}\n          </div>\n          <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n        </div>\n      </div>\n\n      <div class=\"sky-file-drop-contents-custom\" #customEl>\n        <ng-content />\n      </div>\n    </div>\n    <div class=\"sky-file-drop-col\" *ngIf=\"allowLinks\">\n      <div class=\"sky-file-drop-contents sky-padding-even-default\">\n        <div class=\"sky-file-drop-link\">\n          <div class=\"sky-file-drop-link-header\">\n            <div class=\"sky-file-drop-text-header sky-font-display-3\">\n              {{\n                'skyux_file_attachment_file_upload_link_label' | skyLibResources\n              }}\n            </div>\n          </div>\n          <div class=\"sky-margin-stacked-xs\">\n            <input\n              type=\"text\"\n              class=\"sky-form-control\"\n              [attr.aria-label]=\"\n                linkUploadAriaLabel ||\n                ('skyux_file_attachment_file_upload_link_label'\n                  | skyLibResources)\n              \"\n              [attr.aria-describedby]=\"uploadHintText.id\"\n              [attr.aria-invalid]=\"!!rejectedFiles.length\"\n              [attr.aria-errormessage]=\"\n                labelText && rejectedFiles.length ? errorId : undefined\n              \"\n              [(ngModel)]=\"linkUrl\"\n              (blur)=\"onLinkBlur()\"\n              (keyup)=\"addLinkEnter($event)\"\n            />\n          </div>\n          <div\n            skyId\n            #uploadHintText=\"skyId\"\n            class=\"sky-font-deemphasized sky-file-drop-hint-text sky-margin-stacked-sm\"\n          >\n            {{\n              'skyux_file_attachment_file_upload_link_placeholder'\n                | skyLibResources\n            }}\n          </div>\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-primary\"\n            [disabled]=\"!linkUrl\"\n            (click)=\"addLink($event)\"\n          >\n            {{\n              'skyux_file_attachment_file_upload_link_done' | skyLibResources\n            }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div skyId #hintTextEl=\"skyId\">\n    <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-file-drop-hint-text\">\n      {{ hintText }}\n    </div>\n  </div>\n</fieldset>\n<sky-form-errors\n  *ngIf=\"labelText && rejectedFiles.length\"\n  class=\"sky-file-drop-errors\"\n  [id]=\"errorId\"\n  [labelText]=\"labelText\"\n  [showErrors]=\"rejectedFiles.length\"\n>\n  <div *ngFor=\"let rejectedFile of rejectedFiles\">\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'fileType'\"\n      errorName=\"fileType\"\n      [errorText]=\"\n        'skyux_file_attachment_file_type_error_label_text_with_name'\n          | skyLibResources: rejectedFile.file.name : rejectedFile.errorParam\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'maxFileSize'\"\n      errorName=\"maxFileSize\"\n      [errorText]=\"\n        acceptedTypesErrorMessage ??\n          'skyux_file_attachment_max_file_size_error_label_text_with_name'\n          | skyLibResources\n            : rejectedFile.file.name\n            : (rejectedFile.errorParam | skyFileSize)\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'minFileSize'\"\n      errorName=\"minFileSize\"\n      [errorText]=\"\n        'skyux_file_attachment_min_file_size_error_label_text_with_name'\n          | skyLibResources\n            : rejectedFile.file.name\n            : (rejectedFile.errorParam | skyFileSize)\n      \"\n    />\n    <sky-form-error\n      *ngIf=\"rejectedFile.errorType === 'validate' && rejectedFile.errorParam\"\n      errorName=\"validate\"\n      [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n    />\n  </div>\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-drop-col{padding-left:5px;padding-right:5px;position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-col:not(:last-of-type){margin-bottom:10px}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:10px}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-col:not(:last-of-type){margin-bottom:0}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:0}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;inset:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;background-color:#eeeeef;color:#212327;cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:5px}.sky-file-drop-no-click .sky-file-drop-contents{cursor:default}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-margin-stacked-xs)}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:1px}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:#72bf44;color:#212327}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:#ef4044;color:#212327}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:40px;max-height:40px;margin-top:10px}.sky-file-drop-link{cursor:default}.sky-file-drop-text-header{margin:0}.sky-file-drop-text{font-size:15px;margin-top:5px;margin-bottom:20px}.sky-file-drop-text,.sky-file-drop-text-header{line-height:1.1;display:block}.sky-file-upload-icon{color:#686c73}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-file-drop-errors{margin-bottom:10px}:host-context(.sky-theme-modern) .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}.sky-theme-modern .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}\n"] }]
+                    ], template: "<fieldset>\n  @if (labelText) {\n    <legend\n      class=\"sky-control-label sky-font-body-default sky-margin-stacked-xs\"\n      [ngClass]=\"{\n        'sky-screen-reader-only': labelHidden\n      }\"\n    >\n      <span\n        class=\"sky-margin-inline-xs\"\n        [ngClass]=\"{\n          'sky-control-label-required': required\n        }\"\n        >{{ labelText }}</span\n      >\n      @if (required) {\n        <span class=\"sky-screen-reader-only\">{{\n          'skyux_file_attachment_required' | skyLibResources\n        }}</span>\n      }\n      @if (helpPopoverContent || helpKey) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"labelText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n    </legend>\n  }\n  <div\n    class=\"sky-file-drop-row\"\n    [ngClass]=\"{ 'sky-file-drop-allow-links': allowLinks }\"\n  >\n    <div\n      class=\"sky-file-drop-col\"\n      [ngClass]=\"{\n        'sky-file-drop-accept': acceptedOver,\n        'sky-file-drop-reject': rejectedOver\n      }\"\n    >\n      <button\n        class=\"sky-file-drop sky-file-drop-target\"\n        type=\"button\"\n        [attr.aria-label]=\"\n          fileUploadAriaLabel ||\n          ('skyux_file_attachment_file_upload_drag_or_click' | skyLibResources)\n        \"\n        [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n        [attr.aria-invalid]=\"!!rejectedFiles.length\"\n        [attr.aria-errormessage]=\"\n          labelText && rejectedFiles.length ? errorId : undefined\n        \"\n        (click)=\"dropClicked()\"\n        (dragover)=\"fileDragOver($event)\"\n        (dragenter)=\"fileDragEnter($event)\"\n        (dragleave)=\"fileDragLeave($event)\"\n        (drop)=\"fileDrop($event)\"\n      ></button>\n\n      <input\n        #fileInput\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        type=\"file\"\n        class=\"sky-file-input-hidden\"\n        [attr.multiple]=\"multiple ? multiple : null\"\n        [attr.accept]=\"acceptedTypes ? acceptedTypes : null\"\n        (change)=\"fileChangeEvent($event)\"\n      />\n\n      @if (customEl.children.length === 0) {\n        <div class=\"sky-file-drop-contents sky-padding-even-default\">\n          <div class=\"sky-file-drop-contents-not-over\">\n            <div class=\"sky-file-drop-text-header sky-font-display-3\">\n              {{\n                'skyux_file_attachment_file_upload_drag_file_here'\n                  | skyLibResources\n              }}\n            </div>\n            <div class=\"sky-file-drop-text\">\n              {{\n                'skyux_file_attachment_file_upload_or_click_to_browse'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon icon=\"cloud-upload\" class=\"sky-file-upload-icon\" />\n          </div>\n\n          <!-- This will appear when file is dragged over and is valid -->\n          <div class=\"sky-file-drop-contents-accept\">\n            <div class=\"sky-file-drop-text-header sky-font-display-3\">\n              {{\n                'skyux_file_attachment_file_upload_drop_files_here'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon icon=\"bullseye\" class=\"sky-file-upload-icon\" />\n          </div>\n\n          <!-- This will appear when file is dragged over and is invalid -->\n          <div class=\"sky-file-drop-contents-reject\">\n            <div class=\"sky-file-drop-text-header sky-font-display-3\">\n              {{\n                'skyux_file_attachment_file_upload_invalid_file'\n                  | skyLibResources\n              }}\n            </div>\n            <sky-icon icon=\"times-circle\" class=\"sky-file-upload-icon\" />\n          </div>\n        </div>\n      }\n\n      <div #customEl class=\"sky-file-drop-contents-custom\">\n        <ng-content />\n      </div>\n    </div>\n    @if (allowLinks) {\n      <div class=\"sky-file-drop-col\">\n        <div class=\"sky-file-drop-contents sky-padding-even-default\">\n          <div class=\"sky-file-drop-link\">\n            <div class=\"sky-file-drop-link-header\">\n              <div class=\"sky-file-drop-text-header sky-font-display-3\">\n                {{\n                  'skyux_file_attachment_file_upload_link_label'\n                    | skyLibResources\n                }}\n              </div>\n            </div>\n            <div class=\"sky-margin-stacked-xs\">\n              <input\n                type=\"text\"\n                class=\"sky-form-control\"\n                [attr.aria-label]=\"\n                  linkUploadAriaLabel ||\n                  ('skyux_file_attachment_file_upload_link_label'\n                    | skyLibResources)\n                \"\n                [attr.aria-describedby]=\"uploadHintText.id\"\n                [attr.aria-invalid]=\"!!rejectedFiles.length\"\n                [attr.aria-errormessage]=\"\n                  labelText && rejectedFiles.length ? errorId : undefined\n                \"\n                [(ngModel)]=\"linkUrl\"\n                (blur)=\"onLinkBlur()\"\n                (keyup)=\"addLinkEnter($event)\"\n              />\n            </div>\n            <div\n              #uploadHintText=\"skyId\"\n              skyId\n              class=\"sky-font-deemphasized sky-file-drop-hint-text sky-margin-stacked-sm\"\n            >\n              {{\n                'skyux_file_attachment_file_upload_link_placeholder'\n                  | skyLibResources\n              }}\n            </div>\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-primary\"\n              [disabled]=\"!linkUrl\"\n              (click)=\"addLink($event)\"\n            >\n              {{\n                'skyux_file_attachment_file_upload_link_done' | skyLibResources\n              }}\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n  <div #hintTextEl=\"skyId\" skyId>\n    @if (hintText) {\n      <div class=\"sky-font-deemphasized sky-file-drop-hint-text\">\n        {{ hintText }}\n      </div>\n    }\n  </div>\n</fieldset>\n<sky-form-errors\n  [class.sky-file-drop-errors]=\"labelText && rejectedFiles.length\"\n  [id]=\"errorId\"\n  [labelText]=\"labelText\"\n  [touched]=\"rejectedFiles.length > 0\"\n>\n  @for (rejectedFile of rejectedFiles; track rejectedFile) {\n    <div>\n      @if (rejectedFile.errorType === 'fileType') {\n        <sky-form-error\n          errorName=\"fileType\"\n          [errorText]=\"\n            'skyux_file_attachment_file_type_error_label_text_with_name'\n              | skyLibResources\n                : rejectedFile.file.name\n                : rejectedFile.errorParam\n          \"\n        />\n      } @else if (rejectedFile.errorType === 'maxFileSize') {\n        <sky-form-error\n          errorName=\"maxFileSize\"\n          [errorText]=\"\n            acceptedTypesErrorMessage ??\n              'skyux_file_attachment_max_file_size_error_label_text_with_name'\n              | skyLibResources\n                : rejectedFile.file.name\n                : (rejectedFile.errorParam | skyFileSize)\n          \"\n        />\n      } @else if (rejectedFile.errorType === 'minFileSize') {\n        <sky-form-error\n          errorName=\"minFileSize\"\n          [errorText]=\"\n            'skyux_file_attachment_min_file_size_error_label_text_with_name'\n              | skyLibResources\n                : rejectedFile.file.name\n                : (rejectedFile.errorParam | skyFileSize)\n          \"\n        />\n      } @else if (\n        rejectedFile.errorType === 'validate' && rejectedFile.errorParam\n      ) {\n        <sky-form-error\n          errorName=\"validate\"\n          [errorText]=\"rejectedFile.file.name + ': ' + rejectedFile.errorParam\"\n        />\n      }\n    </div>\n  }\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg{display:block}.sky-file-drop-col{padding-left:5px;padding-right:5px;position:relative}:host .sky-file-drop-row{display:block}:host .sky-file-drop-col{flex-basis:auto}:host .sky-file-drop-col:not(:last-of-type){margin-bottom:10px}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-row,:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:block}:host-context(.sky-responsive-container-xs) .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:auto}:host-context(.sky-responsive-container-xs) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:10px}:host-context(.sky-responsive-container-xs) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:auto}@media (min-width: 768px){:host .sky-file-drop-row{display:flex}:host .sky-file-drop-col{flex-basis:100%}:host .sky-file-drop-col:not(:last-of-type){margin-bottom:0}:host .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}}:host-context(.sky-responsive-container-sm) .sky-file-drop-row,:host-context(.sky-responsive-container-md) .sky-file-drop-row,:host-context(.sky-responsive-container-lg) .sky-file-drop-row{display:flex}:host-context(.sky-responsive-container-sm) .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-col{flex-basis:100%}:host-context(.sky-responsive-container-sm) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-file-drop-col:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-file-drop-col:not(:last-of-type){margin-bottom:0}:host-context(.sky-responsive-container-sm) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-md) .sky-file-drop-allow-links .sky-file-drop-col,:host-context(.sky-responsive-container-lg) .sky-file-drop-allow-links .sky-file-drop-col{flex-basis:50%}button.sky-file-drop{height:100%;position:absolute;inset:0;z-index:1}button.sky-file-drop:hover{cursor:pointer}.sky-file-drop-contents{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;background-color:#eeeeef;color:#212327;cursor:pointer;width:100%;text-align:center;height:100%}.sky-file-drop-contents .sky-file-drop-link-header{margin-bottom:5px}.sky-file-drop-no-click .sky-file-drop-contents{cursor:default}.sky-file-drop-hint-text{text-align:left;margin-top:var(--sky-margin-stacked-xs)}.sky-file-drop-accept .sky-file-drop-contents,.sky-file-drop-reject .sky-file-drop-contents{border-style:dashed;border-width:1px}.sky-file-drop-accept .sky-file-drop-contents-not-over,.sky-file-drop-reject .sky-file-drop-contents-not-over{display:none}.sky-file-drop-accept .sky-file-drop-contents{border-color:#72bf44;color:#212327}.sky-file-drop-accept .sky-file-drop-contents-accept{display:block}.sky-file-drop-reject .sky-file-drop-contents{border-color:#ef4044;color:#212327}.sky-file-drop-reject .sky-file-drop-contents-reject{display:block}.sky-file-drop-contents-accept,.sky-file-drop-contents-reject{display:none}.sky-file-upload-icon{display:block;font-size:40px;max-height:40px;margin-top:10px}.sky-file-drop-link{cursor:default}.sky-file-drop-text-header{margin:0}.sky-file-drop-text{font-size:15px;margin-top:5px;margin-bottom:20px}.sky-file-drop-text,.sky-file-drop-text-header{line-height:1.1;display:block}.sky-file-upload-icon{color:#686c73}.sky-file-drop{background-color:transparent;border:none;display:block;-webkit-appearance:none;width:100%;padding:0}.sky-file-input-hidden{display:none}.sky-file-drop-errors{margin-bottom:10px}:host-context(.sky-theme-modern) .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}.sky-theme-modern .sky-control-label{color:var(--sky-text-color-deemphasized);font-size:13px}\n"] }]
         }], propDecorators: { filesChanged: [{
                 type: Output
             }], linkInputBlur: [{
@@ -2443,17 +2396,12 @@ class SkyFileItemComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileItemComponent, deps: [{ token: i0.KeyValueDiffers }, { token: SkyFileItemService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyFileItemComponent, isStandalone: true, selector: "sky-file-item", inputs: { fileItem: "fileItem" }, outputs: { deleteFile: "deleteFile" }, ngImport: i0, template: "<div class=\"sky-file-item sky-padding-even-default\" *ngIf=\"fileItem\">\n  <div class=\"sky-file-item-title\">\n    <div class=\"sky-file-item-name-container\">\n      <div class=\"sky-file-item-name\">\n        <strong *ngIf=\"isFile\">{{ fileName }}</strong>\n        <strong *ngIf=\"!isFile\">{{ url }}</strong>\n      </div>\n      <div class=\"sky-file-item-size\" *ngIf=\"isFile\">\n        ({{ fileSize | skyFileSize }})\n      </div>\n    </div>\n    <div class=\"sky-file-item-controls\">\n      <button\n        type=\"button\"\n        class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n        [attr.aria-label]=\"\n          'skyux_file_attachment_file_item_delete' | skyLibResources\n        \"\n        (click)=\"itemDelete()\"\n      >\n        <sky-icon icon=\"trash-o\" size=\"lg\" />\n      </button>\n    </div>\n  </div>\n  <div class=\"sky-file-item-content\">\n    <div class=\"sky-file-item-preview\">\n      <div *ngIf=\"isImage\" class=\"sky-file-item-preview-img-container\">\n        <img\n          class=\"sky-file-item-preview-img\"\n          [src]=\"url\"\n          [alt]=\"\n            'skyux_file_attachment_file_upload_image_preview_alt_text'\n              | skyLibResources\n          \"\n        />\n      </div>\n      <div *ngIf=\"!isImage\" class=\"sky-file-item-preview-other\">\n        <sky-icon [icon]=\"icon\" />\n      </div>\n    </div>\n    <div class=\"sky-file-item-content-custom\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", styles: [".sky-file-item{border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4;background-color:#eeeeef;margin-bottom:10px}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:15px}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}.sky-file-item-title{margin-bottom:10px;display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:0 0 5px #666}.sky-file-item-preview-other{color:#686c73;font-size:100px;line-height:1;text-align:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileItemComponent, deps: [{ token: i0.KeyValueDiffers }, { token: SkyFileItemService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: SkyFileItemComponent, isStandalone: true, selector: "sky-file-item", inputs: { fileItem: "fileItem" }, outputs: { deleteFile: "deleteFile" }, ngImport: i0, template: "@if (fileItem) {\n  <div class=\"sky-file-item sky-padding-even-default\">\n    <div class=\"sky-file-item-title\">\n      <div class=\"sky-file-item-name-container\">\n        <div class=\"sky-file-item-name\">\n          @if (isFile) {\n            <strong>{{ fileName }}</strong>\n          } @else {\n            <strong>{{ url }}</strong>\n          }\n        </div>\n        @if (isFile) {\n          <div class=\"sky-file-item-size\">({{ fileSize | skyFileSize }})</div>\n        }\n      </div>\n      <div class=\"sky-file-item-controls\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n          [attr.aria-label]=\"\n            'skyux_file_attachment_file_item_delete'\n              | skyLibResources: (isFile ? fileName : url)\n          \"\n          (click)=\"itemDelete()\"\n        >\n          <sky-icon icon=\"trash-o\" size=\"lg\" />\n        </button>\n      </div>\n    </div>\n    <div class=\"sky-file-item-content\">\n      <div class=\"sky-file-item-preview\">\n        @if (isImage) {\n          <div class=\"sky-file-item-preview-img-container\">\n            <img\n              class=\"sky-file-item-preview-img\"\n              [src]=\"url\"\n              [alt]=\"\n                'skyux_file_attachment_file_upload_image_preview_alt_text'\n                  | skyLibResources\n              \"\n            />\n          </div>\n        } @else {\n          <div class=\"sky-file-item-preview-other\">\n            <sky-icon [icon]=\"icon\" />\n          </div>\n        }\n      </div>\n      <div class=\"sky-file-item-content-custom\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n}\n", styles: [".sky-file-item{border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4;background-color:#eeeeef;margin-bottom:10px}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:15px}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}.sky-file-item-title{margin-bottom:10px;display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:0 0 5px #666}.sky-file-item-preview-other{color:#686c73;font-size:100px;line-height:1;text-align:center;width:100%}\n"], dependencies: [{ kind: "pipe", type: SkyFileSizePipe, name: "skyFileSize" }, { kind: "ngmodule", type: SkyFormsResourcesModule }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileItemComponent, decorators: [{
             type: Component,
-            args: [{ imports: [
-                        CommonModule,
-                        SkyFileSizePipe,
-                        SkyFormsResourcesModule,
-                        SkyIconModule,
-                    ], selector: 'sky-file-item', standalone: true, template: "<div class=\"sky-file-item sky-padding-even-default\" *ngIf=\"fileItem\">\n  <div class=\"sky-file-item-title\">\n    <div class=\"sky-file-item-name-container\">\n      <div class=\"sky-file-item-name\">\n        <strong *ngIf=\"isFile\">{{ fileName }}</strong>\n        <strong *ngIf=\"!isFile\">{{ url }}</strong>\n      </div>\n      <div class=\"sky-file-item-size\" *ngIf=\"isFile\">\n        ({{ fileSize | skyFileSize }})\n      </div>\n    </div>\n    <div class=\"sky-file-item-controls\">\n      <button\n        type=\"button\"\n        class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n        [attr.aria-label]=\"\n          'skyux_file_attachment_file_item_delete' | skyLibResources\n        \"\n        (click)=\"itemDelete()\"\n      >\n        <sky-icon icon=\"trash-o\" size=\"lg\" />\n      </button>\n    </div>\n  </div>\n  <div class=\"sky-file-item-content\">\n    <div class=\"sky-file-item-preview\">\n      <div *ngIf=\"isImage\" class=\"sky-file-item-preview-img-container\">\n        <img\n          class=\"sky-file-item-preview-img\"\n          [src]=\"url\"\n          [alt]=\"\n            'skyux_file_attachment_file_upload_image_preview_alt_text'\n              | skyLibResources\n          \"\n        />\n      </div>\n      <div *ngIf=\"!isImage\" class=\"sky-file-item-preview-other\">\n        <sky-icon [icon]=\"icon\" />\n      </div>\n    </div>\n    <div class=\"sky-file-item-content-custom\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", styles: [".sky-file-item{border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4;background-color:#eeeeef;margin-bottom:10px}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:15px}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}.sky-file-item-title{margin-bottom:10px;display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:0 0 5px #666}.sky-file-item-preview-other{color:#686c73;font-size:100px;line-height:1;text-align:center;width:100%}\n"] }]
+            args: [{ imports: [SkyFileSizePipe, SkyFormsResourcesModule, SkyIconModule], selector: 'sky-file-item', standalone: true, template: "@if (fileItem) {\n  <div class=\"sky-file-item sky-padding-even-default\">\n    <div class=\"sky-file-item-title\">\n      <div class=\"sky-file-item-name-container\">\n        <div class=\"sky-file-item-name\">\n          @if (isFile) {\n            <strong>{{ fileName }}</strong>\n          } @else {\n            <strong>{{ url }}</strong>\n          }\n        </div>\n        @if (isFile) {\n          <div class=\"sky-file-item-size\">({{ fileSize | skyFileSize }})</div>\n        }\n      </div>\n      <div class=\"sky-file-item-controls\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-file-item-btn-delete\"\n          [attr.aria-label]=\"\n            'skyux_file_attachment_file_item_delete'\n              | skyLibResources: (isFile ? fileName : url)\n          \"\n          (click)=\"itemDelete()\"\n        >\n          <sky-icon icon=\"trash-o\" size=\"lg\" />\n        </button>\n      </div>\n    </div>\n    <div class=\"sky-file-item-content\">\n      <div class=\"sky-file-item-preview\">\n        @if (isImage) {\n          <div class=\"sky-file-item-preview-img-container\">\n            <img\n              class=\"sky-file-item-preview-img\"\n              [src]=\"url\"\n              [alt]=\"\n                'skyux_file_attachment_file_upload_image_preview_alt_text'\n                  | skyLibResources\n              \"\n            />\n          </div>\n        } @else {\n          <div class=\"sky-file-item-preview-other\">\n            <sky-icon [icon]=\"icon\" />\n          </div>\n        }\n      </div>\n      <div class=\"sky-file-item-content-custom\">\n        <ng-content />\n      </div>\n    </div>\n  </div>\n}\n", styles: [".sky-file-item{border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4;background-color:#eeeeef;margin-bottom:10px}.sky-file-item-name-container{flex:1 1 auto;overflow:hidden}.sky-file-item-controls{flex:0 1 auto;padding-left:15px}.sky-file-item-name{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis}.sky-file-item-title{margin-bottom:10px;display:flex}.sky-file-item-content{display:flex}.sky-file-item-preview{flex-basis:25%}.sky-file-item-content-custom{flex-basis:75%}.sky-file-item-preview-img-container{text-align:center}.sky-file-item-preview-img{max-width:100%;height:auto;box-shadow:0 0 5px #666}.sky-file-item-preview-other{color:#686c73;font-size:100px;line-height:1;text-align:center;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: SkyFileItemService }], propDecorators: { fileItem: [{
                 type: Input
             }], deleteFile: [{
@@ -2461,11 +2409,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
             }] } });
 
 class SkyFileDropModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyFileDropModule, imports: [SkyFileDropComponent, SkyFileItemComponent], exports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileDropModule, imports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkyFileDropModule, imports: [SkyFileDropComponent, SkyFileItemComponent], exports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileDropModule, imports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileDropModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileDropModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyFileDropComponent, SkyFileItemComponent, SkyFormErrorModule],
@@ -2477,11 +2425,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
  * @deprecated Import either `SkyFileAttachmentModule` or `SkyFileDropModule`.
  */
 class SkyFileAttachmentsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentsModule, imports: [SkyFileAttachmentModule, SkyFileDropModule], exports: [SkyFileAttachmentModule, SkyFileDropModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentsModule, imports: [SkyFileAttachmentModule, SkyFileDropModule, SkyFileAttachmentModule, SkyFileDropModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentsModule, imports: [SkyFileAttachmentModule, SkyFileDropModule], exports: [SkyFileAttachmentModule, SkyFileDropModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentsModule, imports: [SkyFileAttachmentModule, SkyFileDropModule, SkyFileAttachmentModule, SkyFileDropModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyFileAttachmentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyFileAttachmentsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyFileAttachmentModule, SkyFileDropModule],
@@ -2493,7 +2441,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
  * @internal
  */
 class SkyInputBoxHostService {
+    constructor() {
+        this.#requiredSubject = new BehaviorSubject(false);
+        this.required = this.#requiredSubject.asObservable();
+    }
     #host;
+    #requiredSubject;
     get controlId() {
         return this.#host?.controlId ?? '';
     }
@@ -2511,6 +2464,9 @@ class SkyInputBoxHostService {
         this.#host = host;
         this.#ariaDescribedBy = host.ariaDescribedBy.asObservable();
     }
+    ngOnDestroy() {
+        this.#requiredSubject.complete();
+    }
     populate(args) {
         if (!this.#host) {
             throw new Error('Cannot populate the input box because `SkyInputBoxHostService` has not yet been initialized. Try running the `populate` method within an Angular lifecycle hook, such as `ngOnInit`.');
@@ -2535,10 +2491,18 @@ class SkyInputBoxHostService {
         }
         this.#host.setHintTextScreenReaderOnly(hide);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxHostService }); }
+    /**
+     * Set required so that input box displays the label correctly. When the input is supplied by the consumer it is a content
+     * child that input box can read required from and this is unnecessary. When the input is supplied internally by the
+     * component the input box does not have a ref to it, so the component needs to inform the input box of its required state.
+     */
+    setRequired(required) {
+        this.#requiredSubject.next(required);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxHostService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxHostService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxHostService, decorators: [{
             type: Injectable
         }] });
 
@@ -2554,10 +2518,10 @@ class SkyInputBoxControlDirective {
     }
     #_autocomplete;
     #hostSvc = inject(SkyInputBoxHostService, { optional: true });
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: SkyInputBoxControlDirective, isStandalone: true, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: { autocomplete: "autocomplete" }, host: { properties: { "autocomplete": "this.autocomplete" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.3", type: SkyInputBoxControlDirective, isStandalone: true, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: { autocomplete: "autocomplete" }, host: { properties: { "autocomplete": "this.autocomplete" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 
@@ -2582,10 +2546,10 @@ class SkyInputBoxHintTextPipe {
         }
         return hintText || hostHintText;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxHintTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxHintTextPipe, isStandalone: true, name: "skyInputBoxHintText" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxHintTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxHintTextPipe, isStandalone: true, name: "skyInputBoxHintText" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxHintTextPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxHintTextPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -2647,10 +2611,10 @@ class SkyInputBoxAdapterService {
             this.#renderer.setAttribute(inputEl, ARIA_DESCRIBEDBY_ATTR, describedByIds.join(' '));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxAdapterService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxAdapterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxAdapterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxAdapterService, decorators: [{
             type: Injectable
         }] });
 
@@ -2665,12 +2629,6 @@ class SkyInputBoxComponent {
         this.#idSvc = inject(SkyIdService);
         this.#elementRef = inject(ElementRef);
         this.#renderer = inject(Renderer2);
-        /**
-         * @internal
-         */
-        this.errorsScreenReaderOnly = input(false, {
-            transform: booleanAttribute,
-        });
         this.formControlHasFocus = false;
         this.hintTextHidden = false;
         this.hintTextScreenReaderOnly = false;
@@ -2682,6 +2640,7 @@ class SkyInputBoxComponent {
         this.cssClass = '';
         this.characterCountScreenReader = 0;
         this.#_stacked = false;
+        this.#ngUnsubscribe = new Subject();
     }
     #changeRef;
     #inputBoxHostSvc;
@@ -2720,6 +2679,7 @@ class SkyInputBoxComponent {
     get hintText() {
         return this.#_hintText;
     }
+    #requiredByFormField;
     get isDisabled() {
         return !!(this.disabled ||
             this.controlDir?.control?.disabled ||
@@ -2732,15 +2692,24 @@ class SkyInputBoxComponent {
         return this.hasErrors;
     }
     get required() {
-        return (this.#hasRequiredValidator() || this.inputRef?.nativeElement.required);
+        return (this.#hasRequiredValidator() ||
+            this.inputRef?.nativeElement.required ||
+            this.#requiredByFormField);
     }
     #_stacked;
     #_characterLimit;
     #_hintText;
     #previousInputRef;
     #previousMaxLengthValidator;
+    #ngUnsubscribe;
     ngOnInit() {
         this.#inputBoxHostSvc.init(this);
+        this.#inputBoxHostSvc.required
+            .pipe(takeUntil$1(this.#ngUnsubscribe))
+            .subscribe((required) => {
+            this.#requiredByFormField = required;
+            this.#changeRef.markForCheck();
+        });
     }
     ngAfterContentChecked() {
         this.controlDir =
@@ -2752,6 +2721,8 @@ class SkyInputBoxComponent {
     }
     ngOnDestroy() {
         this.ariaDescribedBy.complete();
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
     }
     formControlFocusIn() {
         const inlineHelpEl = this.#adapterService.getInlineHelpElement(this.#elementRef);
@@ -2847,8 +2818,8 @@ class SkyInputBoxComponent {
             control.addValidators([this.#previousMaxLengthValidator]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.1.2", type: SkyInputBoxComponent, selector: "sky-input-box", inputs: { hasErrors: { classPropertyName: "hasErrors", publicName: "hasErrors", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, labelText: { classPropertyName: "labelText", publicName: "labelText", isSignal: false, isRequired: false, transformFunction: null }, characterLimit: { classPropertyName: "characterLimit", publicName: "characterLimit", isSignal: false, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: false, isRequired: false, transformFunction: null }, helpPopoverTitle: { classPropertyName: "helpPopoverTitle", publicName: "helpPopoverTitle", isSignal: false, isRequired: false, transformFunction: null }, helpPopoverContent: { classPropertyName: "helpPopoverContent", publicName: "helpPopoverContent", isSignal: false, isRequired: false, transformFunction: null }, helpKey: { classPropertyName: "helpKey", publicName: "helpKey", isSignal: false, isRequired: false, transformFunction: null }, hintText: { classPropertyName: "hintText", publicName: "hintText", isSignal: false, isRequired: false, transformFunction: null }, errorsScreenReaderOnly: { classPropertyName: "errorsScreenReaderOnly", publicName: "errorsScreenReaderOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: SkyInputBoxComponent, selector: "sky-input-box", inputs: { hasErrors: "hasErrors", disabled: "disabled", labelText: "labelText", characterLimit: "characterLimit", stacked: "stacked", helpPopoverTitle: "helpPopoverTitle", helpPopoverContent: "helpPopoverContent", helpKey: "helpKey", hintText: "hintText" }, host: { properties: { "class": "this.cssClass" } }, providers: [
             SkyContentInfoProvider,
             SkyInputBoxAdapterService,
             SkyInputBoxHostService,
@@ -2856,16 +2827,11 @@ class SkyInputBoxComponent {
                 provide: SKY_FORM_ERRORS_ENABLED,
                 useValue: true,
             },
-        ], queries: [{ propertyName: "formControl", first: true, predicate: FormControlDirective, descendants: true }, { propertyName: "formControlByName", first: true, predicate: FormControlName, descendants: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }, { propertyName: "inputRef", first: true, predicate: SkyInputBoxControlDirective, descendants: true, read: ElementRef }], hostDirectives: [{ directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], ngImport: i0, template: "<div\n  *skyThemeIf=\"'default'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-form-group\">\n    <div class=\"sky-input-box-label-wrapper\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n        *ngTemplateOutlet=\"inlineHelpTemplate\"\n      />\n      <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n    </div>\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n      <div\n        class=\"sky-input-box-input-group-inner\"\n        [ngClass]=\"{\n          'sky-field-status-active': formControlHasFocus,\n          'sky-field-status-invalid': hasErrorsComputed\n        }\"\n        (focusin)=\"formControlFocusIn()\"\n        (focusout)=\"formControlFocusOut()\"\n      >\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n    </div>\n    <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n    <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n  </div>\n</div>\n\n<div\n  *skyThemeIf=\"'modern'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-input-box-group\">\n    <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n    <div\n      class=\"sky-input-box-group-form-control\"\n      [ngClass]=\"{\n        'sky-input-box-group-form-control-focus': formControlHasFocus,\n        'sky-input-box-group-form-control-invalid': hasErrorsComputed\n      }\"\n      (focusin)=\"formControlFocusIn()\"\n      (focusout)=\"formControlFocusOut()\"\n    >\n      <div class=\"sky-form-group\">\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n        <div class=\"sky-input-box-form-group-inner\">\n          <div class=\"sky-input-box-label-wrapper\">\n            <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n              *ngTemplateOutlet=\"inlineHelpTemplate\"\n            />\n            <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n          </div>\n          <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        </div>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n  </div>\n  <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n  <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n</div>\n\n<ng-template #labelTemplate>\n  <ng-content select=\".sky-control-label\" />\n  <label\n    *ngIf=\"labelText\"\n    class=\"sky-control-label\"\n    [attr.aria-label]=\"\n      characterLimit !== undefined\n        ? labelText +\n          ' ' +\n          ('skyux_character_count_message'\n            | skyLibResources: characterCountScreenReader : characterLimit)\n        : null\n    \"\n    [for]=\"controlId\"\n    [id]=\"labelId\"\n    [ngClass]=\"{\n      'sky-control-label-required': required\n    }\"\n    >{{ labelText }}</label\n  >\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  <sky-help-inline\n    *ngIf=\"helpPopoverContent || helpKey\"\n    class=\"sky-control-help\"\n    [helpKey]=\"helpKey\"\n    [labelText]=\"labelText\"\n    [popoverContent]=\"helpPopoverContent\"\n    [popoverTitle]=\"helpPopoverTitle\"\n  />\n\n  <ng-content select=\".sky-control-help\" />\n</ng-template>\n\n<ng-template #characterCountTemplate>\n  <sky-character-counter-indicator\n    *ngIf=\"characterLimit !== undefined\"\n    [characterCount]=\"controlDir?.value?.length || 0\"\n    [characterCountLimit]=\"characterLimit\"\n  />\n  <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content\n    select=\"input,select,.sky-form-control:not(textarea),sky-text-editor\"\n  />\n  <ng-container\n    *ngIf=\"hostInputTemplate\"\n    [ngTemplateOutlet]=\"hostInputTemplate\"\n  />\n  <ng-content select=\"textarea\" />\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\" />\n  <ng-container\n    *ngIf=\"hostButtonsLeftTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsLeftTemplate\"\n  />\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <ng-content\n    select=\".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)\"\n  />\n  <ng-container\n    *ngIf=\"hostButtonsTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsTemplate\"\n  />\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-inset\" />\n  <ng-container\n    *ngIf=\"hostButtonsInsetTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsInsetTemplate\"\n  />\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n  <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset\" />\n    <ng-container\n      *ngIf=\"hostIconsInsetTemplate\"\n      [ngTemplateOutlet]=\"hostIconsInsetTemplate\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #iconsInsetLeftTemplate>\n  <div\n    class=\"sky-input-box-icon-inset-left-wrapper\"\n    (click)=\"onInsetIconClick()\"\n  >\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset-left\" />\n    <ng-container\n      *ngIf=\"hostIconsInsetLeftTemplate\"\n      [ngTemplateOutlet]=\"hostIconsInsetLeftTemplate\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n  <sky-form-errors\n    [id]=\"errorId\"\n    [errors]=\"controlDir?.errors\"\n    [labelText]=\"labelText\"\n    [ngClass]=\"{ 'sky-screen-reader-only': errorsScreenReaderOnly() }\"\n    [showErrors]=\"controlDir?.touched || controlDir?.dirty\"\n  >\n    <ng-content select=\"sky-form-error\" />\n  </sky-form-errors>\n  <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n  <div\n    *ngIf=\"hintText || hostHintText\"\n    class=\"sky-font-deemphasized sky-input-box-hint-text\"\n    [ngClass]=\"{\n      'sky-input-box-hint-text-hidden': hintTextHidden,\n      'sky-screen-reader-only': hintTextScreenReaderOnly\n    }\"\n    [id]=\"hintTextId\"\n  >\n    {{ hintText | skyInputBoxHintText: hostHintText }}\n  </div>\n</ng-template>\n", styles: [".sky-input-box{--sky-background-color-input-box-group: transparent;--sky-background-color-input-box-group-focused: transparent}.sky-theme-modern .sky-input-box{--sky-background-color-input-box-group: #ffffff;--sky-background-color-input-box-group-focused: #ffffff}.sky-theme-modern.sky-theme-mode-dark .sky-input-box{--sky-background-color-input-box-group: #000000;--sky-background-color-input-box-group-focused: #000000}sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-error-indicator{margin-top:5px}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-background-color-input-box-group)}sky-input-box .sky-form-group:focus-within{background-color:var(--sky-background-color-input-box-group-focused)}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:33px;display:flex;align-items:center;justify-content:center}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:#cdcfd2}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper .sky-icon,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper .sky-icon{color:#686c73}sky-input-box sky-character-counter-indicator{flex-grow:1;text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-grow:0;flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}sky-input-box .sky-input-box-hint-text{flex-basis:100%;margin-top:var(--sky-margin-stacked-xs)}sky-input-box .sky-input-box-hint-text.sky-input-box-hint-text-hidden{visibility:hidden}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:6px;border-bottom-left-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:#686c73;margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:55px}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:6px;border-bottom-left-radius:6px;margin-right:-1px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-group-icon{width:55px}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:#686c73;font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:-2px}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:-1px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;color:#686c73;flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;padding:0 15px;width:100%}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{z-index:4}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding:6px 0 1px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:13px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:3px 0 -3px 5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:3px 0 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:-23px;padding-top:26px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:6px;font-size:16px;height:auto;line-height:20px;padding-right:15px;padding-bottom:9px;padding-left:15px;position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill{box-shadow:none!important;clip-path:inset(2px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill:hover,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill:hover{clip-path:inset(1px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-ms-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:-webkit-autofill{clip-path:inset(1px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn{background-color:transparent;border-radius:6px;transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control:not(textarea),.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control:not(textarea){padding-top:10px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+textarea.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* textarea.sky-form-control{border-top:10px solid transparent}@-moz-document url-prefix(){.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{padding-left:10px}}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - 10px);z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:-26px;padding-top:0;resize:vertical;border-top:29px solid transparent}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:-webkit-autofill{border-top:29px solid transparent!important}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 15px;width:initial}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #d2d2d2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8;z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus{border:none;box-shadow:inset 0 0 0 2px #1870b8;color:#212327;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid:active .sky-form-group{color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-control,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-control-label,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn{cursor:not-allowed}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-wrapper,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:transparent}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{background-color:#ededee}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:#ededee;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;opacity:1}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group{background-color:transparent;border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-form-control,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-input-group-btn .sky-btn{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus .sky-form-group,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus.sky-input-box-group-form-control-invalid .sky-form-group{color:#1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn.sky-btn-default{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn:focus{border-color:#1870b8;color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", inputs: ["characterCount", "characterCountLimit"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i4.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyInputBoxHintTextPipe, name: "skyInputBoxHintText" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "formControl", first: true, predicate: FormControlDirective, descendants: true }, { propertyName: "formControlByName", first: true, predicate: FormControlName, descendants: true }, { propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }, { propertyName: "inputRef", first: true, predicate: SkyInputBoxControlDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  *skyThemeIf=\"'default'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-form-group\">\n    <div class=\"sky-input-box-label-wrapper\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n        *ngTemplateOutlet=\"inlineHelpTemplate\"\n      />\n      <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n    </div>\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n      <div\n        class=\"sky-input-box-input-group-inner\"\n        [ngClass]=\"{\n          'sky-field-status-active': formControlHasFocus,\n          'sky-field-status-invalid': hasErrorsComputed\n        }\"\n        (focusin)=\"formControlFocusIn()\"\n        (focusout)=\"formControlFocusOut()\"\n      >\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n    </div>\n    <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n    <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n  </div>\n</div>\n\n<div\n  *skyThemeIf=\"'modern'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-input-box-group\">\n    <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n    <div\n      class=\"sky-input-box-group-form-control\"\n      [ngClass]=\"{\n        'sky-input-box-group-form-control-focus': formControlHasFocus,\n        'sky-input-box-group-form-control-invalid': hasErrorsComputed\n      }\"\n      (focusin)=\"formControlFocusIn()\"\n      (focusout)=\"formControlFocusOut()\"\n    >\n      <div class=\"sky-form-group\">\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n        <div class=\"sky-input-box-form-group-inner\">\n          <div class=\"sky-input-box-label-wrapper\">\n            <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n              *ngTemplateOutlet=\"inlineHelpTemplate\"\n            />\n            <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n          </div>\n          <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        </div>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n  </div>\n  <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n  <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n</div>\n\n<ng-template #labelTemplate>\n  <ng-content select=\".sky-control-label\" />\n  @if (labelText) {\n    <label\n      class=\"sky-control-label\"\n      [attr.aria-label]=\"\n        characterLimit !== undefined\n          ? labelText +\n            ' ' +\n            ('skyux_character_count_message'\n              | skyLibResources: characterCountScreenReader : characterLimit)\n          : null\n      \"\n      [for]=\"controlId\"\n      [id]=\"labelId\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n      >{{ labelText }}</label\n    >\n  }\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  @if (helpPopoverContent || helpKey) {\n    <sky-help-inline\n      class=\"sky-control-help\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverContent]=\"helpPopoverContent\"\n      [popoverTitle]=\"helpPopoverTitle\"\n    />\n  }\n\n  <ng-content select=\".sky-control-help\" />\n</ng-template>\n\n<ng-template #characterCountTemplate>\n  @if (characterLimit !== undefined) {\n    <sky-character-counter-indicator\n      [characterCount]=\"controlDir?.value?.length || 0\"\n      [characterCountLimit]=\"characterLimit\"\n    />\n  }\n  <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content\n    select=\"input,select,.sky-form-control:not(textarea),sky-text-editor\"\n  />\n  @if (hostInputTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostInputTemplate\" />\n  }\n  <ng-content select=\"textarea\" />\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\" />\n  @if (hostButtonsLeftTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsLeftTemplate\" />\n  }\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <ng-content\n    select=\".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)\"\n  />\n  @if (hostButtonsTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsTemplate\" />\n  }\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-inset\" />\n  @if (hostButtonsInsetTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsInsetTemplate\" />\n  }\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n  <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset\" />\n    @if (hostIconsInsetTemplate) {\n      <ng-container [ngTemplateOutlet]=\"hostIconsInsetTemplate\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #iconsInsetLeftTemplate>\n  <div\n    class=\"sky-input-box-icon-inset-left-wrapper\"\n    (click)=\"onInsetIconClick()\"\n  >\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset-left\" />\n    @if (hostIconsInsetLeftTemplate) {\n      <ng-container [ngTemplateOutlet]=\"hostIconsInsetLeftTemplate\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n  <sky-form-errors\n    [id]=\"errorId\"\n    [errors]=\"controlDir?.errors\"\n    [labelText]=\"labelText\"\n    [touched]=\"controlDir?.touched\"\n    [dirty]=\"controlDir?.dirty\"\n  >\n    <ng-content select=\"sky-form-error\" />\n  </sky-form-errors>\n  <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n  @if (hintText || hostHintText) {\n    <div\n      class=\"sky-font-deemphasized sky-input-box-hint-text\"\n      [ngClass]=\"{\n        'sky-input-box-hint-text-hidden': hintTextHidden,\n        'sky-screen-reader-only': hintTextScreenReaderOnly\n      }\"\n      [id]=\"hintTextId\"\n    >\n      {{ hintText | skyInputBoxHintText: hostHintText }}\n    </div>\n  }\n</ng-template>\n", styles: [".sky-input-box{--sky-background-color-input-box-group: transparent;--sky-background-color-input-box-group-focused: transparent}.sky-theme-modern .sky-input-box{--sky-background-color-input-box-group: #ffffff;--sky-background-color-input-box-group-focused: #ffffff}.sky-theme-modern.sky-theme-mode-dark .sky-input-box{--sky-background-color-input-box-group: #000000;--sky-background-color-input-box-group-focused: #000000}sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-error-indicator{margin-top:5px}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-background-color-input-box-group)}sky-input-box .sky-form-group:focus-within{background-color:var(--sky-background-color-input-box-group-focused)}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:33px;display:flex;align-items:center;justify-content:center}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:#cdcfd2}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper .sky-icon,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper .sky-icon{color:#686c73}sky-input-box sky-character-counter-indicator{flex-grow:1;text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-grow:0;flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}sky-input-box .sky-input-box-hint-text{flex-basis:100%;margin-top:var(--sky-margin-stacked-xs)}sky-input-box .sky-input-box-hint-text.sky-input-box-hint-text-hidden{visibility:hidden}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:6px;border-bottom-left-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:#686c73;margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:55px}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:6px;border-bottom-left-radius:6px;margin-right:-1px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-group-icon{width:55px}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:#686c73;font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:-2px}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:-1px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;color:#686c73;flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;padding:0 15px;width:100%}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{z-index:4}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding:6px 0 1px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:13px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:3px 0 -3px 5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:3px 0 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:-23px;padding-top:26px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:6px;font-size:16px;height:auto;line-height:20px;padding-right:15px;padding-bottom:9px;padding-left:15px;position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill{box-shadow:none!important;clip-path:inset(2px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill:hover,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill:hover{clip-path:inset(1px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-ms-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:-webkit-autofill{clip-path:inset(1px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn{background-color:transparent;border-radius:6px;transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control:not(textarea),.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control:not(textarea){padding-top:10px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+textarea.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* textarea.sky-form-control{border-top:10px solid transparent}@-moz-document url-prefix(){.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{padding-left:10px}}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - 10px);z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:-26px;padding-top:0;resize:vertical;border-top:29px solid transparent}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:-webkit-autofill{border-top:29px solid transparent!important}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 15px;width:initial}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #d2d2d2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8;z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus{border:none;box-shadow:inset 0 0 0 2px #1870b8;color:#212327;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid:active .sky-form-group{color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-control,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-control-label,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn{cursor:not-allowed}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-wrapper,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:transparent}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{background-color:#ededee}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:#ededee;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;opacity:1}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group{background-color:transparent;border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-form-control,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-input-group-btn .sky-btn{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus .sky-form-group,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus.sky-input-box-group-form-control-invalid .sky-form-group{color:#1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn.sky-btn-default{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn:focus{border-color:#1870b8;color:#fbfcfe}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyCharacterCounterIndicatorComponent, selector: "sky-character-counter-indicator", inputs: ["characterCount", "characterCountLimit"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i4$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i1$1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyInputBoxHintTextPipe, name: "skyInputBoxHintText" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-input-box', hostDirectives: [
-                        {
-                            directive: SkyFormFieldLabelTextRequiredDirective,
-                            inputs: ['labelText'],
-                        },
-                    ], providers: [
+            args: [{ selector: 'sky-input-box', providers: [
                         SkyContentInfoProvider,
                         SkyInputBoxAdapterService,
                         SkyInputBoxHostService,
@@ -2873,7 +2839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
                             provide: SKY_FORM_ERRORS_ENABLED,
                             useValue: true,
                         },
-                    ], encapsulation: ViewEncapsulation.None, template: "<div\n  *skyThemeIf=\"'default'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-form-group\">\n    <div class=\"sky-input-box-label-wrapper\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n        *ngTemplateOutlet=\"inlineHelpTemplate\"\n      />\n      <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n    </div>\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n      <div\n        class=\"sky-input-box-input-group-inner\"\n        [ngClass]=\"{\n          'sky-field-status-active': formControlHasFocus,\n          'sky-field-status-invalid': hasErrorsComputed\n        }\"\n        (focusin)=\"formControlFocusIn()\"\n        (focusout)=\"formControlFocusOut()\"\n      >\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n    </div>\n    <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n    <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n  </div>\n</div>\n\n<div\n  *skyThemeIf=\"'modern'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-input-box-group\">\n    <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n    <div\n      class=\"sky-input-box-group-form-control\"\n      [ngClass]=\"{\n        'sky-input-box-group-form-control-focus': formControlHasFocus,\n        'sky-input-box-group-form-control-invalid': hasErrorsComputed\n      }\"\n      (focusin)=\"formControlFocusIn()\"\n      (focusout)=\"formControlFocusOut()\"\n    >\n      <div class=\"sky-form-group\">\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n        <div class=\"sky-input-box-form-group-inner\">\n          <div class=\"sky-input-box-label-wrapper\">\n            <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n              *ngTemplateOutlet=\"inlineHelpTemplate\"\n            />\n            <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n          </div>\n          <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        </div>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n  </div>\n  <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n  <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n</div>\n\n<ng-template #labelTemplate>\n  <ng-content select=\".sky-control-label\" />\n  <label\n    *ngIf=\"labelText\"\n    class=\"sky-control-label\"\n    [attr.aria-label]=\"\n      characterLimit !== undefined\n        ? labelText +\n          ' ' +\n          ('skyux_character_count_message'\n            | skyLibResources: characterCountScreenReader : characterLimit)\n        : null\n    \"\n    [for]=\"controlId\"\n    [id]=\"labelId\"\n    [ngClass]=\"{\n      'sky-control-label-required': required\n    }\"\n    >{{ labelText }}</label\n  >\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  <sky-help-inline\n    *ngIf=\"helpPopoverContent || helpKey\"\n    class=\"sky-control-help\"\n    [helpKey]=\"helpKey\"\n    [labelText]=\"labelText\"\n    [popoverContent]=\"helpPopoverContent\"\n    [popoverTitle]=\"helpPopoverTitle\"\n  />\n\n  <ng-content select=\".sky-control-help\" />\n</ng-template>\n\n<ng-template #characterCountTemplate>\n  <sky-character-counter-indicator\n    *ngIf=\"characterLimit !== undefined\"\n    [characterCount]=\"controlDir?.value?.length || 0\"\n    [characterCountLimit]=\"characterLimit\"\n  />\n  <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content\n    select=\"input,select,.sky-form-control:not(textarea),sky-text-editor\"\n  />\n  <ng-container\n    *ngIf=\"hostInputTemplate\"\n    [ngTemplateOutlet]=\"hostInputTemplate\"\n  />\n  <ng-content select=\"textarea\" />\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\" />\n  <ng-container\n    *ngIf=\"hostButtonsLeftTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsLeftTemplate\"\n  />\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <ng-content\n    select=\".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)\"\n  />\n  <ng-container\n    *ngIf=\"hostButtonsTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsTemplate\"\n  />\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-inset\" />\n  <ng-container\n    *ngIf=\"hostButtonsInsetTemplate\"\n    [ngTemplateOutlet]=\"hostButtonsInsetTemplate\"\n  />\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n  <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset\" />\n    <ng-container\n      *ngIf=\"hostIconsInsetTemplate\"\n      [ngTemplateOutlet]=\"hostIconsInsetTemplate\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #iconsInsetLeftTemplate>\n  <div\n    class=\"sky-input-box-icon-inset-left-wrapper\"\n    (click)=\"onInsetIconClick()\"\n  >\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset-left\" />\n    <ng-container\n      *ngIf=\"hostIconsInsetLeftTemplate\"\n      [ngTemplateOutlet]=\"hostIconsInsetLeftTemplate\"\n    />\n  </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n  <sky-form-errors\n    [id]=\"errorId\"\n    [errors]=\"controlDir?.errors\"\n    [labelText]=\"labelText\"\n    [ngClass]=\"{ 'sky-screen-reader-only': errorsScreenReaderOnly() }\"\n    [showErrors]=\"controlDir?.touched || controlDir?.dirty\"\n  >\n    <ng-content select=\"sky-form-error\" />\n  </sky-form-errors>\n  <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n  <div\n    *ngIf=\"hintText || hostHintText\"\n    class=\"sky-font-deemphasized sky-input-box-hint-text\"\n    [ngClass]=\"{\n      'sky-input-box-hint-text-hidden': hintTextHidden,\n      'sky-screen-reader-only': hintTextScreenReaderOnly\n    }\"\n    [id]=\"hintTextId\"\n  >\n    {{ hintText | skyInputBoxHintText: hostHintText }}\n  </div>\n</ng-template>\n", styles: [".sky-input-box{--sky-background-color-input-box-group: transparent;--sky-background-color-input-box-group-focused: transparent}.sky-theme-modern .sky-input-box{--sky-background-color-input-box-group: #ffffff;--sky-background-color-input-box-group-focused: #ffffff}.sky-theme-modern.sky-theme-mode-dark .sky-input-box{--sky-background-color-input-box-group: #000000;--sky-background-color-input-box-group-focused: #000000}sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-error-indicator{margin-top:5px}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-background-color-input-box-group)}sky-input-box .sky-form-group:focus-within{background-color:var(--sky-background-color-input-box-group-focused)}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:33px;display:flex;align-items:center;justify-content:center}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:#cdcfd2}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper .sky-icon,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper .sky-icon{color:#686c73}sky-input-box sky-character-counter-indicator{flex-grow:1;text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-grow:0;flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}sky-input-box .sky-input-box-hint-text{flex-basis:100%;margin-top:var(--sky-margin-stacked-xs)}sky-input-box .sky-input-box-hint-text.sky-input-box-hint-text-hidden{visibility:hidden}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:6px;border-bottom-left-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:#686c73;margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:55px}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:6px;border-bottom-left-radius:6px;margin-right:-1px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-group-icon{width:55px}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:#686c73;font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:-2px}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:-1px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;color:#686c73;flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;padding:0 15px;width:100%}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{z-index:4}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding:6px 0 1px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:13px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:3px 0 -3px 5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:3px 0 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:-23px;padding-top:26px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:6px;font-size:16px;height:auto;line-height:20px;padding-right:15px;padding-bottom:9px;padding-left:15px;position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill{box-shadow:none!important;clip-path:inset(2px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill:hover,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill:hover{clip-path:inset(1px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-ms-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:-webkit-autofill{clip-path:inset(1px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn{background-color:transparent;border-radius:6px;transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control:not(textarea),.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control:not(textarea){padding-top:10px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+textarea.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* textarea.sky-form-control{border-top:10px solid transparent}@-moz-document url-prefix(){.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{padding-left:10px}}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - 10px);z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:-26px;padding-top:0;resize:vertical;border-top:29px solid transparent}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:-webkit-autofill{border-top:29px solid transparent!important}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 15px;width:initial}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #d2d2d2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8;z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus{border:none;box-shadow:inset 0 0 0 2px #1870b8;color:#212327;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid:active .sky-form-group{color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-control,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-control-label,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn{cursor:not-allowed}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-wrapper,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:transparent}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{background-color:#ededee}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:#ededee;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;opacity:1}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group{background-color:transparent;border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-form-control,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-input-group-btn .sky-btn{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus .sky-form-group,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus.sky-input-box-group-form-control-invalid .sky-form-group{color:#1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn.sky-btn-default{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn:focus{border-color:#1870b8;color:#fbfcfe}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<div\n  *skyThemeIf=\"'default'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-form-group\">\n    <div class=\"sky-input-box-label-wrapper\">\n      <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n        *ngTemplateOutlet=\"inlineHelpTemplate\"\n      />\n      <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n    </div>\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n      <div\n        class=\"sky-input-box-input-group-inner\"\n        [ngClass]=\"{\n          'sky-field-status-active': formControlHasFocus,\n          'sky-field-status-invalid': hasErrorsComputed\n        }\"\n        (focusin)=\"formControlFocusIn()\"\n        (focusout)=\"formControlFocusOut()\"\n      >\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n    </div>\n    <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n    <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n  </div>\n</div>\n\n<div\n  *skyThemeIf=\"'modern'\"\n  class=\"sky-input-box\"\n  [ngClass]=\"{\n    'sky-input-box-disabled': isDisabled\n  }\"\n>\n  <div class=\"sky-input-box-group\">\n    <ng-container *ngTemplateOutlet=\"buttonsLeftTemplate\" />\n    <div\n      class=\"sky-input-box-group-form-control\"\n      [ngClass]=\"{\n        'sky-input-box-group-form-control-focus': formControlHasFocus,\n        'sky-input-box-group-form-control-invalid': hasErrorsComputed\n      }\"\n      (focusin)=\"formControlFocusIn()\"\n      (focusout)=\"formControlFocusOut()\"\n    >\n      <div class=\"sky-form-group\">\n        <ng-container *ngTemplateOutlet=\"iconsInsetLeftTemplate\" />\n        <div class=\"sky-input-box-form-group-inner\">\n          <div class=\"sky-input-box-label-wrapper\">\n            <ng-container *ngTemplateOutlet=\"labelTemplate\" /><ng-container\n              *ngTemplateOutlet=\"inlineHelpTemplate\"\n            />\n            <ng-container *ngTemplateOutlet=\"characterCountTemplate\" />\n          </div>\n          <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n        </div>\n        <ng-container *ngTemplateOutlet=\"buttonsInsetTemplate\" />\n        <ng-container *ngTemplateOutlet=\"iconsInsetTemplate\" />\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"buttonsTemplate\" />\n  </div>\n  <ng-container *ngTemplateOutlet=\"hintTextTemplate\" />\n  <ng-container *ngTemplateOutlet=\"errorLabelTemplate\" />\n</div>\n\n<ng-template #labelTemplate>\n  <ng-content select=\".sky-control-label\" />\n  @if (labelText) {\n    <label\n      class=\"sky-control-label\"\n      [attr.aria-label]=\"\n        characterLimit !== undefined\n          ? labelText +\n            ' ' +\n            ('skyux_character_count_message'\n              | skyLibResources: characterCountScreenReader : characterLimit)\n          : null\n      \"\n      [for]=\"controlId\"\n      [id]=\"labelId\"\n      [ngClass]=\"{\n        'sky-control-label-required': required\n      }\"\n      >{{ labelText }}</label\n    >\n  }\n</ng-template>\n\n<ng-template #inlineHelpTemplate>\n  @if (helpPopoverContent || helpKey) {\n    <sky-help-inline\n      class=\"sky-control-help\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverContent]=\"helpPopoverContent\"\n      [popoverTitle]=\"helpPopoverTitle\"\n    />\n  }\n\n  <ng-content select=\".sky-control-help\" />\n</ng-template>\n\n<ng-template #characterCountTemplate>\n  @if (characterLimit !== undefined) {\n    <sky-character-counter-indicator\n      [characterCount]=\"controlDir?.value?.length || 0\"\n      [characterCountLimit]=\"characterLimit\"\n    />\n  }\n  <ng-content select=\"sky-character-counter-indicator\" />\n</ng-template>\n\n<ng-template #inputTemplate>\n  <ng-content\n    select=\"input,select,.sky-form-control:not(textarea),sky-text-editor\"\n  />\n  @if (hostInputTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostInputTemplate\" />\n  }\n  <ng-content select=\"textarea\" />\n</ng-template>\n\n<ng-template #buttonsLeftTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-left\" />\n  @if (hostButtonsLeftTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsLeftTemplate\" />\n  }\n</ng-template>\n\n<ng-template #buttonsTemplate>\n  <ng-content\n    select=\".sky-input-group-btn:not(.sky-input-box-btn-left):not(.sky-input-box-btn-inset)\"\n  />\n  @if (hostButtonsTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsTemplate\" />\n  }\n</ng-template>\n\n<ng-template #buttonsInsetTemplate>\n  <ng-content select=\".sky-input-group-btn.sky-input-box-btn-inset\" />\n  @if (hostButtonsInsetTemplate) {\n    <ng-container [ngTemplateOutlet]=\"hostButtonsInsetTemplate\" />\n  }\n</ng-template>\n\n<ng-template #iconsInsetTemplate>\n  <div class=\"sky-input-box-icon-inset-wrapper\" (click)=\"onInsetIconClick()\">\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset\" />\n    @if (hostIconsInsetTemplate) {\n      <ng-container [ngTemplateOutlet]=\"hostIconsInsetTemplate\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #iconsInsetLeftTemplate>\n  <div\n    class=\"sky-input-box-icon-inset-left-wrapper\"\n    (click)=\"onInsetIconClick()\"\n  >\n    <ng-content select=\".sky-input-group-icon.sky-input-box-icon-inset-left\" />\n    @if (hostIconsInsetLeftTemplate) {\n      <ng-container [ngTemplateOutlet]=\"hostIconsInsetLeftTemplate\" />\n    }\n  </div>\n</ng-template>\n\n<ng-template #errorLabelTemplate>\n  <sky-form-errors\n    [id]=\"errorId\"\n    [errors]=\"controlDir?.errors\"\n    [labelText]=\"labelText\"\n    [touched]=\"controlDir?.touched\"\n    [dirty]=\"controlDir?.dirty\"\n  >\n    <ng-content select=\"sky-form-error\" />\n  </sky-form-errors>\n  <ng-content select=\".sky-error-label,.sky-error-indicator\" />\n</ng-template>\n\n<ng-template #hintTextTemplate>\n  @if (hintText || hostHintText) {\n    <div\n      class=\"sky-font-deemphasized sky-input-box-hint-text\"\n      [ngClass]=\"{\n        'sky-input-box-hint-text-hidden': hintTextHidden,\n        'sky-screen-reader-only': hintTextScreenReaderOnly\n      }\"\n      [id]=\"hintTextId\"\n    >\n      {{ hintText | skyInputBoxHintText: hostHintText }}\n    </div>\n  }\n</ng-template>\n", styles: [".sky-input-box{--sky-background-color-input-box-group: transparent;--sky-background-color-input-box-group-focused: transparent}.sky-theme-modern .sky-input-box{--sky-background-color-input-box-group: #ffffff;--sky-background-color-input-box-group-focused: #ffffff}.sky-theme-modern.sky-theme-mode-dark .sky-input-box{--sky-background-color-input-box-group: #000000;--sky-background-color-input-box-group-focused: #000000}sky-input-box{display:block}sky-input-box .sky-input-box-input-container{width:100%}sky-input-box .sky-error-indicator{margin-top:5px}sky-input-box .sky-form-group{display:flex;flex-wrap:wrap;background-color:var(--sky-background-color-input-box-group)}sky-input-box .sky-form-group:focus-within{background-color:var(--sky-background-color-input-box-group-focused)}sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;width:100%}sky-input-box .sky-input-box-input-group-inner{display:flex;background-color:#fff;width:100%;z-index:1}sky-input-box .sky-input-box-input-group-inner:not(.sky-field-status-active):not(.sky-field-status-invalid){border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2}sky-input-box .sky-input-box-btn-inset .sky-btn{background-color:transparent;border:none}sky-input-box .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-icon-inset-left-wrapper{display:flex}sky-input-box .sky-input-box-icon-inset-wrapper .sky-input-group-icon,sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-group-icon{width:33px;display:flex;align-items:center;justify-content:center}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:#cdcfd2}sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-wrapper .sky-icon,sky-input-box .sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper .sky-icon{color:#686c73}sky-input-box sky-character-counter-indicator{flex-grow:1;text-align:right;margin-bottom:5px;margin-left:auto}sky-input-box .sky-control-label+sky-character-counter-indicator{flex-grow:0;flex-shrink:.001}sky-input-box .sky-form-control,sky-input-box .sky-form-control:focus{border:none;flex-basis:100%}sky-input-box .sky-form-control:focus,sky-input-box .sky-form-control.ng-invalid.ng-touched,sky-input-box .sky-form-control:focus:focus,sky-input-box .sky-form-control:focus.ng-invalid.ng-touched{border:none;box-shadow:none}sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 10px;width:initial}sky-input-box .sky-input-box-hint-text{flex-basis:100%;margin-top:var(--sky-margin-stacked-xs)}sky-input-box .sky-input-box-hint-text.sky-input-box-hint-text-hidden{visibility:hidden}.sky-theme-modern .sky-input-box .sky-input-box-group{display:flex}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control{flex-grow:1;position:relative}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:first-child .sky-form-group{border-top-left-radius:6px;border-bottom-left-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control:last-child .sky-form-group{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-box-form-group-inner{display:flex;flex-grow:1;flex-wrap:wrap}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn{border-radius:0;color:#686c73;margin:0;padding:0;position:relative;transition:border-color .15s,box-shadow .15s,color .15s;width:55px}.sky-theme-modern .sky-input-box .sky-input-group-btn .sky-btn .sky-icon{font-size:24px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn{border-top-left-radius:6px;border-bottom-left-radius:6px;margin-right:-1px}.sky-theme-modern .sky-input-box .sky-input-group-btn:first-child .sky-btn:focus{z-index:1}.sky-theme-modern .sky-input-box .sky-input-group-btn:last-child .sky-btn{border-top-right-radius:6px;border-bottom-right-radius:6px}.sky-theme-modern .sky-input-box .sky-input-group-icon{width:55px}.sky-theme-modern .sky-input-box .sky-input-group-icon .sky-icon{color:#686c73;font-size:24px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid:not(:last-child),.sky-theme-modern .sky-input-box .sky-input-group-btn:focus-within:not(:last-child){z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control+.sky-input-group-btn .sky-btn{margin-left:-2px}.sky-theme-modern .sky-input-box .sky-input-group-btn+.sky-input-group-btn .sky-btn{margin-left:-1px}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;color:#686c73;flex-wrap:nowrap;margin-bottom:0;padding:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper{display:flex;padding:0 15px;width:100%}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-bottom:0;position:relative;z-index:2}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{z-index:4}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label{padding:6px 0 1px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-label,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-character-count-label{font-size:13px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help{margin:3px 0 -3px 5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper .sky-control-help:not(:last-child){margin-right:5px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper sky-character-counter-indicator{margin-left:auto;padding:3px 0 0}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{margin-top:-23px;padding-top:26px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control{background-color:transparent;border:none;border-radius:6px;font-size:16px;height:auto;line-height:20px;padding-right:15px;padding-bottom:9px;padding-left:15px;position:relative}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill{box-shadow:none!important;clip-path:inset(2px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:autofill:hover,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-webkit-autofill:hover{clip-path:inset(1px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:focus,.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control.ng-invalid{box-shadow:none;outline:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-webkit-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control::-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-controlinput:-moz-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-form-control:-ms-input-placeholder{font-size:16px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:hover+.sky-form-control:-webkit-autofill{clip-path:inset(1px round 6px)!important}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn{background-color:transparent;border-radius:6px;transition-property:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-btn-inset .sky-btn:not(:active):not(:focus):not(:hover){box-shadow:none}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control{margin-top:0}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+.sky-form-control:not(textarea),.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* .sky-form-control:not(textarea){padding-top:10px}.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+textarea.sky-form-control,.sky-theme-modern .sky-input-box .sky-form-group .sky-input-box-label-wrapper:empty+* textarea.sky-form-control{border-top:10px solid transparent}@-moz-document url-prefix(){.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{padding-left:10px}}.sky-theme-modern .sky-input-box .sky-form-group select.sky-form-control{background-position-x:calc(100% - 10px);z-index:3}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control{margin-top:-26px;padding-top:0;resize:vertical;border-top:29px solid transparent}.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:autofill,.sky-theme-modern .sky-input-box .sky-form-group textarea.sky-form-control:-webkit-autofill{border-top:29px solid transparent!important}.sky-theme-modern .sky-input-box .sky-input-box-icon-inset-left-wrapper .sky-input-box-icon-inset-left{padding:0 0 0 15px;width:initial}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:hover .sky-form-group{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #d2d2d2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8;z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:active,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus{border:none;box-shadow:inset 0 0 0 2px #1870b8;color:#212327;z-index:2}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-group-btn .sky-btn:focus:not(:active){outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control:active .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-invalid:active .sky-form-group{color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active),.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid{z-index:1}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active) .sky-form-group,.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-input-box-group-form-control-focus:not(:active).sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d;color:#1870b8}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box:not(.sky-input-box-disabled) .sky-form-group .sky-control-label{transition:border-color .15s,box-shadow .15s,color .15s}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-control,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-control-label,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn{cursor:not-allowed}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-wrapper,.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-box-icon-inset-left-wrapper{background-color:transparent}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-form-group{background-color:#ededee}.sky-theme-modern .sky-input-box.sky-input-box-disabled .sky-input-group-btn .sky-btn{background-color:#ededee;border:none;box-shadow:inset 0 0 0 1px #d2d2d2;opacity:1}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group{background-color:transparent;border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-form-control,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-form-group .sky-input-group-btn .sky-btn{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus .sky-form-group,.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-focus.sky-input-box-group-form-control-invalid .sky-form-group{color:#1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-box-group-form-control-invalid .sky-form-group{border:none;box-shadow:inset 0 0 0 2px var(--sky-highlight-color-danger);color:#d93a3d}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn{border:none;box-shadow:inset 0 0 0 1px #686c73;color:#c0c2c5}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn.sky-btn-default{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-input-box .sky-input-group-btn .sky-btn:focus{border-color:#1870b8;color:#fbfcfe}\n"] }]
         }], propDecorators: { hasErrors: [{
                 type: Input
             }], disabled: [{
@@ -2912,8 +2878,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
             }] } });
 
 class SkyInputBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxModule, declarations: [SkyInputBoxComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxModule, declarations: [SkyInputBoxComponent], imports: [CommonModule,
             SkyCharacterCounterModule,
             SkyFormErrorsModule,
             SkyFormErrorModule,
@@ -2925,7 +2891,7 @@ class SkyInputBoxModule {
             SkyInputBoxComponent,
             SkyInputBoxControlDirective,
             SkyFormErrorModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxModule, imports: [CommonModule,
             SkyCharacterCounterModule,
             SkyFormErrorsModule,
             SkyFormErrorModule,
@@ -2933,7 +2899,7 @@ class SkyInputBoxModule {
             SkyHelpInlineModule,
             SkyThemeModule, SkyFormErrorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyInputBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyInputBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyInputBoxComponent],
@@ -2997,10 +2963,10 @@ class SkyRadioGroupIdService {
     #emitRadioIds() {
         this.#radioIds$.next(Array.from(this.#radioIds.values()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioGroupIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioGroupIdService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyRadioGroupIdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyRadioGroupIdService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioGroupIdService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyRadioGroupIdService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3301,17 +3267,12 @@ class SkyRadioComponent {
     #onChangeCallback;
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     #onTouchedCallback;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.2", type: SkyRadioComponent, selector: "sky-radio", inputs: { checked: "checked", disabled: ["disabled", "disabled", booleanAttribute], id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", icon: "icon", radioType: "radioType", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", helpKey: "helpKey" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], hostDirectives: [{ directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], ngImport: i0, template: "<span class=\"sky-radio-outer-wrapper\">\n  <label\n    class=\"sky-radio-wrapper sky-switch\"\n    [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n  >\n    <input\n      class=\"sky-radio-input sky-switch-input\"\n      type=\"radio\"\n      [attr.aria-label]=\"labelText || label\"\n      [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n      [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled || radioGroupDisabled\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [tabIndex]=\"tabindex\"\n      [value]=\"value\"\n      (blur)=\"onInputFocusChange()\"\n      (change)=\"onInputChange($event)\"\n    />\n    <span\n      class=\"sky-switch-control\"\n      [ngClass]=\"{\n        'sky-switch-control-icon': icon,\n        'sky-rounded-corners': icon,\n        'sky-rounded-circle': !icon,\n        'sky-switch-control-info': icon && radioType === 'info',\n        'sky-switch-control-success': icon && radioType === 'success',\n        'sky-switch-control-warning': icon && radioType === 'warning',\n        'sky-switch-control-danger': icon && radioType === 'danger'\n      }\"\n    >\n      <sky-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\" />\n    </span>\n    <ng-container *ngIf=\"labelText; else labelElement\">\n      <span *ngIf=\"!labelHidden\" class=\"sky-switch-label\">{{ labelText }}</span>\n    </ng-container>\n    <ng-template #labelElement>\n      <ng-content select=\"sky-radio-label\" />\n    </ng-template>\n  </label>\n  <sky-help-inline\n    *ngIf=\"(helpPopoverContent || helpKey) && labelText\"\n    class=\"sky-radio-help-inline\"\n    [helpKey]=\"helpKey\"\n    [labelText]=\"labelText\"\n    [popoverTitle]=\"helpPopoverTitle\"\n    [popoverContent]=\"helpPopoverContent\"\n  />\n</span>\n<div skyId #hintTextEl=\"skyId\">\n  <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-radio-hint-text\">\n    {{ hintText }}\n  </div>\n</div>\n", styles: [":host{display:inline-block}.sky-radio-outer-wrapper,.sky-radio-help-inline{display:inline-flex}.sky-switch-label:not(.sky-theme-modern *){margin-right:var(--sky-margin-inline-xs)}:is(.sky-theme-modern .sky-switch-label){margin-right:var(--sky-margin-inline-xs)}.sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000;border-radius:50%}.sky-radio-hint-text{margin:var(--sky-margin-stacked-xs) 0 0 calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i6.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: SkyRadioComponent, selector: "sky-radio", inputs: { checked: "checked", disabled: ["disabled", "disabled", booleanAttribute], id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", icon: "icon", radioType: "radioType", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], hintText: "hintText", helpKey: "helpKey" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<span class=\"sky-radio-outer-wrapper\">\n  <label\n    class=\"sky-radio-wrapper sky-switch\"\n    [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n  >\n    <input\n      class=\"sky-radio-input sky-switch-input\"\n      type=\"radio\"\n      [attr.aria-label]=\"labelText || label\"\n      [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n      [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled || radioGroupDisabled\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [tabIndex]=\"tabindex\"\n      [value]=\"value\"\n      (blur)=\"onInputFocusChange()\"\n      (change)=\"onInputChange($event)\"\n    />\n    <span\n      class=\"sky-switch-control\"\n      [ngClass]=\"{\n        'sky-switch-control-icon': icon,\n        'sky-rounded-corners': icon,\n        'sky-rounded-circle': !icon,\n        'sky-switch-control-info': icon && radioType === 'info',\n        'sky-switch-control-success': icon && radioType === 'success',\n        'sky-switch-control-warning': icon && radioType === 'warning',\n        'sky-switch-control-danger': icon && radioType === 'danger'\n      }\"\n    >\n      @if (icon) {\n        <sky-icon [fixedWidth]=\"true\" [icon]=\"icon\" />\n      }\n    </span>\n    @if (labelText) {\n      @if (!labelHidden) {\n        <span class=\"sky-switch-label\">{{ labelText }}</span>\n      }\n    } @else {\n      <ng-content select=\"sky-radio-label\" />\n    }\n  </label>\n  @if ((helpPopoverContent || helpKey) && labelText) {\n    <sky-help-inline\n      class=\"sky-radio-help-inline\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  }\n</span>\n<div #hintTextEl=\"skyId\" skyId>\n  @if (hintText) {\n    <div class=\"sky-font-deemphasized sky-radio-hint-text\">\n      {{ hintText }}\n    </div>\n  }\n</div>\n", styles: [":host:has(.sky-switch-control-icon){display:inline-block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)){display:block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)):not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}.sky-radio-outer-wrapper{display:flex}.sky-radio-help-inline{display:inline-flex}.sky-switch-label:not(.sky-theme-modern *){margin-right:var(--sky-margin-inline-xs)}:is(.sky-theme-modern .sky-switch-label){margin-right:var(--sky-margin-inline-xs)}.sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000;border-radius:50%}.sky-radio-hint-text{margin:var(--sky-margin-stacked-xs) 0 0 calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}:host-context(.sky-theme-modern) .sky-switch{display:flex}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-radio', hostDirectives: [
-                        {
-                            directive: SkyFormFieldLabelTextRequiredDirective,
-                            inputs: ['labelText'],
-                        },
-                    ], providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"sky-radio-outer-wrapper\">\n  <label\n    class=\"sky-radio-wrapper sky-switch\"\n    [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n  >\n    <input\n      class=\"sky-radio-input sky-switch-input\"\n      type=\"radio\"\n      [attr.aria-label]=\"labelText || label\"\n      [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n      [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled || radioGroupDisabled\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [tabIndex]=\"tabindex\"\n      [value]=\"value\"\n      (blur)=\"onInputFocusChange()\"\n      (change)=\"onInputChange($event)\"\n    />\n    <span\n      class=\"sky-switch-control\"\n      [ngClass]=\"{\n        'sky-switch-control-icon': icon,\n        'sky-rounded-corners': icon,\n        'sky-rounded-circle': !icon,\n        'sky-switch-control-info': icon && radioType === 'info',\n        'sky-switch-control-success': icon && radioType === 'success',\n        'sky-switch-control-warning': icon && radioType === 'warning',\n        'sky-switch-control-danger': icon && radioType === 'danger'\n      }\"\n    >\n      <sky-icon *ngIf=\"icon\" [fixedWidth]=\"true\" [icon]=\"icon\" />\n    </span>\n    <ng-container *ngIf=\"labelText; else labelElement\">\n      <span *ngIf=\"!labelHidden\" class=\"sky-switch-label\">{{ labelText }}</span>\n    </ng-container>\n    <ng-template #labelElement>\n      <ng-content select=\"sky-radio-label\" />\n    </ng-template>\n  </label>\n  <sky-help-inline\n    *ngIf=\"(helpPopoverContent || helpKey) && labelText\"\n    class=\"sky-radio-help-inline\"\n    [helpKey]=\"helpKey\"\n    [labelText]=\"labelText\"\n    [popoverTitle]=\"helpPopoverTitle\"\n    [popoverContent]=\"helpPopoverContent\"\n  />\n</span>\n<div skyId #hintTextEl=\"skyId\">\n  <div *ngIf=\"hintText\" class=\"sky-font-deemphasized sky-radio-hint-text\">\n    {{ hintText }}\n  </div>\n</div>\n", styles: [":host{display:inline-block}.sky-radio-outer-wrapper,.sky-radio-help-inline{display:inline-flex}.sky-switch-label:not(.sky-theme-modern *){margin-right:var(--sky-margin-inline-xs)}:is(.sky-theme-modern .sky-switch-label){margin-right:var(--sky-margin-inline-xs)}.sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000;border-radius:50%}.sky-radio-hint-text{margin:var(--sky-margin-stacked-xs) 0 0 calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}\n"] }]
+            args: [{ selector: 'sky-radio', providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"sky-radio-outer-wrapper\">\n  <label\n    class=\"sky-radio-wrapper sky-switch\"\n    [ngClass]=\"{ 'sky-switch-disabled': disabled || radioGroupDisabled }\"\n  >\n    <input\n      class=\"sky-radio-input sky-switch-input\"\n      type=\"radio\"\n      [attr.aria-label]=\"labelText || label\"\n      [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n      [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n      [checked]=\"checked\"\n      [disabled]=\"disabled || radioGroupDisabled\"\n      [id]=\"inputId\"\n      [name]=\"name\"\n      [tabIndex]=\"tabindex\"\n      [value]=\"value\"\n      (blur)=\"onInputFocusChange()\"\n      (change)=\"onInputChange($event)\"\n    />\n    <span\n      class=\"sky-switch-control\"\n      [ngClass]=\"{\n        'sky-switch-control-icon': icon,\n        'sky-rounded-corners': icon,\n        'sky-rounded-circle': !icon,\n        'sky-switch-control-info': icon && radioType === 'info',\n        'sky-switch-control-success': icon && radioType === 'success',\n        'sky-switch-control-warning': icon && radioType === 'warning',\n        'sky-switch-control-danger': icon && radioType === 'danger'\n      }\"\n    >\n      @if (icon) {\n        <sky-icon [fixedWidth]=\"true\" [icon]=\"icon\" />\n      }\n    </span>\n    @if (labelText) {\n      @if (!labelHidden) {\n        <span class=\"sky-switch-label\">{{ labelText }}</span>\n      }\n    } @else {\n      <ng-content select=\"sky-radio-label\" />\n    }\n  </label>\n  @if ((helpPopoverContent || helpKey) && labelText) {\n    <sky-help-inline\n      class=\"sky-radio-help-inline\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"labelText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  }\n</span>\n<div #hintTextEl=\"skyId\" skyId>\n  @if (hintText) {\n    <div class=\"sky-font-deemphasized sky-radio-hint-text\">\n      {{ hintText }}\n    </div>\n  }\n</div>\n", styles: [":host:has(.sky-switch-control-icon){display:inline-block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)){display:block}:host-context(sky-radio-group):not(:has(li)) :host:not(:has(.sky-switch-control-icon)):not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}.sky-radio-outer-wrapper{display:flex}.sky-radio-help-inline{display:inline-flex}.sky-switch-label:not(.sky-theme-modern *){margin-right:var(--sky-margin-inline-xs)}:is(.sky-theme-modern .sky-switch-label){margin-right:var(--sky-margin-inline-xs)}.sky-switch-control:not(.sky-switch-control-icon) sky-icon{font-size:70%}.sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{content:\"\";display:inline-block;width:10px;height:10px;background:#000;border-radius:50%}.sky-radio-hint-text{margin:var(--sky-margin-stacked-xs) 0 0 calc(var(--sky-switch-size) + var(--sky-switch-margin))}:host-context(.sky-theme-modern) .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}:host-context(.sky-theme-modern) .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}:host-context(.sky-theme-modern) .sky-switch{display:flex}.sky-theme-modern .sky-switch-input:checked+.sky-switch-control:not(.sky-switch-control-icon):after{background:#1870b8}.sky-theme-modern .sky-radio-input:disabled+.sky-switch-control .sky-radio-icon-modern-checked{background-color:#212327}.sky-theme-modern .sky-switch{display:flex}\n"] }]
         }], ctorParameters: () => [], propDecorators: { checked: [{
                 type: Input
             }], disabled: [{
@@ -3661,24 +3622,19 @@ class SkyRadioGroupComponent {
         this.stackedLg = !this.headingLevel && this.stacked;
         this.stackedXL = !!this.headingLevel && this.stacked;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyRadioGroupIdService }, { token: i3$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.2", type: SkyRadioGroupComponent, selector: "sky-radio-group", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", disabled: ["disabled", "disabled", booleanAttribute], headingLevel: ["headingLevel", "headingLevel", numberAttribute], headingStyle: ["headingStyle", "headingStyle", numberAttribute4], name: "name", required: ["required", "required", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], value: "value", tabIndex: "tabIndex", headingText: "headingText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], hintText: "hintText", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stackedLg", "class.sky-margin-stacked-xl": "this.stackedXL" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyRadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyRadioGroupIdService }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: SkyRadioGroupComponent, selector: "sky-radio-group", inputs: { ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", disabled: ["disabled", "disabled", booleanAttribute], headingLevel: ["headingLevel", "headingLevel", numberAttribute], headingStyle: ["headingStyle", "headingStyle", numberAttribute4], name: "name", required: ["required", "required", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], value: "value", tabIndex: "tabIndex", headingText: "headingText", headingHidden: ["headingHidden", "headingHidden", booleanAttribute], hintText: "hintText", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", helpKey: "helpKey" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stackedLg", "class.sky-margin-stacked-xl": "this.stackedXL" } }, providers: [
             SkyRadioGroupIdService,
             { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-        ], queries: [{ propertyName: "radios", predicate: SkyRadioComponent, descendants: true }], hostDirectives: [{ directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "headingText"] }], ngImport: i0, template: "<fieldset\n  class=\"sky-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"headingText ? undefined : ariaLabel\"\n  [attr.aria-labelledby]=\"headingText ? undefined : ariaLabelledBy\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-owns]=\"ariaOwns\"\n  [attr.aria-required]=\"isRequired ? true : null\"\n  [attr.required]=\"isRequired ? '' : null\"\n  [attr.aria-invalid]=\"!!ngControl?.errors\"\n  [attr.aria-errormessage]=\"\n    headingText && ngControl?.errors ? errorId : undefined\n  \"\n>\n  <span class=\"sky-radio-group-label-wrapper\">\n    <legend\n      *ngIf=\"headingText\"\n      class=\"sky-control-label\"\n      [ngClass]=\"{\n        'sky-screen-reader-only': headingHidden,\n        'sky-margin-stacked-sm': !hintText,\n        'sky-control-label-required': isRequired,\n        'sky-margin-inline-xs': helpPopoverContent\n      }\"\n    >\n      <span *ngIf=\"!headingLevel\" [class]=\"headingClass\">\n        {{ headingText }}\n      </span>\n      <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h3>\n      <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h4>\n      <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h5>\n    </legend>\n    <sky-help-inline\n      *ngIf=\"(helpPopoverContent || helpKey) && headingText\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"headingText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </span>\n\n  <div skyId #hintTextEl=\"skyId\">\n    <div\n      *ngIf=\"hintText\"\n      class=\"sky-font-deemphasized sky-radio-group-hint-text\"\n    >\n      {{ hintText }}\n    </div>\n  </div>\n  <ng-content />\n</fieldset>\n<sky-form-errors\n  *ngIf=\"headingText && ngControl?.errors\"\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"'skyux_radio_group_required_label_text' | skyLibResources\"\n  [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg,:host.sky-margin-stacked-xl{display:block}.sky-radio-group-hint-text{margin-bottom:var(--sky-margin-stacked-lg)}.sky-radio-group-label-wrapper{display:flex}h3,h4,h5{margin:0;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+        ], queries: [{ propertyName: "radios", predicate: SkyRadioComponent, descendants: true }], ngImport: i0, template: "<fieldset\n  class=\"sky-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"headingText ? undefined : ariaLabel\"\n  [attr.aria-labelledby]=\"headingText ? undefined : ariaLabelledBy\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-owns]=\"ariaOwns\"\n  [attr.aria-required]=\"isRequired ? true : null\"\n  [attr.required]=\"isRequired ? '' : null\"\n  [attr.aria-invalid]=\"!!ngControl?.errors\"\n  [attr.aria-errormessage]=\"\n    headingText && ngControl?.errors ? errorId : undefined\n  \"\n>\n  <span class=\"sky-radio-group-label-wrapper\">\n    @if (headingText) {\n      <legend\n        class=\"sky-control-label\"\n        [ngClass]=\"{\n          'sky-screen-reader-only': headingHidden,\n          'sky-margin-stacked-sm': !hintText,\n          'sky-control-label-required': isRequired,\n          'sky-margin-inline-xs': helpPopoverContent\n        }\"\n      >\n        @if (headingLevel === 3) {\n          <h3 [class]=\"headingClass\">\n            {{ headingText }}\n          </h3>\n        } @else if (headingLevel === 4) {\n          <h4 [class]=\"headingClass\">\n            {{ headingText }}\n          </h4>\n        } @else if (headingLevel === 5) {\n          <h5 [class]=\"headingClass\">\n            {{ headingText }}\n          </h5>\n        } @else {\n          <span [class]=\"headingClass\">\n            {{ headingText }}\n          </span>\n        }\n      </legend>\n      @if (helpPopoverContent || helpKey) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"headingText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n    }\n  </span>\n\n  <div #hintTextEl=\"skyId\" skyId>\n    @if (hintText) {\n      <div class=\"sky-font-deemphasized sky-radio-group-hint-text\">\n        {{ hintText }}\n      </div>\n    }\n  </div>\n  <ng-content />\n</fieldset>\n<sky-form-errors\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"headingText\"\n  [touched]=\"ngControl?.touched\"\n  [dirty]=\"ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg,:host.sky-margin-stacked-xl{display:block}.sky-radio-group-hint-text{margin-bottom:var(--sky-margin-stacked-lg)}.sky-radio-group-label-wrapper{display:flex}h3,h4,h5{margin:0;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "touched", "dirty"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyRadioGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-radio-group', hostDirectives: [
-                        {
-                            directive: SkyFormFieldLabelTextRequiredDirective,
-                            inputs: ['labelText: headingText'],
-                        },
-                    ], providers: [
+            args: [{ selector: 'sky-radio-group', providers: [
                         SkyRadioGroupIdService,
                         { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-                    ], template: "<fieldset\n  class=\"sky-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"headingText ? undefined : ariaLabel\"\n  [attr.aria-labelledby]=\"headingText ? undefined : ariaLabelledBy\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-owns]=\"ariaOwns\"\n  [attr.aria-required]=\"isRequired ? true : null\"\n  [attr.required]=\"isRequired ? '' : null\"\n  [attr.aria-invalid]=\"!!ngControl?.errors\"\n  [attr.aria-errormessage]=\"\n    headingText && ngControl?.errors ? errorId : undefined\n  \"\n>\n  <span class=\"sky-radio-group-label-wrapper\">\n    <legend\n      *ngIf=\"headingText\"\n      class=\"sky-control-label\"\n      [ngClass]=\"{\n        'sky-screen-reader-only': headingHidden,\n        'sky-margin-stacked-sm': !hintText,\n        'sky-control-label-required': isRequired,\n        'sky-margin-inline-xs': helpPopoverContent\n      }\"\n    >\n      <span *ngIf=\"!headingLevel\" [class]=\"headingClass\">\n        {{ headingText }}\n      </span>\n      <h3 *ngIf=\"headingLevel === 3\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h3>\n      <h4 *ngIf=\"headingLevel === 4\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h4>\n      <h5 *ngIf=\"headingLevel === 5\" [class]=\"headingClass\">\n        {{ headingText }}\n      </h5>\n    </legend>\n    <sky-help-inline\n      *ngIf=\"(helpPopoverContent || helpKey) && headingText\"\n      [helpKey]=\"helpKey\"\n      [labelText]=\"headingText\"\n      [popoverTitle]=\"helpPopoverTitle\"\n      [popoverContent]=\"helpPopoverContent\"\n    />\n  </span>\n\n  <div skyId #hintTextEl=\"skyId\">\n    <div\n      *ngIf=\"hintText\"\n      class=\"sky-font-deemphasized sky-radio-group-hint-text\"\n    >\n      {{ hintText }}\n    </div>\n  </div>\n  <ng-content />\n</fieldset>\n<sky-form-errors\n  *ngIf=\"headingText && ngControl?.errors\"\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"'skyux_radio_group_required_label_text' | skyLibResources\"\n  [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg,:host.sky-margin-stacked-xl{display:block}.sky-radio-group-hint-text{margin-bottom:var(--sky-margin-stacked-lg)}.sky-radio-group-label-wrapper{display:flex}h3,h4,h5{margin:0;display:inline-block}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyRadioGroupIdService }, { type: i3$1.NgControl, decorators: [{
+                    ], template: "<fieldset\n  class=\"sky-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"headingText ? undefined : ariaLabel\"\n  [attr.aria-labelledby]=\"headingText ? undefined : ariaLabelledBy\"\n  [attr.aria-describedby]=\"hintText ? hintTextEl.id : undefined\"\n  [attr.aria-owns]=\"ariaOwns\"\n  [attr.aria-required]=\"isRequired ? true : null\"\n  [attr.required]=\"isRequired ? '' : null\"\n  [attr.aria-invalid]=\"!!ngControl?.errors\"\n  [attr.aria-errormessage]=\"\n    headingText && ngControl?.errors ? errorId : undefined\n  \"\n>\n  <span class=\"sky-radio-group-label-wrapper\">\n    @if (headingText) {\n      <legend\n        class=\"sky-control-label\"\n        [ngClass]=\"{\n          'sky-screen-reader-only': headingHidden,\n          'sky-margin-stacked-sm': !hintText,\n          'sky-control-label-required': isRequired,\n          'sky-margin-inline-xs': helpPopoverContent\n        }\"\n      >\n        @if (headingLevel === 3) {\n          <h3 [class]=\"headingClass\">\n            {{ headingText }}\n          </h3>\n        } @else if (headingLevel === 4) {\n          <h4 [class]=\"headingClass\">\n            {{ headingText }}\n          </h4>\n        } @else if (headingLevel === 5) {\n          <h5 [class]=\"headingClass\">\n            {{ headingText }}\n          </h5>\n        } @else {\n          <span [class]=\"headingClass\">\n            {{ headingText }}\n          </span>\n        }\n      </legend>\n      @if (helpPopoverContent || helpKey) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"headingText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n    }\n  </span>\n\n  <div #hintTextEl=\"skyId\" skyId>\n    @if (hintText) {\n      <div class=\"sky-font-deemphasized sky-radio-group-hint-text\">\n        {{ hintText }}\n      </div>\n    }\n  </div>\n  <ng-content />\n</fieldset>\n<sky-form-errors\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"headingText\"\n  [touched]=\"ngControl?.touched\"\n  [dirty]=\"ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host.sky-margin-stacked-lg,:host.sky-margin-stacked-xl{display:block}.sky-radio-group-hint-text{margin-bottom:var(--sky-margin-stacked-lg)}.sky-radio-group-label-wrapper{display:flex}h3,h4,h5{margin:0;display:inline-block}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyRadioGroupIdService }, { type: i2.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
@@ -3750,10 +3706,10 @@ class SkyRadioLabelComponent {
             replacementRecommendation: 'To add a label to radio button, use the `labelText` input on the radio button component instead.',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyRadioLabelComponent, selector: "sky-radio-label", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<span class=\"sky-switch-label\"\n  ><span skyTrim><ng-content /></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\" /></span\n></span>\n", dependencies: [{ kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyRadioLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyRadioLabelComponent, selector: "sky-radio-label", host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<span class=\"sky-switch-label\"\n  ><span skyTrim><ng-content /></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\" /></span\n></span>\n", dependencies: [{ kind: "directive", type: i1$3.λ4, selector: "[skyTrim]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyRadioLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-radio-label', template: "<span class=\"sky-switch-label\"\n  ><span skyTrim><ng-content /></span\n  ><span class=\"sky-control-help-container\"\n    ><ng-content select=\".sky-control-help\" /></span\n></span>\n" }]
         }], ctorParameters: () => [], propDecorators: { onClick: [{
@@ -3762,8 +3718,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
             }] } });
 
 class SkyRadioModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioModule, declarations: [SkyRadioComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkyRadioModule, declarations: [SkyRadioComponent,
             SkyRadioGroupComponent,
             SkyRadioLabelComponent], imports: [CommonModule,
             FormsModule,
@@ -3777,7 +3733,7 @@ class SkyRadioModule {
             SkyRadioComponent,
             SkyRadioGroupComponent,
             SkyRadioLabelComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyRadioModule, imports: [CommonModule,
             FormsModule,
             SkyFormErrorModule,
             SkyFormErrorsModule,
@@ -3787,7 +3743,7 @@ class SkyRadioModule {
             SkyFormsResourcesModule,
             SkyTrimModule, SkyFormErrorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRadioModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyRadioModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -3833,10 +3789,10 @@ class SkyRequiredStateDirective {
             !!this.#ngControl?.control?.hasValidator(Validators.required));
     }
     #ngControl;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRequiredStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.1.2", type: SkyRequiredStateDirective, isStandalone: true, inputs: { required: ["required", "required", booleanAttribute] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyRequiredStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.3", type: SkyRequiredStateDirective, isStandalone: true, inputs: { required: ["required", "required", booleanAttribute] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyRequiredStateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyRequiredStateDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -3963,21 +3919,21 @@ class SkySelectionBoxAdapterService {
         const el = element.nativeElement;
         el.tabIndex = tabIndex;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxAdapterService, deps: [{ token: i1$1.SkyCoreAdapterService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxAdapterService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkySelectionBoxAdapterService, deps: [{ token: i1$3.SkyCoreAdapterService }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkySelectionBoxAdapterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxAdapterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkySelectionBoxAdapterService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.SkyCoreAdapterService }, { type: i0.RendererFactory2 }] });
+        }], ctorParameters: () => [{ type: i1$3.SkyCoreAdapterService }, { type: i0.RendererFactory2 }] });
 
 /**
  * Specifies the description to display in a selection box.
  */
 class SkySelectionBoxDescriptionComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkySelectionBoxDescriptionComponent, selector: "sky-selection-box-description", ngImport: i0, template: "<ng-content />\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkySelectionBoxDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkySelectionBoxDescriptionComponent, selector: "sky-selection-box-description", ngImport: i0, template: "<ng-content />\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxDescriptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkySelectionBoxDescriptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-selection-box-description', template: "<ng-content />\n" }]
         }] });
@@ -4085,10 +4041,10 @@ class SkySelectionBoxComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkySelectionBoxAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkySelectionBoxComponent, selector: "sky-selection-box", inputs: { control: "control" }, viewQueries: [{ propertyName: "controlEl", first: true, predicate: ["control"], descendants: true, read: ElementRef }, { propertyName: "selectionBoxEl", first: true, predicate: ["selectionBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<label\n  class=\"sky-selection-box sky-rounded-corners sky-btn sky-btn-default\"\n  [attr.disabled]=\"disabled ? true : null\"\n  [ngClass]=\"{\n    'sky-selection-box-selected': checked,\n    'sky-selection-box-disabled': disabled\n  }\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  (keydown)=\"onKeydown($event)\"\n  #selectionBox\n>\n  <div\n    class=\"sky-selection-box-icon\"\n    [ngStyle]=\"{\n      display: !icon.innerHTML.trim() ? 'none' : ''\n    }\"\n    #icon\n  >\n    <ng-content select=\"sky-icon\" />\n  </div>\n\n  <div class=\"sky-selection-box-content\">\n    <div\n      class=\"sky-selection-box-header\"\n      [ngClass]=\"{\n        'sky-font-heading-2': icon.innerHTML.trim(),\n        'sky-font-heading-3': !icon.innerHTML.trim()\n      }\"\n    >\n      <ng-content select=\"sky-selection-box-header\" />\n    </div>\n    <div\n      class=\"sky-selection-box-description\"\n      [skyThemeClass]=\"{\n        'sky-font-deemphasized': 'modern',\n        'sky-deemphasized': 'default'\n      }\"\n    >\n      <ng-content select=\"sky-selection-box-description\" />\n    </div>\n  </div>\n\n  <div class=\"sky-selection-box-control\" #control>\n    <ng-content select=\"sky-radio\" />\n    <ng-content select=\"sky-checkbox\" />\n  </div>\n</label>\n", styles: [".sky-selection-box{display:flex;flex-flow:row nowrap;padding:15px;text-align:left}.sky-selection-box:hover{background:#fff;box-shadow:0 0 5px #0000004d,inset 0 0 0 1px #00b4f1}.sky-selection-box:hover .sky-switch-control{border:solid 1px #00b4f1}.sky-selection-box:focus .sky-switch-control{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-selection-box.sky-selection-box-selected{background:#f1eef6}.sky-selection-box.sky-selection-box-disabled{background:#eeeeef}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{color:#686c73}.sky-selection-box .sky-selection-box-icon{color:#0974a1;margin:0 10px 0 0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-selection-box .sky-selection-box-icon .sky-icon{font-size:24px!important}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:3px}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:5px}:host-context(.sky-theme-modern) .sky-selection-box{padding:30px}:host-context(.sky-theme-modern) .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-selected,:host-context(.sky-theme-modern) .sky-selection-box:focus.sky-selection-box-selected{background:var(--sky-background-color-item-selected);box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#ebfbff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-description{margin:3px 0 0}.sky-theme-modern .sky-selection-box{padding:30px}.sky-theme-modern .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}.sky-theme-modern .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-theme-modern .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-selection-box.sky-selection-box-selected,.sky-theme-modern .sky-selection-box:focus.sky-selection-box-selected{background:var(--sky-background-color-item-selected);box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}.sky-theme-modern .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}.sky-theme-modern .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#ebfbff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}.sky-theme-modern .sky-selection-box .sky-selection-box-description{margin:3px 0 0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkySelectionBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkySelectionBoxAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkySelectionBoxComponent, selector: "sky-selection-box", inputs: { control: "control" }, viewQueries: [{ propertyName: "controlEl", first: true, predicate: ["control"], descendants: true, read: ElementRef }, { propertyName: "selectionBoxEl", first: true, predicate: ["selectionBox"], descendants: true, read: ElementRef }], ngImport: i0, template: "<label\n  class=\"sky-selection-box sky-rounded-corners sky-btn sky-btn-default\"\n  [attr.disabled]=\"disabled ? true : null\"\n  [ngClass]=\"{\n    'sky-selection-box-selected': checked,\n    'sky-selection-box-disabled': disabled\n  }\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  (keydown)=\"onKeydown($event)\"\n  #selectionBox\n>\n  <div\n    class=\"sky-selection-box-icon\"\n    [ngStyle]=\"{\n      display: !icon.innerHTML.trim() ? 'none' : ''\n    }\"\n    #icon\n  >\n    <ng-content select=\"sky-icon\" />\n  </div>\n\n  <div class=\"sky-selection-box-content\">\n    <div\n      class=\"sky-selection-box-header\"\n      [ngClass]=\"{\n        'sky-font-heading-2': icon.innerHTML.trim(),\n        'sky-font-heading-3': !icon.innerHTML.trim()\n      }\"\n    >\n      <ng-content select=\"sky-selection-box-header\" />\n    </div>\n    <div\n      class=\"sky-selection-box-description\"\n      [skyThemeClass]=\"{\n        'sky-font-deemphasized': 'modern',\n        'sky-deemphasized': 'default'\n      }\"\n    >\n      <ng-content select=\"sky-selection-box-description\" />\n    </div>\n  </div>\n\n  <div class=\"sky-selection-box-control\" #control>\n    <ng-content select=\"sky-radio\" />\n    <ng-content select=\"sky-checkbox\" />\n  </div>\n</label>\n", styles: [".sky-selection-box{display:flex;flex-flow:row nowrap;padding:15px;text-align:left}.sky-selection-box:hover{background:#fff;box-shadow:0 0 5px #0000004d,inset 0 0 0 1px #00b4f1}.sky-selection-box:hover .sky-switch-control{border:solid 1px #00b4f1}.sky-selection-box:focus .sky-switch-control{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-selection-box.sky-selection-box-selected{background:#f1eef6}.sky-selection-box.sky-selection-box-disabled{background:#eeeeef}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{color:#686c73}.sky-selection-box .sky-selection-box-icon{color:#0974a1;margin:0 10px 0 0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-selection-box .sky-selection-box-icon .sky-icon{font-size:24px!important}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:3px}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:5px}:host-context(.sky-theme-modern) .sky-selection-box{padding:30px}:host-context(.sky-theme-modern) .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-selected,:host-context(.sky-theme-modern) .sky-selection-box:focus.sky-selection-box-selected{background:var(--sky-background-color-item-selected);box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#ebfbff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-description{margin:3px 0 0}.sky-theme-modern .sky-selection-box{padding:30px}.sky-theme-modern .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}.sky-theme-modern .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-theme-modern .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-selection-box.sky-selection-box-selected,.sky-theme-modern .sky-selection-box:focus.sky-selection-box-selected{background:var(--sky-background-color-item-selected);box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}.sky-theme-modern .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}.sky-theme-modern .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#ebfbff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}.sky-theme-modern .sky-selection-box .sky-selection-box-description{margin:3px 0 0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkySelectionBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-selection-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<label\n  class=\"sky-selection-box sky-rounded-corners sky-btn sky-btn-default\"\n  [attr.disabled]=\"disabled ? true : null\"\n  [ngClass]=\"{\n    'sky-selection-box-selected': checked,\n    'sky-selection-box-disabled': disabled\n  }\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  (keydown)=\"onKeydown($event)\"\n  #selectionBox\n>\n  <div\n    class=\"sky-selection-box-icon\"\n    [ngStyle]=\"{\n      display: !icon.innerHTML.trim() ? 'none' : ''\n    }\"\n    #icon\n  >\n    <ng-content select=\"sky-icon\" />\n  </div>\n\n  <div class=\"sky-selection-box-content\">\n    <div\n      class=\"sky-selection-box-header\"\n      [ngClass]=\"{\n        'sky-font-heading-2': icon.innerHTML.trim(),\n        'sky-font-heading-3': !icon.innerHTML.trim()\n      }\"\n    >\n      <ng-content select=\"sky-selection-box-header\" />\n    </div>\n    <div\n      class=\"sky-selection-box-description\"\n      [skyThemeClass]=\"{\n        'sky-font-deemphasized': 'modern',\n        'sky-deemphasized': 'default'\n      }\"\n    >\n      <ng-content select=\"sky-selection-box-description\" />\n    </div>\n  </div>\n\n  <div class=\"sky-selection-box-control\" #control>\n    <ng-content select=\"sky-radio\" />\n    <ng-content select=\"sky-checkbox\" />\n  </div>\n</label>\n", styles: [".sky-selection-box{display:flex;flex-flow:row nowrap;padding:15px;text-align:left}.sky-selection-box:hover{background:#fff;box-shadow:0 0 5px #0000004d,inset 0 0 0 1px #00b4f1}.sky-selection-box:hover .sky-switch-control{border:solid 1px #00b4f1}.sky-selection-box:focus .sky-switch-control{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px}.sky-selection-box.sky-selection-box-selected{background:#f1eef6}.sky-selection-box.sky-selection-box-disabled{background:#eeeeef}.sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{color:#686c73}.sky-selection-box .sky-selection-box-icon{color:#0974a1;margin:0 10px 0 0;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-selection-box .sky-selection-box-icon .sky-icon{font-size:24px!important}.sky-selection-box .sky-selection-box-content{flex:1 1 auto;margin:0 10px 0 0;white-space:initial}.sky-selection-box .sky-selection-box-header{padding-top:3px}.sky-selection-box .sky-selection-box-control{flex:0 0 auto;padding-top:5px}:host-context(.sky-theme-modern) .sky-selection-box{padding:30px}:host-context(.sky-theme-modern) .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}:host-context(.sky-theme-modern) .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-selected,:host-context(.sky-theme-modern) .sky-selection-box:focus.sky-selection-box-selected{background:var(--sky-background-color-item-selected);box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}:host-context(.sky-theme-modern) .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#ebfbff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}:host-context(.sky-theme-modern) .sky-selection-box .sky-selection-box-description{margin:3px 0 0}.sky-theme-modern .sky-selection-box{padding:30px}.sky-theme-modern .sky-selection-box:hover{box-shadow:0 1px 3px #0000004d,inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-selection-box:hover .sky-switch-control{border:solid 1px #1870B8}.sky-theme-modern .sky-selection-box:focus .sky-switch-input:not(:disabled):checked+.sky-switch-control{border:none}.sky-theme-modern .sky-selection-box:focus .sky-switch-control{outline:none;border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-selection-box.sky-selection-box-selected,.sky-theme-modern .sky-selection-box:focus.sky-selection-box-selected{background:var(--sky-background-color-item-selected);box-shadow:inset 0 0 0 2px #1870b8,0 1px 8px #0000004d,inset 6px 0 #0974a1}.sky-theme-modern .sky-selection-box.sky-selection-box-disabled .sky-selection-box-icon{background:#d2d2d2;color:#686c73}.sky-theme-modern .sky-selection-box .sky-selection-box-icon{color:#0974a1;background:#ebfbff;margin:0 15px 0 0;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.sky-theme-modern .sky-selection-box .sky-selection-box-content{margin:0 30px 0 0}.sky-theme-modern .sky-selection-box .sky-selection-box-description{margin:3px 0 0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkySelectionBoxAdapterService }], propDecorators: { control: [{
@@ -4213,13 +4169,13 @@ class SkySelectionBoxGridComponent {
             this.#coreAdapterService.syncMaxHeight(this.containerElementRef, SKY_SELECTION_BOX_CLASS_NAME);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxGridComponent, deps: [{ token: i1$1.SkyCoreAdapterService }, { token: SkySelectionBoxAdapterService }, { token: i0.ElementRef }, { token: i1$1.SkyMutationObserverService }, { token: i0.NgZone }, { token: i4.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkySelectionBoxGridComponent, selector: "sky-selection-box-grid", inputs: { alignItems: "alignItems" }, host: { listeners: { "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "selectionBoxes", predicate: SkySelectionBoxComponent, read: SkySelectionBoxComponent }], viewQueries: [{ propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n  class=\"sky-selection-box-grid\"\n  [ngClass]=\"'sky-selection-box-grid-align-' + alignItems\"\n  #container\n>\n  <ng-content select=\"sky-selection-box\" />\n</div>\n", styles: [":host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 7.5px;margin:0 auto var(--sky-compat-selection-box-grid-margin-bottom, -15px) auto}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 7.5px 15px;height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkySelectionBoxGridComponent, deps: [{ token: i1$3.SkyCoreAdapterService }, { token: SkySelectionBoxAdapterService }, { token: i0.ElementRef }, { token: i1$3.SkyMutationObserverService }, { token: i0.NgZone }, { token: i4$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkySelectionBoxGridComponent, selector: "sky-selection-box-grid", inputs: { alignItems: "alignItems" }, host: { listeners: { "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "selectionBoxes", predicate: SkySelectionBoxComponent, read: SkySelectionBoxComponent }], viewQueries: [{ propertyName: "containerElementRef", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n  class=\"sky-selection-box-grid\"\n  [ngClass]=\"'sky-selection-box-grid-align-' + alignItems\"\n  #container\n>\n  <ng-content select=\"sky-selection-box\" />\n</div>\n", styles: [":host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 7.5px;margin:0 auto -15px}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 7.5px 15px;height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkySelectionBoxGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-selection-box-grid', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-selection-box-grid\"\n  [ngClass]=\"'sky-selection-box-grid-align-' + alignItems\"\n  #container\n>\n  <ng-content select=\"sky-selection-box\" />\n</div>\n", styles: [":host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 7.5px;margin:0 auto var(--sky-compat-selection-box-grid-margin-bottom, -15px) auto}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 7.5px 15px;height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.SkyCoreAdapterService }, { type: SkySelectionBoxAdapterService }, { type: i0.ElementRef }, { type: i1$1.SkyMutationObserverService }, { type: i0.NgZone }, { type: i4.SkyThemeService, decorators: [{
+            args: [{ selector: 'sky-selection-box-grid', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"sky-selection-box-grid\"\n  [ngClass]=\"'sky-selection-box-grid-align-' + alignItems\"\n  #container\n>\n  <ng-content select=\"sky-selection-box\" />\n</div>\n", styles: [":host{display:block}.sky-selection-box-grid{display:flex;flex-flow:row wrap;padding:0 7.5px;margin:0 auto -15px}.sky-selection-box-grid.sky-selection-box-grid-align-center{justify-content:center}.sky-selection-box-grid.sky-selection-box-grid-align-left{justify-content:flex-start}.sky-selection-box-grid>sky-selection-box{margin:0 7.5px 15px;height:100%}.sky-selection-box-grid.sky-selection-box-container-xs{max-width:374px}.sky-selection-box-grid.sky-selection-box-container-xs>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-xs .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-sm{max-width:733px}.sky-selection-box-grid.sky-selection-box-container-sm>sky-selection-box{flex:0 1 344px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box{padding:15px}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-icon{display:none}.sky-selection-box-grid.sky-selection-box-container-sm .sky-selection-box .sky-selection-box-header{font-size:20px;font-weight:400}.sky-selection-box-grid.sky-selection-box-container-md{max-width:937px}.sky-selection-box-grid.sky-selection-box-container-md>sky-selection-box{flex:0 1 446px}.sky-selection-box-grid.sky-selection-box-container-lg{max-width:1398px}.sky-selection-box-grid.sky-selection-box-container-lg>sky-selection-box{flex:0 1 446px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.SkyCoreAdapterService }, { type: SkySelectionBoxAdapterService }, { type: i0.ElementRef }, { type: i1$3.SkyMutationObserverService }, { type: i0.NgZone }, { type: i4$1.SkyThemeService, decorators: [{
                     type: Optional
                 }] }], propDecorators: { alignItems: [{
                 type: Input
@@ -4243,26 +4199,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
  * Specifies the header to display in a selection box.
  */
 class SkySelectionBoxHeaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkySelectionBoxHeaderComponent, selector: "sky-selection-box-header", ngImport: i0, template: "<ng-content />\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkySelectionBoxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkySelectionBoxHeaderComponent, selector: "sky-selection-box-header", ngImport: i0, template: "<ng-content />\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkySelectionBoxHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-selection-box-header', template: "<ng-content />\n" }]
         }] });
 
 class SkySelectionBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxModule, declarations: [SkySelectionBoxGridComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkySelectionBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkySelectionBoxModule, declarations: [SkySelectionBoxGridComponent,
             SkySelectionBoxComponent,
             SkySelectionBoxDescriptionComponent,
             SkySelectionBoxHeaderComponent], imports: [CommonModule, SkyThemeModule], exports: [SkySelectionBoxGridComponent,
             SkySelectionBoxComponent,
             SkySelectionBoxDescriptionComponent,
             SkySelectionBoxHeaderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxModule, providers: [SkySelectionBoxAdapterService], imports: [CommonModule, SkyThemeModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkySelectionBoxModule, providers: [SkySelectionBoxAdapterService], imports: [CommonModule, SkyThemeModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkySelectionBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkySelectionBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4295,10 +4251,10 @@ class SkyToggleSwitchLabelComponent {
             replacementRecommendation: 'To add a label to toggle switch, use the `labelText` input on the toggle switch component instead.',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyToggleSwitchLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: SkyToggleSwitchLabelComponent, selector: "sky-toggle-switch-label", ngImport: i0, template: "<span skyTrim><ng-content /></span>\n", dependencies: [{ kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyToggleSwitchLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.3", type: SkyToggleSwitchLabelComponent, selector: "sky-toggle-switch-label", ngImport: i0, template: "<span skyTrim><ng-content /></span>\n", dependencies: [{ kind: "directive", type: i1$3.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyToggleSwitchLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyToggleSwitchLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-toggle-switch-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span skyTrim><ng-content /></span>\n" }]
         }], ctorParameters: () => [] });
@@ -4461,24 +4417,19 @@ class SkyToggleSwitchComponent {
     #toggleChecked() {
         this.checked = !this.checked;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyToggleSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.SkyIdService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.2", type: SkyToggleSwitchComponent, selector: "sky-toggle-switch", inputs: { ariaLabel: "ariaLabel", checked: "checked", disabled: "disabled", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", tabIndex: "tabIndex", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], helpKey: "helpKey" }, outputs: { toggleChange: "toggleChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyToggleSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.SkyIdService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.3", type: SkyToggleSwitchComponent, selector: "sky-toggle-switch", inputs: { ariaLabel: "ariaLabel", checked: "checked", disabled: "disabled", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", tabIndex: "tabIndex", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], helpKey: "helpKey" }, outputs: { toggleChange: "toggleChange" }, providers: [
             SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
             SKY_TOGGLE_SWITCH_VALIDATOR,
-        ], queries: [{ propertyName: "labelComponents", predicate: SkyToggleSwitchLabelComponent }], hostDirectives: [{ directive: SkyFormFieldLabelTextRequiredDirective, inputs: ["labelText", "labelText"] }], ngImport: i0, template: "<span\n  class=\"sky-toggle-switch\"\n  [ngClass]=\"{\n    'sky-toggle-switch-with-label': hasLabelComponent || labelText\n  }\"\n>\n  <button\n    class=\"sky-toggle-switch-button\"\n    role=\"switch\"\n    type=\"button\"\n    skyId\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-label]=\"labelText || ariaLabel || null\"\n    [attr.aria-labelledby]=\"\n      !ariaLabel && (hasLabelComponent || labelText) ? labelId : null\n    \"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-toggle-switch-checked': checked,\n      'sky-toggle-switch-disabled': disabled\n    }\"\n    [tabIndex]=\"tabIndex\"\n    (blur)=\"onButtonBlur()\"\n    (click)=\"onButtonClick($event)\"\n    #toggle=\"skyId\"\n  >\n    <div aria-hidden=\"true\" class=\"sky-toggle-switch-switch\">\n      <i\n        class=\"sky-toggle-switch-indicator\"\n        [ngClass]=\"{\n          'sky-toggle-switch-transition': enableIndicatorAnimation\n        }\"\n        >&nbsp;</i\n      >\n    </div>\n  </button>\n  <span>\n    <label\n      *ngIf=\"hasLabelComponent || labelText\"\n      [for]=\"toggle.id\"\n      [attr.id]=\"labelId\"\n      class=\"sky-toggle-switch-label\"\n    >\n      <ng-container *ngIf=\"labelText; else labelContent\">\n        <ng-container *ngIf=\"!labelHidden\">{{ labelText }}</ng-container>\n      </ng-container>\n    </label>\n    <span class=\"sky-control-help-container\">\n      <sky-help-inline\n        *ngIf=\"labelText && (helpPopoverContent || helpKey)\"\n        [helpKey]=\"helpKey\"\n        [labelText]=\"labelText\"\n        [popoverTitle]=\"helpPopoverTitle\"\n        [popoverContent]=\"helpPopoverContent\"\n      />\n      <ng-content select=\".sky-control-help\" />\n    </span>\n  </span>\n</span>\n\n<ng-template #labelContent>\n  <ng-content select=\"sky-toggle-switch-label\" />\n</ng-template>\n", styles: [".sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch.sky-toggle-switch-with-label{gap:10px}.sky-toggle-switch-switch{border:1px solid #cdcfd2;background-color:#eeeeef;padding:1px;border-radius:24px;flex:none;line-height:1.428571429;width:46px;display:inline-block}.sky-toggle-switch-button{border:none;background:none;margin:0;padding:0;outline:none}.sky-toggle-switch-button:focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}.sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){cursor:pointer}.sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled):not(:focus-visible) .sky-toggle-switch-switch{border-color:#00b4f1;border-width:2px;padding:0}.sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:#c1e8fb;border-width:2px;padding:0}.sky-toggle-switch-button.sky-toggle-switch-checked:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:#00b4f1}.sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch-button.sky-toggle-switch-disabled{color:var(--sky-text-color-default)}.sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{background-color:#cdcfd2;border-color:transparent}.sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#eeeeef}.sky-toggle-switch-indicator{height:22px;width:22px;display:block;position:relative;top:0;left:22px;margin-left:-22px;border-radius:100%;box-shadow:0 1px 2px #000000bf;background-color:#fff}.sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button .sky-toggle-switch-switch{background-color:#fff;border:1px solid var(--sky-border-color-neutral-medium-dark);width:48px;transition:border-color .15s,box-shadow .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{cursor:not-allowed}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch,:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{padding:1px}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-background-color-input-selected);border-color:#1870b8}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active .sky-toggle-switch-switch,:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus-visible .sky-toggle-switch-switch{box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus-visible) .sky-toggle-switch-switch{padding:1px;border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}.sky-theme-modern .sky-toggle-switch-button .sky-toggle-switch-switch{background-color:#fff;border:1px solid var(--sky-border-color-neutral-medium-dark);width:48px;transition:border-color .15s,box-shadow .15s}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{cursor:not-allowed}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch,.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{padding:1px}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-background-color-input-selected);border-color:#1870b8}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active .sky-toggle-switch-switch,.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus-visible .sky-toggle-switch-switch{box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus-visible) .sky-toggle-switch-switch{padding:1px;border:solid 1px #1870B8}.sky-theme-modern .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-toggle-switch-button{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-toggle-switch-button{background-color:#121212}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "labelComponents", predicate: SkyToggleSwitchLabelComponent }], ngImport: i0, template: "<span\n  class=\"sky-toggle-switch\"\n  [ngClass]=\"{\n    'sky-toggle-switch-with-label': hasLabelComponent || labelText\n  }\"\n>\n  <button\n    #toggle=\"skyId\"\n    class=\"sky-toggle-switch-button\"\n    role=\"switch\"\n    type=\"button\"\n    skyId\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-label]=\"labelText || ariaLabel || null\"\n    [attr.aria-labelledby]=\"\n      !ariaLabel && (hasLabelComponent || labelText) ? labelId : null\n    \"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-toggle-switch-checked': checked,\n      'sky-toggle-switch-disabled': disabled\n    }\"\n    [tabIndex]=\"tabIndex\"\n    (blur)=\"onButtonBlur()\"\n    (click)=\"onButtonClick($event)\"\n  >\n    <div aria-hidden=\"true\" class=\"sky-toggle-switch-switch\">\n      <i\n        class=\"sky-toggle-switch-indicator\"\n        [ngClass]=\"{\n          'sky-toggle-switch-transition': enableIndicatorAnimation\n        }\"\n        >&nbsp;</i\n      >\n    </div>\n  </button>\n  <span>\n    @if (hasLabelComponent || labelText) {\n      <label\n        class=\"sky-toggle-switch-label\"\n        [for]=\"toggle.id\"\n        [attr.id]=\"labelId\"\n      >\n        @if (labelText) {\n          @if (!labelHidden) {\n            <ng-container>{{ labelText }}</ng-container>\n          }\n        } @else {\n          <ng-content select=\"sky-toggle-switch-label\" />\n        }\n      </label>\n    }\n    <span class=\"sky-control-help-container\">\n      @if (labelText && (helpPopoverContent || helpKey)) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"labelText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n      <ng-content select=\".sky-control-help\" />\n    </span>\n  </span>\n</span>\n", styles: [".sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch.sky-toggle-switch-with-label{gap:10px}.sky-toggle-switch-switch{border:1px solid #cdcfd2;background-color:#eeeeef;padding:1px;border-radius:24px;flex:none;line-height:1.428571429;width:46px;display:inline-block}.sky-toggle-switch-button{border:none;background:none;margin:0;padding:0;outline:none}.sky-toggle-switch-button:focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}.sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){cursor:pointer}.sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled):not(:focus-visible) .sky-toggle-switch-switch{border-color:#00b4f1;border-width:2px;padding:0}.sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:#c1e8fb;border-width:2px;padding:0}.sky-toggle-switch-button.sky-toggle-switch-checked:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:#00b4f1}.sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch-button.sky-toggle-switch-disabled{color:var(--sky-text-color-default)}.sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{background-color:#cdcfd2;border-color:transparent}.sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#eeeeef}.sky-toggle-switch-indicator{height:22px;width:22px;display:block;position:relative;top:0;left:22px;margin-left:-22px;border-radius:100%;box-shadow:0 1px 2px #000000bf;background-color:#fff}.sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button .sky-toggle-switch-switch{background-color:#fff;border:1px solid var(--sky-border-color-neutral-medium-dark);width:48px;transition:border-color .15s,box-shadow .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{cursor:not-allowed}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch,:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{padding:1px}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-background-color-input-selected);border-color:#1870b8}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active .sky-toggle-switch-switch,:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus-visible .sky-toggle-switch-switch{box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus-visible) .sky-toggle-switch-switch{padding:1px;border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}.sky-theme-modern .sky-toggle-switch-button .sky-toggle-switch-switch{background-color:#fff;border:1px solid var(--sky-border-color-neutral-medium-dark);width:48px;transition:border-color .15s,box-shadow .15s}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{cursor:not-allowed}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch,.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{padding:1px}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-background-color-input-selected);border-color:#1870b8}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active .sky-toggle-switch-switch,.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus-visible .sky-toggle-switch-switch{box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus-visible) .sky-toggle-switch-switch{padding:1px;border:solid 1px #1870B8}.sky-theme-modern .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-toggle-switch-button{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-toggle-switch-button{background-color:#121212}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyToggleSwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyToggleSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-toggle-switch', hostDirectives: [
-                        {
-                            directive: SkyFormFieldLabelTextRequiredDirective,
-                            inputs: ['labelText'],
-                        },
-                    ], providers: [
+            args: [{ selector: 'sky-toggle-switch', providers: [
                         SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
                         SKY_TOGGLE_SWITCH_VALIDATOR,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"sky-toggle-switch\"\n  [ngClass]=\"{\n    'sky-toggle-switch-with-label': hasLabelComponent || labelText\n  }\"\n>\n  <button\n    class=\"sky-toggle-switch-button\"\n    role=\"switch\"\n    type=\"button\"\n    skyId\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-label]=\"labelText || ariaLabel || null\"\n    [attr.aria-labelledby]=\"\n      !ariaLabel && (hasLabelComponent || labelText) ? labelId : null\n    \"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-toggle-switch-checked': checked,\n      'sky-toggle-switch-disabled': disabled\n    }\"\n    [tabIndex]=\"tabIndex\"\n    (blur)=\"onButtonBlur()\"\n    (click)=\"onButtonClick($event)\"\n    #toggle=\"skyId\"\n  >\n    <div aria-hidden=\"true\" class=\"sky-toggle-switch-switch\">\n      <i\n        class=\"sky-toggle-switch-indicator\"\n        [ngClass]=\"{\n          'sky-toggle-switch-transition': enableIndicatorAnimation\n        }\"\n        >&nbsp;</i\n      >\n    </div>\n  </button>\n  <span>\n    <label\n      *ngIf=\"hasLabelComponent || labelText\"\n      [for]=\"toggle.id\"\n      [attr.id]=\"labelId\"\n      class=\"sky-toggle-switch-label\"\n    >\n      <ng-container *ngIf=\"labelText; else labelContent\">\n        <ng-container *ngIf=\"!labelHidden\">{{ labelText }}</ng-container>\n      </ng-container>\n    </label>\n    <span class=\"sky-control-help-container\">\n      <sky-help-inline\n        *ngIf=\"labelText && (helpPopoverContent || helpKey)\"\n        [helpKey]=\"helpKey\"\n        [labelText]=\"labelText\"\n        [popoverTitle]=\"helpPopoverTitle\"\n        [popoverContent]=\"helpPopoverContent\"\n      />\n      <ng-content select=\".sky-control-help\" />\n    </span>\n  </span>\n</span>\n\n<ng-template #labelContent>\n  <ng-content select=\"sky-toggle-switch-label\" />\n</ng-template>\n", styles: [".sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch.sky-toggle-switch-with-label{gap:10px}.sky-toggle-switch-switch{border:1px solid #cdcfd2;background-color:#eeeeef;padding:1px;border-radius:24px;flex:none;line-height:1.428571429;width:46px;display:inline-block}.sky-toggle-switch-button{border:none;background:none;margin:0;padding:0;outline:none}.sky-toggle-switch-button:focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}.sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){cursor:pointer}.sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled):not(:focus-visible) .sky-toggle-switch-switch{border-color:#00b4f1;border-width:2px;padding:0}.sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:#c1e8fb;border-width:2px;padding:0}.sky-toggle-switch-button.sky-toggle-switch-checked:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:#00b4f1}.sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch-button.sky-toggle-switch-disabled{color:var(--sky-text-color-default)}.sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{background-color:#cdcfd2;border-color:transparent}.sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#eeeeef}.sky-toggle-switch-indicator{height:22px;width:22px;display:block;position:relative;top:0;left:22px;margin-left:-22px;border-radius:100%;box-shadow:0 1px 2px #000000bf;background-color:#fff}.sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button .sky-toggle-switch-switch{background-color:#fff;border:1px solid var(--sky-border-color-neutral-medium-dark);width:48px;transition:border-color .15s,box-shadow .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{cursor:not-allowed}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch,:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{padding:1px}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-background-color-input-selected);border-color:#1870b8}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active .sky-toggle-switch-switch,:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus-visible .sky-toggle-switch-switch{box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus-visible) .sky-toggle-switch-switch{padding:1px;border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}.sky-theme-modern .sky-toggle-switch-button .sky-toggle-switch-switch{background-color:#fff;border:1px solid var(--sky-border-color-neutral-medium-dark);width:48px;transition:border-color .15s,box-shadow .15s}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{cursor:not-allowed}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch,.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{padding:1px}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-background-color-input-selected);border-color:#1870b8}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active .sky-toggle-switch-switch,.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus-visible .sky-toggle-switch-switch{box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus-visible) .sky-toggle-switch-switch{padding:1px;border:solid 1px #1870B8}.sky-theme-modern .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-toggle-switch-button{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-toggle-switch-button{background-color:#121212}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.SkyIdService }], propDecorators: { ariaLabel: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"sky-toggle-switch\"\n  [ngClass]=\"{\n    'sky-toggle-switch-with-label': hasLabelComponent || labelText\n  }\"\n>\n  <button\n    #toggle=\"skyId\"\n    class=\"sky-toggle-switch-button\"\n    role=\"switch\"\n    type=\"button\"\n    skyId\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-label]=\"labelText || ariaLabel || null\"\n    [attr.aria-labelledby]=\"\n      !ariaLabel && (hasLabelComponent || labelText) ? labelId : null\n    \"\n    [disabled]=\"disabled\"\n    [ngClass]=\"{\n      'sky-toggle-switch-checked': checked,\n      'sky-toggle-switch-disabled': disabled\n    }\"\n    [tabIndex]=\"tabIndex\"\n    (blur)=\"onButtonBlur()\"\n    (click)=\"onButtonClick($event)\"\n  >\n    <div aria-hidden=\"true\" class=\"sky-toggle-switch-switch\">\n      <i\n        class=\"sky-toggle-switch-indicator\"\n        [ngClass]=\"{\n          'sky-toggle-switch-transition': enableIndicatorAnimation\n        }\"\n        >&nbsp;</i\n      >\n    </div>\n  </button>\n  <span>\n    @if (hasLabelComponent || labelText) {\n      <label\n        class=\"sky-toggle-switch-label\"\n        [for]=\"toggle.id\"\n        [attr.id]=\"labelId\"\n      >\n        @if (labelText) {\n          @if (!labelHidden) {\n            <ng-container>{{ labelText }}</ng-container>\n          }\n        } @else {\n          <ng-content select=\"sky-toggle-switch-label\" />\n        }\n      </label>\n    }\n    <span class=\"sky-control-help-container\">\n      @if (labelText && (helpPopoverContent || helpKey)) {\n        <sky-help-inline\n          [helpKey]=\"helpKey\"\n          [labelText]=\"labelText\"\n          [popoverTitle]=\"helpPopoverTitle\"\n          [popoverContent]=\"helpPopoverContent\"\n        />\n      }\n      <ng-content select=\".sky-control-help\" />\n    </span>\n  </span>\n</span>\n", styles: [".sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch.sky-toggle-switch-with-label{gap:10px}.sky-toggle-switch-switch{border:1px solid #cdcfd2;background-color:#eeeeef;padding:1px;border-radius:24px;flex:none;line-height:1.428571429;width:46px;display:inline-block}.sky-toggle-switch-button{border:none;background:none;margin:0;padding:0;outline:none}.sky-toggle-switch-button:focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}.sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){cursor:pointer}.sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled):not(:focus-visible) .sky-toggle-switch-switch{border-color:#00b4f1;border-width:2px;padding:0}.sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:#c1e8fb;border-width:2px;padding:0}.sky-toggle-switch-button.sky-toggle-switch-checked:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:#00b4f1}.sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch-button.sky-toggle-switch-disabled{color:var(--sky-text-color-default)}.sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{background-color:#cdcfd2;border-color:transparent}.sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#eeeeef}.sky-toggle-switch-indicator{height:22px;width:22px;display:block;position:relative;top:0;left:22px;margin-left:-22px;border-radius:100%;box-shadow:0 1px 2px #000000bf;background-color:#fff}.sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button .sky-toggle-switch-switch{background-color:#fff;border:1px solid var(--sky-border-color-neutral-medium-dark);width:48px;transition:border-color .15s,box-shadow .15s}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{cursor:not-allowed}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch,:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}:host-context(.sky-theme-modern) .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{padding:1px}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-background-color-input-selected);border-color:#1870b8}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active .sky-toggle-switch-switch,:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus-visible .sky-toggle-switch-switch{box-shadow:0 1px 8px #0000004d}:host-context(.sky-theme-modern) .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus-visible) .sky-toggle-switch-switch{padding:1px;border:solid 1px #1870B8}:host-context(.sky-theme-modern) .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}.sky-theme-modern .sky-toggle-switch-button .sky-toggle-switch-switch{background-color:#fff;border:1px solid var(--sky-border-color-neutral-medium-dark);width:48px;transition:border-color .15s,box-shadow .15s}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{cursor:not-allowed}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch,.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:#ededee}.sky-theme-modern .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{padding:1px}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled).sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-background-color-input-selected);border-color:#1870b8}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):active .sky-toggle-switch-switch,.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):focus-visible .sky-toggle-switch-switch{outline:none;border:solid 2px #1870B8;padding:0}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):focus-visible .sky-toggle-switch-switch{box-shadow:0 1px 8px #0000004d}.sky-theme-modern .sky-toggle-switch-button:not(.sky-toggle-switch-disabled):not(:active):hover:not(:focus-visible) .sky-toggle-switch-switch{padding:1px;border:solid 1px #1870B8}.sky-theme-modern .sky-toggle-switch-indicator{box-shadow:0 1px 2px #00000080}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-toggle-switch-button{background-color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-toggle-switch-button{background-color:#121212}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.SkyIdService }], propDecorators: { ariaLabel: [{
                 type: Input
             }], checked: [{
                 type: Input
@@ -4505,19 +4456,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
             }] } });
 
 class SkyToggleSwitchModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyToggleSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: SkyToggleSwitchModule, declarations: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyToggleSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.3", ngImport: i0, type: SkyToggleSwitchModule, declarations: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent], imports: [CommonModule,
             FormsModule,
             SkyHelpInlineModule,
             SkyIdModule,
             SkyTrimModule], exports: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyToggleSwitchModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyToggleSwitchModule, imports: [CommonModule,
             FormsModule,
             SkyHelpInlineModule,
             SkyIdModule,
             SkyTrimModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SkyToggleSwitchModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: SkyToggleSwitchModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyToggleSwitchLabelComponent, SkyToggleSwitchComponent],
@@ -4536,5 +4487,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SKY_FORM_ERRORS_ENABLED, SkyCharacterCounterModule, SkyCheckboxModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileAttachmentsModule, SkyFileDropModule, SkyFileSizePipe, SkyFormErrorModule, SkyFormErrorsModule, SkyFormFieldLabelTextRequiredDirective, SkyFormFieldLabelTextRequiredService, SkyInputBoxHostService, SkyInputBoxModule, SkyRadioModule, SkyRequiredStateDirective, SkySelectionBoxModule, SkyToggleSwitchModule, SkyCharacterCounterIndicatorComponent as λ1, SkyInputBoxComponent as λ10, SkyRadioGroupComponent as λ11, SkyRadioLabelComponent as λ12, SkyRadioComponent as λ13, SkySelectionBoxDescriptionComponent as λ14, SkySelectionBoxGridComponent as λ15, SkySelectionBoxHeaderComponent as λ16, SkySelectionBoxComponent as λ17, SkyToggleSwitchLabelComponent as λ18, SkyToggleSwitchComponent as λ19, SkyCharacterCounterInputDirective as λ2, SkyInputBoxControlDirective as λ20, SkyFormErrorsComponent as λ21, SkyFormErrorComponent as λ22, SkyCharacterCounterScreenReaderPipe as λ23, SkyCheckboxGroupComponent as λ24, SkyFieldGroupComponent as λ25, SkyInputBoxHintTextPipe as λ26, SkyCheckboxComponent as λ3, SkyCheckboxLabelComponent as λ4, SkyFileAttachmentLabelComponent as λ6, SkyFileAttachmentComponent as λ7, SkyFileDropComponent as λ8, SkyFileItemComponent as λ9 };
+export { SKY_FORM_ERRORS_ENABLED, SkyCharacterCounterModule, SkyCheckboxModule, SkyFieldGroupModule, SkyFileAttachmentModule, SkyFileAttachmentsModule, SkyFileDropModule, SkyFileSizePipe, SkyFormErrorModule, SkyFormErrorsModule, SkyInputBoxHostService, SkyInputBoxModule, SkyRadioModule, SkyRequiredStateDirective, SkySelectionBoxModule, SkyToggleSwitchModule, SkyCharacterCounterIndicatorComponent as λ1, SkyInputBoxComponent as λ10, SkyRadioGroupComponent as λ11, SkyRadioLabelComponent as λ12, SkyRadioComponent as λ13, SkySelectionBoxDescriptionComponent as λ14, SkySelectionBoxGridComponent as λ15, SkySelectionBoxHeaderComponent as λ16, SkySelectionBoxComponent as λ17, SkyToggleSwitchLabelComponent as λ18, SkyToggleSwitchComponent as λ19, SkyCharacterCounterInputDirective as λ2, SkyInputBoxControlDirective as λ20, SkyFormErrorsComponent as λ21, SkyFormErrorComponent as λ22, SkyCharacterCounterScreenReaderPipe as λ23, SkyCheckboxGroupComponent as λ24, SkyFieldGroupComponent as λ25, SkyInputBoxHintTextPipe as λ26, SkyCheckboxComponent as λ3, SkyCheckboxLabelComponent as λ4, SkyFileAttachmentLabelComponent as λ6, SkyFileAttachmentComponent as λ7, SkyFileDropComponent as λ8, SkyFileItemComponent as λ9 };
 //# sourceMappingURL=skyux-forms.mjs.map