@ukic/web-components 2.28.0 → 3.0.0-alpha.1

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

@@ -3,31 +3,30 @@ import { getInputHelperTextID, onComponentRequiredPropUndefined, } from "../../u
 export class InputLabel {
     constructor() {
         this.appearance = "default";
-        this.dark = false;
         this.disabled = false;
-        this.error = false;
         this.for = undefined;
         this.helperText = "";
         this.label = undefined;
         this.readonly = false;
         this.required = false;
+        this.status = "";
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Input Label");
     }
     render() {
-        const { disabled, readonly, label, required, helperText, error, dark, appearance, } = this;
+        const { disabled, readonly, label, required, helperText, status, appearance, } = this;
         const labelText = required ? label + " *" : label;
         const labelContent = readonly ? (`${labelText}`) : (h("label", { htmlFor: this.for }, labelText));
         const id = getInputHelperTextID(this.for);
         return (h(Host, { class: {
-                ["disabled"]: disabled,
-                ["readonly"]: readonly,
+                ["ic-input-label-disabled"]: disabled,
+                ["ic-input-label-readonly"]: readonly,
                 ["with-helper"]: helperText !== "",
             } }, h("ic-typography", { variant: "label", class: {
                 ["readonly-label"]: readonly,
-                ["error-label"]: error && !(readonly || disabled),
-                ["dark"]: dark || appearance === "dark",
+                ["error-label"]: status === "error" && !(readonly || disabled),
+                ["dark"]: appearance === "dark",
             } }, labelContent), helperText !== "" && (h("ic-typography", { variant: "caption", class: {
                 ["helpertext"]: true,
                 ["helpertext-normal"]: !disabled && !readonly,
@@ -65,27 +64,6 @@ export class InputLabel {
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
-            "dark": {
-                "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. Set prop `appearance` to \"dark\" instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "dark",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -104,24 +82,6 @@ export class InputLabel {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "error": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the input label will display with error styling."
-                },
-                "attribute": "error",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "for": {
                 "type": "string",
                 "mutable": false,
@@ -209,6 +169,24 @@ export class InputLabel {
                 "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"error\" | \"\"",
+                    "resolved": "\"\" | \"error\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The status of the label - e.g. 'error'."
+                },
+                "attribute": "status",
+                "reflect": false,
+                "defaultValue": "\"\""
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ic-input-label.js","sourceRoot":"","sources":["../../../src/components/ic-input-label/ic-input-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EACL,oBAAoB,EACpB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAM7B,MAAM,OAAO,UAAU;;0BAIqB,SAAS;oBAK1B,KAAK;wBAKF,KAAK;qBAKP,KAAK;;0BAUF,EAAE;;wBAUH,KAAK;wBAKL,KAAK;;IAEjC,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,aAAa,CACd,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,IAAI,EACJ,UAAU,GACX,GAAG,IAAI,CAAC;QACT,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QAClD,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAC9B,GAAG,SAAS,EAAE,CACf,CAAC,CAAC,CAAC,CACF,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,IAAG,SAAS,CAAS,CAC9C,CAAC;QAEF,MAAM,EAAE,GAAG,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE1C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,UAAU,CAAC,EAAE,QAAQ;gBACtB,CAAC,UAAU,CAAC,EAAE,QAAQ;gBACtB,CAAC,aAAa,CAAC,EAAE,UAAU,KAAK,EAAE;aACnC;YAED,qBACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAE;oBACL,CAAC,gBAAgB,CAAC,EAAE,QAAQ;oBAC5B,CAAC,aAAa,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC;oBACjD,CAAC,MAAM,CAAC,EAAE,IAAI,IAAI,UAAU,KAAK,MAAM;iBACxC,IAEA,YAAY,CACC;YAEf,UAAU,KAAK,EAAE,IAAI,CACpB,qBACE,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE;oBACL,CAAC,YAAY,CAAC,EAAE,IAAI;oBACpB,CAAC,mBAAmB,CAAC,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;oBAC7C,CAAC,qBAAqB,CAAC,EAAE,QAAQ;iBAClC;gBAED,YAAM,EAAE,EAAE,EAAE,IAAG,UAAU,CAAQ,CACnB,CACjB,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  /**\n   * The appearance of the input label.\n   */\n  @Prop() appearance?: \"dark\" | \"default\" = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `appearance` to \"dark\" instead.\n   */\n  @Prop() dark?: boolean = false;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * If `true`, the input label will display with error styling.\n   */\n  @Prop() error?: boolean = false;\n\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for: string;\n\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  render() {\n    const {\n      disabled,\n      readonly,\n      label,\n      required,\n      helperText,\n      error,\n      dark,\n      appearance,\n    } = this;\n    const labelText = required ? label + \" *\" : label;\n    const labelContent = readonly ? (\n      `${labelText}`\n    ) : (\n      <label htmlFor={this.for}>{labelText}</label>\n    );\n\n    const id = getInputHelperTextID(this.for);\n\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: disabled,\n          [\"readonly\"]: readonly,\n          [\"with-helper\"]: helperText !== \"\",\n        }}\n      >\n        <ic-typography\n          variant=\"label\"\n          class={{\n            [\"readonly-label\"]: readonly,\n            [\"error-label\"]: error && !(readonly || disabled),\n            [\"dark\"]: dark || appearance === \"dark\",\n          }}\n        >\n          {labelContent}\n        </ic-typography>\n\n        {helperText !== \"\" && (\n          <ic-typography\n            variant=\"caption\"\n            class={{\n              [\"helpertext\"]: true,\n              [\"helpertext-normal\"]: !disabled && !readonly,\n              [\"helpertext-readonly\"]: readonly,\n            }}\n          >\n            <span id={id}>{helperText}</span>\n          </ic-typography>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-input-label.js","sourceRoot":"","sources":["../../../src/components/ic-input-label/ic-input-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EACL,oBAAoB,EACpB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAM7B,MAAM,OAAO,UAAU;;0BAIqB,SAAS;wBAKvB,KAAK;;0BAUJ,EAAE;;wBAUH,KAAK;wBAKL,KAAK;sBAKF,EAAE;;IAEjC,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,aAAa,CACd,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,UAAU,EACV,MAAM,EACN,UAAU,GACX,GAAG,IAAI,CAAC;QACT,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QAClD,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,CAC9B,GAAG,SAAS,EAAE,CACf,CAAC,CAAC,CAAC,CACF,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,IAAG,SAAS,CAAS,CAC9C,CAAC;QAEF,MAAM,EAAE,GAAG,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE1C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,yBAAyB,CAAC,EAAE,QAAQ;gBACrC,CAAC,yBAAyB,CAAC,EAAE,QAAQ;gBACrC,CAAC,aAAa,CAAC,EAAE,UAAU,KAAK,EAAE;aACnC;YAED,qBACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAE;oBACL,CAAC,gBAAgB,CAAC,EAAE,QAAQ;oBAC5B,CAAC,aAAa,CAAC,EAAE,MAAM,KAAK,OAAO,IAAI,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC;oBAC9D,CAAC,MAAM,CAAC,EAAE,UAAU,KAAK,MAAM;iBAChC,IAEA,YAAY,CACC;YAEf,UAAU,KAAK,EAAE,IAAI,CACpB,qBACE,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE;oBACL,CAAC,YAAY,CAAC,EAAE,IAAI;oBACpB,CAAC,mBAAmB,CAAC,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;oBAC7C,CAAC,qBAAqB,CAAC,EAAE,QAAQ;iBAClC;gBAED,YAAM,EAAE,EAAE,EAAE,IAAG,UAAU,CAAQ,CACnB,CACjB,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  /**\n   * The appearance of the input label.\n   */\n  @Prop() appearance?: \"dark\" | \"default\" = \"default\";\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for: string;\n\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The status of the label - e.g. 'error'.\n   */\n  @Prop() status: \"error\" | \"\" = \"\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  render() {\n    const {\n      disabled,\n      readonly,\n      label,\n      required,\n      helperText,\n      status,\n      appearance,\n    } = this;\n    const labelText = required ? label + \" *\" : label;\n    const labelContent = readonly ? (\n      `${labelText}`\n    ) : (\n      <label htmlFor={this.for}>{labelText}</label>\n    );\n\n    const id = getInputHelperTextID(this.for);\n\n    return (\n      <Host\n        class={{\n          [\"ic-input-label-disabled\"]: disabled,\n          [\"ic-input-label-readonly\"]: readonly,\n          [\"with-helper\"]: helperText !== \"\",\n        }}\n      >\n        <ic-typography\n          variant=\"label\"\n          class={{\n            [\"readonly-label\"]: readonly,\n            [\"error-label\"]: status === \"error\" && !(readonly || disabled),\n            [\"dark\"]: appearance === \"dark\",\n          }}\n        >\n          {labelContent}\n        </ic-typography>\n\n        {helperText !== \"\" && (\n          <ic-typography\n            variant=\"caption\"\n            class={{\n              [\"helpertext\"]: true,\n              [\"helpertext-normal\"]: !disabled && !readonly,\n              [\"helpertext-readonly\"]: readonly,\n            }}\n          >\n            <span id={id}>{helperText}</span>\n          </ic-typography>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -37,7 +37,7 @@ describe("ic-input-label", () => {
             html: `<ic-input-label for="test-input-id" label="Test label" required=true disabled=true></ic-input-label>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-label class="disabled" disabled="true" for="test-input-id" label="Test label" required="true">
+    <ic-input-label class="ic-input-label-disabled" disabled="true" for="test-input-id" label="Test label" required="true">
       <ic-typography variant="label">
         <label htmlfor="test-input-id">
           Test label *
@@ -52,7 +52,7 @@ describe("ic-input-label", () => {
             html: `<ic-input-label for="test-input-id" label="Test label" required=true readonly=true></ic-input-label>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-label class="readonly" for="test-input-id" label="Test label" readonly="true" required="true">
+    <ic-input-label class="ic-input-label-readonly" for="test-input-id" label="Test label" readonly="true" required="true">
       <ic-typography class="readonly-label" variant="label">
         Test label *
       </ic-typography>
@@ -62,10 +62,10 @@ describe("ic-input-label", () => {
     it("should render error variant", async () => {
         const page = await newSpecPage({
             components: [InputLabel],
-            html: `<ic-input-label for="test-input-id" label="Test label" error=true></ic-input-label>`,
+            html: `<ic-input-label for="test-input-id" label="Test label" status="error"></ic-input-label>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-label error="true" for="test-input-id" label="Test label">
+    <ic-input-label status="error" for="test-input-id" label="Test label">
       <ic-typography class="error-label" variant="label">
         <label htmlfor="test-input-id">
           Test label

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

@@ -1 +1 @@
-{"version":3,"file":"ic-input-label.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-input-label/test/basic/ic-input-label.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,0EAA0E;SACjF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,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,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,sGAAsG;SAC7G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,sGAAsG;SAC7G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,qFAAqF;SAC5F,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,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,UAAU,CAAC;YACxB,IAAI,EAAE,uHAAuH;SAC9H,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { InputLabel } from \"../../ic-input-label\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-label\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\"></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label for=\"test-input-id\" label=\"Test label\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"should render required variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label for=\"test-input-id\" label=\"Test label\" required=\"true\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label *\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"should render disabled variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true disabled=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label class=\"disabled\" disabled=\"true\" for=\"test-input-id\" label=\"Test label\" required=\"true\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label *\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"should render readonly variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true readonly=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label class=\"readonly\" for=\"test-input-id\" label=\"Test label\" readonly=\"true\" required=\"true\">\n      <ic-typography class=\"readonly-label\" variant=\"label\">\n        Test label *\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"should render error variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" error=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label error=\"true\" for=\"test-input-id\" label=\"Test label\">\n      <ic-typography class=\"error-label\" variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"should render with helpertext\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true helper-text=\"Some helper text\"></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label class=\"with-helper\" for=\"test-input-id\" helper-text=\"Some helper text\" label=\"Test label\" required=\"true\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label *\n        </label>\n      </ic-typography>\n      <ic-typography class=\"helpertext helpertext-normal\" variant=\"caption\">\n        <span id=\"test-input-id-helper-text\">\n          Some helper text\n        </span>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"ic-input-label.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-input-label/test/basic/ic-input-label.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,0EAA0E;SACjF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,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,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,sGAAsG;SAC7G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,sGAAsG;SAC7G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,yFAAyF;SAChG,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,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,UAAU,CAAC;YACxB,IAAI,EAAE,uHAAuH;SAC9H,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { InputLabel } from \"../../ic-input-label\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-label\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\"></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label for=\"test-input-id\" label=\"Test label\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"should render required variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label for=\"test-input-id\" label=\"Test label\" required=\"true\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label *\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"should render disabled variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true disabled=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label class=\"ic-input-label-disabled\" disabled=\"true\" for=\"test-input-id\" label=\"Test label\" required=\"true\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label *\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"should render readonly variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true readonly=true></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label class=\"ic-input-label-readonly\" for=\"test-input-id\" label=\"Test label\" readonly=\"true\" required=\"true\">\n      <ic-typography class=\"readonly-label\" variant=\"label\">\n        Test label *\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"should render error variant\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" status=\"error\"></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label status=\"error\" for=\"test-input-id\" label=\"Test label\">\n      <ic-typography class=\"error-label\" variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label\n        </label>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n\n  it(\"should render with helpertext\", async () => {\n    const page = await newSpecPage({\n      components: [InputLabel],\n      html: `<ic-input-label for=\"test-input-id\" label=\"Test label\" required=true helper-text=\"Some helper text\"></ic-input-label>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-label class=\"with-helper\" for=\"test-input-id\" helper-text=\"Some helper text\" label=\"Test label\" required=\"true\">\n      <ic-typography variant=\"label\">\n        <label htmlfor=\"test-input-id\">\n          Test label *\n        </label>\n      </ic-typography>\n      <ic-typography class=\"helpertext helpertext-normal\" variant=\"caption\">\n        <span id=\"test-input-id-helper-text\">\n          Some helper text\n        </span>\n      </ic-typography>\n    </ic-input-label>\n    `);\n  });\n});\n"]}

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,53 @@ video {
 }
 
 
-:host(.link) .ic-link,
-:host(.link) ::slotted(a) {
-  color: var(--ic-hyperlink);
+:host(.ic-link) .link,
+:host(.ic-link) ::slotted(a) {
+  color: var(--ic-link-text);
   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) {
-  color: var(--ic-color-primary-text);
+:host(.ic-link) .link:visited,
+:host(.ic-link) ::slotted(a:visited),
+:host(.ic-link) .link:visited:hover,
+:host(.ic-link) ::slotted(a:visited:hover),
+:host(.ic-link) .link:visited:active,
+:host(.ic-link) ::slotted(a:visited:active),
+:host(.ic-link) .link:visited:focus,
+:host(.ic-link) ::slotted(a:visited:focus) {
+  color: var(--ic-link-text-visited);
+}
+
+:host(.ic-link) .link:hover {
+  color: var(--ic-link-text-hover);
+}
+
+:host(.ic-link) .link:active {
+  color: var(--ic-link-text-pressed);
+}
+
+:host(.ic-link) .link:focus {
+  color: var(--ic-link-text-focused);
+}
+
+:host(.ic-link-monochrome) .link:hover {
+  color: var(--ic-link-text-hover-monochrome);
 }
 
-:host(.link.light) .ic-link.light,
-:host(.link.light) ::slotted(a) {
-  color: var(--ic-color-white-text);
+:host(.ic-link-monochrome) .link:active {
+  color: var(--ic-link-text-pressed-monochrome);
 }
 
-:host(.link) .ic-link:visited,
-:host(.link) ::slotted(a:visited) {
-  color: var(--ic-hyperlink-visited);
+:host(.ic-link-monochrome) .link:focus {
+  color: var(--ic-link-text-focused-monochrome);
 }
 
-: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 +495,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 +507,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,16 +521,8 @@ video {
   margin-left: var(--ic-space-xxs);
 }
 
-.ic-link > .ic-link-open-in-new-icon {
-  fill: var(--ic-hyperlink);
-}
-
-.ic-link.dark > .ic-link-open-in-new-icon {
-  fill: var(--ic-color-primary-text);
-}
-
-.ic-link.light > .ic-link-open-in-new-icon {
-  fill: var(--ic-color-white-text);
+.link > .ic-link-open-in-new-icon {
+  fill: var(--ic-link-icon-launch);
 }
 
 .ic-link-open-in-new-icon > svg {
@@ -519,21 +531,65 @@ video {
   fill: currentcolor;
 }
 
-.ic-link:visited > .ic-link-open-in-new-icon {
-  fill: var(--ic-hyperlink-visited);
+.link:visited > .ic-link-open-in-new-icon {
+  fill: var(--ic-link-icon-launch-visited);
+}
+
+:host(.ic-link-monochrome) .link,
+:host(.ic-link-monochrome) ::slotted(a) {
+  color: var(--ic-link-text-monochrome);
 }
 
-.ic-link.light:visited > .ic-link-open-in-new-icon {
-  fill: var(--ic-hyperlink-contrast-visited);
+:host(.ic-link-monochrome) .link:visited,
+:host(.ic-link-monochrome) ::slotted(a:visited),
+:host(.ic-link-monochrome) .link:visited:hover,
+:host(.ic-link-monochrome) ::slotted(a:visited:hover),
+:host(.ic-link-monochrome) .link:visited:active,
+:host(.ic-link-monochrome) ::slotted(a:visited:active),
+:host(.ic-link-monochrome) .link:visited:focus,
+:host(.ic-link-monochrome) ::slotted(a:visited:focus) {
+  color: var(--ic-link-text-visited-monochrome);
 }
 
-:host(.breadcrumb-link) .ic-link {
+:host(.ic-link-monochrome) .link > .ic-link-open-in-new-icon {
+  fill: var(--ic-link-icon-launch-monochrome);
+}
+
+:host(.ic-link-monochrome) .link:visited > .ic-link-open-in-new-icon {
+  fill: var(--ic-link-icon-launch-visited-monochrome);
+}
+
+: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 {
+  color: var(--ic-breadcrumb-page-title);
+}
+
+:host(.ic-link-monochrome.breadcrumb-link) .link {
+  color: var(--ic-breadcrumb-page-title-monochrome);
+}
+
+:host(.breadcrumb-link) .link:hover {
+  color: var(--ic-breadcrumb-page-title-hover);
+}
+
+:host(.ic-link-monochrome.breadcrumb-link) .link:hover {
+  color: var(--ic-breadcrumb-page-title-hover-monochrome);
+}
+
+:host(.breadcrumb-link) .link:active {
+  color: var(--ic-breadcrumb-page-title-pressed);
+}
+
+:host(.ic-link-monochrome.breadcrumb-link) .link:active {
+  color: var(--ic-breadcrumb-page-title-pressed-monochrome);
+}
+
+:host(.breadcrumb-link) .link ::slotted(.back-icon) {
   height: var(--ic-space-lg);
   width: var(--ic-space-lg);
 }
@@ -547,12 +603,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);
 }