@skyux/indicators 7.0.0 → 7.1.0

package/documentation.json

@@ -8654,7 +8654,7 @@
     {
       "fileName": "key-info-demo.component.ts",
       "filePath": "/projects/indicators/documentation/code-examples/key-info/basic/key-info-demo.component.ts",
-      "rawContents": "import { Component, Input } from '@angular/core';\nimport { SkyKeyInfoLayoutType } from '@skyux/indicators';\n\n@Component({\n  selector: 'app-key-info-demo',\n  templateUrl: './key-info-demo.component.html',\n})\nexport class KeyInfoDemoComponent {\n  @Input()\n  public set value(value: number | undefined) {\n    this.#_value = value;\n    this.layout = this.#_value >= 100 ? 'vertical' : 'horizontal';\n  }\n\n  public get value(): number {\n    return this.#_value;\n  }\n\n  public layout: SkyKeyInfoLayoutType = 'vertical';\n\n  #_value: number | undefined = 575;\n}\n"
+      "rawContents": "import { Component, Input } from '@angular/core';\nimport { SkyKeyInfoLayoutType } from '@skyux/indicators';\n\n@Component({\n  selector: 'app-key-info-demo',\n  templateUrl: './key-info-demo.component.html',\n})\nexport class KeyInfoDemoComponent {\n  @Input()\n  public set value(value: number | undefined) {\n    this.#_value = value;\n    this.layout =\n      this.#_value && this.#_value >= 100 ? 'vertical' : 'horizontal';\n  }\n\n  public get value(): number | undefined {\n    return this.#_value;\n  }\n\n  public layout: SkyKeyInfoLayoutType = 'vertical';\n\n  #_value: number | undefined = 575;\n}\n"
     },
     {
       "fileName": "key-info-demo.module.ts",
@@ -8674,7 +8674,7 @@
     {
       "fileName": "key-info-demo.component.ts",
       "filePath": "/projects/indicators/documentation/code-examples/key-info/inline-help/key-info-demo.component.ts",
-      "rawContents": "import { Component, Input } from '@angular/core';\nimport { SkyKeyInfoLayoutType } from '@skyux/indicators';\n\n@Component({\n  selector: 'app-key-info-demo',\n  templateUrl: './key-info-demo.component.html',\n})\nexport class KeyInfoDemoComponent {\n  @Input()\n  public set value(value: number | undefined) {\n    this.#_value = value;\n    this.layout = this.#_value >= 100 ? 'vertical' : 'horizontal';\n  }\n\n  public get value(): number {\n    return this.#_value;\n  }\n\n  public layout: SkyKeyInfoLayoutType = 'vertical';\n\n  #_value: number | undefined = 575;\n\n  public onActionClick(): void {\n    alert('Help inline button clicked!');\n  }\n}\n"
+      "rawContents": "import { Component, Input } from '@angular/core';\nimport { SkyKeyInfoLayoutType } from '@skyux/indicators';\n\n@Component({\n  selector: 'app-key-info-demo',\n  templateUrl: './key-info-demo.component.html',\n})\nexport class KeyInfoDemoComponent {\n  @Input()\n  public set value(value: number | undefined) {\n    this.#_value = value;\n    this.layout =\n      this.#_value && this.#_value >= 100 ? 'vertical' : 'horizontal';\n  }\n\n  public get value(): number | undefined {\n    return this.#_value;\n  }\n\n  public layout: SkyKeyInfoLayoutType = 'vertical';\n\n  #_value: number | undefined = 575;\n\n  public onActionClick(): void {\n    alert('Help inline button clicked!');\n  }\n}\n"
     },
     {
       "fileName": "key-info-demo.module.ts",
@@ -8689,12 +8689,12 @@
     {
       "fileName": "label-demo.component.spec.ts",
       "filePath": "/projects/indicators/documentation/code-examples/label/basic/label-demo.component.spec.ts",
-      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { TestBed } from '@angular/core/testing';\nimport { SkyLabelHarness } from '@skyux/indicators/testing';\n\nimport { LabelDemoComponent } from './label-demo.component';\nimport { LabelDemoModule } from './label-demo.module';\n\ndescribe('Basic label', () => {\n  async function setupTest(options?: {\n    daysUntilDue?: number;\n    submitted?: boolean;\n  }) {\n    const fixture = TestBed.createComponent(LabelDemoComponent);\n\n    if (options?.daysUntilDue !== undefined) {\n      fixture.componentInstance.daysUntilDue = options.daysUntilDue;\n    }\n\n    if (options?.submitted !== undefined) {\n      fixture.componentInstance.submitted = options.submitted;\n    }\n\n    const loader = TestbedHarnessEnvironment.loader(fixture);\n\n    const labelHarness = await loader.getHarness(\n      SkyLabelHarness.with({ dataSkyId: 'label-demo' })\n    );\n\n    return { labelHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [LabelDemoModule],\n    });\n  });\n\n  it('should show an info label when submitted is false and there is more than a week until due', async () => {\n    const { labelHarness, fixture } = await setupTest({ daysUntilDue: 8 });\n    fixture.detectChanges();\n\n    await expectAsync(labelHarness.getLabelType()).toBeResolvedTo('info');\n    await expectAsync(labelHarness.getDescriptionType()).toBeResolvedTo(\n      'attention'\n    );\n    await expectAsync(labelHarness.getLabelText()).toBeResolvedTo('Incomplete');\n  });\n\n  it('should show a warning label when submitted is false and there is less than a week until due', async () => {\n    const { labelHarness, fixture } = await setupTest({ daysUntilDue: 6 });\n    fixture.detectChanges();\n\n    await expectAsync(labelHarness.getLabelType()).toBeResolvedTo('warning');\n    await expectAsync(labelHarness.getDescriptionType()).toBeResolvedTo(\n      'important-warning'\n    );\n    await expectAsync(labelHarness.getLabelText()).toBeResolvedTo('Due soon');\n  });\n\n  it('should show a danger label when submitted is false and it is past due', async () => {\n    const { labelHarness, fixture } = await setupTest({ daysUntilDue: -1 });\n    fixture.detectChanges();\n\n    await expectAsync(labelHarness.getLabelType()).toBeResolvedTo('danger');\n    await expectAsync(labelHarness.getDescriptionType()).toBeResolvedTo(\n      'danger'\n    );\n    await expectAsync(labelHarness.getLabelText()).toBeResolvedTo('Overdue');\n  });\n\n  it('should show a success label when submitted is true', async () => {\n    const { labelHarness, fixture } = await setupTest({ submitted: true });\n    fixture.detectChanges();\n\n    await expectAsync(labelHarness.getLabelType()).toBeResolvedTo('success');\n    await expectAsync(labelHarness.getDescriptionType()).toBeResolvedTo(\n      'completed'\n    );\n    await expectAsync(labelHarness.getLabelText()).toBeResolvedTo('Submitted');\n  });\n});\n"
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { SkyLabelHarness } from '@skyux/indicators/testing';\n\nimport { LabelDemoComponent } from './label-demo.component';\nimport { LabelDemoModule } from './label-demo.module';\n\ndescribe('Basic label', () => {\n  async function setupTest(options?: {\n    daysUntilDue?: number;\n    submitted?: boolean;\n  }): Promise<{\n    labelHarness: SkyLabelHarness;\n    fixture: ComponentFixture<LabelDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(LabelDemoComponent);\n\n    if (options?.daysUntilDue !== undefined) {\n      fixture.componentInstance.daysUntilDue = options.daysUntilDue;\n    }\n\n    if (options?.submitted !== undefined) {\n      fixture.componentInstance.submitted = options.submitted;\n    }\n\n    const loader = TestbedHarnessEnvironment.loader(fixture);\n\n    const labelHarness = await loader.getHarness(\n      SkyLabelHarness.with({ dataSkyId: 'label-demo' })\n    );\n\n    return { labelHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [LabelDemoModule],\n    });\n  });\n\n  it('should show an info label when submitted is false and there is more than a week until due', async () => {\n    const { labelHarness, fixture } = await setupTest({ daysUntilDue: 8 });\n    fixture.detectChanges();\n\n    await expectAsync(labelHarness.getLabelType()).toBeResolvedTo('info');\n    await expectAsync(labelHarness.getDescriptionType()).toBeResolvedTo(\n      'attention'\n    );\n    await expectAsync(labelHarness.getLabelText()).toBeResolvedTo('Incomplete');\n  });\n\n  it('should show a warning label when submitted is false and there is less than a week until due', async () => {\n    const { labelHarness, fixture } = await setupTest({ daysUntilDue: 6 });\n    fixture.detectChanges();\n\n    await expectAsync(labelHarness.getLabelType()).toBeResolvedTo('warning');\n    await expectAsync(labelHarness.getDescriptionType()).toBeResolvedTo(\n      'important-warning'\n    );\n    await expectAsync(labelHarness.getLabelText()).toBeResolvedTo('Due soon');\n  });\n\n  it('should show a danger label when submitted is false and it is past due', async () => {\n    const { labelHarness, fixture } = await setupTest({ daysUntilDue: -1 });\n    fixture.detectChanges();\n\n    await expectAsync(labelHarness.getLabelType()).toBeResolvedTo('danger');\n    await expectAsync(labelHarness.getDescriptionType()).toBeResolvedTo(\n      'danger'\n    );\n    await expectAsync(labelHarness.getLabelText()).toBeResolvedTo('Overdue');\n  });\n\n  it('should show a success label when submitted is true', async () => {\n    const { labelHarness, fixture } = await setupTest({ submitted: true });\n    fixture.detectChanges();\n\n    await expectAsync(labelHarness.getLabelType()).toBeResolvedTo('success');\n    await expectAsync(labelHarness.getDescriptionType()).toBeResolvedTo(\n      'completed'\n    );\n    await expectAsync(labelHarness.getLabelText()).toBeResolvedTo('Submitted');\n  });\n});\n"
     },
     {
       "fileName": "label-demo.component.ts",
       "filePath": "/projects/indicators/documentation/code-examples/label/basic/label-demo.component.ts",
-      "rawContents": "import { Component, Input } from '@angular/core';\nimport { SkyIndicatorDescriptionType, SkyLabelType } from '@skyux/indicators';\n\n@Component({\n  selector: 'app-label-demo',\n  templateUrl: './label-demo.component.html',\n})\nexport class LabelDemoComponent {\n  @Input()\n  public get daysUntilDue(): number {\n    return this.#_daysUntilDue;\n  }\n\n  public set daysUntilDue(days: number) {\n    this.#_daysUntilDue = days;\n    this.updateLabelProperties(this.submitted, days);\n  }\n\n  @Input()\n  public get submitted(): boolean {\n    return this.#_submitted;\n  }\n\n  public set submitted(submitted: boolean) {\n    this.#_submitted = submitted;\n    this.updateLabelProperties(submitted, this.daysUntilDue);\n  }\n\n  public labelType: SkyLabelType = 'info';\n  public descriptionType: SkyIndicatorDescriptionType = 'attention';\n  public labelText = 'Incomplete';\n  public todaysDate = new Date('9/14/22');\n  #_daysUntilDue = 14;\n  #_submitted = false;\n\n  private updateLabelProperties(submitted: boolean, days: number) {\n    if (submitted) {\n      this.labelType = 'success';\n      this.descriptionType = 'completed';\n      this.labelText = 'Submitted';\n    } else if (days <= 0) {\n      this.labelType = 'danger';\n      this.descriptionType = 'danger';\n      this.labelText = 'Overdue';\n    } else if (days <= 7) {\n      this.labelType = 'warning';\n      this.descriptionType = 'important-warning';\n      this.labelText = 'Due soon';\n    } else {\n      this.labelType = 'info';\n      this.descriptionType = 'attention';\n      this.labelText = 'Incomplete';\n    }\n  }\n}\n"
+      "rawContents": "import { Component, Input } from '@angular/core';\nimport { SkyIndicatorDescriptionType, SkyLabelType } from '@skyux/indicators';\n\n@Component({\n  selector: 'app-label-demo',\n  templateUrl: './label-demo.component.html',\n})\nexport class LabelDemoComponent {\n  @Input()\n  public get daysUntilDue(): number {\n    return this.#_daysUntilDue;\n  }\n\n  public set daysUntilDue(days: number) {\n    this.#_daysUntilDue = days;\n    this.updateLabelProperties(this.submitted, days);\n  }\n\n  @Input()\n  public get submitted(): boolean {\n    return this.#_submitted;\n  }\n\n  public set submitted(submitted: boolean) {\n    this.#_submitted = submitted;\n    this.updateLabelProperties(submitted, this.daysUntilDue);\n  }\n\n  public labelType: SkyLabelType = 'info';\n  public descriptionType: SkyIndicatorDescriptionType = 'attention';\n  public labelText = 'Incomplete';\n  public todaysDate = new Date('9/14/22');\n  #_daysUntilDue = 14;\n  #_submitted = false;\n\n  private updateLabelProperties(submitted: boolean, days: number): void {\n    if (submitted) {\n      this.labelType = 'success';\n      this.descriptionType = 'completed';\n      this.labelText = 'Submitted';\n    } else if (days <= 0) {\n      this.labelType = 'danger';\n      this.descriptionType = 'danger';\n      this.labelText = 'Overdue';\n    } else if (days <= 7) {\n      this.labelType = 'warning';\n      this.descriptionType = 'important-warning';\n      this.labelText = 'Due soon';\n    } else {\n      this.labelType = 'info';\n      this.descriptionType = 'attention';\n      this.labelText = 'Incomplete';\n    }\n  }\n}\n"
     },
     {
       "fileName": "label-demo.module.ts",
@@ -8739,7 +8739,7 @@
     {
       "fileName": "text-highlight-demo.component.ts",
       "filePath": "/projects/indicators/documentation/code-examples/text-highlight/basic/text-highlight-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-text-highlight-demo',\n  templateUrl: './text-highlight-demo.component.html',\n})\nexport class TextHighlightDemoComponent {\n  public searchTerm: string;\n\n  public showAdditionalContent = false;\n}\n"
+      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-text-highlight-demo',\n  templateUrl: './text-highlight-demo.component.html',\n})\nexport class TextHighlightDemoComponent {\n  public searchTerm = '';\n\n  public showAdditionalContent = false;\n}\n"
     },
     {
       "fileName": "text-highlight-demo.module.ts",
@@ -8759,7 +8759,7 @@
     {
       "fileName": "tokens-demo.component.spec.ts",
       "filePath": "/projects/indicators/documentation/code-examples/tokens/basic/tokens-demo.component.spec.ts",
-      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkyToken } from '@skyux/indicators';\nimport { SkyTokensHarness } from '@skyux/indicators/testing';\n\nimport { TokensDemoColor } from './tokens-demo-color';\nimport { TokensDemoComponent } from './tokens-demo.component';\nimport { TokensDemoModule } from './tokens-demo.module';\n\ndescribe('Tokens basic demo', () => {\n  async function setupTest() {\n    const fixture = TestBed.createComponent(TokensDemoComponent);\n    const loader = TestbedHarnessEnvironment.loader(fixture);\n\n    const tokensHarness = await loader.getHarness(\n      SkyTokensHarness.with({ dataSkyId: 'color-tokens' })\n    );\n\n    return { tokensHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [NoopAnimationsModule, TokensDemoModule],\n    });\n  });\n\n  it('should display the expected initial tokens', async () => {\n    const { tokensHarness } = await setupTest();\n\n    await expectAsync(tokensHarness.getTokensText()).toBeResolvedTo([\n      'Red',\n      'Black',\n      'Blue',\n      'Brown',\n      'Green',\n      'Orange',\n      'Pink',\n      'Purple',\n      'Turquoise',\n      'White',\n      'Yellow',\n    ]);\n  });\n\n  it('should update the tokens array when one is dismissed', async () => {\n    const { tokensHarness, fixture } = await setupTest();\n\n    const blueToken: SkyToken<TokensDemoColor> = {\n      value: { name: 'Blue' },\n    };\n\n    expect(fixture.componentInstance.colors).toContain(blueToken);\n\n    await tokensHarness.dismissTokens({\n      text: 'Blue',\n    });\n\n    expect(fixture.componentInstance.colors).not.toContain(blueToken);\n  });\n});\n"
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkyToken } from '@skyux/indicators';\nimport { SkyTokensHarness } from '@skyux/indicators/testing';\n\nimport { TokensDemoColor } from './tokens-demo-color';\nimport { TokensDemoComponent } from './tokens-demo.component';\nimport { TokensDemoModule } from './tokens-demo.module';\n\ndescribe('Tokens basic demo', () => {\n  async function setupTest(): Promise<{\n    tokensHarness: SkyTokensHarness;\n    fixture: ComponentFixture<TokensDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(TokensDemoComponent);\n    const loader = TestbedHarnessEnvironment.loader(fixture);\n\n    const tokensHarness = await loader.getHarness(\n      SkyTokensHarness.with({ dataSkyId: 'color-tokens' })\n    );\n\n    return { tokensHarness, fixture };\n  }\n\n  beforeEach(() => {\n    TestBed.configureTestingModule({\n      imports: [NoopAnimationsModule, TokensDemoModule],\n    });\n  });\n\n  it('should display the expected initial tokens', async () => {\n    const { tokensHarness } = await setupTest();\n\n    await expectAsync(tokensHarness.getTokensText()).toBeResolvedTo([\n      'Red',\n      'Black',\n      'Blue',\n      'Brown',\n      'Green',\n      'Orange',\n      'Pink',\n      'Purple',\n      'Turquoise',\n      'White',\n      'Yellow',\n    ]);\n  });\n\n  it('should update the tokens array when one is dismissed', async () => {\n    const { tokensHarness, fixture } = await setupTest();\n\n    const blueToken: SkyToken<TokensDemoColor> = {\n      value: { name: 'Blue' },\n    };\n\n    expect(fixture.componentInstance.colors).toContain(blueToken);\n\n    await tokensHarness.dismissTokens({\n      text: 'Blue',\n    });\n\n    expect(fixture.componentInstance.colors).not.toContain(blueToken);\n  });\n});\n"
     },
     {
       "fileName": "tokens-demo.component.ts",
@@ -8784,12 +8784,12 @@
     {
       "fileName": "tokens-demo.component.spec.ts",
       "filePath": "/projects/indicators/documentation/code-examples/tokens/custom/tokens-demo.component.spec.ts",
-      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkyTokensHarness } from '@skyux/indicators/testing';\n\nimport { TokensDemoComponent } from './tokens-demo.component';\nimport { TokensDemoModule } from './tokens-demo.module';\n\ndescribe('Tokens basic demo', () => {\n  let initialTokenLabels: string[];\n\n  async function setupTest() {\n    const fixture = TestBed.createComponent(TokensDemoComponent);\n    const loader = TestbedHarnessEnvironment.loader(fixture);\n\n    const tokensHarness = await loader.getHarness(\n      SkyTokensHarness.with({ dataSkyId: 'demo-tokens' })\n    );\n\n    return { tokensHarness, fixture };\n  }\n\n  function clickButton(\n    fixture: ComponentFixture<TokensDemoComponent>,\n    buttonName: 'change' | 'destroy' | 'focus-last' | 'reset'\n  ): void {\n    fixture.nativeElement\n      .querySelector(`.tokens-demo-${buttonName}-btn`)\n      .click();\n  }\n\n  beforeEach(() => {\n    initialTokenLabels = [\n      'Canada',\n      'Older than 55',\n      'Employed',\n      'Added before 2018',\n    ];\n\n    TestBed.configureTestingModule({\n      imports: [NoopAnimationsModule, TokensDemoModule],\n    });\n  });\n\n  it('should display the expected initial tokens', async () => {\n    const { tokensHarness } = await setupTest();\n\n    await expectAsync(tokensHarness.getTokensText()).toBeResolvedTo(\n      initialTokenLabels\n    );\n  });\n\n  it('should display the selected token label when the user selects a token', async () => {\n    const { tokensHarness, fixture } = await setupTest();\n\n    const employedToken = (await tokensHarness.getTokens())[2];\n    await employedToken.select();\n\n    expect(\n      fixture.nativeElement.querySelector('.tokens-demo-selected').innerText\n    ).toBe('Employed');\n  });\n\n  it('should change tokens when the user clicks the \"Change tokens\" button', async () => {\n    const { tokensHarness, fixture } = await setupTest();\n\n    clickButton(fixture, 'change');\n\n    await expectAsync(tokensHarness.getTokensText()).toBeResolvedTo([\n      'Paid',\n      'Pending',\n      'Past due',\n    ]);\n  });\n\n  it('should reset tokens when the user clicks the \"Reset tokens\" button', async () => {\n    const { tokensHarness, fixture } = await setupTest();\n\n    clickButton(fixture, 'change');\n\n    await expectAsync(tokensHarness.getTokensText()).not.toBeResolvedTo(\n      initialTokenLabels\n    );\n\n    clickButton(fixture, 'reset');\n\n    await expectAsync(tokensHarness.getTokensText()).toBeResolvedTo(\n      initialTokenLabels\n    );\n  });\n\n  it('should destroy tokens when the user clicks the \"Destroy tokens\" button', async () => {\n    const { tokensHarness, fixture } = await setupTest();\n\n    clickButton(fixture, 'destroy');\n\n    await expectAsync(tokensHarness.getTokens()).toBeResolvedTo([]);\n  });\n\n  it('should focus the last token when the user clicks the \"Focus last token\" button', async () => {\n    const { tokensHarness, fixture } = await setupTest();\n\n    const tokens = await tokensHarness.getTokens();\n    const lastToken = tokens[tokens.length - 1];\n\n    await expectAsync(lastToken.isFocused()).toBeResolvedTo(false);\n\n    clickButton(fixture, 'focus-last');\n\n    await expectAsync(lastToken.isFocused()).toBeResolvedTo(true);\n  });\n});\n"
+      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkyTokensHarness } from '@skyux/indicators/testing';\n\nimport { TokensDemoComponent } from './tokens-demo.component';\nimport { TokensDemoModule } from './tokens-demo.module';\n\ndescribe('Tokens basic demo', () => {\n  let initialTokenLabels: string[];\n\n  async function setupTest(): Promise<{\n    tokensHarness: SkyTokensHarness;\n    fixture: ComponentFixture<TokensDemoComponent>;\n  }> {\n    const fixture = TestBed.createComponent(TokensDemoComponent);\n    const loader = TestbedHarnessEnvironment.loader(fixture);\n\n    const tokensHarness = await loader.getHarness(\n      SkyTokensHarness.with({ dataSkyId: 'demo-tokens' })\n    );\n\n    return { tokensHarness, fixture };\n  }\n\n  function clickButton(\n    fixture: ComponentFixture<TokensDemoComponent>,\n    buttonName: 'change' | 'destroy' | 'focus-last' | 'reset'\n  ): void {\n    fixture.nativeElement\n      .querySelector(`.tokens-demo-${buttonName}-btn`)\n      .click();\n  }\n\n  beforeEach(() => {\n    initialTokenLabels = [\n      'Canada',\n      'Older than 55',\n      'Employed',\n      'Added before 2018',\n    ];\n\n    TestBed.configureTestingModule({\n      imports: [NoopAnimationsModule, TokensDemoModule],\n    });\n  });\n\n  it('should display the expected initial tokens', async () => {\n    const { tokensHarness } = await setupTest();\n\n    await expectAsync(tokensHarness.getTokensText()).toBeResolvedTo(\n      initialTokenLabels\n    );\n  });\n\n  it('should display the selected token label when the user selects a token', async () => {\n    const { tokensHarness, fixture } = await setupTest();\n\n    const employedToken = (await tokensHarness.getTokens())[2];\n    await employedToken.select();\n\n    expect(\n      fixture.nativeElement.querySelector('.tokens-demo-selected').innerText\n    ).toBe('Employed');\n  });\n\n  it('should change tokens when the user clicks the \"Change tokens\" button', async () => {\n    const { tokensHarness, fixture } = await setupTest();\n\n    clickButton(fixture, 'change');\n\n    await expectAsync(tokensHarness.getTokensText()).toBeResolvedTo([\n      'Paid',\n      'Pending',\n      'Past due',\n    ]);\n  });\n\n  it('should reset tokens when the user clicks the \"Reset tokens\" button', async () => {\n    const { tokensHarness, fixture } = await setupTest();\n\n    clickButton(fixture, 'change');\n\n    await expectAsync(tokensHarness.getTokensText()).not.toBeResolvedTo(\n      initialTokenLabels\n    );\n\n    clickButton(fixture, 'reset');\n\n    await expectAsync(tokensHarness.getTokensText()).toBeResolvedTo(\n      initialTokenLabels\n    );\n  });\n\n  it('should destroy tokens when the user clicks the \"Destroy tokens\" button', async () => {\n    const { tokensHarness, fixture } = await setupTest();\n\n    clickButton(fixture, 'destroy');\n\n    await expectAsync(tokensHarness.getTokens()).toBeResolvedTo([]);\n  });\n\n  it('should focus the last token when the user clicks the \"Focus last token\" button', async () => {\n    const { tokensHarness, fixture } = await setupTest();\n\n    const tokens = await tokensHarness.getTokens();\n    const lastToken = tokens[tokens.length - 1];\n\n    await expectAsync(lastToken.isFocused()).toBeResolvedTo(false);\n\n    clickButton(fixture, 'focus-last');\n\n    await expectAsync(lastToken.isFocused()).toBeResolvedTo(true);\n  });\n});\n"
     },
     {
       "fileName": "tokens-demo.component.ts",
       "filePath": "/projects/indicators/documentation/code-examples/tokens/custom/tokens-demo.component.ts",
-      "rawContents": "import { Component, OnDestroy } from '@angular/core';\nimport {\n  SkyToken,\n  SkyTokenSelectedEventArgs,\n  SkyTokensMessage,\n  SkyTokensMessageType,\n} from '@skyux/indicators';\n\nimport { Subject } from 'rxjs';\n\nimport { TokensDemoItem } from './tokens-demo-item';\n\n@Component({\n  selector: 'app-tokens-demo',\n  templateUrl: './tokens-demo.component.html',\n})\nexport class TokensDemoComponent implements OnDestroy {\n  public myTokens: SkyToken<TokensDemoItem>[];\n  public tokensController = new Subject<SkyTokensMessage>();\n  public selectedToken = '';\n\n  #defaultItems: TokensDemoItem[] = [\n    { label: 'Canada' },\n    { label: 'Older than 55' },\n    { label: 'Employed' },\n    { label: 'Added before 2018' },\n  ];\n\n  constructor() {\n    this.myTokens = this.#getTokens(this.#defaultItems);\n  }\n\n  public ngOnDestroy(): void {\n    this.tokensController.complete();\n  }\n\n  public resetTokens(): void {\n    this.createTokens();\n  }\n\n  public changeTokens(): void {\n    this.myTokens = this.#getTokens([\n      { label: 'Paid' },\n      { label: 'Pending' },\n      { label: 'Past due' },\n    ]);\n  }\n\n  public destroyTokens(): void {\n    this.myTokens = undefined;\n  }\n\n  public createTokens(): void {\n    this.myTokens = this.#getTokens(this.#defaultItems);\n  }\n\n  public onTokenSelected(\n    args: SkyTokenSelectedEventArgs<TokensDemoItem>\n  ): void {\n    this.selectedToken = args.token.value.label;\n  }\n\n  public onFocusIndexUnderRange(): void {\n    console.log('Focus index was less than zero.');\n  }\n\n  public onFocusIndexOverRange(): void {\n    console.log('Focus index was greater than the number of tokens.');\n  }\n\n  public focusLastToken(): void {\n    this.tokensController.next({\n      type: SkyTokensMessageType.FocusLastToken,\n    });\n  }\n\n  #getTokens(data: TokensDemoItem[]): SkyToken<TokensDemoItem>[] {\n    return data.map((item) => {\n      return {\n        value: item,\n      };\n    });\n  }\n}\n"
+      "rawContents": "import { Component, OnDestroy } from '@angular/core';\nimport {\n  SkyToken,\n  SkyTokenSelectedEventArgs,\n  SkyTokensMessage,\n  SkyTokensMessageType,\n} from '@skyux/indicators';\n\nimport { Subject } from 'rxjs';\n\nimport { TokensDemoItem } from './tokens-demo-item';\n\n@Component({\n  selector: 'app-tokens-demo',\n  templateUrl: './tokens-demo.component.html',\n})\nexport class TokensDemoComponent implements OnDestroy {\n  public myTokens: SkyToken<TokensDemoItem>[] | undefined;\n  public tokensController = new Subject<SkyTokensMessage>();\n  public selectedToken: string | undefined = '';\n\n  #defaultItems: TokensDemoItem[] = [\n    { label: 'Canada' },\n    { label: 'Older than 55' },\n    { label: 'Employed' },\n    { label: 'Added before 2018' },\n  ];\n\n  constructor() {\n    this.myTokens = this.#getTokens(this.#defaultItems);\n  }\n\n  public ngOnDestroy(): void {\n    this.tokensController.complete();\n  }\n\n  public resetTokens(): void {\n    this.createTokens();\n  }\n\n  public changeTokens(): void {\n    this.myTokens = this.#getTokens([\n      { label: 'Paid' },\n      { label: 'Pending' },\n      { label: 'Past due' },\n    ]);\n  }\n\n  public destroyTokens(): void {\n    this.myTokens = undefined;\n  }\n\n  public createTokens(): void {\n    this.myTokens = this.#getTokens(this.#defaultItems);\n  }\n\n  public onTokenSelected(\n    args: SkyTokenSelectedEventArgs<TokensDemoItem>\n  ): void {\n    this.selectedToken = args.token?.value.label;\n  }\n\n  public onFocusIndexUnderRange(): void {\n    console.log('Focus index was less than zero.');\n  }\n\n  public onFocusIndexOverRange(): void {\n    console.log('Focus index was greater than the number of tokens.');\n  }\n\n  public focusLastToken(): void {\n    this.tokensController.next({\n      type: SkyTokensMessageType.FocusLastToken,\n    });\n  }\n\n  #getTokens(data: TokensDemoItem[]): SkyToken<TokensDemoItem>[] {\n    return data.map((item) => {\n      return {\n        value: item,\n      };\n    });\n  }\n}\n"
     },
     {
       "fileName": "tokens-demo.module.ts",

package/esm2020/lib/modules/alert/alert.component.mjs

@@ -94,10 +94,10 @@ _SkyAlertComponent__descriptionType = new WeakMap(), _SkyAlertComponent__customD
     }
 };
 SkyAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyAlertComponent, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
-SkyAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyAlertComponent, selector: "sky-alert", inputs: { alertType: "alertType", closeable: "closeable", closed: "closed", descriptionType: "descriptionType", customDescription: "customDescription" }, outputs: { closedChange: "closedChange" }, ngImport: i0, template: "<div\n  class=\"sky-alert\"\n  [skyThemeClass]=\"{\n    'sky-rounded-corners': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  role=\"alert\"\n  [hidden]=\"closed\"\n  [ngClass]=\"{\n    'sky-alert-info': alertTypeOrDefault === 'info',\n    'sky-alert-success': alertTypeOrDefault === 'success',\n    'sky-alert-warning': alertTypeOrDefault === 'warning',\n    'sky-alert-danger': alertTypeOrDefault === 'danger',\n    'sky-alert-closeable': closeable\n  }\"\n>\n  <div aria-hidden=\"true\" class=\"sky-alert-icon-theme-modern\">\n    <sky-icon-stack [baseIcon]=\"alertBaseIcon\" [topIcon]=\"alertTopIcon\">\n    </sky-icon-stack>\n  </div>\n  <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n    {{ descriptionComputed }}\n  </span>\n  <div class=\"sky-alert-content\">\n    <ng-content></ng-content>\n  </div>\n  <button\n    class=\"sky-alert-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n    [hidden]=\"!closeable\"\n    (click)=\"close()\"\n  >\n    <span aria-hidden=\"true\">\n      <sky-icon class=\"sky-alert-close-icon-theme-default\" icon=\"close\">\n      </sky-icon>\n      <sky-icon\n        class=\"sky-alert-close-icon-theme-modern\"\n        icon=\"close\"\n        iconType=\"skyux\"\n        size=\"2x\"\n      >\n      </sky-icon>\n    </span>\n  </button>\n</div>\n", styles: [".sky-alert{--sky-alert-before-display: initial;--sky-alert-border-left-width: 30px;--sky-alert-close-icon-default-display: initial;--sky-alert-close-icon-modern-display: none;--sky-alert-content-padding-top-bottom: 10px;--sky-alert-content-padding-left-right: 0;--sky-alert-icon-default-display: initial;--sky-alert-icon-modern-display: none;--sky-alert-info-background-color: var(--sky-background-color-info)}:host-context(.sky-theme-modern) .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-theme-modern .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-alert{padding:0 10px;border-left:solid var(--sky-alert-border-left-width);color:var(--sky-text-color-default);display:flex;flex-direction:row;align-items:center}.sky-alert .sky-alert-content{padding:var(--sky-alert-content-padding-top-bottom) var(--sky-alert-content-padding-left-right);width:100%}.sky-alert .sky-alert-content ::ng-deep a{color:#212327cc;text-decoration:underline}.sky-alert .sky-alert-content ::ng-deep a:hover{color:var(--sky-text-color-default)}.sky-alert button{margin-left:auto;width:32px;height:32px}.sky-alert.sky-alert-info:before,.sky-alert.sky-alert-success:before,.sky-alert.sky-alert-warning:before,.sky-alert.sky-alert-danger:before{font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff;display:var(--sky-alert-before-display)}.sky-alert.sky-alert-info{background-color:var(--sky-alert-info-background-color);border-color:var(--sky-highlight-color-info)}.sky-alert.sky-alert-info:before{content:\"\\f06a\";margin-left:-31px;margin-right:20px}.sky-alert.sky-alert-success{background-color:var(--sky-background-color-success);border-color:var(--sky-highlight-color-success)}.sky-alert.sky-alert-success:before{content:\"\\f00c\"}.sky-alert.sky-alert-warning{background-color:var(--sky-background-color-warning);border-color:var(--sky-highlight-color-warning)}.sky-alert.sky-alert-warning:before{content:\"\\f071\"}.sky-alert.sky-alert-danger{background-color:var(--sky-background-color-danger);border-color:var(--sky-highlight-color-danger)}.sky-alert.sky-alert-danger:before{content:\"\\f071\"}.sky-alert-close{cursor:pointer;font-weight:700;line-height:1;margin:0;padding:0;color:var(--sky-text-color-default);opacity:.8;border:none;background-color:transparent;display:none}.sky-alert-close:hover{opacity:1}.sky-alert-closeable .sky-alert-close{display:block}.sky-alert-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-icon-theme-modern{display:var(--sky-alert-icon-modern-display)}.sky-alert-close-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-close-icon-theme-modern{display:var(--sky-alert-close-icon-modern-display)}.sky-alert-info .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-info)}.sky-alert-success .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-success)}.sky-alert-warning .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-warning)}.sky-alert-danger .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-danger)}\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: i3.SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i4.SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }] });
+SkyAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyAlertComponent, selector: "sky-alert", inputs: { alertType: "alertType", closeable: "closeable", closed: "closed", descriptionType: "descriptionType", customDescription: "customDescription" }, outputs: { closedChange: "closedChange" }, ngImport: i0, template: "<div\n  class=\"sky-alert\"\n  [skyThemeClass]=\"{\n    'sky-rounded-corners': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  role=\"alert\"\n  [hidden]=\"closed\"\n  [ngClass]=\"{\n    'sky-alert-info': alertTypeOrDefault === 'info',\n    'sky-alert-success': alertTypeOrDefault === 'success',\n    'sky-alert-warning': alertTypeOrDefault === 'warning',\n    'sky-alert-danger': alertTypeOrDefault === 'danger',\n    'sky-alert-closeable': closeable\n  }\"\n>\n  <div aria-hidden=\"true\" class=\"sky-alert-icon-theme-modern\">\n    <sky-icon-stack [baseIcon]=\"alertBaseIcon\" [topIcon]=\"alertTopIcon\">\n    </sky-icon-stack>\n  </div>\n  <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n    {{ descriptionComputed }}\n  </span>\n  <div class=\"sky-alert-content\">\n    <ng-content></ng-content>\n  </div>\n  <button\n    class=\"sky-alert-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n    [hidden]=\"!closeable\"\n    (click)=\"close()\"\n  >\n    <span aria-hidden=\"true\">\n      <sky-icon class=\"sky-alert-close-icon-theme-default\" icon=\"close\">\n      </sky-icon>\n      <sky-icon\n        class=\"sky-alert-close-icon-theme-modern\"\n        icon=\"close\"\n        iconType=\"skyux\"\n        size=\"2x\"\n      >\n      </sky-icon>\n    </span>\n  </button>\n</div>\n", styles: [".sky-alert{--sky-alert-before-display: initial;--sky-alert-border-left-width: 30px;--sky-alert-close-icon-default-display: initial;--sky-alert-close-icon-modern-display: none;--sky-alert-content-padding-top-bottom: 10px;--sky-alert-content-padding-left-right: 0;--sky-alert-icon-default-display: initial;--sky-alert-icon-modern-display: none;--sky-alert-info-background-color: var(--sky-background-color-info)}:host-context(.sky-theme-modern) .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-theme-modern .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-alert{padding:0 10px;border-left:solid var(--sky-alert-border-left-width);color:var(--sky-text-color-default);display:flex;flex-direction:row;align-items:center}.sky-alert .sky-alert-content{padding:var(--sky-alert-content-padding-top-bottom) var(--sky-alert-content-padding-left-right);width:100%}.sky-alert .sky-alert-content ::ng-deep a{color:#212327cc;text-decoration:underline}.sky-alert .sky-alert-content ::ng-deep a:hover{color:var(--sky-text-color-default)}.sky-alert button{margin-left:auto;width:32px;height:32px}.sky-alert.sky-alert-info:before,.sky-alert.sky-alert-success:before,.sky-alert.sky-alert-warning:before,.sky-alert.sky-alert-danger:before{font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff;display:var(--sky-alert-before-display)}.sky-alert:not(.sky-alert-danger){--sky-icon-stack-top-icon-color-override: #212327}.sky-alert.sky-alert-info{background-color:var(--sky-alert-info-background-color);border-color:var(--sky-highlight-color-info)}.sky-alert.sky-alert-info:before{content:\"\\f06a\";margin-left:-31px;margin-right:20px}.sky-alert.sky-alert-success{background-color:var(--sky-background-color-success);border-color:var(--sky-highlight-color-success)}.sky-alert.sky-alert-success:before{content:\"\\f00c\"}.sky-alert.sky-alert-warning{background-color:var(--sky-background-color-warning);border-color:var(--sky-highlight-color-warning)}.sky-alert.sky-alert-warning:before{content:\"\\f071\"}.sky-alert.sky-alert-danger{background-color:var(--sky-background-color-danger);border-color:var(--sky-highlight-color-danger)}.sky-alert.sky-alert-danger:before{content:\"\\f071\"}.sky-alert-close{cursor:pointer;font-weight:700;line-height:1;margin:0;padding:0;color:var(--sky-text-color-default);opacity:.8;border:none;background-color:transparent;display:none}.sky-alert-close:hover{opacity:1}.sky-alert-closeable .sky-alert-close{display:block}.sky-alert-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-icon-theme-modern{display:var(--sky-alert-icon-modern-display)}.sky-alert-close-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-close-icon-theme-modern{display:var(--sky-alert-close-icon-modern-display)}.sky-alert-info .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-info)}.sky-alert-success .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-success)}.sky-alert-warning .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-warning)}.sky-alert-danger .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-danger)}\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: i3.SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i4.SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }, { kind: "directive", type: i5.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-alert', template: "<div\n  class=\"sky-alert\"\n  [skyThemeClass]=\"{\n    'sky-rounded-corners': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  role=\"alert\"\n  [hidden]=\"closed\"\n  [ngClass]=\"{\n    'sky-alert-info': alertTypeOrDefault === 'info',\n    'sky-alert-success': alertTypeOrDefault === 'success',\n    'sky-alert-warning': alertTypeOrDefault === 'warning',\n    'sky-alert-danger': alertTypeOrDefault === 'danger',\n    'sky-alert-closeable': closeable\n  }\"\n>\n  <div aria-hidden=\"true\" class=\"sky-alert-icon-theme-modern\">\n    <sky-icon-stack [baseIcon]=\"alertBaseIcon\" [topIcon]=\"alertTopIcon\">\n    </sky-icon-stack>\n  </div>\n  <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n    {{ descriptionComputed }}\n  </span>\n  <div class=\"sky-alert-content\">\n    <ng-content></ng-content>\n  </div>\n  <button\n    class=\"sky-alert-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n    [hidden]=\"!closeable\"\n    (click)=\"close()\"\n  >\n    <span aria-hidden=\"true\">\n      <sky-icon class=\"sky-alert-close-icon-theme-default\" icon=\"close\">\n      </sky-icon>\n      <sky-icon\n        class=\"sky-alert-close-icon-theme-modern\"\n        icon=\"close\"\n        iconType=\"skyux\"\n        size=\"2x\"\n      >\n      </sky-icon>\n    </span>\n  </button>\n</div>\n", styles: [".sky-alert{--sky-alert-before-display: initial;--sky-alert-border-left-width: 30px;--sky-alert-close-icon-default-display: initial;--sky-alert-close-icon-modern-display: none;--sky-alert-content-padding-top-bottom: 10px;--sky-alert-content-padding-left-right: 0;--sky-alert-icon-default-display: initial;--sky-alert-icon-modern-display: none;--sky-alert-info-background-color: var(--sky-background-color-info)}:host-context(.sky-theme-modern) .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-theme-modern .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-alert{padding:0 10px;border-left:solid var(--sky-alert-border-left-width);color:var(--sky-text-color-default);display:flex;flex-direction:row;align-items:center}.sky-alert .sky-alert-content{padding:var(--sky-alert-content-padding-top-bottom) var(--sky-alert-content-padding-left-right);width:100%}.sky-alert .sky-alert-content ::ng-deep a{color:#212327cc;text-decoration:underline}.sky-alert .sky-alert-content ::ng-deep a:hover{color:var(--sky-text-color-default)}.sky-alert button{margin-left:auto;width:32px;height:32px}.sky-alert.sky-alert-info:before,.sky-alert.sky-alert-success:before,.sky-alert.sky-alert-warning:before,.sky-alert.sky-alert-danger:before{font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff;display:var(--sky-alert-before-display)}.sky-alert.sky-alert-info{background-color:var(--sky-alert-info-background-color);border-color:var(--sky-highlight-color-info)}.sky-alert.sky-alert-info:before{content:\"\\f06a\";margin-left:-31px;margin-right:20px}.sky-alert.sky-alert-success{background-color:var(--sky-background-color-success);border-color:var(--sky-highlight-color-success)}.sky-alert.sky-alert-success:before{content:\"\\f00c\"}.sky-alert.sky-alert-warning{background-color:var(--sky-background-color-warning);border-color:var(--sky-highlight-color-warning)}.sky-alert.sky-alert-warning:before{content:\"\\f071\"}.sky-alert.sky-alert-danger{background-color:var(--sky-background-color-danger);border-color:var(--sky-highlight-color-danger)}.sky-alert.sky-alert-danger:before{content:\"\\f071\"}.sky-alert-close{cursor:pointer;font-weight:700;line-height:1;margin:0;padding:0;color:var(--sky-text-color-default);opacity:.8;border:none;background-color:transparent;display:none}.sky-alert-close:hover{opacity:1}.sky-alert-closeable .sky-alert-close{display:block}.sky-alert-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-icon-theme-modern{display:var(--sky-alert-icon-modern-display)}.sky-alert-close-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-close-icon-theme-modern{display:var(--sky-alert-close-icon-modern-display)}.sky-alert-info .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-info)}.sky-alert-success .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-success)}.sky-alert-warning .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-warning)}.sky-alert-danger .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-danger)}\n"] }]
+            args: [{ selector: 'sky-alert', template: "<div\n  class=\"sky-alert\"\n  [skyThemeClass]=\"{\n    'sky-rounded-corners': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  role=\"alert\"\n  [hidden]=\"closed\"\n  [ngClass]=\"{\n    'sky-alert-info': alertTypeOrDefault === 'info',\n    'sky-alert-success': alertTypeOrDefault === 'success',\n    'sky-alert-warning': alertTypeOrDefault === 'warning',\n    'sky-alert-danger': alertTypeOrDefault === 'danger',\n    'sky-alert-closeable': closeable\n  }\"\n>\n  <div aria-hidden=\"true\" class=\"sky-alert-icon-theme-modern\">\n    <sky-icon-stack [baseIcon]=\"alertBaseIcon\" [topIcon]=\"alertTopIcon\">\n    </sky-icon-stack>\n  </div>\n  <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n    {{ descriptionComputed }}\n  </span>\n  <div class=\"sky-alert-content\">\n    <ng-content></ng-content>\n  </div>\n  <button\n    class=\"sky-alert-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n    [hidden]=\"!closeable\"\n    (click)=\"close()\"\n  >\n    <span aria-hidden=\"true\">\n      <sky-icon class=\"sky-alert-close-icon-theme-default\" icon=\"close\">\n      </sky-icon>\n      <sky-icon\n        class=\"sky-alert-close-icon-theme-modern\"\n        icon=\"close\"\n        iconType=\"skyux\"\n        size=\"2x\"\n      >\n      </sky-icon>\n    </span>\n  </button>\n</div>\n", styles: [".sky-alert{--sky-alert-before-display: initial;--sky-alert-border-left-width: 30px;--sky-alert-close-icon-default-display: initial;--sky-alert-close-icon-modern-display: none;--sky-alert-content-padding-top-bottom: 10px;--sky-alert-content-padding-left-right: 0;--sky-alert-icon-default-display: initial;--sky-alert-icon-modern-display: none;--sky-alert-info-background-color: var(--sky-background-color-info)}:host-context(.sky-theme-modern) .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-theme-modern .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-alert{padding:0 10px;border-left:solid var(--sky-alert-border-left-width);color:var(--sky-text-color-default);display:flex;flex-direction:row;align-items:center}.sky-alert .sky-alert-content{padding:var(--sky-alert-content-padding-top-bottom) var(--sky-alert-content-padding-left-right);width:100%}.sky-alert .sky-alert-content ::ng-deep a{color:#212327cc;text-decoration:underline}.sky-alert .sky-alert-content ::ng-deep a:hover{color:var(--sky-text-color-default)}.sky-alert button{margin-left:auto;width:32px;height:32px}.sky-alert.sky-alert-info:before,.sky-alert.sky-alert-success:before,.sky-alert.sky-alert-warning:before,.sky-alert.sky-alert-danger:before{font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff;display:var(--sky-alert-before-display)}.sky-alert:not(.sky-alert-danger){--sky-icon-stack-top-icon-color-override: #212327}.sky-alert.sky-alert-info{background-color:var(--sky-alert-info-background-color);border-color:var(--sky-highlight-color-info)}.sky-alert.sky-alert-info:before{content:\"\\f06a\";margin-left:-31px;margin-right:20px}.sky-alert.sky-alert-success{background-color:var(--sky-background-color-success);border-color:var(--sky-highlight-color-success)}.sky-alert.sky-alert-success:before{content:\"\\f00c\"}.sky-alert.sky-alert-warning{background-color:var(--sky-background-color-warning);border-color:var(--sky-highlight-color-warning)}.sky-alert.sky-alert-warning:before{content:\"\\f071\"}.sky-alert.sky-alert-danger{background-color:var(--sky-background-color-danger);border-color:var(--sky-highlight-color-danger)}.sky-alert.sky-alert-danger:before{content:\"\\f071\"}.sky-alert-close{cursor:pointer;font-weight:700;line-height:1;margin:0;padding:0;color:var(--sky-text-color-default);opacity:.8;border:none;background-color:transparent;display:none}.sky-alert-close:hover{opacity:1}.sky-alert-closeable .sky-alert-close{display:block}.sky-alert-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-icon-theme-modern{display:var(--sky-alert-icon-modern-display)}.sky-alert-close-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-close-icon-theme-modern{display:var(--sky-alert-close-icon-modern-display)}.sky-alert-info .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-info)}.sky-alert-success .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-success)}.sky-alert-warning .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-warning)}.sky-alert-danger .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-danger)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.SkyLibResourcesService }]; }, propDecorators: { alertType: [{
                 type: Input
             }], closeable: [{

package/esm2020/lib/modules/icon/icon-stack.component.mjs

@@ -8,10 +8,10 @@ import * as i2 from "./icon-class-list.pipe";
 export class SkyIconStackComponent {
 }
 SkyIconStackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyIconStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyIconStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: { size: "size", baseIcon: "baseIcon", topIcon: "topIcon" }, ngImport: i0, template: "<span\n  aria-hidden=\"true\"\n  class=\"sky-icon-stack fa-stack\"\n  [ngClass]=\"size ? 'fa-' + size + ' sky-icon-stack-size-' + size : ''\"\n>\n  <i\n    *ngIf=\"baseIcon\"\n    class=\"sky-icon fa-stack-2x\"\n    [ngClass]=\"baseIcon.icon | skyIconClassList: baseIcon.iconType\"\n  ></i>\n  <i\n    *ngIf=\"topIcon\"\n    class=\"sky-icon fa-stack-1x fa-inverse sky-icon-inverse\"\n    [ngClass]=\"topIcon.icon | skyIconClassList: topIcon.iconType\"\n  ></i>\n</span>\n", styles: [":host{display:inline-block;vertical-align:bottom}.sky-icon-stack-size-xs.fa-stack{width:1.25em;height:1.25em;line-height:1.25em}.sky-icon-stack-size-xs .fa-stack-2x{font-size:1.25em}.sky-icon-stack-size-xs .fa-stack-1x{font-size:.625em}.fa-stack-1x.sky-i-check:before{position:relative;top:1px}.fa-stack-1x.sky-i-exclamation:before{position:relative;top:2px;left:-.5px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-icon-inverse{color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-icon-inverse{color:#121212}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SkyIconClassListPipe, name: "skyIconClassList" }] });
+SkyIconStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: { size: "size", baseIcon: "baseIcon", topIcon: "topIcon" }, ngImport: i0, template: "<span\n  aria-hidden=\"true\"\n  class=\"sky-icon-stack fa-stack\"\n  [ngClass]=\"size ? 'fa-' + size + ' sky-icon-stack-size-' + size : ''\"\n>\n  <i\n    *ngIf=\"baseIcon\"\n    class=\"sky-icon fa-stack-2x\"\n    [ngClass]=\"baseIcon.icon | skyIconClassList: baseIcon.iconType\"\n  ></i>\n  <i\n    *ngIf=\"topIcon\"\n    class=\"sky-icon fa-stack-1x fa-inverse sky-icon-inverse\"\n    [ngClass]=\"topIcon.icon | skyIconClassList: topIcon.iconType\"\n  ></i>\n</span>\n", styles: [":host{display:inline-block;vertical-align:bottom}.sky-icon-stack-size-xs.fa-stack{width:1.25em;height:1.25em;line-height:1.25em}.sky-icon-stack-size-xs .fa-stack-2x{font-size:1.25em}.sky-icon-stack-size-xs .fa-stack-1x{font-size:.625em}.fa-stack-1x.sky-i-check:before{position:relative;top:1px}.fa-stack-1x.sky-i-exclamation:before{position:relative;top:2px;left:-.5px}.sky-icon-inverse{color:var(--sky-icon-stack-top-icon-color-override, #ffffff)}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-icon-inverse{color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-icon-inverse{color:#121212}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.SkyIconClassListPipe, name: "skyIconClassList" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyIconStackComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-icon-stack', template: "<span\n  aria-hidden=\"true\"\n  class=\"sky-icon-stack fa-stack\"\n  [ngClass]=\"size ? 'fa-' + size + ' sky-icon-stack-size-' + size : ''\"\n>\n  <i\n    *ngIf=\"baseIcon\"\n    class=\"sky-icon fa-stack-2x\"\n    [ngClass]=\"baseIcon.icon | skyIconClassList: baseIcon.iconType\"\n  ></i>\n  <i\n    *ngIf=\"topIcon\"\n    class=\"sky-icon fa-stack-1x fa-inverse sky-icon-inverse\"\n    [ngClass]=\"topIcon.icon | skyIconClassList: topIcon.iconType\"\n  ></i>\n</span>\n", styles: [":host{display:inline-block;vertical-align:bottom}.sky-icon-stack-size-xs.fa-stack{width:1.25em;height:1.25em;line-height:1.25em}.sky-icon-stack-size-xs .fa-stack-2x{font-size:1.25em}.sky-icon-stack-size-xs .fa-stack-1x{font-size:.625em}.fa-stack-1x.sky-i-check:before{position:relative;top:1px}.fa-stack-1x.sky-i-exclamation:before{position:relative;top:2px;left:-.5px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-icon-inverse{color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-icon-inverse{color:#121212}\n"] }]
+            args: [{ selector: 'sky-icon-stack', template: "<span\n  aria-hidden=\"true\"\n  class=\"sky-icon-stack fa-stack\"\n  [ngClass]=\"size ? 'fa-' + size + ' sky-icon-stack-size-' + size : ''\"\n>\n  <i\n    *ngIf=\"baseIcon\"\n    class=\"sky-icon fa-stack-2x\"\n    [ngClass]=\"baseIcon.icon | skyIconClassList: baseIcon.iconType\"\n  ></i>\n  <i\n    *ngIf=\"topIcon\"\n    class=\"sky-icon fa-stack-1x fa-inverse sky-icon-inverse\"\n    [ngClass]=\"topIcon.icon | skyIconClassList: topIcon.iconType\"\n  ></i>\n</span>\n", styles: [":host{display:inline-block;vertical-align:bottom}.sky-icon-stack-size-xs.fa-stack{width:1.25em;height:1.25em;line-height:1.25em}.sky-icon-stack-size-xs .fa-stack-2x{font-size:1.25em}.sky-icon-stack-size-xs .fa-stack-1x{font-size:.625em}.fa-stack-1x.sky-i-check:before{position:relative;top:1px}.fa-stack-1x.sky-i-exclamation:before{position:relative;top:2px;left:-.5px}.sky-icon-inverse{color:var(--sky-icon-stack-top-icon-color-override, #ffffff)}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-icon-inverse{color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-icon-inverse{color:#121212}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], baseIcon: [{

package/esm2020/lib/modules/key-info/key-info.component.mjs

@@ -13,10 +13,10 @@ export class SkyKeyInfoComponent {
     }
 }
 SkyKeyInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyKeyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyKeyInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyKeyInfoComponent, selector: "sky-key-info", inputs: { layout: "layout" }, ngImport: i0, template: "<div\n  class=\"sky-key-info\"\n  [ngClass]=\"{\n    'sky-key-info-horizontal': layout === 'horizontal'\n  }\"\n>\n  <div class=\"sky-key-info-value sky-headline\">\n    <ng-content select=\"sky-key-info-value\"> </ng-content>\n  </div>\n  <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n    <span skyTrim><ng-content select=\"sky-key-info-label\"></ng-content></span\n    ><span class=\"sky-control-help-container\"\n      ><ng-content select=\".sky-control-help\"></ng-content\n    ></span>\n  </div>\n</div>\n", styles: [".sky-key-info,.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}:host-context(.sky-theme-modern) .sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}.sky-theme-modern .sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.λ4, selector: "[skyTrim]" }] });
+SkyKeyInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyKeyInfoComponent, selector: "sky-key-info", inputs: { layout: "layout" }, ngImport: i0, template: "<div\n  class=\"sky-key-info\"\n  [ngClass]=\"{\n    'sky-key-info-horizontal': layout === 'horizontal'\n  }\"\n>\n  <div class=\"sky-key-info-value sky-headline\">\n    <ng-content select=\"sky-key-info-value\"> </ng-content>\n  </div>\n  <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n    <span skyTrim><ng-content select=\"sky-key-info-label\"></ng-content></span\n    ><span class=\"sky-control-help-container\"\n      ><ng-content select=\".sky-control-help\"></ng-content\n    ></span>\n  </div>\n</div>\n", styles: [".sky-key-info,.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 var(--sky-margin-inline-xs)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.λ4, selector: "[skyTrim]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyKeyInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-key-info', template: "<div\n  class=\"sky-key-info\"\n  [ngClass]=\"{\n    'sky-key-info-horizontal': layout === 'horizontal'\n  }\"\n>\n  <div class=\"sky-key-info-value sky-headline\">\n    <ng-content select=\"sky-key-info-value\"> </ng-content>\n  </div>\n  <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n    <span skyTrim><ng-content select=\"sky-key-info-label\"></ng-content></span\n    ><span class=\"sky-control-help-container\"\n      ><ng-content select=\".sky-control-help\"></ng-content\n    ></span>\n  </div>\n</div>\n", styles: [".sky-key-info,.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}:host-context(.sky-theme-modern) .sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}.sky-theme-modern .sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}\n"] }]
+            args: [{ selector: 'sky-key-info', template: "<div\n  class=\"sky-key-info\"\n  [ngClass]=\"{\n    'sky-key-info-horizontal': layout === 'horizontal'\n  }\"\n>\n  <div class=\"sky-key-info-value sky-headline\">\n    <ng-content select=\"sky-key-info-value\"> </ng-content>\n  </div>\n  <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n    <span skyTrim><ng-content select=\"sky-key-info-label\"></ng-content></span\n    ><span class=\"sky-control-help-container\"\n      ><ng-content select=\".sky-control-help\"></ng-content\n    ></span>\n  </div>\n</div>\n", styles: [".sky-key-info,.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 var(--sky-margin-inline-xs)}\n"] }]
         }], propDecorators: { layout: [{
                 type: Input
             }] } });

package/esm2020/lib/modules/label/label.component.mjs

@@ -86,10 +86,10 @@ _SkyLabelComponent__descriptionType = new WeakMap(), _SkyLabelComponent__customD
     }
 };
 SkyLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyLabelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
-SkyLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyLabelComponent, selector: "sky-label", inputs: { labelType: "labelType", descriptionType: "descriptionType", customDescription: "customDescription" }, ngImport: i0, template: "<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelTypeOrDefault\">\n  <span class=\"sky-label-icon-theme-default\">\n    <sky-icon [icon]=\"icon\"></sky-icon>\n  </span>\n  <span class=\"sky-label-icon-theme-modern\">\n    <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n    </sky-icon-stack>\n  </span>\n  <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n    {{ descriptionComputed }}\n  </span>\n  <span class=\"sky-label-text\">\n    <ng-content></ng-content>\n  </span>\n</span>\n", styles: [".sky-label{color:#212327;display:inline;border-radius:10rem;font-weight:400;line-height:2.2;margin:0 3px;padding:.3em .6em;white-space:nowrap}.sky-label-success{background-color:#b7da9b}.sky-label-info{background-color:#81d4f7}.sky-label-warning{background-color:#ffd597}.sky-label-danger{background-color:#f7a08f}.sky-label-text{display:inline-block;padding-left:5px}.sky-label-icon-theme-modern{display:none}:host-context(.sky-theme-modern) .sky-label{align-items:center;display:inline-flex;line-height:1}:host-context(.sky-theme-modern) .sky-label.sky-label-info{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-label.sky-label-info,:host-context(.sky-theme-modern) .sky-label.sky-label-success{padding:4px 15px 4px 6px}:host-context(.sky-theme-modern) .sky-label.sky-label-warning,:host-context(.sky-theme-modern) .sky-label.sky-label-danger{padding:4px 15px 4px 9px}:host-context(.sky-theme-modern) .sky-label-icon-theme-default{display:none}:host-context(.sky-theme-modern) .sky-label-icon-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}:host-context(.sky-theme-modern) .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}:host-context(.sky-theme-modern) .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}:host-context(.sky-theme-modern) .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}.sky-theme-modern .sky-label{align-items:center;display:inline-flex;line-height:1}.sky-theme-modern .sky-label.sky-label-info{background-color:#c1e8fb}.sky-theme-modern .sky-label.sky-label-info,.sky-theme-modern .sky-label.sky-label-success{padding:4px 15px 4px 6px}.sky-theme-modern .sky-label.sky-label-warning,.sky-theme-modern .sky-label.sky-label-danger{padding:4px 15px 4px 9px}.sky-theme-modern .sky-label-icon-theme-default{display:none}.sky-theme-modern .sky-label-icon-theme-modern{display:block}.sky-theme-modern .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}.sky-theme-modern .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}.sky-theme-modern .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}.sky-theme-modern .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}\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: i3.SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i4.SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }] });
+SkyLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyLabelComponent, selector: "sky-label", inputs: { labelType: "labelType", descriptionType: "descriptionType", customDescription: "customDescription" }, ngImport: i0, template: "<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelTypeOrDefault\">\n  <span class=\"sky-label-icon-theme-default\">\n    <sky-icon [icon]=\"icon\"></sky-icon>\n  </span>\n  <span class=\"sky-label-icon-theme-modern\">\n    <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n    </sky-icon-stack>\n  </span>\n  <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n    {{ descriptionComputed }}\n  </span>\n  <span class=\"sky-label-text\">\n    <ng-content></ng-content>\n  </span>\n</span>\n", styles: [".sky-label{color:#212327;display:inline;border-radius:10rem;font-weight:400;line-height:2.2;margin:0 3px;padding:.3em .6em;white-space:nowrap}.sky-label-success{background-color:#b7da9b}.sky-label-info{background-color:#81d4f7}.sky-label-warning{background-color:#ffd597}.sky-label-danger{background-color:#f7a08f}.sky-label-text{display:inline-block;padding-left:5px}.sky-label-icon-theme-modern{display:none}:host-context(.sky-theme-modern) .sky-label{align-items:center;display:inline-flex;line-height:1}:host-context(.sky-theme-modern) .sky-label.sky-label-info{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-label.sky-label-info,:host-context(.sky-theme-modern) .sky-label.sky-label-success{padding:4px 15px 4px 6px}:host-context(.sky-theme-modern) .sky-label.sky-label-warning,:host-context(.sky-theme-modern) .sky-label.sky-label-danger{padding:4px 15px 4px 9px}:host-context(.sky-theme-modern) .sky-label:not(.sky-label-danger){--sky-icon-stack-top-icon-color-override: #212327}:host-context(.sky-theme-modern) .sky-label-icon-theme-default{display:none}:host-context(.sky-theme-modern) .sky-label-icon-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}:host-context(.sky-theme-modern) .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}:host-context(.sky-theme-modern) .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}:host-context(.sky-theme-modern) .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}.sky-theme-modern .sky-label{align-items:center;display:inline-flex;line-height:1}.sky-theme-modern .sky-label.sky-label-info{background-color:#c1e8fb}.sky-theme-modern .sky-label.sky-label-info,.sky-theme-modern .sky-label.sky-label-success{padding:4px 15px 4px 6px}.sky-theme-modern .sky-label.sky-label-warning,.sky-theme-modern .sky-label.sky-label-danger{padding:4px 15px 4px 9px}.sky-theme-modern .sky-label:not(.sky-label-danger){--sky-icon-stack-top-icon-color-override: #212327}.sky-theme-modern .sky-label-icon-theme-default{display:none}.sky-theme-modern .sky-label-icon-theme-modern{display:block}.sky-theme-modern .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}.sky-theme-modern .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}.sky-theme-modern .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}.sky-theme-modern .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}\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: i3.SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i4.SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-label', template: "<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelTypeOrDefault\">\n  <span class=\"sky-label-icon-theme-default\">\n    <sky-icon [icon]=\"icon\"></sky-icon>\n  </span>\n  <span class=\"sky-label-icon-theme-modern\">\n    <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n    </sky-icon-stack>\n  </span>\n  <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n    {{ descriptionComputed }}\n  </span>\n  <span class=\"sky-label-text\">\n    <ng-content></ng-content>\n  </span>\n</span>\n", styles: [".sky-label{color:#212327;display:inline;border-radius:10rem;font-weight:400;line-height:2.2;margin:0 3px;padding:.3em .6em;white-space:nowrap}.sky-label-success{background-color:#b7da9b}.sky-label-info{background-color:#81d4f7}.sky-label-warning{background-color:#ffd597}.sky-label-danger{background-color:#f7a08f}.sky-label-text{display:inline-block;padding-left:5px}.sky-label-icon-theme-modern{display:none}:host-context(.sky-theme-modern) .sky-label{align-items:center;display:inline-flex;line-height:1}:host-context(.sky-theme-modern) .sky-label.sky-label-info{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-label.sky-label-info,:host-context(.sky-theme-modern) .sky-label.sky-label-success{padding:4px 15px 4px 6px}:host-context(.sky-theme-modern) .sky-label.sky-label-warning,:host-context(.sky-theme-modern) .sky-label.sky-label-danger{padding:4px 15px 4px 9px}:host-context(.sky-theme-modern) .sky-label-icon-theme-default{display:none}:host-context(.sky-theme-modern) .sky-label-icon-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}:host-context(.sky-theme-modern) .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}:host-context(.sky-theme-modern) .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}:host-context(.sky-theme-modern) .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}.sky-theme-modern .sky-label{align-items:center;display:inline-flex;line-height:1}.sky-theme-modern .sky-label.sky-label-info{background-color:#c1e8fb}.sky-theme-modern .sky-label.sky-label-info,.sky-theme-modern .sky-label.sky-label-success{padding:4px 15px 4px 6px}.sky-theme-modern .sky-label.sky-label-warning,.sky-theme-modern .sky-label.sky-label-danger{padding:4px 15px 4px 9px}.sky-theme-modern .sky-label-icon-theme-default{display:none}.sky-theme-modern .sky-label-icon-theme-modern{display:block}.sky-theme-modern .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}.sky-theme-modern .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}.sky-theme-modern .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}.sky-theme-modern .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}\n"] }]
+            args: [{ selector: 'sky-label', template: "<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelTypeOrDefault\">\n  <span class=\"sky-label-icon-theme-default\">\n    <sky-icon [icon]=\"icon\"></sky-icon>\n  </span>\n  <span class=\"sky-label-icon-theme-modern\">\n    <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n    </sky-icon-stack>\n  </span>\n  <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n    {{ descriptionComputed }}\n  </span>\n  <span class=\"sky-label-text\">\n    <ng-content></ng-content>\n  </span>\n</span>\n", styles: [".sky-label{color:#212327;display:inline;border-radius:10rem;font-weight:400;line-height:2.2;margin:0 3px;padding:.3em .6em;white-space:nowrap}.sky-label-success{background-color:#b7da9b}.sky-label-info{background-color:#81d4f7}.sky-label-warning{background-color:#ffd597}.sky-label-danger{background-color:#f7a08f}.sky-label-text{display:inline-block;padding-left:5px}.sky-label-icon-theme-modern{display:none}:host-context(.sky-theme-modern) .sky-label{align-items:center;display:inline-flex;line-height:1}:host-context(.sky-theme-modern) .sky-label.sky-label-info{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-label.sky-label-info,:host-context(.sky-theme-modern) .sky-label.sky-label-success{padding:4px 15px 4px 6px}:host-context(.sky-theme-modern) .sky-label.sky-label-warning,:host-context(.sky-theme-modern) .sky-label.sky-label-danger{padding:4px 15px 4px 9px}:host-context(.sky-theme-modern) .sky-label:not(.sky-label-danger){--sky-icon-stack-top-icon-color-override: #212327}:host-context(.sky-theme-modern) .sky-label-icon-theme-default{display:none}:host-context(.sky-theme-modern) .sky-label-icon-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}:host-context(.sky-theme-modern) .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}:host-context(.sky-theme-modern) .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}:host-context(.sky-theme-modern) .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}.sky-theme-modern .sky-label{align-items:center;display:inline-flex;line-height:1}.sky-theme-modern .sky-label.sky-label-info{background-color:#c1e8fb}.sky-theme-modern .sky-label.sky-label-info,.sky-theme-modern .sky-label.sky-label-success{padding:4px 15px 4px 6px}.sky-theme-modern .sky-label.sky-label-warning,.sky-theme-modern .sky-label.sky-label-danger{padding:4px 15px 4px 9px}.sky-theme-modern .sky-label:not(.sky-label-danger){--sky-icon-stack-top-icon-color-override: #212327}.sky-theme-modern .sky-label-icon-theme-default{display:none}.sky-theme-modern .sky-label-icon-theme-modern{display:block}.sky-theme-modern .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}.sky-theme-modern .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}.sky-theme-modern .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}.sky-theme-modern .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyLibResourcesService }]; }, propDecorators: { labelType: [{
                 type: Input
             }], descriptionType: [{

package/esm2020/lib/modules/status-indicator/status-indicator.component.mjs

@@ -92,10 +92,10 @@ _SkyStatusIndicatorComponent_changeDetector = new WeakMap(), _SkyStatusIndicator
     }
 };
 SkyStatusIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyStatusIndicatorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
-SkyStatusIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyStatusIndicatorComponent, selector: "sky-status-indicator", inputs: { indicatorType: "indicatorType", descriptionType: "descriptionType", customDescription: "customDescription" }, ngImport: i0, template: "<div *ngIf=\"descriptionType\" class=\"sky-status-indicator\">\n  <div\n    aria-hidden=\"true\"\n    class=\"sky-margin-inline-xs sky-status-indicator-icon\"\n    [ngClass]=\"'sky-status-indicator-icon-' + indicatorTypeOrDefault\"\n  >\n    <span class=\"sky-status-indicator-icon-default\">\n      <sky-icon [icon]=\"icon\"></sky-icon>\n    </span>\n    <span class=\"sky-status-indicator-icon-modern\">\n      <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n      </sky-icon-stack>\n    </span>\n  </div>\n  <div class=\"sky-status-indicator-message-wrapper\">\n    <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n      {{ descriptionComputed }}\n    </span>\n    <span class=\"sky-status-indicator-message\" skyTrim\n      ><ng-content></ng-content></span\n    ><span class=\"sky-control-help-container\"\n      ><ng-content select=\".sky-control-help\"></ng-content\n    ></span>\n  </div>\n</div>\n", styles: [".sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{flex-shrink:1}.sky-status-indicator-icon-modern{display:none}.sky-status-indicator-icon-info{color:#00b4f1}.sky-status-indicator-icon-success{color:#72bf44}.sky-status-indicator-icon-warning{color:#fbb034}.sky-status-indicator-icon-danger{color:#ef4044}:host-context(.sky-theme-modern) .sky-status-indicator-icon-default{display:none}:host-context(.sky-theme-modern) .sky-status-indicator-icon-modern{display:inline}.sky-theme-modern .sky-status-indicator-icon-default{display:none}.sky-theme-modern .sky-status-indicator-icon-modern{display:inline}\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: i3.SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i4.SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }, { kind: "directive", type: i5.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyStatusIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyStatusIndicatorComponent, selector: "sky-status-indicator", inputs: { indicatorType: "indicatorType", descriptionType: "descriptionType", customDescription: "customDescription" }, ngImport: i0, template: "<div *ngIf=\"descriptionType\" class=\"sky-status-indicator\">\n  <div\n    aria-hidden=\"true\"\n    class=\"sky-margin-inline-xs sky-status-indicator-icon\"\n    [ngClass]=\"'sky-status-indicator-icon-' + indicatorTypeOrDefault\"\n  >\n    <span class=\"sky-status-indicator-icon-default\">\n      <sky-icon [icon]=\"icon\"></sky-icon>\n    </span>\n    <span class=\"sky-status-indicator-icon-modern\">\n      <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n      </sky-icon-stack>\n    </span>\n  </div>\n  <div class=\"sky-status-indicator-message-wrapper\">\n    <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n      {{ descriptionComputed }}\n    </span>\n    <span class=\"sky-status-indicator-message\" skyTrim\n      ><ng-content></ng-content></span\n    ><span class=\"sky-control-help-container\"\n      ><ng-content select=\".sky-control-help\"></ng-content\n    ></span>\n  </div>\n</div>\n", styles: [".sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{flex-shrink:1}.sky-status-indicator-icon-modern{display:none}.sky-status-indicator-icon-info{color:#00b4f1}.sky-status-indicator-icon-success{color:#72bf44}.sky-status-indicator-icon-warning{color:#fbb034}.sky-status-indicator-icon-danger{color:#ef4044}:host-context(.sky-theme-modern) .sky-status-indicator-icon:not(.sky-status-indicator-icon-danger){--sky-icon-stack-top-icon-color-override: #212327}:host-context(.sky-theme-modern) .sky-status-indicator-icon-default{display:none}:host-context(.sky-theme-modern) .sky-status-indicator-icon-modern{display:inline}.sky-theme-modern .sky-status-indicator-icon:not(.sky-status-indicator-icon-danger){--sky-icon-stack-top-icon-color-override: #212327}.sky-theme-modern .sky-status-indicator-icon-default{display:none}.sky-theme-modern .sky-status-indicator-icon-modern{display:inline}\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: i3.SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: i4.SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }, { kind: "directive", type: i5.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyStatusIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-status-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"descriptionType\" class=\"sky-status-indicator\">\n  <div\n    aria-hidden=\"true\"\n    class=\"sky-margin-inline-xs sky-status-indicator-icon\"\n    [ngClass]=\"'sky-status-indicator-icon-' + indicatorTypeOrDefault\"\n  >\n    <span class=\"sky-status-indicator-icon-default\">\n      <sky-icon [icon]=\"icon\"></sky-icon>\n    </span>\n    <span class=\"sky-status-indicator-icon-modern\">\n      <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n      </sky-icon-stack>\n    </span>\n  </div>\n  <div class=\"sky-status-indicator-message-wrapper\">\n    <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n      {{ descriptionComputed }}\n    </span>\n    <span class=\"sky-status-indicator-message\" skyTrim\n      ><ng-content></ng-content></span\n    ><span class=\"sky-control-help-container\"\n      ><ng-content select=\".sky-control-help\"></ng-content\n    ></span>\n  </div>\n</div>\n", styles: [".sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{flex-shrink:1}.sky-status-indicator-icon-modern{display:none}.sky-status-indicator-icon-info{color:#00b4f1}.sky-status-indicator-icon-success{color:#72bf44}.sky-status-indicator-icon-warning{color:#fbb034}.sky-status-indicator-icon-danger{color:#ef4044}:host-context(.sky-theme-modern) .sky-status-indicator-icon-default{display:none}:host-context(.sky-theme-modern) .sky-status-indicator-icon-modern{display:inline}.sky-theme-modern .sky-status-indicator-icon-default{display:none}.sky-theme-modern .sky-status-indicator-icon-modern{display:inline}\n"] }]
+            args: [{ selector: 'sky-status-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"descriptionType\" class=\"sky-status-indicator\">\n  <div\n    aria-hidden=\"true\"\n    class=\"sky-margin-inline-xs sky-status-indicator-icon\"\n    [ngClass]=\"'sky-status-indicator-icon-' + indicatorTypeOrDefault\"\n  >\n    <span class=\"sky-status-indicator-icon-default\">\n      <sky-icon [icon]=\"icon\"></sky-icon>\n    </span>\n    <span class=\"sky-status-indicator-icon-modern\">\n      <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n      </sky-icon-stack>\n    </span>\n  </div>\n  <div class=\"sky-status-indicator-message-wrapper\">\n    <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n      {{ descriptionComputed }}\n    </span>\n    <span class=\"sky-status-indicator-message\" skyTrim\n      ><ng-content></ng-content></span\n    ><span class=\"sky-control-help-container\"\n      ><ng-content select=\".sky-control-help\"></ng-content\n    ></span>\n  </div>\n</div>\n", styles: [".sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{flex-shrink:1}.sky-status-indicator-icon-modern{display:none}.sky-status-indicator-icon-info{color:#00b4f1}.sky-status-indicator-icon-success{color:#72bf44}.sky-status-indicator-icon-warning{color:#fbb034}.sky-status-indicator-icon-danger{color:#ef4044}:host-context(.sky-theme-modern) .sky-status-indicator-icon:not(.sky-status-indicator-icon-danger){--sky-icon-stack-top-icon-color-override: #212327}:host-context(.sky-theme-modern) .sky-status-indicator-icon-default{display:none}:host-context(.sky-theme-modern) .sky-status-indicator-icon-modern{display:inline}.sky-theme-modern .sky-status-indicator-icon:not(.sky-status-indicator-icon-danger){--sky-icon-stack-top-icon-color-override: #212327}.sky-theme-modern .sky-status-indicator-icon-default{display:none}.sky-theme-modern .sky-status-indicator-icon-modern{display:inline}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.SkyLibResourcesService }]; }, propDecorators: { indicatorType: [{
                 type: Input
             }], descriptionType: [{

package/fesm2015/skyux-indicators.mjs

@@ -91,10 +91,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
 class SkyIconStackComponent {
 }
 SkyIconStackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyIconStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyIconStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: { size: "size", baseIcon: "baseIcon", topIcon: "topIcon" }, ngImport: i0, template: "<span\n  aria-hidden=\"true\"\n  class=\"sky-icon-stack fa-stack\"\n  [ngClass]=\"size ? 'fa-' + size + ' sky-icon-stack-size-' + size : ''\"\n>\n  <i\n    *ngIf=\"baseIcon\"\n    class=\"sky-icon fa-stack-2x\"\n    [ngClass]=\"baseIcon.icon | skyIconClassList: baseIcon.iconType\"\n  ></i>\n  <i\n    *ngIf=\"topIcon\"\n    class=\"sky-icon fa-stack-1x fa-inverse sky-icon-inverse\"\n    [ngClass]=\"topIcon.icon | skyIconClassList: topIcon.iconType\"\n  ></i>\n</span>\n", styles: [":host{display:inline-block;vertical-align:bottom}.sky-icon-stack-size-xs.fa-stack{width:1.25em;height:1.25em;line-height:1.25em}.sky-icon-stack-size-xs .fa-stack-2x{font-size:1.25em}.sky-icon-stack-size-xs .fa-stack-1x{font-size:.625em}.fa-stack-1x.sky-i-check:before{position:relative;top:1px}.fa-stack-1x.sky-i-exclamation:before{position:relative;top:2px;left:-.5px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-icon-inverse{color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-icon-inverse{color:#121212}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SkyIconClassListPipe, name: "skyIconClassList" }] });
+SkyIconStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: { size: "size", baseIcon: "baseIcon", topIcon: "topIcon" }, ngImport: i0, template: "<span\n  aria-hidden=\"true\"\n  class=\"sky-icon-stack fa-stack\"\n  [ngClass]=\"size ? 'fa-' + size + ' sky-icon-stack-size-' + size : ''\"\n>\n  <i\n    *ngIf=\"baseIcon\"\n    class=\"sky-icon fa-stack-2x\"\n    [ngClass]=\"baseIcon.icon | skyIconClassList: baseIcon.iconType\"\n  ></i>\n  <i\n    *ngIf=\"topIcon\"\n    class=\"sky-icon fa-stack-1x fa-inverse sky-icon-inverse\"\n    [ngClass]=\"topIcon.icon | skyIconClassList: topIcon.iconType\"\n  ></i>\n</span>\n", styles: [":host{display:inline-block;vertical-align:bottom}.sky-icon-stack-size-xs.fa-stack{width:1.25em;height:1.25em;line-height:1.25em}.sky-icon-stack-size-xs .fa-stack-2x{font-size:1.25em}.sky-icon-stack-size-xs .fa-stack-1x{font-size:.625em}.fa-stack-1x.sky-i-check:before{position:relative;top:1px}.fa-stack-1x.sky-i-exclamation:before{position:relative;top:2px;left:-.5px}.sky-icon-inverse{color:var(--sky-icon-stack-top-icon-color-override, #ffffff)}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-icon-inverse{color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-icon-inverse{color:#121212}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SkyIconClassListPipe, name: "skyIconClassList" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyIconStackComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-icon-stack', template: "<span\n  aria-hidden=\"true\"\n  class=\"sky-icon-stack fa-stack\"\n  [ngClass]=\"size ? 'fa-' + size + ' sky-icon-stack-size-' + size : ''\"\n>\n  <i\n    *ngIf=\"baseIcon\"\n    class=\"sky-icon fa-stack-2x\"\n    [ngClass]=\"baseIcon.icon | skyIconClassList: baseIcon.iconType\"\n  ></i>\n  <i\n    *ngIf=\"topIcon\"\n    class=\"sky-icon fa-stack-1x fa-inverse sky-icon-inverse\"\n    [ngClass]=\"topIcon.icon | skyIconClassList: topIcon.iconType\"\n  ></i>\n</span>\n", styles: [":host{display:inline-block;vertical-align:bottom}.sky-icon-stack-size-xs.fa-stack{width:1.25em;height:1.25em;line-height:1.25em}.sky-icon-stack-size-xs .fa-stack-2x{font-size:1.25em}.sky-icon-stack-size-xs .fa-stack-1x{font-size:.625em}.fa-stack-1x.sky-i-check:before{position:relative;top:1px}.fa-stack-1x.sky-i-exclamation:before{position:relative;top:2px;left:-.5px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-icon-inverse{color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-icon-inverse{color:#121212}\n"] }]
+            args: [{ selector: 'sky-icon-stack', template: "<span\n  aria-hidden=\"true\"\n  class=\"sky-icon-stack fa-stack\"\n  [ngClass]=\"size ? 'fa-' + size + ' sky-icon-stack-size-' + size : ''\"\n>\n  <i\n    *ngIf=\"baseIcon\"\n    class=\"sky-icon fa-stack-2x\"\n    [ngClass]=\"baseIcon.icon | skyIconClassList: baseIcon.iconType\"\n  ></i>\n  <i\n    *ngIf=\"topIcon\"\n    class=\"sky-icon fa-stack-1x fa-inverse sky-icon-inverse\"\n    [ngClass]=\"topIcon.icon | skyIconClassList: topIcon.iconType\"\n  ></i>\n</span>\n", styles: [":host{display:inline-block;vertical-align:bottom}.sky-icon-stack-size-xs.fa-stack{width:1.25em;height:1.25em;line-height:1.25em}.sky-icon-stack-size-xs .fa-stack-2x{font-size:1.25em}.sky-icon-stack-size-xs .fa-stack-1x{font-size:.625em}.fa-stack-1x.sky-i-check:before{position:relative;top:1px}.fa-stack-1x.sky-i-exclamation:before{position:relative;top:2px;left:-.5px}.sky-icon-inverse{color:var(--sky-icon-stack-top-icon-color-override, #ffffff)}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-icon-inverse{color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-icon-inverse{color:#121212}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], baseIcon: [{
@@ -346,10 +346,10 @@ _SkyAlertComponent__descriptionType = new WeakMap(), _SkyAlertComponent__customD
     }
 };
 SkyAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyAlertComponent, deps: [{ token: i1$2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
-SkyAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyAlertComponent, selector: "sky-alert", inputs: { alertType: "alertType", closeable: "closeable", closed: "closed", descriptionType: "descriptionType", customDescription: "customDescription" }, outputs: { closedChange: "closedChange" }, ngImport: i0, template: "<div\n  class=\"sky-alert\"\n  [skyThemeClass]=\"{\n    'sky-rounded-corners': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  role=\"alert\"\n  [hidden]=\"closed\"\n  [ngClass]=\"{\n    'sky-alert-info': alertTypeOrDefault === 'info',\n    'sky-alert-success': alertTypeOrDefault === 'success',\n    'sky-alert-warning': alertTypeOrDefault === 'warning',\n    'sky-alert-danger': alertTypeOrDefault === 'danger',\n    'sky-alert-closeable': closeable\n  }\"\n>\n  <div aria-hidden=\"true\" class=\"sky-alert-icon-theme-modern\">\n    <sky-icon-stack [baseIcon]=\"alertBaseIcon\" [topIcon]=\"alertTopIcon\">\n    </sky-icon-stack>\n  </div>\n  <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n    {{ descriptionComputed }}\n  </span>\n  <div class=\"sky-alert-content\">\n    <ng-content></ng-content>\n  </div>\n  <button\n    class=\"sky-alert-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n    [hidden]=\"!closeable\"\n    (click)=\"close()\"\n  >\n    <span aria-hidden=\"true\">\n      <sky-icon class=\"sky-alert-close-icon-theme-default\" icon=\"close\">\n      </sky-icon>\n      <sky-icon\n        class=\"sky-alert-close-icon-theme-modern\"\n        icon=\"close\"\n        iconType=\"skyux\"\n        size=\"2x\"\n      >\n      </sky-icon>\n    </span>\n  </button>\n</div>\n", styles: [".sky-alert{--sky-alert-before-display: initial;--sky-alert-border-left-width: 30px;--sky-alert-close-icon-default-display: initial;--sky-alert-close-icon-modern-display: none;--sky-alert-content-padding-top-bottom: 10px;--sky-alert-content-padding-left-right: 0;--sky-alert-icon-default-display: initial;--sky-alert-icon-modern-display: none;--sky-alert-info-background-color: var(--sky-background-color-info)}:host-context(.sky-theme-modern) .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-theme-modern .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-alert{padding:0 10px;border-left:solid var(--sky-alert-border-left-width);color:var(--sky-text-color-default);display:flex;flex-direction:row;align-items:center}.sky-alert .sky-alert-content{padding:var(--sky-alert-content-padding-top-bottom) var(--sky-alert-content-padding-left-right);width:100%}.sky-alert .sky-alert-content ::ng-deep a{color:#212327cc;text-decoration:underline}.sky-alert .sky-alert-content ::ng-deep a:hover{color:var(--sky-text-color-default)}.sky-alert button{margin-left:auto;width:32px;height:32px}.sky-alert.sky-alert-info:before,.sky-alert.sky-alert-success:before,.sky-alert.sky-alert-warning:before,.sky-alert.sky-alert-danger:before{font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff;display:var(--sky-alert-before-display)}.sky-alert.sky-alert-info{background-color:var(--sky-alert-info-background-color);border-color:var(--sky-highlight-color-info)}.sky-alert.sky-alert-info:before{content:\"\\f06a\";margin-left:-31px;margin-right:20px}.sky-alert.sky-alert-success{background-color:var(--sky-background-color-success);border-color:var(--sky-highlight-color-success)}.sky-alert.sky-alert-success:before{content:\"\\f00c\"}.sky-alert.sky-alert-warning{background-color:var(--sky-background-color-warning);border-color:var(--sky-highlight-color-warning)}.sky-alert.sky-alert-warning:before{content:\"\\f071\"}.sky-alert.sky-alert-danger{background-color:var(--sky-background-color-danger);border-color:var(--sky-highlight-color-danger)}.sky-alert.sky-alert-danger:before{content:\"\\f071\"}.sky-alert-close{cursor:pointer;font-weight:700;line-height:1;margin:0;padding:0;color:var(--sky-text-color-default);opacity:.8;border:none;background-color:transparent;display:none}.sky-alert-close:hover{opacity:1}.sky-alert-closeable .sky-alert-close{display:block}.sky-alert-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-icon-theme-modern{display:var(--sky-alert-icon-modern-display)}.sky-alert-close-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-close-icon-theme-modern{display:var(--sky-alert-close-icon-modern-display)}.sky-alert-info .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-info)}.sky-alert-success .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-success)}.sky-alert-warning .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-warning)}.sky-alert-danger .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-danger)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }, { kind: "directive", type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i1$2.SkyLibResourcesPipe, name: "skyLibResources" }] });
+SkyAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyAlertComponent, selector: "sky-alert", inputs: { alertType: "alertType", closeable: "closeable", closed: "closed", descriptionType: "descriptionType", customDescription: "customDescription" }, outputs: { closedChange: "closedChange" }, ngImport: i0, template: "<div\n  class=\"sky-alert\"\n  [skyThemeClass]=\"{\n    'sky-rounded-corners': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  role=\"alert\"\n  [hidden]=\"closed\"\n  [ngClass]=\"{\n    'sky-alert-info': alertTypeOrDefault === 'info',\n    'sky-alert-success': alertTypeOrDefault === 'success',\n    'sky-alert-warning': alertTypeOrDefault === 'warning',\n    'sky-alert-danger': alertTypeOrDefault === 'danger',\n    'sky-alert-closeable': closeable\n  }\"\n>\n  <div aria-hidden=\"true\" class=\"sky-alert-icon-theme-modern\">\n    <sky-icon-stack [baseIcon]=\"alertBaseIcon\" [topIcon]=\"alertTopIcon\">\n    </sky-icon-stack>\n  </div>\n  <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n    {{ descriptionComputed }}\n  </span>\n  <div class=\"sky-alert-content\">\n    <ng-content></ng-content>\n  </div>\n  <button\n    class=\"sky-alert-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n    [hidden]=\"!closeable\"\n    (click)=\"close()\"\n  >\n    <span aria-hidden=\"true\">\n      <sky-icon class=\"sky-alert-close-icon-theme-default\" icon=\"close\">\n      </sky-icon>\n      <sky-icon\n        class=\"sky-alert-close-icon-theme-modern\"\n        icon=\"close\"\n        iconType=\"skyux\"\n        size=\"2x\"\n      >\n      </sky-icon>\n    </span>\n  </button>\n</div>\n", styles: [".sky-alert{--sky-alert-before-display: initial;--sky-alert-border-left-width: 30px;--sky-alert-close-icon-default-display: initial;--sky-alert-close-icon-modern-display: none;--sky-alert-content-padding-top-bottom: 10px;--sky-alert-content-padding-left-right: 0;--sky-alert-icon-default-display: initial;--sky-alert-icon-modern-display: none;--sky-alert-info-background-color: var(--sky-background-color-info)}:host-context(.sky-theme-modern) .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-theme-modern .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-alert{padding:0 10px;border-left:solid var(--sky-alert-border-left-width);color:var(--sky-text-color-default);display:flex;flex-direction:row;align-items:center}.sky-alert .sky-alert-content{padding:var(--sky-alert-content-padding-top-bottom) var(--sky-alert-content-padding-left-right);width:100%}.sky-alert .sky-alert-content ::ng-deep a{color:#212327cc;text-decoration:underline}.sky-alert .sky-alert-content ::ng-deep a:hover{color:var(--sky-text-color-default)}.sky-alert button{margin-left:auto;width:32px;height:32px}.sky-alert.sky-alert-info:before,.sky-alert.sky-alert-success:before,.sky-alert.sky-alert-warning:before,.sky-alert.sky-alert-danger:before{font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff;display:var(--sky-alert-before-display)}.sky-alert:not(.sky-alert-danger){--sky-icon-stack-top-icon-color-override: #212327}.sky-alert.sky-alert-info{background-color:var(--sky-alert-info-background-color);border-color:var(--sky-highlight-color-info)}.sky-alert.sky-alert-info:before{content:\"\\f06a\";margin-left:-31px;margin-right:20px}.sky-alert.sky-alert-success{background-color:var(--sky-background-color-success);border-color:var(--sky-highlight-color-success)}.sky-alert.sky-alert-success:before{content:\"\\f00c\"}.sky-alert.sky-alert-warning{background-color:var(--sky-background-color-warning);border-color:var(--sky-highlight-color-warning)}.sky-alert.sky-alert-warning:before{content:\"\\f071\"}.sky-alert.sky-alert-danger{background-color:var(--sky-background-color-danger);border-color:var(--sky-highlight-color-danger)}.sky-alert.sky-alert-danger:before{content:\"\\f071\"}.sky-alert-close{cursor:pointer;font-weight:700;line-height:1;margin:0;padding:0;color:var(--sky-text-color-default);opacity:.8;border:none;background-color:transparent;display:none}.sky-alert-close:hover{opacity:1}.sky-alert-closeable .sky-alert-close{display:block}.sky-alert-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-icon-theme-modern{display:var(--sky-alert-icon-modern-display)}.sky-alert-close-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-close-icon-theme-modern{display:var(--sky-alert-close-icon-modern-display)}.sky-alert-info .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-info)}.sky-alert-success .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-success)}.sky-alert-warning .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-warning)}.sky-alert-danger .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-danger)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }, { kind: "directive", type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i1$2.SkyLibResourcesPipe, name: "skyLibResources" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-alert', template: "<div\n  class=\"sky-alert\"\n  [skyThemeClass]=\"{\n    'sky-rounded-corners': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  role=\"alert\"\n  [hidden]=\"closed\"\n  [ngClass]=\"{\n    'sky-alert-info': alertTypeOrDefault === 'info',\n    'sky-alert-success': alertTypeOrDefault === 'success',\n    'sky-alert-warning': alertTypeOrDefault === 'warning',\n    'sky-alert-danger': alertTypeOrDefault === 'danger',\n    'sky-alert-closeable': closeable\n  }\"\n>\n  <div aria-hidden=\"true\" class=\"sky-alert-icon-theme-modern\">\n    <sky-icon-stack [baseIcon]=\"alertBaseIcon\" [topIcon]=\"alertTopIcon\">\n    </sky-icon-stack>\n  </div>\n  <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n    {{ descriptionComputed }}\n  </span>\n  <div class=\"sky-alert-content\">\n    <ng-content></ng-content>\n  </div>\n  <button\n    class=\"sky-alert-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n    [hidden]=\"!closeable\"\n    (click)=\"close()\"\n  >\n    <span aria-hidden=\"true\">\n      <sky-icon class=\"sky-alert-close-icon-theme-default\" icon=\"close\">\n      </sky-icon>\n      <sky-icon\n        class=\"sky-alert-close-icon-theme-modern\"\n        icon=\"close\"\n        iconType=\"skyux\"\n        size=\"2x\"\n      >\n      </sky-icon>\n    </span>\n  </button>\n</div>\n", styles: [".sky-alert{--sky-alert-before-display: initial;--sky-alert-border-left-width: 30px;--sky-alert-close-icon-default-display: initial;--sky-alert-close-icon-modern-display: none;--sky-alert-content-padding-top-bottom: 10px;--sky-alert-content-padding-left-right: 0;--sky-alert-icon-default-display: initial;--sky-alert-icon-modern-display: none;--sky-alert-info-background-color: var(--sky-background-color-info)}:host-context(.sky-theme-modern) .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-theme-modern .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-alert{padding:0 10px;border-left:solid var(--sky-alert-border-left-width);color:var(--sky-text-color-default);display:flex;flex-direction:row;align-items:center}.sky-alert .sky-alert-content{padding:var(--sky-alert-content-padding-top-bottom) var(--sky-alert-content-padding-left-right);width:100%}.sky-alert .sky-alert-content ::ng-deep a{color:#212327cc;text-decoration:underline}.sky-alert .sky-alert-content ::ng-deep a:hover{color:var(--sky-text-color-default)}.sky-alert button{margin-left:auto;width:32px;height:32px}.sky-alert.sky-alert-info:before,.sky-alert.sky-alert-success:before,.sky-alert.sky-alert-warning:before,.sky-alert.sky-alert-danger:before{font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff;display:var(--sky-alert-before-display)}.sky-alert.sky-alert-info{background-color:var(--sky-alert-info-background-color);border-color:var(--sky-highlight-color-info)}.sky-alert.sky-alert-info:before{content:\"\\f06a\";margin-left:-31px;margin-right:20px}.sky-alert.sky-alert-success{background-color:var(--sky-background-color-success);border-color:var(--sky-highlight-color-success)}.sky-alert.sky-alert-success:before{content:\"\\f00c\"}.sky-alert.sky-alert-warning{background-color:var(--sky-background-color-warning);border-color:var(--sky-highlight-color-warning)}.sky-alert.sky-alert-warning:before{content:\"\\f071\"}.sky-alert.sky-alert-danger{background-color:var(--sky-background-color-danger);border-color:var(--sky-highlight-color-danger)}.sky-alert.sky-alert-danger:before{content:\"\\f071\"}.sky-alert-close{cursor:pointer;font-weight:700;line-height:1;margin:0;padding:0;color:var(--sky-text-color-default);opacity:.8;border:none;background-color:transparent;display:none}.sky-alert-close:hover{opacity:1}.sky-alert-closeable .sky-alert-close{display:block}.sky-alert-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-icon-theme-modern{display:var(--sky-alert-icon-modern-display)}.sky-alert-close-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-close-icon-theme-modern{display:var(--sky-alert-close-icon-modern-display)}.sky-alert-info .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-info)}.sky-alert-success .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-success)}.sky-alert-warning .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-warning)}.sky-alert-danger .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-danger)}\n"] }]
+            args: [{ selector: 'sky-alert', template: "<div\n  class=\"sky-alert\"\n  [skyThemeClass]=\"{\n    'sky-rounded-corners': 'default',\n    'sky-box sky-elevation-1': 'modern'\n  }\"\n  role=\"alert\"\n  [hidden]=\"closed\"\n  [ngClass]=\"{\n    'sky-alert-info': alertTypeOrDefault === 'info',\n    'sky-alert-success': alertTypeOrDefault === 'success',\n    'sky-alert-warning': alertTypeOrDefault === 'warning',\n    'sky-alert-danger': alertTypeOrDefault === 'danger',\n    'sky-alert-closeable': closeable\n  }\"\n>\n  <div aria-hidden=\"true\" class=\"sky-alert-icon-theme-modern\">\n    <sky-icon-stack [baseIcon]=\"alertBaseIcon\" [topIcon]=\"alertTopIcon\">\n    </sky-icon-stack>\n  </div>\n  <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n    {{ descriptionComputed }}\n  </span>\n  <div class=\"sky-alert-content\">\n    <ng-content></ng-content>\n  </div>\n  <button\n    class=\"sky-alert-close\"\n    type=\"button\"\n    [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n    [hidden]=\"!closeable\"\n    (click)=\"close()\"\n  >\n    <span aria-hidden=\"true\">\n      <sky-icon class=\"sky-alert-close-icon-theme-default\" icon=\"close\">\n      </sky-icon>\n      <sky-icon\n        class=\"sky-alert-close-icon-theme-modern\"\n        icon=\"close\"\n        iconType=\"skyux\"\n        size=\"2x\"\n      >\n      </sky-icon>\n    </span>\n  </button>\n</div>\n", styles: [".sky-alert{--sky-alert-before-display: initial;--sky-alert-border-left-width: 30px;--sky-alert-close-icon-default-display: initial;--sky-alert-close-icon-modern-display: none;--sky-alert-content-padding-top-bottom: 10px;--sky-alert-content-padding-left-right: 0;--sky-alert-icon-default-display: initial;--sky-alert-icon-modern-display: none;--sky-alert-info-background-color: var(--sky-background-color-info)}:host-context(.sky-theme-modern) .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-theme-modern .sky-alert{--sky-alert-before-display: none;--sky-alert-border-left-width: 7px;--sky-alert-close-icon-default-display: none;--sky-alert-close-icon-modern-display: initial;--sky-alert-content-padding-left-right: var(--sky-padding-even-md);--sky-alert-content-padding-top-bottom: var(--sky-padding-even-md);--sky-alert-icon-default-display: none;--sky-alert-icon-modern-display: initial;--sky-alert-info-background-color: var(--sky-background-color-info-light)}.sky-alert{padding:0 10px;border-left:solid var(--sky-alert-border-left-width);color:var(--sky-text-color-default);display:flex;flex-direction:row;align-items:center}.sky-alert .sky-alert-content{padding:var(--sky-alert-content-padding-top-bottom) var(--sky-alert-content-padding-left-right);width:100%}.sky-alert .sky-alert-content ::ng-deep a{color:#212327cc;text-decoration:underline}.sky-alert .sky-alert-content ::ng-deep a:hover{color:var(--sky-text-color-default)}.sky-alert button{margin-left:auto;width:32px;height:32px}.sky-alert.sky-alert-info:before,.sky-alert.sky-alert-success:before,.sky-alert.sky-alert-warning:before,.sky-alert.sky-alert-danger:before{font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff;display:var(--sky-alert-before-display)}.sky-alert:not(.sky-alert-danger){--sky-icon-stack-top-icon-color-override: #212327}.sky-alert.sky-alert-info{background-color:var(--sky-alert-info-background-color);border-color:var(--sky-highlight-color-info)}.sky-alert.sky-alert-info:before{content:\"\\f06a\";margin-left:-31px;margin-right:20px}.sky-alert.sky-alert-success{background-color:var(--sky-background-color-success);border-color:var(--sky-highlight-color-success)}.sky-alert.sky-alert-success:before{content:\"\\f00c\"}.sky-alert.sky-alert-warning{background-color:var(--sky-background-color-warning);border-color:var(--sky-highlight-color-warning)}.sky-alert.sky-alert-warning:before{content:\"\\f071\"}.sky-alert.sky-alert-danger{background-color:var(--sky-background-color-danger);border-color:var(--sky-highlight-color-danger)}.sky-alert.sky-alert-danger:before{content:\"\\f071\"}.sky-alert-close{cursor:pointer;font-weight:700;line-height:1;margin:0;padding:0;color:var(--sky-text-color-default);opacity:.8;border:none;background-color:transparent;display:none}.sky-alert-close:hover{opacity:1}.sky-alert-closeable .sky-alert-close{display:block}.sky-alert-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-icon-theme-modern{display:var(--sky-alert-icon-modern-display)}.sky-alert-close-icon-theme-default{display:var(--sky-alert-icon-default-display)}.sky-alert-close-icon-theme-modern{display:var(--sky-alert-close-icon-modern-display)}.sky-alert-info .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-info)}.sky-alert-success .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-success)}.sky-alert-warning .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-warning)}.sky-alert-danger .sky-alert-icon-theme-modern{color:var(--sky-highlight-color-danger)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$2.SkyLibResourcesService }]; }, propDecorators: { alertType: [{
                 type: Input
             }], closeable: [{
@@ -610,10 +610,10 @@ class SkyKeyInfoComponent {
     }
 }
 SkyKeyInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyKeyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyKeyInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyKeyInfoComponent, selector: "sky-key-info", inputs: { layout: "layout" }, ngImport: i0, template: "<div\n  class=\"sky-key-info\"\n  [ngClass]=\"{\n    'sky-key-info-horizontal': layout === 'horizontal'\n  }\"\n>\n  <div class=\"sky-key-info-value sky-headline\">\n    <ng-content select=\"sky-key-info-value\"> </ng-content>\n  </div>\n  <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n    <span skyTrim><ng-content select=\"sky-key-info-label\"></ng-content></span\n    ><span class=\"sky-control-help-container\"\n      ><ng-content select=\".sky-control-help\"></ng-content\n    ></span>\n  </div>\n</div>\n", styles: [".sky-key-info,.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}:host-context(.sky-theme-modern) .sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}.sky-theme-modern .sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.λ4, selector: "[skyTrim]" }] });
+SkyKeyInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyKeyInfoComponent, selector: "sky-key-info", inputs: { layout: "layout" }, ngImport: i0, template: "<div\n  class=\"sky-key-info\"\n  [ngClass]=\"{\n    'sky-key-info-horizontal': layout === 'horizontal'\n  }\"\n>\n  <div class=\"sky-key-info-value sky-headline\">\n    <ng-content select=\"sky-key-info-value\"> </ng-content>\n  </div>\n  <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n    <span skyTrim><ng-content select=\"sky-key-info-label\"></ng-content></span\n    ><span class=\"sky-control-help-container\"\n      ><ng-content select=\".sky-control-help\"></ng-content\n    ></span>\n  </div>\n</div>\n", styles: [".sky-key-info,.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 var(--sky-margin-inline-xs)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.λ4, selector: "[skyTrim]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyKeyInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-key-info', template: "<div\n  class=\"sky-key-info\"\n  [ngClass]=\"{\n    'sky-key-info-horizontal': layout === 'horizontal'\n  }\"\n>\n  <div class=\"sky-key-info-value sky-headline\">\n    <ng-content select=\"sky-key-info-value\"> </ng-content>\n  </div>\n  <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n    <span skyTrim><ng-content select=\"sky-key-info-label\"></ng-content></span\n    ><span class=\"sky-control-help-container\"\n      ><ng-content select=\".sky-control-help\"></ng-content\n    ></span>\n  </div>\n</div>\n", styles: [".sky-key-info,.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}:host-context(.sky-theme-modern) .sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}.sky-theme-modern .sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}\n"] }]
+            args: [{ selector: 'sky-key-info', template: "<div\n  class=\"sky-key-info\"\n  [ngClass]=\"{\n    'sky-key-info-horizontal': layout === 'horizontal'\n  }\"\n>\n  <div class=\"sky-key-info-value sky-headline\">\n    <ng-content select=\"sky-key-info-value\"> </ng-content>\n  </div>\n  <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n    <span skyTrim><ng-content select=\"sky-key-info-label\"></ng-content></span\n    ><span class=\"sky-control-help-container\"\n      ><ng-content select=\".sky-control-help\"></ng-content\n    ></span>\n  </div>\n</div>\n", styles: [".sky-key-info,.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 var(--sky-margin-inline-xs)}\n"] }]
         }], propDecorators: { layout: [{
                 type: Input
             }] } });
@@ -724,10 +724,10 @@ _SkyLabelComponent__descriptionType = new WeakMap(), _SkyLabelComponent__customD
     }
 };
 SkyLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyLabelComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
-SkyLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyLabelComponent, selector: "sky-label", inputs: { labelType: "labelType", descriptionType: "descriptionType", customDescription: "customDescription" }, ngImport: i0, template: "<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelTypeOrDefault\">\n  <span class=\"sky-label-icon-theme-default\">\n    <sky-icon [icon]=\"icon\"></sky-icon>\n  </span>\n  <span class=\"sky-label-icon-theme-modern\">\n    <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n    </sky-icon-stack>\n  </span>\n  <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n    {{ descriptionComputed }}\n  </span>\n  <span class=\"sky-label-text\">\n    <ng-content></ng-content>\n  </span>\n</span>\n", styles: [".sky-label{color:#212327;display:inline;border-radius:10rem;font-weight:400;line-height:2.2;margin:0 3px;padding:.3em .6em;white-space:nowrap}.sky-label-success{background-color:#b7da9b}.sky-label-info{background-color:#81d4f7}.sky-label-warning{background-color:#ffd597}.sky-label-danger{background-color:#f7a08f}.sky-label-text{display:inline-block;padding-left:5px}.sky-label-icon-theme-modern{display:none}:host-context(.sky-theme-modern) .sky-label{align-items:center;display:inline-flex;line-height:1}:host-context(.sky-theme-modern) .sky-label.sky-label-info{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-label.sky-label-info,:host-context(.sky-theme-modern) .sky-label.sky-label-success{padding:4px 15px 4px 6px}:host-context(.sky-theme-modern) .sky-label.sky-label-warning,:host-context(.sky-theme-modern) .sky-label.sky-label-danger{padding:4px 15px 4px 9px}:host-context(.sky-theme-modern) .sky-label-icon-theme-default{display:none}:host-context(.sky-theme-modern) .sky-label-icon-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}:host-context(.sky-theme-modern) .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}:host-context(.sky-theme-modern) .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}:host-context(.sky-theme-modern) .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}.sky-theme-modern .sky-label{align-items:center;display:inline-flex;line-height:1}.sky-theme-modern .sky-label.sky-label-info{background-color:#c1e8fb}.sky-theme-modern .sky-label.sky-label-info,.sky-theme-modern .sky-label.sky-label-success{padding:4px 15px 4px 6px}.sky-theme-modern .sky-label.sky-label-warning,.sky-theme-modern .sky-label.sky-label-danger{padding:4px 15px 4px 9px}.sky-theme-modern .sky-label-icon-theme-default{display:none}.sky-theme-modern .sky-label-icon-theme-modern{display:block}.sky-theme-modern .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}.sky-theme-modern .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}.sky-theme-modern .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}.sky-theme-modern .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }] });
+SkyLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyLabelComponent, selector: "sky-label", inputs: { labelType: "labelType", descriptionType: "descriptionType", customDescription: "customDescription" }, ngImport: i0, template: "<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelTypeOrDefault\">\n  <span class=\"sky-label-icon-theme-default\">\n    <sky-icon [icon]=\"icon\"></sky-icon>\n  </span>\n  <span class=\"sky-label-icon-theme-modern\">\n    <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n    </sky-icon-stack>\n  </span>\n  <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n    {{ descriptionComputed }}\n  </span>\n  <span class=\"sky-label-text\">\n    <ng-content></ng-content>\n  </span>\n</span>\n", styles: [".sky-label{color:#212327;display:inline;border-radius:10rem;font-weight:400;line-height:2.2;margin:0 3px;padding:.3em .6em;white-space:nowrap}.sky-label-success{background-color:#b7da9b}.sky-label-info{background-color:#81d4f7}.sky-label-warning{background-color:#ffd597}.sky-label-danger{background-color:#f7a08f}.sky-label-text{display:inline-block;padding-left:5px}.sky-label-icon-theme-modern{display:none}:host-context(.sky-theme-modern) .sky-label{align-items:center;display:inline-flex;line-height:1}:host-context(.sky-theme-modern) .sky-label.sky-label-info{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-label.sky-label-info,:host-context(.sky-theme-modern) .sky-label.sky-label-success{padding:4px 15px 4px 6px}:host-context(.sky-theme-modern) .sky-label.sky-label-warning,:host-context(.sky-theme-modern) .sky-label.sky-label-danger{padding:4px 15px 4px 9px}:host-context(.sky-theme-modern) .sky-label:not(.sky-label-danger){--sky-icon-stack-top-icon-color-override: #212327}:host-context(.sky-theme-modern) .sky-label-icon-theme-default{display:none}:host-context(.sky-theme-modern) .sky-label-icon-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}:host-context(.sky-theme-modern) .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}:host-context(.sky-theme-modern) .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}:host-context(.sky-theme-modern) .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}.sky-theme-modern .sky-label{align-items:center;display:inline-flex;line-height:1}.sky-theme-modern .sky-label.sky-label-info{background-color:#c1e8fb}.sky-theme-modern .sky-label.sky-label-info,.sky-theme-modern .sky-label.sky-label-success{padding:4px 15px 4px 6px}.sky-theme-modern .sky-label.sky-label-warning,.sky-theme-modern .sky-label.sky-label-danger{padding:4px 15px 4px 9px}.sky-theme-modern .sky-label:not(.sky-label-danger){--sky-icon-stack-top-icon-color-override: #212327}.sky-theme-modern .sky-label-icon-theme-default{display:none}.sky-theme-modern .sky-label-icon-theme-modern{display:block}.sky-theme-modern .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}.sky-theme-modern .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}.sky-theme-modern .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}.sky-theme-modern .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-label', template: "<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelTypeOrDefault\">\n  <span class=\"sky-label-icon-theme-default\">\n    <sky-icon [icon]=\"icon\"></sky-icon>\n  </span>\n  <span class=\"sky-label-icon-theme-modern\">\n    <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n    </sky-icon-stack>\n  </span>\n  <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n    {{ descriptionComputed }}\n  </span>\n  <span class=\"sky-label-text\">\n    <ng-content></ng-content>\n  </span>\n</span>\n", styles: [".sky-label{color:#212327;display:inline;border-radius:10rem;font-weight:400;line-height:2.2;margin:0 3px;padding:.3em .6em;white-space:nowrap}.sky-label-success{background-color:#b7da9b}.sky-label-info{background-color:#81d4f7}.sky-label-warning{background-color:#ffd597}.sky-label-danger{background-color:#f7a08f}.sky-label-text{display:inline-block;padding-left:5px}.sky-label-icon-theme-modern{display:none}:host-context(.sky-theme-modern) .sky-label{align-items:center;display:inline-flex;line-height:1}:host-context(.sky-theme-modern) .sky-label.sky-label-info{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-label.sky-label-info,:host-context(.sky-theme-modern) .sky-label.sky-label-success{padding:4px 15px 4px 6px}:host-context(.sky-theme-modern) .sky-label.sky-label-warning,:host-context(.sky-theme-modern) .sky-label.sky-label-danger{padding:4px 15px 4px 9px}:host-context(.sky-theme-modern) .sky-label-icon-theme-default{display:none}:host-context(.sky-theme-modern) .sky-label-icon-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}:host-context(.sky-theme-modern) .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}:host-context(.sky-theme-modern) .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}:host-context(.sky-theme-modern) .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}.sky-theme-modern .sky-label{align-items:center;display:inline-flex;line-height:1}.sky-theme-modern .sky-label.sky-label-info{background-color:#c1e8fb}.sky-theme-modern .sky-label.sky-label-info,.sky-theme-modern .sky-label.sky-label-success{padding:4px 15px 4px 6px}.sky-theme-modern .sky-label.sky-label-warning,.sky-theme-modern .sky-label.sky-label-danger{padding:4px 15px 4px 9px}.sky-theme-modern .sky-label-icon-theme-default{display:none}.sky-theme-modern .sky-label-icon-theme-modern{display:block}.sky-theme-modern .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}.sky-theme-modern .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}.sky-theme-modern .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}.sky-theme-modern .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}\n"] }]
+            args: [{ selector: 'sky-label', template: "<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelTypeOrDefault\">\n  <span class=\"sky-label-icon-theme-default\">\n    <sky-icon [icon]=\"icon\"></sky-icon>\n  </span>\n  <span class=\"sky-label-icon-theme-modern\">\n    <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n    </sky-icon-stack>\n  </span>\n  <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n    {{ descriptionComputed }}\n  </span>\n  <span class=\"sky-label-text\">\n    <ng-content></ng-content>\n  </span>\n</span>\n", styles: [".sky-label{color:#212327;display:inline;border-radius:10rem;font-weight:400;line-height:2.2;margin:0 3px;padding:.3em .6em;white-space:nowrap}.sky-label-success{background-color:#b7da9b}.sky-label-info{background-color:#81d4f7}.sky-label-warning{background-color:#ffd597}.sky-label-danger{background-color:#f7a08f}.sky-label-text{display:inline-block;padding-left:5px}.sky-label-icon-theme-modern{display:none}:host-context(.sky-theme-modern) .sky-label{align-items:center;display:inline-flex;line-height:1}:host-context(.sky-theme-modern) .sky-label.sky-label-info{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-label.sky-label-info,:host-context(.sky-theme-modern) .sky-label.sky-label-success{padding:4px 15px 4px 6px}:host-context(.sky-theme-modern) .sky-label.sky-label-warning,:host-context(.sky-theme-modern) .sky-label.sky-label-danger{padding:4px 15px 4px 9px}:host-context(.sky-theme-modern) .sky-label:not(.sky-label-danger){--sky-icon-stack-top-icon-color-override: #212327}:host-context(.sky-theme-modern) .sky-label-icon-theme-default{display:none}:host-context(.sky-theme-modern) .sky-label-icon-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}:host-context(.sky-theme-modern) .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}:host-context(.sky-theme-modern) .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}:host-context(.sky-theme-modern) .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}.sky-theme-modern .sky-label{align-items:center;display:inline-flex;line-height:1}.sky-theme-modern .sky-label.sky-label-info{background-color:#c1e8fb}.sky-theme-modern .sky-label.sky-label-info,.sky-theme-modern .sky-label.sky-label-success{padding:4px 15px 4px 6px}.sky-theme-modern .sky-label.sky-label-warning,.sky-theme-modern .sky-label.sky-label-danger{padding:4px 15px 4px 9px}.sky-theme-modern .sky-label:not(.sky-label-danger){--sky-icon-stack-top-icon-color-override: #212327}.sky-theme-modern .sky-label-icon-theme-default{display:none}.sky-theme-modern .sky-label-icon-theme-modern{display:block}.sky-theme-modern .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}.sky-theme-modern .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}.sky-theme-modern .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}.sky-theme-modern .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.SkyLibResourcesService }]; }, propDecorators: { labelType: [{
                 type: Input
             }], descriptionType: [{
@@ -846,10 +846,10 @@ _SkyStatusIndicatorComponent_changeDetector = new WeakMap(), _SkyStatusIndicator
     }
 };
 SkyStatusIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyStatusIndicatorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
-SkyStatusIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyStatusIndicatorComponent, selector: "sky-status-indicator", inputs: { indicatorType: "indicatorType", descriptionType: "descriptionType", customDescription: "customDescription" }, ngImport: i0, template: "<div *ngIf=\"descriptionType\" class=\"sky-status-indicator\">\n  <div\n    aria-hidden=\"true\"\n    class=\"sky-margin-inline-xs sky-status-indicator-icon\"\n    [ngClass]=\"'sky-status-indicator-icon-' + indicatorTypeOrDefault\"\n  >\n    <span class=\"sky-status-indicator-icon-default\">\n      <sky-icon [icon]=\"icon\"></sky-icon>\n    </span>\n    <span class=\"sky-status-indicator-icon-modern\">\n      <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n      </sky-icon-stack>\n    </span>\n  </div>\n  <div class=\"sky-status-indicator-message-wrapper\">\n    <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n      {{ descriptionComputed }}\n    </span>\n    <span class=\"sky-status-indicator-message\" skyTrim\n      ><ng-content></ng-content></span\n    ><span class=\"sky-control-help-container\"\n      ><ng-content select=\".sky-control-help\"></ng-content\n    ></span>\n  </div>\n</div>\n", styles: [".sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{flex-shrink:1}.sky-status-indicator-icon-modern{display:none}.sky-status-indicator-icon-info{color:#00b4f1}.sky-status-indicator-icon-success{color:#72bf44}.sky-status-indicator-icon-warning{color:#fbb034}.sky-status-indicator-icon-danger{color:#ef4044}:host-context(.sky-theme-modern) .sky-status-indicator-icon-default{display:none}:host-context(.sky-theme-modern) .sky-status-indicator-icon-modern{display:inline}.sky-theme-modern .sky-status-indicator-icon-default{display:none}.sky-theme-modern .sky-status-indicator-icon-modern{display:inline}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }, { kind: "directive", type: i2.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SkyStatusIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyStatusIndicatorComponent, selector: "sky-status-indicator", inputs: { indicatorType: "indicatorType", descriptionType: "descriptionType", customDescription: "customDescription" }, ngImport: i0, template: "<div *ngIf=\"descriptionType\" class=\"sky-status-indicator\">\n  <div\n    aria-hidden=\"true\"\n    class=\"sky-margin-inline-xs sky-status-indicator-icon\"\n    [ngClass]=\"'sky-status-indicator-icon-' + indicatorTypeOrDefault\"\n  >\n    <span class=\"sky-status-indicator-icon-default\">\n      <sky-icon [icon]=\"icon\"></sky-icon>\n    </span>\n    <span class=\"sky-status-indicator-icon-modern\">\n      <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n      </sky-icon-stack>\n    </span>\n  </div>\n  <div class=\"sky-status-indicator-message-wrapper\">\n    <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n      {{ descriptionComputed }}\n    </span>\n    <span class=\"sky-status-indicator-message\" skyTrim\n      ><ng-content></ng-content></span\n    ><span class=\"sky-control-help-container\"\n      ><ng-content select=\".sky-control-help\"></ng-content\n    ></span>\n  </div>\n</div>\n", styles: [".sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{flex-shrink:1}.sky-status-indicator-icon-modern{display:none}.sky-status-indicator-icon-info{color:#00b4f1}.sky-status-indicator-icon-success{color:#72bf44}.sky-status-indicator-icon-warning{color:#fbb034}.sky-status-indicator-icon-danger{color:#ef4044}:host-context(.sky-theme-modern) .sky-status-indicator-icon:not(.sky-status-indicator-icon-danger){--sky-icon-stack-top-icon-color-override: #212327}:host-context(.sky-theme-modern) .sky-status-indicator-icon-default{display:none}:host-context(.sky-theme-modern) .sky-status-indicator-icon-modern{display:inline}.sky-theme-modern .sky-status-indicator-icon:not(.sky-status-indicator-icon-danger){--sky-icon-stack-top-icon-color-override: #212327}.sky-theme-modern .sky-status-indicator-icon-default{display:none}.sky-theme-modern .sky-status-indicator-icon-modern{display:inline}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }, { kind: "directive", type: i2.λ4, selector: "[skyTrim]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyStatusIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-status-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"descriptionType\" class=\"sky-status-indicator\">\n  <div\n    aria-hidden=\"true\"\n    class=\"sky-margin-inline-xs sky-status-indicator-icon\"\n    [ngClass]=\"'sky-status-indicator-icon-' + indicatorTypeOrDefault\"\n  >\n    <span class=\"sky-status-indicator-icon-default\">\n      <sky-icon [icon]=\"icon\"></sky-icon>\n    </span>\n    <span class=\"sky-status-indicator-icon-modern\">\n      <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n      </sky-icon-stack>\n    </span>\n  </div>\n  <div class=\"sky-status-indicator-message-wrapper\">\n    <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n      {{ descriptionComputed }}\n    </span>\n    <span class=\"sky-status-indicator-message\" skyTrim\n      ><ng-content></ng-content></span\n    ><span class=\"sky-control-help-container\"\n      ><ng-content select=\".sky-control-help\"></ng-content\n    ></span>\n  </div>\n</div>\n", styles: [".sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{flex-shrink:1}.sky-status-indicator-icon-modern{display:none}.sky-status-indicator-icon-info{color:#00b4f1}.sky-status-indicator-icon-success{color:#72bf44}.sky-status-indicator-icon-warning{color:#fbb034}.sky-status-indicator-icon-danger{color:#ef4044}:host-context(.sky-theme-modern) .sky-status-indicator-icon-default{display:none}:host-context(.sky-theme-modern) .sky-status-indicator-icon-modern{display:inline}.sky-theme-modern .sky-status-indicator-icon-default{display:none}.sky-theme-modern .sky-status-indicator-icon-modern{display:inline}\n"] }]
+            args: [{ selector: 'sky-status-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"descriptionType\" class=\"sky-status-indicator\">\n  <div\n    aria-hidden=\"true\"\n    class=\"sky-margin-inline-xs sky-status-indicator-icon\"\n    [ngClass]=\"'sky-status-indicator-icon-' + indicatorTypeOrDefault\"\n  >\n    <span class=\"sky-status-indicator-icon-default\">\n      <sky-icon [icon]=\"icon\"></sky-icon>\n    </span>\n    <span class=\"sky-status-indicator-icon-modern\">\n      <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n      </sky-icon-stack>\n    </span>\n  </div>\n  <div class=\"sky-status-indicator-message-wrapper\">\n    <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n      {{ descriptionComputed }}\n    </span>\n    <span class=\"sky-status-indicator-message\" skyTrim\n      ><ng-content></ng-content></span\n    ><span class=\"sky-control-help-container\"\n      ><ng-content select=\".sky-control-help\"></ng-content\n    ></span>\n  </div>\n</div>\n", styles: [".sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{flex-shrink:1}.sky-status-indicator-icon-modern{display:none}.sky-status-indicator-icon-info{color:#00b4f1}.sky-status-indicator-icon-success{color:#72bf44}.sky-status-indicator-icon-warning{color:#fbb034}.sky-status-indicator-icon-danger{color:#ef4044}:host-context(.sky-theme-modern) .sky-status-indicator-icon:not(.sky-status-indicator-icon-danger){--sky-icon-stack-top-icon-color-override: #212327}:host-context(.sky-theme-modern) .sky-status-indicator-icon-default{display:none}:host-context(.sky-theme-modern) .sky-status-indicator-icon-modern{display:inline}.sky-theme-modern .sky-status-indicator-icon:not(.sky-status-indicator-icon-danger){--sky-icon-stack-top-icon-color-override: #212327}.sky-theme-modern .sky-status-indicator-icon-default{display:none}.sky-theme-modern .sky-status-indicator-icon-modern{display:inline}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.SkyLibResourcesService }]; }, propDecorators: { indicatorType: [{
                 type: Input
             }], descriptionType: [{