@ukic/web-components 2.26.0 → 3.0.0

package/dist/collection/components/ic-input-validation/ic-input-validation.css

@@ -4,7 +4,7 @@ ic-input-validation {
   display: flex;
 }
 
-ic-input-validation.fullwidth {
+ic-input-validation.ic-input-validation-full-width {
   width: 100%;
 }
 

package/dist/collection/components/ic-input-validation/ic-input-validation.js

@@ -27,8 +27,8 @@ export class InputValidation {
         const displayIcon = this.status !== "" ? icon[this.status] : "";
         const id = getInputValidationTextID(this.for);
         return (h(Host, { class: {
-                [this.status]: this.status !== "",
-                ["fullwidth"]: this.fullWidth,
+                [`ic-input-validation-${this.status}`]: this.status !== "",
+                ["ic-input-validation-full-width"]: this.fullWidth,
             } }, displayIcon !== "" && (h("span", { class: {
                 ["status-icon"]: true,
                 [`icon-${this.status}`]: true,

package/dist/collection/components/ic-input-validation/ic-input-validation.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-input-validation.js","sourceRoot":"","sources":["../../../src/components/ic-input-validation/ic-input-validation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EACL,mBAAmB,GAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAExD,OAAO,EACL,wBAAwB,EACxB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAG7B,MAAM,IAAI,GAAG;IACX,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;IAC1C,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,SAAS;IACtC,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;CAC3C,CAAC;AAEF;;GAEG;AAKH,MAAM,OAAO,eAAe;;4BAMqB,QAAQ;;yBAU1B,KAAK;;sBAUW,EAAE;;IAE/C,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAChE,MAAM,EAAE,GAAG,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC9C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,KAAK,EAAE;gBACjC,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,SAAS;aAC9B;YAEA,WAAW,KAAK,EAAE,IAAI,CACrB,YACE,KAAK,EAAE;oBACL,CAAC,aAAa,CAAC,EAAE,IAAI;oBACrB,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;iBAC9B,EACD,SAAS,EAAE,WAAW,GACtB,CACH;YAED,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY;gBACjD,yBAAiB,IAAI,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,IACvC,IAAI,CAAC,OAAO,CACR,CACO;YAEhB,YAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n  getInputValidationTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst icon = {\n  [IcInformationStatus.Warning]: warningIcon,\n  [IcInformationStatus.Error]: errorIcon,\n  [IcInformationStatus.Success]: successIcon,\n};\n\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\n@Component({\n  tag: \"ic-input-validation\",\n  styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n  @Element() el: HTMLIcInputValidationElement;\n\n  /**\n   *  The ARIA live mode to apply to the message.\n   */\n  @Prop() ariaLiveMode: IcAriaLiveModeVariants = \"polite\";\n\n  /**\n   * The ID of the form element the validation is bound to.\n   */\n  @Prop() for: string;\n\n  /**\n   *  If `true`, the input validation will fill the width of the container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * The validation message to display.\n   */\n  @Prop() message!: string;\n\n  /**\n   * The status of the validation - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() status: IcInformationStatusOrEmpty = \"\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.message, propName: \"message\" }],\n      \"Input Validation\"\n    );\n  }\n\n  render() {\n    const displayIcon = this.status !== \"\" ? icon[this.status] : \"\";\n    const id = getInputValidationTextID(this.for);\n    return (\n      <Host\n        class={{\n          [this.status]: this.status !== \"\",\n          [\"fullwidth\"]: this.fullWidth,\n        }}\n      >\n        {displayIcon !== \"\" && (\n          <span\n            class={{\n              [\"status-icon\"]: true,\n              [`icon-${this.status}`]: true,\n            }}\n            innerHTML={displayIcon}\n          />\n        )}\n\n        <ic-typography variant=\"caption\" class=\"statustext\">\n          <span aria-live={this.ariaLiveMode} id={id}>\n            {this.message}\n          </span>\n        </ic-typography>\n\n        <slot name=\"validation-message-adornment\"></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-input-validation.js","sourceRoot":"","sources":["../../../src/components/ic-input-validation/ic-input-validation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EACL,mBAAmB,GAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAExD,OAAO,EACL,wBAAwB,EACxB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAG7B,MAAM,IAAI,GAAG;IACX,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;IAC1C,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,SAAS;IACtC,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;CAC3C,CAAC;AAEF;;GAEG;AAKH,MAAM,OAAO,eAAe;;4BAMqB,QAAQ;;yBAU1B,KAAK;;sBAUW,EAAE;;IAE/C,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAChE,MAAM,EAAE,GAAG,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC9C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,uBAAuB,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,KAAK,EAAE;gBAC1D,CAAC,gCAAgC,CAAC,EAAE,IAAI,CAAC,SAAS;aACnD;YAEA,WAAW,KAAK,EAAE,IAAI,CACrB,YACE,KAAK,EAAE;oBACL,CAAC,aAAa,CAAC,EAAE,IAAI;oBACrB,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;iBAC9B,EACD,SAAS,EAAE,WAAW,GACtB,CACH;YAED,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY;gBACjD,yBAAiB,IAAI,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,IACvC,IAAI,CAAC,OAAO,CACR,CACO;YAEhB,YAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n  getInputValidationTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst icon = {\n  [IcInformationStatus.Warning]: warningIcon,\n  [IcInformationStatus.Error]: errorIcon,\n  [IcInformationStatus.Success]: successIcon,\n};\n\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\n@Component({\n  tag: \"ic-input-validation\",\n  styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n  @Element() el: HTMLIcInputValidationElement;\n\n  /**\n   *  The ARIA live mode to apply to the message.\n   */\n  @Prop() ariaLiveMode: IcAriaLiveModeVariants = \"polite\";\n\n  /**\n   * The ID of the form element the validation is bound to.\n   */\n  @Prop() for: string;\n\n  /**\n   *  If `true`, the input validation will fill the width of the container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * The validation message to display.\n   */\n  @Prop() message!: string;\n\n  /**\n   * The status of the validation - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() status: IcInformationStatusOrEmpty = \"\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.message, propName: \"message\" }],\n      \"Input Validation\"\n    );\n  }\n\n  render() {\n    const displayIcon = this.status !== \"\" ? icon[this.status] : \"\";\n    const id = getInputValidationTextID(this.for);\n    return (\n      <Host\n        class={{\n          [`ic-input-validation-${this.status}`]: this.status !== \"\",\n          [\"ic-input-validation-full-width\"]: this.fullWidth,\n        }}\n      >\n        {displayIcon !== \"\" && (\n          <span\n            class={{\n              [\"status-icon\"]: true,\n              [`icon-${this.status}`]: true,\n            }}\n            innerHTML={displayIcon}\n          />\n        )}\n\n        <ic-typography variant=\"caption\" class=\"statustext\">\n          <span aria-live={this.ariaLiveMode} id={id}>\n            {this.message}\n          </span>\n        </ic-typography>\n\n        <slot name=\"validation-message-adornment\"></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-input-validation/test/basic/ic-input-validation.spec.js

@@ -22,7 +22,7 @@ describe("ic-input-validation", () => {
             html: `<ic-input-validation for="test-id" message="validation message" status="success"></ic-input-validation>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-validation class="success" for="test-id" message="validation message" status="success">
+    <ic-input-validation class="ic-input-validation-success" for="test-id" message="validation message" status="success">
       <span class="icon-success status-icon">
         svg
       </span>
@@ -40,7 +40,7 @@ describe("ic-input-validation", () => {
             html: `<ic-input-validation for="test-id" message="validation message" status="warning"></ic-input-validation>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-validation class="warning" for="test-id" message="validation message" status="warning">
+    <ic-input-validation class="ic-input-validation-warning" for="test-id" message="validation message" status="warning">
       <span class="icon-warning status-icon">
         svg
       </span>
@@ -58,7 +58,7 @@ describe("ic-input-validation", () => {
             html: `<ic-input-validation for="test-id" message="validation message" status="error"></ic-input-validation>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-validation class="error" for="test-id" message="validation message" status="error">
+    <ic-input-validation class="ic-input-validation-error" for="test-id" message="validation message" status="error">
       <span class="icon-error status-icon">
         svg
       </span>
@@ -76,7 +76,7 @@ describe("ic-input-validation", () => {
             html: `<ic-input-validation for="test-id" message="validation message" full-width=true></ic-input-validation>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-validation for="test-id" class="fullwidth" full-width="true" message="validation message">
+    <ic-input-validation for="test-id" class="ic-input-validation-full-width" full-width="true" message="validation message">
       <ic-typography class="statustext" variant="caption">
         <span aria-live="polite" id="test-id-validation-text">
           validation message

package/dist/collection/components/ic-input-validation/test/basic/ic-input-validation.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-input-validation.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-input-validation/test/basic/ic-input-validation.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,wFAAwF;SAC/F,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,yGAAyG;SAChH,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,yGAAyG;SAChH,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,uGAAuG;SAC9G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,wGAAwG;SAC/G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { InputValidation } from \"../../ic-input-validation\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-validation\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation for=\"test-id\" message=\"validation message\">\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"should render with success status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"success\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"success\" for=\"test-id\" message=\"validation message\" status=\"success\">\n      <span class=\"icon-success status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"should render with warning status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"warning\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"warning\" for=\"test-id\" message=\"validation message\" status=\"warning\">\n      <span class=\"icon-warning status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"should render with error status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"error\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"error\" for=\"test-id\" message=\"validation message\" status=\"error\">\n      <span class=\"icon-error status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"should render with full width\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" full-width=true></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation for=\"test-id\" class=\"fullwidth\" full-width=\"true\" message=\"validation message\">\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"ic-input-validation.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-input-validation/test/basic/ic-input-validation.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,wFAAwF;SAC/F,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,yGAAyG;SAChH,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,yGAAyG;SAChH,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,uGAAuG;SAC9G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,wGAAwG;SAC/G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { InputValidation } from \"../../ic-input-validation\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-validation\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation for=\"test-id\" message=\"validation message\">\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"should render with success status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"success\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"ic-input-validation-success\" for=\"test-id\" message=\"validation message\" status=\"success\">\n      <span class=\"icon-success status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"should render with warning status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"warning\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"ic-input-validation-warning\" for=\"test-id\" message=\"validation message\" status=\"warning\">\n      <span class=\"icon-warning status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"should render with error status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"error\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"ic-input-validation-error\" for=\"test-id\" message=\"validation message\" status=\"error\">\n      <span class=\"icon-error status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"should render with full width\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" full-width=true></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation for=\"test-id\" class=\"ic-input-validation-full-width\" full-width=\"true\" message=\"validation message\">\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n});\n"]}

package/dist/collection/components/ic-link/ic-link.css

@@ -441,33 +441,33 @@ video {
 }
 
 
-:host(.link) .ic-link,
-:host(.link) ::slotted(a) {
+:host(.ic-link) .link,
+:host(.ic-link) ::slotted(a) {
   color: var(--ic-hyperlink);
   text-decoration: underline;
   font-weight: var(--ic-font-weight-bold);
   transition: var(--ic-easing-transition-fast);
 }
 
-:host(.link.dark) .ic-link.dark,
-:host(.link.dark) ::slotted(a) {
+:host(.ic-link.ic-link-dark) .link.dark,
+:host(.ic-link.ic-link-dark) ::slotted(a) {
   color: var(--ic-color-primary-text);
 }
 
-:host(.link.light) .ic-link.light,
-:host(.link.light) ::slotted(a) {
+:host(.ic-link.ic-link-light) .link.light,
+:host(.ic-link.ic-link-light) ::slotted(a) {
   color: var(--ic-color-white-text);
 }
 
-:host(.link) .ic-link:visited,
-:host(.link) ::slotted(a:visited) {
+:host(.ic-link) .link:visited,
+:host(.ic-link) ::slotted(a:visited) {
   color: var(--ic-hyperlink-visited);
 }
 
-:host(.link) .ic-link:hover,
-:host(.link) .ic-link:focus,
-:host(.link) ::slotted(a:hover),
-:host(.link) ::slotted(a:focus) {
+:host(.ic-link) .link:hover,
+:host(.ic-link) .link:focus,
+:host(.ic-link) ::slotted(a:hover),
+:host(.ic-link) ::slotted(a:focus) {
   outline: none;
   border-bottom: 0.25rem solid !important;
   margin-bottom: -0.25rem !important;
@@ -475,10 +475,10 @@ video {
 }
 
 @supports (text-underline-offset: 10%) {
-  :host(.link) .ic-link:hover,
-  :host(.link) .ic-link:focus,
-  :host(.link) ::slotted(a:hover),
-  :host(.link) ::slotted(a:focus) {
+  :host(.ic-link) .link:hover,
+  :host(.ic-link) .link:focus,
+  :host(.ic-link) ::slotted(a:hover),
+  :host(.ic-link) ::slotted(a:focus) {
     text-decoration-line: underline;
     text-decoration-thickness: 25%;
     text-underline-offset: 10%;
@@ -487,12 +487,12 @@ video {
   }
 }
 
-:host(.link) .ic-link:active,
-:host(.link) .ic-link:focus:active,
-:host(.link) .ic-link:visited:active,
-:host(.link) ::slotted(a:active),
-:host(.link) ::slotted(a:focus:active),
-:host(.link) ::slotted(a:visited:active) {
+:host(.ic-link) .link:active,
+:host(.ic-link) .link:focus:active,
+:host(.ic-link) .link:visited:active,
+:host(.ic-link) ::slotted(a:active),
+:host(.ic-link) ::slotted(a:focus:active),
+:host(.ic-link) ::slotted(a:visited:active) {
   text-decoration: none;
 }
 
@@ -501,15 +501,15 @@ video {
   margin-left: var(--ic-space-xxs);
 }
 
-.ic-link > .ic-link-open-in-new-icon {
+.link > .ic-link-open-in-new-icon {
   fill: var(--ic-hyperlink);
 }
 
-.ic-link.dark > .ic-link-open-in-new-icon {
+.link.dark > .ic-link-open-in-new-icon {
   fill: var(--ic-color-primary-text);
 }
 
-.ic-link.light > .ic-link-open-in-new-icon {
+.link.light > .ic-link-open-in-new-icon {
   fill: var(--ic-color-white-text);
 }
 
@@ -519,21 +519,21 @@ video {
   fill: currentcolor;
 }
 
-.ic-link:visited > .ic-link-open-in-new-icon {
+.link:visited > .ic-link-open-in-new-icon {
   fill: var(--ic-hyperlink-visited);
 }
 
-.ic-link.light:visited > .ic-link-open-in-new-icon {
+.link.light:visited > .ic-link-open-in-new-icon {
   fill: var(--ic-hyperlink-contrast-visited);
 }
 
-:host(.breadcrumb-link) .ic-link {
+:host(.breadcrumb-link) .link {
   display: var(--breadcrumb-link-display);
   align-items: var(--breadcrumb-link-align-items);
   gap: var(--breadcrumb-link-gap);
 }
 
-:host(.breadcrumb-link) .ic-link ::slotted(.back-icon) {
+:host(.breadcrumb-link) .link ::slotted(.back-icon) {
   height: var(--ic-space-lg);
   width: var(--ic-space-lg);
 }
@@ -547,12 +547,12 @@ video {
   align-items: center;
 }
 
-:host(.breadcrumb-link.current-page) .ic-link,
+:host(.breadcrumb-link.current-page) .link,
 :host(.breadcrumb-link.current-page) ::slotted(a:focus) {
   outline: var(--ic-hc-focus-outline);
   text-decoration: none;
 }
 
-:host(.breadcrumb-link.current-page) .ic-link:visited {
+:host(.breadcrumb-link.current-page) .link:visited {
   color: var(--ic-color-primary-text);
 }

package/dist/collection/components/ic-link/ic-link.js

@@ -30,7 +30,6 @@ export class Link {
         this.hreflang = undefined;
         this.referrerpolicy = undefined;
         this.rel = undefined;
-        this.showIcon = undefined;
         this.target = undefined;
     }
     componentWillLoad() {
@@ -71,11 +70,11 @@ export class Link {
         return !!this.routerSlot;
     }
     render() {
-        const { download, href, hreflang, referrerpolicy, rel, target, showIcon, appearance, } = this;
-        return (h(Host, { class: { ["link"]: true, [`${appearance}`]: true } }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h("a", Object.assign({ class: {
-                ["ic-link"]: href !== null,
+        const { download, href, hreflang, referrerpolicy, rel, target, appearance, } = this;
+        return (h(Host, { class: { ["ic-link"]: true, [`ic-link-${appearance}`]: true } }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h("a", Object.assign({ class: {
+                ["link"]: href !== null,
                 [`${appearance}`]: href !== null,
-            }, download: download !== false ? download : null, href: href, hrefLang: hreflang, referrerPolicy: referrerpolicy, rel: rel, target: target, tabindex: href !== null ? "0" : "-1" }, this.inheritedAttributes), h("slot", null), (showIcon || target === "_blank") && (h("span", { class: "ic-link-open-in-new-icon", innerHTML: OpenInNew }))))));
+            }, download: download !== false ? download : null, href: href, hrefLang: hreflang, referrerPolicy: referrerpolicy, rel: rel, target: target, tabindex: href !== null ? "0" : "-1" }, this.inheritedAttributes), h("slot", null), target === "_blank" && (h("span", { class: "ic-link-open-in-new-icon", innerHTML: OpenInNew }))))));
     }
     static get is() { return "ic-link"; }
     static get encapsulation() { return "shadow"; }
@@ -208,26 +207,6 @@ export class Link {
                 "attribute": "rel",
                 "reflect": false
             },
-            "showIcon": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. The 'open in new tab/window' icon will display automatically if target=\"_blank\"."
-                        }],
-                    "text": ""
-                },
-                "attribute": "show-icon",
-                "reflect": false
-            },
             "target": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/ic-link/ic-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-link.js","sourceRoot":"","sources":["../../../src/components/ic-link/ic-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Prop,\n  h,\n  Host,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n\n@Component({\n  tag: \"ic-link\",\n  styleUrl: \"ic-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Link {\n  private inheritedAttributes: { [k: string]: string } = {};\n  private routerSlot: HTMLElement;\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcLinkElement;\n\n  /**\n   * The appearance of the link, e.g. dark, light, or default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * @deprecated This prop should not be used anymore. The 'open in new tab/window' icon will display automatically if target=\"_blank\".\n   */\n  @Prop() showIcon?: boolean;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);\n    this.updateTheme();\n  }\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.updateTheme(detail.mode);\n  }\n\n  /**\n   * Sets focus on the link.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector(\"a\")?.focus();\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme);\n\n    if (theme !== IcThemeForegroundEnum.Default) {\n      this.appearance = theme;\n    }\n  }\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (IC_INHERITED_ARIA.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      download,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      showIcon,\n      appearance,\n    } = this;\n\n    return (\n      <Host class={{ [\"link\"]: true, [`${appearance}`]: true }}>\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\"></slot>\n        ) : (\n          <a\n            class={{\n              [\"ic-link\"]: href !== null,\n              [`${appearance}`]: href !== null,\n            }}\n            download={download !== false ? download : null}\n            href={href}\n            hrefLang={hreflang}\n            referrerPolicy={referrerpolicy}\n            rel={rel}\n            target={target}\n            tabindex={href !== null ? \"0\" : \"-1\"}\n            {...this.inheritedAttributes}\n          >\n            <slot />\n            {(showIcon || target === \"_blank\") && (\n              <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n            )}\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-link.js","sourceRoot":"","sources":["../../../src/components/ic-link/ic-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Prop,\n  h,\n  Host,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n\n@Component({\n  tag: \"ic-link\",\n  styleUrl: \"ic-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Link {\n  private inheritedAttributes: { [k: string]: string } = {};\n  private routerSlot: HTMLElement;\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcLinkElement;\n\n  /**\n   * The appearance of the link, e.g. dark, light, or default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);\n    this.updateTheme();\n  }\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.updateTheme(detail.mode);\n  }\n\n  /**\n   * Sets focus on the link.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector(\"a\")?.focus();\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme);\n\n    if (theme !== IcThemeForegroundEnum.Default) {\n      this.appearance = theme;\n    }\n  }\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (IC_INHERITED_ARIA.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      download,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      appearance,\n    } = this;\n\n    return (\n      <Host class={{ [\"ic-link\"]: true, [`ic-link-${appearance}`]: true }}>\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\"></slot>\n        ) : (\n          <a\n            class={{\n              [\"link\"]: href !== null,\n              [`${appearance}`]: href !== null,\n            }}\n            download={download !== false ? download : null}\n            href={href}\n            hrefLang={hreflang}\n            referrerPolicy={referrerpolicy}\n            rel={rel}\n            target={target}\n            tabindex={href !== null ? \"0\" : \"-1\"}\n            {...this.inheritedAttributes}\n          >\n            <slot />\n            {target === \"_blank\" && (\n              <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n            )}\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-link/test/basic/ic-link.spec.js

@@ -8,7 +8,7 @@ describe("ic-link component", () => {
             html: `<ic-link>IC Link Test</ic-link>`,
         });
         expect(page.root).toEqualHtml(`
-      <ic-link class="default link">
+      <ic-link class="ic-link-default ic-link">
       <mock:shadow-root>
         <a tabindex="-1">
         <slot></slot>
@@ -24,7 +24,7 @@ describe("ic-link component", () => {
             html: `<ic-link download="test-download">IC Link Test</ic-link>`,
         });
         expect(page.root)
-            .toEqualHtml(`<ic-link class="default link" download="test-download">
+            .toEqualHtml(`<ic-link class="ic-link-default ic-link" download="test-download">
     <mock:shadow-root>
         <a download="test-download" tabindex="-1">
         <slot></slot>
@@ -40,9 +40,9 @@ describe("ic-link component", () => {
             html: `<ic-link href="test-href">IC Link Test</ic-link>`,
         });
         expect(page.root)
-            .toEqualHtml(`<ic-link href="test-href" class="default link">
+            .toEqualHtml(`<ic-link href="test-href" class="ic-link-default ic-link">
     <mock:shadow-root>
-        <a class="default ic-link" href="test-href" tabindex="0">
+        <a class="default link" href="test-href" tabindex="0">
         <slot></slot>
         </a>
         </mock:shadow-root>
@@ -56,9 +56,9 @@ describe("ic-link component", () => {
             html: `<ic-link  href="test-href" appearance="dark">IC Link Test</ic-link>`,
         });
         expect(page.root)
-            .toEqualHtml(`<ic-link href="test-href" appearance="dark" class="dark link">
+            .toEqualHtml(`<ic-link href="test-href" appearance="dark" class="ic-link-dark ic-link">
     <mock:shadow-root>
-        <a class="dark ic-link" href="test-href" tabindex="0">
+        <a class="dark link" href="test-href" tabindex="0">
         <slot></slot>
         </a>
         </mock:shadow-root>
@@ -72,7 +72,7 @@ describe("ic-link component", () => {
             html: `<ic-link hreflang="test-hreflang">IC Link Test</ic-link>`,
         });
         expect(page.root)
-            .toEqualHtml(`<ic-link class="default link" hreflang="test-hreflang">
+            .toEqualHtml(`<ic-link class="ic-link-default ic-link" hreflang="test-hreflang">
     <mock:shadow-root>
         <a hreflang="test-hreflang" tabindex="-1">
         <slot></slot>
@@ -88,7 +88,7 @@ describe("ic-link component", () => {
             html: `<ic-link referrerpolicy="no-referrer">IC Link Test</ic-link>`,
         });
         expect(page.root)
-            .toEqualHtml(`<ic-link class="default link" referrerpolicy="no-referrer">
+            .toEqualHtml(`<ic-link class="ic-link-default ic-link" referrerpolicy="no-referrer">
     <mock:shadow-root>
         <a referrerpolicy="no-referrer" tabindex="-1">
         <slot></slot>
@@ -103,7 +103,8 @@ describe("ic-link component", () => {
             components: [Link],
             html: `<ic-link rel="test-rel">IC Link Test</ic-link>`,
         });
-        expect(page.root).toEqualHtml(`<ic-link class="default link" rel="test-rel">
+        expect(page.root)
+            .toEqualHtml(`<ic-link class="ic-link-default ic-link" rel="test-rel">
     <mock:shadow-root>
         <a rel="test-rel" tabindex="-1">
         <slot></slot>
@@ -119,7 +120,7 @@ describe("ic-link component", () => {
             html: `<ic-link target="test-target">IC Link Test</ic-link>`,
         });
         expect(page.root)
-            .toEqualHtml(`<ic-link class="default link" target="test-target">
+            .toEqualHtml(`<ic-link class="ic-link-default ic-link" target="test-target">
     <mock:shadow-root>
         <a target="test-target" tabindex="-1">
         <slot></slot>
@@ -129,14 +130,15 @@ describe("ic-link component", () => {
       </ic-link>
     `);
     });
-    it("should render an 'open in new' icon when 'show-icon' is provided", async () => {
+    it("should render an 'open in new' icon when target is blank", async () => {
         const page = await newSpecPage({
             components: [Link],
-            html: `<ic-link show-icon>IC Link Test</ic-link>`,
+            html: `<ic-link target="_blank">IC Link Test</ic-link>`,
         });
-        expect(page.root).toEqualHtml(`<ic-link class="default link" show-icon>
+        expect(page.root)
+            .toEqualHtml(`<ic-link class="ic-link-default ic-link" target="_blank">
     <mock:shadow-root>
-        <a tabindex="-1">
+        <a tabindex="-1" target="_blank">
           <slot></slot>
           <span class="ic-link-open-in-new-icon">
             svg
@@ -154,11 +156,11 @@ describe("ic-link component", () => {
         <ic-link slot="router-item">Slotted Link</ic-link>
       </ic-link>`,
         });
-        expect(page.root).toEqualHtml(`<ic-link class="default link">
+        expect(page.root).toEqualHtml(`<ic-link class="ic-link-default ic-link">
     <mock:shadow-root>
       <slot name="router-item"></slot>
     </mock:shadow-root>
-    <ic-link class="default link" slot="router-item">
+    <ic-link class="ic-link-default ic-link" slot="router-item">
       <mock:shadow-root>
         <a tabindex="-1">
           <slot></slot>

package/dist/collection/components/ic-link/test/basic/ic-link.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-link.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-link/test/basic/ic-link.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Alert } from \"../../../ic-alert/ic-alert\";\nimport { Link } from \"../../ic-link\";\n\ndescribe(\"ic-link component\", () => {\n  it(\"should render a link by default with the correct text\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-link class=\"default link\">\n      <mock:shadow-root>\n        <a tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'download' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link download=\"test-download\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"default link\" download=\"test-download\">\n    <mock:shadow-root>\n        <a download=\"test-download\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'href' attribute and ic-link styling to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link href=\"test-href\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link href=\"test-href\" class=\"default link\">\n    <mock:shadow-root>\n        <a class=\"default ic-link\" href=\"test-href\" tabindex=\"0\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'dark' appearance styling and ic-link styling\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link  href=\"test-href\" appearance=\"dark\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link href=\"test-href\" appearance=\"dark\" class=\"dark link\">\n    <mock:shadow-root>\n        <a class=\"dark ic-link\" href=\"test-href\" tabindex=\"0\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'hreflang' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link hreflang=\"test-hreflang\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"default link\" hreflang=\"test-hreflang\">\n    <mock:shadow-root>\n        <a hreflang=\"test-hreflang\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'referrerpolicy' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link referrerpolicy=\"no-referrer\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"default link\" referrerpolicy=\"no-referrer\">\n    <mock:shadow-root>\n        <a referrerpolicy=\"no-referrer\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'rel' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link rel=\"test-rel\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`<ic-link class=\"default link\" rel=\"test-rel\">\n    <mock:shadow-root>\n        <a rel=\"test-rel\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'target' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link target=\"test-target\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"default link\" target=\"test-target\">\n    <mock:shadow-root>\n        <a target=\"test-target\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should render an 'open in new' icon when 'show-icon' is provided\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link show-icon>IC Link Test</ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`<ic-link class=\"default link\" show-icon>\n    <mock:shadow-root>\n        <a tabindex=\"-1\">\n          <slot></slot>\n          <span class=\"ic-link-open-in-new-icon\">\n            svg\n          </span>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should render a slotted link\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>\n        <ic-link slot=\"router-item\">Slotted Link</ic-link>\n      </ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`<ic-link class=\"default link\">\n    <mock:shadow-root>\n      <slot name=\"router-item\"></slot>\n    </mock:shadow-root>\n    <ic-link class=\"default link\" slot=\"router-item\">\n      <mock:shadow-root>\n        <a tabindex=\"-1\">\n          <slot></slot>\n        </a>\n      </mock:shadow-root>\n      Slotted Link\n      </ic-link>\n      </ic-link>\n    `);\n  });\n\n  it(\"should get theme from context\", async () => {\n    const page = await newSpecPage({\n      components: [Alert, Link],\n      html: `<ic-alert message=\"This has an action\"><ic-link slot=\"action\">Theme context link</ic-link></ic-alert>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"alert-theme-context\");\n  });\n\n  it(\"should correctly set variant on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-hero heading=\"Hero heading\" subheading=\"Hero description\">\n      <ic-link slot=\"interaction\">Link</ic-link>\n    </ic-hero>\n`,\n    });\n\n    page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.appearance).toBe(\"dark\");\n\n    page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.appearance).toBe(\"light\");\n  });\n\n  it(\"should call 'setFocus' when link is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should update any attributes that are inherited from the root element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n    expect(\n      page.root.shadowRoot.querySelector(\"a\").getAttribute(\"aria-label\")\n    ).toBeNull();\n\n    page.root.setAttribute(\"aria-label\", \"new-label\");\n    page.rootInstance.hostMutationCallback([{ attributeName: \"aria-label\" }]);\n    await page.waitForChanges();\n\n    expect(\n      page.root.shadowRoot.querySelector(\"a\").getAttribute(\"aria-label\")\n    ).toBe(\"new-label\");\n    page.rootInstance.disconnectedCallback();\n  });\n});\n"]}
+{"version":3,"file":"ic-link.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-link/test/basic/ic-link.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Alert } from \"../../../ic-alert/ic-alert\";\nimport { Link } from \"../../ic-link\";\n\ndescribe(\"ic-link component\", () => {\n  it(\"should render a link by default with the correct text\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <ic-link class=\"ic-link-default ic-link\">\n      <mock:shadow-root>\n        <a tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'download' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link download=\"test-download\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"ic-link-default ic-link\" download=\"test-download\">\n    <mock:shadow-root>\n        <a download=\"test-download\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'href' attribute and ic-link styling to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link href=\"test-href\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link href=\"test-href\" class=\"ic-link-default ic-link\">\n    <mock:shadow-root>\n        <a class=\"default link\" href=\"test-href\" tabindex=\"0\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'dark' appearance styling and ic-link styling\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link  href=\"test-href\" appearance=\"dark\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link href=\"test-href\" appearance=\"dark\" class=\"ic-link-dark ic-link\">\n    <mock:shadow-root>\n        <a class=\"dark link\" href=\"test-href\" tabindex=\"0\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'hreflang' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link hreflang=\"test-hreflang\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"ic-link-default ic-link\" hreflang=\"test-hreflang\">\n    <mock:shadow-root>\n        <a hreflang=\"test-hreflang\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'referrerpolicy' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link referrerpolicy=\"no-referrer\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"ic-link-default ic-link\" referrerpolicy=\"no-referrer\">\n    <mock:shadow-root>\n        <a referrerpolicy=\"no-referrer\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'rel' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link rel=\"test-rel\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"ic-link-default ic-link\" rel=\"test-rel\">\n    <mock:shadow-root>\n        <a rel=\"test-rel\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should apply the 'target' attribute to the anchor element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link target=\"test-target\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"ic-link-default ic-link\" target=\"test-target\">\n    <mock:shadow-root>\n        <a target=\"test-target\" tabindex=\"-1\">\n        <slot></slot>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should render an 'open in new' icon when target is blank\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link target=\"_blank\">IC Link Test</ic-link>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-link class=\"ic-link-default ic-link\" target=\"_blank\">\n    <mock:shadow-root>\n        <a tabindex=\"-1\" target=\"_blank\">\n          <slot></slot>\n          <span class=\"ic-link-open-in-new-icon\">\n            svg\n          </span>\n        </a>\n        </mock:shadow-root>\n        IC Link Test\n      </ic-link>\n    `);\n  });\n\n  it(\"should render a slotted link\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>\n        <ic-link slot=\"router-item\">Slotted Link</ic-link>\n      </ic-link>`,\n    });\n\n    expect(page.root).toEqualHtml(`<ic-link class=\"ic-link-default ic-link\">\n    <mock:shadow-root>\n      <slot name=\"router-item\"></slot>\n    </mock:shadow-root>\n    <ic-link class=\"ic-link-default ic-link\" slot=\"router-item\">\n      <mock:shadow-root>\n        <a tabindex=\"-1\">\n          <slot></slot>\n        </a>\n      </mock:shadow-root>\n      Slotted Link\n      </ic-link>\n      </ic-link>\n    `);\n  });\n\n  it(\"should get theme from context\", async () => {\n    const page = await newSpecPage({\n      components: [Alert, Link],\n      html: `<ic-alert message=\"This has an action\"><ic-link slot=\"action\">Theme context link</ic-link></ic-alert>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"alert-theme-context\");\n  });\n\n  it(\"should correctly set variant on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-hero heading=\"Hero heading\" subheading=\"Hero description\">\n      <ic-link slot=\"interaction\">Link</ic-link>\n    </ic-hero>\n`,\n    });\n\n    page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.appearance).toBe(\"dark\");\n\n    page.rootInstance.themeChangeHandler({ detail: { mode: \"light\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.appearance).toBe(\"light\");\n  });\n\n  it(\"should call 'setFocus' when link is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should update any attributes that are inherited from the root element\", async () => {\n    const page = await newSpecPage({\n      components: [Link],\n      html: `<ic-link>IC Link Test</ic-link>`,\n    });\n    expect(\n      page.root.shadowRoot.querySelector(\"a\").getAttribute(\"aria-label\")\n    ).toBeNull();\n\n    page.root.setAttribute(\"aria-label\", \"new-label\");\n    page.rootInstance.hostMutationCallback([{ attributeName: \"aria-label\" }]);\n    await page.waitForChanges();\n\n    expect(\n      page.root.shadowRoot.querySelector(\"a\").getAttribute(\"aria-label\")\n    ).toBe(\"new-label\");\n    page.rootInstance.disconnectedCallback();\n  });\n});\n"]}

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css

@@ -456,7 +456,7 @@ video {
   --linear-line-height: var(--ic-space-xs);
 }
 
-:host(.light) {
+:host(.ic-loading-indicator-light) {
   --inner-color: var(--ic-architectural-white);
   --outer-color: var(--ic-architectural-800);
   --label-color: var(--ic-architectural-white);
@@ -489,7 +489,7 @@ video {
   --circular-diameter: 1.25rem;
 }
 
-:host(.label) {
+:host(.ic-loading-indicator-label) {
   --margin: 0 0 var(--ic-space-xs) 0;
 }
 
@@ -543,7 +543,7 @@ video {
   width: var(--linear-width);
 }
 
-:host(.full-width) {
+:host(.ic-loading-indicator-full-width) {
   --linear-border-radius: none;
 }
 
@@ -632,7 +632,8 @@ video {
   color: var(--ic-color-tertiary-text);
 }
 
-:host(.light.not-required.compact-step-progress-indicator) .inner-text {
+:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator)
+  .inner-text {
   color: var(--ic-architectural-400);
 }
 

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.js

@@ -63,8 +63,8 @@ export class LoadingIndicator {
             // Ensure progress cannot be out of bounds
             const progress = Math.min(this.max, Math.max(this.min, this.progress));
             const proportion = (progress - this.min) / (this.max - this.min);
-            this.showSecond = proportion > 0.5;
-            if (this.showSecond) {
+            this.clipInnerElement = proportion > 0.5;
+            if (this.clipInnerElement) {
                 this.innerElement.classList.remove("clip");
             }
             else {
@@ -114,7 +114,7 @@ export class LoadingIndicator {
         this.circularLineWidth = undefined;
         this.indeterminate = undefined;
         this.indicatorLabel = undefined;
-        this.showSecond = false;
+        this.clipInnerElement = false;
         this.appearance = "dark";
         this.description = "Loading";
         this.fullWidth = false;
@@ -165,9 +165,9 @@ export class LoadingIndicator {
         const { appearance, label, description, size, fullWidth, innerLabel } = this;
         const { x, y, r } = this.setCircleXY();
         return (h(Host, { class: {
-                ["light"]: appearance === IcThemeForegroundEnum.Light,
-                ["label"]: !!label,
-                ["full-width"]: fullWidth,
+                ["ic-loading-indicator-light"]: appearance === IcThemeForegroundEnum.Light,
+                ["ic-loading-indicator-label"]: !!label,
+                ["ic-loading-indicator-full-width"]: fullWidth,
                 ["inner-label"]: !!innerLabel,
             } }, h("div", { class: "ic-loading-container", part: "ic-loading-container" }, h("div", { ref: (el) => (this.outerElement = el), class: this.calcOuterClass(), role: "progressbar", "aria-labelledby": this.label && this.size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": this.progress, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { ref: (el) => (this.innerElement = el), class: `ic-loading-${this.type}-inner` }, this.innerLabel &&
             this.innerLabel !== undefined &&
@@ -411,7 +411,7 @@ export class LoadingIndicator {
             "circularLineWidth": {},
             "indeterminate": {},
             "indicatorLabel": {},
-            "showSecond": {}
+            "clipInnerElement": {}
         };
     }
     static get elementRef() { return "el"; }