@skyux/forms 10.0.0 → 10.1.0

package/fesm2022/skyux-forms.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, DecimalPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, Pipe, Component, ChangeDetectionStrategy, Input, Directive, InjectionToken, inject, HostBinding, EventEmitter, ChangeDetectorRef, booleanAttribute, ElementRef, Output, ViewChild, Injectable, Self, Optional, ContentChildren, TemplateRef, RendererFactory2, Renderer2, ViewEncapsulation, ContentChild, forwardRef, HostListener } from '@angular/core';
+import { NgModule, Pipe, Component, ChangeDetectionStrategy, Input, Directive, InjectionToken, inject, HostBinding, booleanAttribute, EventEmitter, ChangeDetectorRef, ElementRef, Output, ViewChild, Injectable, Self, Optional, ContentChildren, TemplateRef, RendererFactory2, Renderer2, ViewEncapsulation, ContentChild, forwardRef, HostListener } from '@angular/core';
 import * as i2$1 from '@angular/forms';
 import { NG_VALIDATORS, FormsModule, ReactiveFormsModule, NgControl, Validators, FormControlDirective, FormControlName, NgModel, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i2 from '@skyux/i18n';
@@ -479,6 +479,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 }]
         }] });
 
+/**
+ * Organizes checkboxes into a group.
+ */
+class SkyCheckboxGroupComponent {
+    constructor() {
+        /**
+         * Indicates whether to hide the `labelText`.
+         * @preview
+         */
+        this.labelHidden = false;
+        this.#_stacked = false;
+        this.#idSvc = inject(SkyIdService);
+        this.errorId = this.#idSvc.generateId();
+        this.formErrorsDataId = 'checkbox-group-form-errors';
+    }
+    /**
+     * Whether the checkbox group is stacked on another form component. When specified, the appropriate
+     * vertical spacing is automatically added to the checkbox group.
+     * @preview
+     */
+    set stacked(value) {
+        this.#_stacked = value;
+    }
+    get stacked() {
+        return this.#_stacked;
+    }
+    #_stacked;
+    #idSvc;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyCheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: SkyCheckboxGroupComponent, isStandalone: true, selector: "sky-checkbox-group", inputs: { labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], formGroup: "formGroup" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked" } }, providers: [{ 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-errormessage]=\"labelText && formGroup.errors ? errorId : undefined\"\n>\n  <legend\n    class=\"sky-control-label\"\n    [ngClass]=\"{ 'sky-screen-reader-only': labelHidden }\"\n  >\n    {{ labelText }}\n  </legend>\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=\"labelText && formGroup.errors\"\n  [id]=\"errorId\"\n  [attr.data-sky-id]=\"formErrorsDataId\"\n  [errors]=\"formGroup.errors\"\n  [labelText]=\"labelText\"\n  [showErrors]=\"formGroup.touched || formGroup.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyCheckboxGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sky-checkbox-group', standalone: true, imports: [CommonModule, SkyFormErrorsModule], providers: [{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true }], template: "<fieldset\n  class=\"sky-checkbox-group\"\n  [attr.aria-invalid]=\"!!formGroup.errors\"\n  [attr.aria-errormessage]=\"labelText && formGroup.errors ? errorId : undefined\"\n>\n  <legend\n    class=\"sky-control-label\"\n    [ngClass]=\"{ 'sky-screen-reader-only': labelHidden }\"\n  >\n    {{ labelText }}\n  </legend>\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=\"labelText && formGroup.errors\"\n  [id]=\"errorId\"\n  [attr.data-sky-id]=\"formErrorsDataId\"\n  [errors]=\"formGroup.errors\"\n  [labelText]=\"labelText\"\n  [showErrors]=\"formGroup.touched || formGroup.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { labelText: [{
+                type: Input,
+                args: [{ required: true }]
+            }], labelHidden: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], stacked: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }, {
+                type: HostBinding,
+                args: ['class.sky-margin-stacked-lg']
+            }], formGroup: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
 /**
 @internal
  */
@@ -869,11 +920,11 @@ class SkyCheckboxComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: SkyCheckboxComponent, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: "disabled", tabindex: "tabindex", name: "name", icon: "icon", checkboxType: "checkboxType", checked: "checked", indeterminate: "indeterminate", required: "required", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute] }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange", indeterminateChange: "indeterminateChange" }, providers: [{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<label\n  class=\"sky-checkbox-wrapper sky-switch\"\n  [ngClass]=\"{\n    'sky-control-label-required': required,\n    'sky-switch-disabled': disabled\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]=\"required\"\n    [tabIndex]=\"tabindex\"\n    [attr.aria-label]=\"labelText || label\"\n    [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n    [attr.aria-required]=\"required ? true : null\"\n    [attr.aria-invalid]=\"!!ngControl?.errors\"\n    [attr.aria-errormessage]=\"\n      labelText && ngControl?.errors ? errorId : undefined\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-form-errors\n  *ngIf=\"labelText && ngControl?.errors\"\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"'skyux_checkbox_required_label_text' | skyLibResources\"\n  [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-checkbox-icon-indeterminate{font-size:14px}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-indeterminate{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-icon-modern-indeterminate{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i3.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyCheckboxLabelTextLabelComponent, selector: "sky-checkbox-label-text-label", inputs: ["labelHidden", "labelText"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: SkyCheckboxComponent, selector: "sky-checkbox", inputs: { label: "label", labelledBy: "labelledBy", id: "id", disabled: "disabled", tabindex: "tabindex", name: "name", icon: "icon", checkboxType: "checkboxType", checked: "checked", indeterminate: "indeterminate", required: "required", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute] }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange", indeterminateChange: "indeterminateChange" }, providers: [{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<label\n  class=\"sky-checkbox-wrapper sky-switch\"\n  [ngClass]=\"{\n    'sky-control-label-required': required,\n    'sky-switch-disabled': disabled\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]=\"required\"\n    [tabIndex]=\"tabindex\"\n    [attr.aria-label]=\"labelText || label\"\n    [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n    [attr.aria-required]=\"required ? true : null\"\n    [attr.aria-invalid]=\"!!ngControl?.errors\"\n    [attr.aria-errormessage]=\"\n      labelText && ngControl?.errors ? errorId : undefined\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-form-errors\n  *ngIf=\"labelText && ngControl?.errors\"\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"'skyux_checkbox_required_label_text' | skyLibResources\"\n  [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-checkbox-icon-indeterminate{font-size:14px}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-indeterminate{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-icon-modern-indeterminate{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host:not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyFormErrorsComponent, selector: "sky-form-errors", inputs: ["errors", "labelText", "showErrors"] }, { kind: "component", type: i3.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyCheckboxLabelTextLabelComponent, selector: "sky-checkbox-label-text-label", inputs: ["labelHidden", "labelText"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-checkbox', providers: [{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true }], template: "<label\n  class=\"sky-checkbox-wrapper sky-switch\"\n  [ngClass]=\"{\n    'sky-control-label-required': required,\n    'sky-switch-disabled': disabled\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]=\"required\"\n    [tabIndex]=\"tabindex\"\n    [attr.aria-label]=\"labelText || label\"\n    [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n    [attr.aria-required]=\"required ? true : null\"\n    [attr.aria-invalid]=\"!!ngControl?.errors\"\n    [attr.aria-errormessage]=\"\n      labelText && ngControl?.errors ? errorId : undefined\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-form-errors\n  *ngIf=\"labelText && ngControl?.errors\"\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"'skyux_checkbox_required_label_text' | skyLibResources\"\n  [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-checkbox-icon-indeterminate{font-size:14px}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-indeterminate{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-icon-modern-indeterminate{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}\n"] }]
+            args: [{ selector: 'sky-checkbox', providers: [{ provide: SKY_FORM_ERRORS_ENABLED, useValue: true }], template: "<label\n  class=\"sky-checkbox-wrapper sky-switch\"\n  [ngClass]=\"{\n    'sky-control-label-required': required,\n    'sky-switch-disabled': disabled\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]=\"required\"\n    [tabIndex]=\"tabindex\"\n    [attr.aria-label]=\"labelText || label\"\n    [attr.aria-labelledby]=\"labelText ? undefined : labelledBy\"\n    [attr.aria-required]=\"required ? true : null\"\n    [attr.aria-invalid]=\"!!ngControl?.errors\"\n    [attr.aria-errormessage]=\"\n      labelText && ngControl?.errors ? errorId : undefined\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-form-errors\n  *ngIf=\"labelText && ngControl?.errors\"\n  [id]=\"errorId\"\n  [errors]=\"ngControl?.errors\"\n  [labelText]=\"'skyux_checkbox_required_label_text' | skyLibResources\"\n  [showErrors]=\"ngControl?.touched || ngControl?.dirty\"\n>\n  <ng-content select=\"sky-form-error\" />\n</sky-form-errors>\n", styles: [".sky-checkbox-icon-indeterminate{font-size:14px}:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-icon-modern-indeterminate{color:#1870b8}:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,:host-context(.sky-theme-modern) .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}:host-context(.sky-theme-modern) .sky-switch-control{border-radius:6px}.sky-theme-modern .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-icon-modern-indeterminate{color:#1870b8}.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-checked,.sky-theme-modern .sky-checkbox-input:disabled+.sky-switch-control .sky-checkbox-icon-modern-indeterminate{color:#212327}.sky-theme-modern .sky-switch-control{border-radius:6px}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host{display:block}:host-context(sky-checkbox-group .sky-checkbox-group-stacked) :host:not(:last-child){margin-bottom:var(--sky-margin-stacked-sm)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{
                 type: Input
             }], labelledBy: [{
@@ -920,15 +971,18 @@ class SkyCheckboxModule {
             SkyCheckboxLabelComponent,
             SkyCheckboxLabelTextLabelComponent], imports: [CommonModule,
             FormsModule,
+            SkyCheckboxGroupComponent,
             SkyFormErrorModule,
             SkyFormErrorsModule,
             SkyFormsResourcesModule,
             SkyIconModule,
             SkyTrimModule], exports: [SkyCheckboxComponent,
             SkyCheckboxLabelComponent,
+            SkyCheckboxGroupComponent,
             SkyFormErrorModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyCheckboxModule, imports: [CommonModule,
             FormsModule,
+            SkyCheckboxGroupComponent,
             SkyFormErrorModule,
             SkyFormErrorsModule,
             SkyFormsResourcesModule,
@@ -946,6 +1000,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                     imports: [
                         CommonModule,
                         FormsModule,
+                        SkyCheckboxGroupComponent,
                         SkyFormErrorModule,
                         SkyFormErrorsModule,
                         SkyFormsResourcesModule,
@@ -955,6 +1010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                     exports: [
                         SkyCheckboxComponent,
                         SkyCheckboxLabelComponent,
+                        SkyCheckboxGroupComponent,
                         SkyFormErrorModule,
                     ],
                 }]
@@ -1610,6 +1666,11 @@ class SkyFileDropComponent {
          * Whether to display the option to attach files from URLs rather than from local devices.
          */
         this.allowLinks = false;
+        /**
+         * Whether to hide `labelText` from view.
+         * @preview
+         */
+        this.labelHidden = false;
         this.rejectedOver = false;
         this.acceptedOver = false;
         this.#_maxFileSize = MAX_FILE_SIZE_DEFAULT;
@@ -1783,11 +1844,11 @@ class SkyFileDropComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyFileDropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SkyFileDropComponent, selector: "sky-file-drop", inputs: { fileUploadAriaLabel: "fileUploadAriaLabel", linkUploadAriaLabel: "linkUploadAriaLabel", minFileSize: "minFileSize", maxFileSize: "maxFileSize", multiple: "multiple", validateFn: "validateFn", acceptedTypes: "acceptedTypes", noClick: "noClick", allowLinks: "allowLinks" }, outputs: { filesChanged: "filesChanged", linkInputBlur: "linkInputBlur", linkChanged: "linkChanged" }, providers: [SkyFileAttachmentService], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<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    ></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' | 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' | skyLibResources)\n            \"\n            [attr.aria-describedby]=\"hintText.id\"\n            [(ngModel)]=\"linkUrl\"\n            (blur)=\"onLinkBlur()\"\n            (keyup)=\"addLinkEnter($event)\"\n          />\n        </div>\n        <div\n          skyId\n          #hintText=\"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          {{ 'skyux_file_attachment_file_upload_link_done' | skyLibResources }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".sky-file-drop-col{margin-bottom:10px;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-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-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-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-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}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: SkyFileDropComponent, selector: "sky-file-drop", inputs: { fileUploadAriaLabel: "fileUploadAriaLabel", linkUploadAriaLabel: "linkUploadAriaLabel", minFileSize: "minFileSize", maxFileSize: "maxFileSize", multiple: "multiple", validateFn: "validateFn", acceptedTypes: "acceptedTypes", noClick: "noClick", allowLinks: "allowLinks", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute] }, outputs: { filesChanged: "filesChanged", linkInputBlur: "linkInputBlur", linkChanged: "linkChanged" }, providers: [SkyFileAttachmentService], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<fieldset>\n  <legend\n    *ngIf=\"labelText\"\n    class=\"sky-control-label sky-font-body-default sky-margin-stacked-xs\"\n    [class.sky-screen-reader-only]=\"labelHidden\"\n  >\n    {{ labelText }}\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      ></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]=\"hintText.id\"\n              [(ngModel)]=\"linkUrl\"\n              (blur)=\"onLinkBlur()\"\n              (keyup)=\"addLinkEnter($event)\"\n            />\n          </div>\n          <div\n            skyId\n            #hintText=\"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</fieldset>\n", styles: [".sky-file-drop-col{margin-bottom:10px;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-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-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-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-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}.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}: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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }, { kind: "pipe", type: i2.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyFileDropComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-file-drop', providers: [SkyFileAttachmentService], template: "<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    ></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' | 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' | skyLibResources)\n            \"\n            [attr.aria-describedby]=\"hintText.id\"\n            [(ngModel)]=\"linkUrl\"\n            (blur)=\"onLinkBlur()\"\n            (keyup)=\"addLinkEnter($event)\"\n          />\n        </div>\n        <div\n          skyId\n          #hintText=\"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          {{ 'skyux_file_attachment_file_upload_link_done' | skyLibResources }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".sky-file-drop-col{margin-bottom:10px;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-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-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-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-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}.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}\n"] }]
+            args: [{ selector: 'sky-file-drop', providers: [SkyFileAttachmentService], template: "<fieldset>\n  <legend\n    *ngIf=\"labelText\"\n    class=\"sky-control-label sky-font-body-default sky-margin-stacked-xs\"\n    [class.sky-screen-reader-only]=\"labelHidden\"\n  >\n    {{ labelText }}\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      ></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]=\"hintText.id\"\n              [(ngModel)]=\"linkUrl\"\n              (blur)=\"onLinkBlur()\"\n              (keyup)=\"addLinkEnter($event)\"\n            />\n          </div>\n          <div\n            skyId\n            #hintText=\"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</fieldset>\n", styles: [".sky-file-drop-col{margin-bottom:10px;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-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-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-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-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}.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}: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: [{
@@ -1812,6 +1873,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 type: Input
             }], allowLinks: [{
                 type: Input
+            }], labelText: [{
+                type: Input
+            }], labelHidden: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], inputEl: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -1835,21 +1901,21 @@ class SkyFileSizePipe {
         if (Math.abs(input) === 1) {
             template = 'skyux_file_attachment_file_size_b_singular';
         }
-        else if (input < 1000) {
+        else if (input < 1024) {
             template = 'skyux_file_attachment_file_size_b_plural';
         }
-        else if (input < 1e6) {
+        else if (input < Math.pow(1024, 2)) {
             template = 'skyux_file_attachment_file_size_kb';
-            dividend = 1000;
+            dividend = 1024;
         }
-        else if (input < 1e9) {
+        else if (input < Math.pow(1024, 3)) {
             template = 'skyux_file_attachment_file_size_mb';
-            dividend = 1e6;
+            dividend = Math.pow(1024, 2);
             decimalPlaces = 1;
         }
         else {
             template = 'skyux_file_attachment_file_size_gb';
-            dividend = 1e9;
+            dividend = Math.pow(1024, 3);
             decimalPlaces = 1;
         }
         const roundedSize = Math.floor(input / (dividend / Math.pow(10, decimalPlaces))) /
@@ -2651,6 +2717,46 @@ class SkyRadioComponent {
         }
         this.#radioGroupIdSvc?.register(this.#defaultId, this.inputId);
     }
+    /**
+     * The ARIA label for the radio button. This sets the radio button's `aria-label`
+     * attribute to provide a text equivalent for screen readers [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)
+     * when the radio button does not include a visible label. You must set this property for icon
+     * radio buttons. If the radio button includes a visible label, use `labelledBy` instead.
+     * For more information about the `aria-label` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-label).
+     * @deprecated Use `labelText` instead.
+     */
+    set label(value) {
+        this.#_label = value;
+        if (value) {
+            this.#logger.deprecated('SkyRadioComponent.label', {
+                deprecationMajorVersion: 10,
+                replacementRecommendation: 'Use the `labelText` input instead.',
+            });
+        }
+    }
+    get label() {
+        return this.#_label;
+    }
+    /**
+     * The HTML element ID of the element that labels
+     * the radio button. This sets the radio button's `aria-labelledby` attribute to provide a text equivalent for screen readers
+     * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).
+     * If the radio button does not include a visible label, use `label` instead.
+     * For more information about the `aria-labelledby` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-labelledby).
+     * @deprecated Use `labelText` instead.
+     */
+    set labelledBy(value) {
+        this.#_labelledBy = value;
+        if (value) {
+            this.#logger.deprecated('SkyRadioComponent.labelledBy', {
+                deprecationMajorVersion: 10,
+                replacementRecommendation: 'Use the `labelText` input instead.',
+            });
+        }
+    }
+    get labelledBy() {
+        return this.#_labelledBy;
+    }
     /**
      * This property is deprecated in favor of the `name` property on the `sky-radio-group element`.
      * We recommend using the `sky-radio-group` element with all radio buttons, but if you opt not to,
@@ -2749,6 +2855,8 @@ class SkyRadioComponent {
     #_selectedValue;
     #_tabindex;
     #_value;
+    #_label;
+    #_labelledBy;
     #changeDetector;
     #defaultId;
     #radioGroupIdSvc;
@@ -2758,6 +2866,11 @@ class SkyRadioComponent {
          * Fires when users focus off a radio button.
          */
         this.blur = new Subject();
+        /**
+         * Indicates whether to hide the `labelText`.
+         * @preview
+         */
+        this.labelHidden = false;
         /**
          * Fires when users select a radio button.
          */
@@ -2842,11 +2955,11 @@ class SkyRadioComponent {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     #onTouchedCallback;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: SkyRadioComponent, selector: "sky-radio", inputs: { checked: "checked", disabled: "disabled", id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", icon: "icon", radioType: "radioType" }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<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]=\"label\"\n    [attr.aria-labelledby]=\"labelledBy\"\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-content select=\"sky-radio-label\" />\n</label>\n", styles: [":host{display:inline-block}.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%}: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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.1", type: SkyRadioComponent, selector: "sky-radio", inputs: { checked: "checked", disabled: "disabled", id: "id", label: "label", labelledBy: "labelledBy", name: "name", tabindex: "tabindex", value: "value", icon: "icon", radioType: "radioType", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute] }, outputs: { change: "change", checkedChange: "checkedChange", disabledChange: "disabledChange" }, providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<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    [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", styles: [":host{display:inline-block}.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%}: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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: SkyRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-radio', providers: [SKY_RADIO_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<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]=\"label\"\n    [attr.aria-labelledby]=\"labelledBy\"\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-content select=\"sky-radio-label\" />\n</label>\n", styles: [":host{display:inline-block}.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%}: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: "<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    [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", styles: [":host{display:inline-block}.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%}: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"] }]
         }], ctorParameters: () => [], propDecorators: { checked: [{
                 type: Input
             }], disabled: [{
@@ -2867,6 +2980,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 type: Input
             }], radioType: [{
                 type: Input
+            }], labelText: [{
+                type: Input
+            }], labelHidden: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], change: [{
                 type: Output
             }], checkedChange: [{
@@ -3192,6 +3310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
  * Specifies a label for the radio button. To display a help button beside the label, include a help button element,
  * such as `sky-help-inline`, in the `sky-radio-label` element and a `sky-control-help` CSS class on that help button
  * element.
+ * @deprecated Use `labelText` input on `sky-radio-component` instead.
  */
 class SkyRadioLabelComponent {
     // When clicking on a checkbox label, Angular registers two click events.
@@ -3200,13 +3319,19 @@ class SkyRadioLabelComponent {
     onClick(event) {
         event.stopPropagation();
     }
+    constructor() {
+        inject(SkyLogService).deprecated('SkyToggleSwitchLabelComponent', {
+            deprecationMajorVersion: 10,
+            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: "17.3.1", ngImport: i0, type: SkyRadioLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", 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", styles: [""], dependencies: [{ kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", 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" }]
-        }], propDecorators: { onClick: [{
+        }], ctorParameters: () => [], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -3928,5 +4053,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SKY_FORM_ERRORS_ENABLED, SkyCharacterCounterModule, SkyCheckboxModule, SkyFileAttachmentsModule, SkyFileSizePipe, SkyFormErrorModule, SkyFormErrorsModule, SkyInputBoxHostService, SkyInputBoxModule, SkyRadioModule, 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, 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, SkyFileAttachmentsModule, SkyFileSizePipe, SkyFormErrorModule, SkyFormErrorsModule, SkyInputBoxHostService, SkyInputBoxModule, SkyRadioModule, 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, SkyCheckboxComponent as λ3, SkyCheckboxLabelComponent as λ4, SkyFileAttachmentLabelComponent as λ6, SkyFileAttachmentComponent as λ7, SkyFileDropComponent as λ8, SkyFileItemComponent as λ9 };
 //# sourceMappingURL=skyux-forms.mjs.map