@ukic/web-components 2.1.0-beta.9 → 2.2.0

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

@@ -14,11 +14,11 @@ const icon = {
  */
 export class InputValidation {
   constructor() {
-    this.message = undefined;
+    this.ariaLiveMode = "polite";
     this.for = undefined;
-    this.status = "";
     this.fullWidth = false;
-    this.ariaLiveMode = "polite";
+    this.message = undefined;
+    this.status = "";
   }
   componentDidLoad() {
     onComponentRequiredPropUndefined([{ prop: this.message, propName: "message" }], "Input Validation");
@@ -47,22 +47,28 @@ export class InputValidation {
   }
   static get properties() {
     return {
-      "message": {
+      "ariaLiveMode": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IcAriaLiveModeVariants",
+          "resolved": "\"assertive\" | \"polite\"",
+          "references": {
+            "IcAriaLiveModeVariants": {
+              "location": "import",
+              "path": "./ic-input-validation.types"
+            }
+          }
         },
-        "required": true,
+        "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The validation message to display."
+          "text": "The ARIA live mode to apply to the message."
         },
-        "attribute": "message",
-        "reflect": false
+        "attribute": "aria-live-mode",
+        "reflect": false,
+        "defaultValue": "\"polite\""
       },
       "for": {
         "type": "string",
@@ -81,57 +87,51 @@ export class InputValidation {
         "attribute": "for",
         "reflect": false
       },
-      "status": {
-        "type": "string",
+      "fullWidth": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "IcInformationStatusOrEmpty",
-          "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
-          "references": {
-            "IcInformationStatusOrEmpty": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The status of the validation - e.g. 'error' | 'warning' | 'success'."
+          "text": "If `true`, the input validation will fill the width of the container."
         },
-        "attribute": "status",
+        "attribute": "full-width",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "false"
       },
-      "fullWidth": {
-        "type": "boolean",
+      "message": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the input validation will fill the width of the container."
+          "text": "The validation message to display."
         },
-        "attribute": "full-width",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "message",
+        "reflect": false
       },
-      "ariaLiveMode": {
+      "status": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcAriaLiveModeVariants",
-          "resolved": "\"assertive\" | \"polite\"",
+          "original": "IcInformationStatusOrEmpty",
+          "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
           "references": {
-            "IcAriaLiveModeVariants": {
+            "IcInformationStatusOrEmpty": {
               "location": "import",
-              "path": "./ic-input-validation.types"
+              "path": "../../utils/types"
             }
           }
         },
@@ -139,11 +139,11 @@ export class InputValidation {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The ARIA live mode to apply to the message."
+          "text": "The status of the validation - e.g. 'error' | 'warning' | 'success'."
         },
-        "attribute": "aria-live-mode",
+        "attribute": "status",
         "reflect": false,
-        "defaultValue": "\"polite\""
+        "defaultValue": "\"\""
       }
     };
   }

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;EACX,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;EAC1C,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,SAAS;EACtC,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;CAC3C,CAAC;AAEF;;GAEG;AAKH,MAAM,OAAO,eAAe;;;;kBAcmB,EAAE;qBAIlB,KAAK;wBAIa,QAAQ;;EAEvD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAChE,MAAM,EAAE,GAAG,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,KAAK,EAAE;QACjC,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,SAAS;OAC9B;MAEA,WAAW,KAAK,EAAE,IAAI,CACrB,YACE,KAAK,EAAE;UACL,CAAC,aAAa,CAAC,EAAE,IAAI;UACrB,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;SAC9B,EACD,SAAS,EAAE,WAAW,GACtB,CACH;MAED,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY;QACjD,yBAAiB,IAAI,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,IACvC,IAAI,CAAC,OAAO,CACR,CACO;MAEhB,YAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,CACR,CAAC;EACJ,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 validation message to display.\n   */\n  @Prop() message!: string;\n  /**\n   * The ID of the form element the validation is bound to.\n   */\n  @Prop() for: string;\n  /**\n   * The status of the validation - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() status: IcInformationStatusOrEmpty = \"\";\n  /**\n   *  If `true`, the input validation will fill the width of the container.\n   */\n  @Prop() fullWidth: boolean = false;\n  /**\n   *  The ARIA live mode to apply to the message.\n   */\n  @Prop() ariaLiveMode: IcAriaLiveModeVariants = \"polite\";\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;EACX,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;EAC1C,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,SAAS;EACtC,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;CAC3C,CAAC;AAEF;;GAEG;AAKH,MAAM,OAAO,eAAe;;wBAMqB,QAAQ;;qBAU1B,KAAK;;kBAUW,EAAE;;EAE/C,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAChE,MAAM,EAAE,GAAG,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,KAAK,EAAE;QACjC,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,SAAS;OAC9B;MAEA,WAAW,KAAK,EAAE,IAAI,CACrB,YACE,KAAK,EAAE;UACL,CAAC,aAAa,CAAC,EAAE,IAAI;UACrB,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;SAC9B,EACD,SAAS,EAAE,WAAW,GACtB,CACH;MAED,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY;QACjD,yBAAiB,IAAI,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,IACvC,IAAI,CAAC,OAAO,CACR,CACO;MAEhB,YAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,CACR,CAAC;EACJ,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"]}

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

@@ -0,0 +1,89 @@
+import { InputValidation } from "../../ic-input-validation";
+import { newSpecPage } from "@stencil/core/testing";
+describe("ic-input-validation", () => {
+  it("renders", async () => {
+    const page = await newSpecPage({
+      components: [InputValidation],
+      html: `<ic-input-validation for="test-id" message="validation message"></ic-input-validation>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-input-validation for="test-id" message="validation message">
+      <ic-typography class="statustext" variant="caption">
+        <span aria-live="polite" id="test-id-validation-text">
+          validation message
+        </span>
+      </ic-typography>
+    </ic-input-validation>
+    `);
+  });
+  it("renders with success status", async () => {
+    const page = await newSpecPage({
+      components: [InputValidation],
+      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">
+      <span class="icon-success status-icon">
+        svg
+      </span>
+      <ic-typography class="statustext" variant="caption">
+        <span aria-live="polite" id="test-id-validation-text">
+          validation message
+        </span>
+      </ic-typography>
+    </ic-input-validation>
+    `);
+  });
+  it("renders with warning status", async () => {
+    const page = await newSpecPage({
+      components: [InputValidation],
+      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">
+      <span class="icon-warning status-icon">
+        svg
+      </span>
+      <ic-typography class="statustext" variant="caption">
+        <span aria-live="polite" id="test-id-validation-text">
+          validation message
+        </span>
+      </ic-typography>
+    </ic-input-validation>
+    `);
+  });
+  it("renders with error status", async () => {
+    const page = await newSpecPage({
+      components: [InputValidation],
+      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">
+      <span class="icon-error status-icon">
+        svg
+      </span>
+      <ic-typography class="statustext" variant="caption">
+        <span aria-live="polite" id="test-id-validation-text">
+          validation message
+        </span>
+      </ic-typography>
+    </ic-input-validation>
+    `);
+  });
+  it("renders with full width", async () => {
+    const page = await newSpecPage({
+      components: [InputValidation],
+      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-typography class="statustext" variant="caption">
+        <span aria-live="polite" id="test-id-validation-text">
+          validation message
+        </span>
+      </ic-typography>
+    </ic-input-validation>
+    `);
+  });
+});
+//# sourceMappingURL=ic-input-validation.spec.js.map

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

@@ -0,0 +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;EACnC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,wFAAwF;KAC/F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,yGAAyG;KAChH,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,yGAAyG;KAChH,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;IACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,uGAAuG;KAC9G,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;IACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;MAC7B,IAAI,EAAE,wGAAwG;KAC/G,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,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(\"renders\", 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(\"renders 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(\"renders 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(\"renders 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(\"renders 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"]}

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

@@ -468,10 +468,23 @@ video {
 :host(.link) .ic-link:focus,
 :host(.link) ::slotted(a:hover),
 :host(.link) ::slotted(a:focus) {
-  text-decoration-line: underline;
-  text-decoration-thickness: 25%;
-  text-underline-offset: 25%;
   outline: none;
+  border-bottom: 0.25rem solid !important;
+  margin-bottom: -0.25rem !important;
+  text-decoration: none;
+}
+
+@supports (text-decoration-thickness: 25%) {
+  :host(.link) .ic-link:hover,
+  :host(.link) .ic-link:focus,
+  :host(.link) ::slotted(a:hover),
+  :host(.link) ::slotted(a:focus) {
+    text-decoration-line: underline;
+    text-decoration-thickness: 25%;
+    text-underline-offset: 25%;
+    border-bottom: 0 !important;
+    margin-bottom: 0 !important;
+  }
 }
 
 :host(.link) .ic-link:active,

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

@@ -1,5 +1,5 @@
 import { h, Host, } from "@stencil/core";
-import OpenInNew from "./assets/OpenInNew.svg";
+import OpenInNew from "../../assets/OpenInNew.svg";
 import { getThemeFromContext, inheritAttributes } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
 import { IcThemeForegroundEnum, } from "../../utils/types";
@@ -9,19 +9,34 @@ import { IcThemeForegroundEnum, } from "../../utils/types";
 export class Link {
   constructor() {
     this.inheritedAttributes = {};
+    this.appearance = "default";
     this.download = false;
     this.href = null;
     this.hreflang = undefined;
     this.referrerpolicy = undefined;
     this.rel = undefined;
-    this.target = undefined;
     this.showIcon = undefined;
-    this.appearance = "default";
+    this.target = undefined;
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.el, [
+      ...IC_INHERITED_ARIA,
+      "aria-expanded",
+    ]);
+    this.updateTheme();
   }
   themeChangeHandler(ev) {
     const theme = ev.detail;
     this.updateTheme(theme.mode);
   }
+  /**
+   * Sets focus on the link.
+   */
+  async setFocus() {
+    if (this.el.shadowRoot.querySelector("a")) {
+      this.el.shadowRoot.querySelector("a").focus();
+    }
+  }
   updateTheme(newTheme = null) {
     const theme = getThemeFromContext(this.el, newTheme || null);
     switch (theme) {
@@ -33,21 +48,6 @@ export class Link {
         break;
     }
   }
-  /**
-   * Sets focus on the link.
-   */
-  async setFocus() {
-    if (this.el.shadowRoot.querySelector("a")) {
-      this.el.shadowRoot.querySelector("a").focus();
-    }
-  }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.el, [
-      ...IC_INHERITED_ARIA,
-      "aria-expanded",
-    ]);
-    this.updateTheme();
-  }
   hasRouterSlot() {
     this.routerSlot = this.el.querySelector('[slot="router-item"]');
     if (this.routerSlot) {
@@ -60,7 +60,7 @@ export class Link {
     return (h(Host, { class: { ["link"]: true, [`${appearance}`]: true } }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h("a", Object.assign({ class: {
         ["ic-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 && (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), (showIcon || target === "_blank") && (h("span", { class: "ic-link-open-in-new-icon", innerHTML: OpenInNew }))))));
   }
   static get is() { return "ic-link"; }
   static get encapsulation() { return "shadow"; }
@@ -77,6 +77,29 @@ export class Link {
   }
   static get properties() {
     return {
+      "appearance": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "IcThemeForeground",
+          "resolved": "\"dark\" | \"default\" | \"light\"",
+          "references": {
+            "IcThemeForeground": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The appearance of the link, e.g. dark, light, or default."
+        },
+        "attribute": "appearance",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "download": {
         "type": "any",
         "mutable": false,
@@ -168,23 +191,6 @@ export class Link {
         "attribute": "rel",
         "reflect": false
       },
-      "target": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
-        },
-        "attribute": "target",
-        "reflect": false
-      },
       "showIcon": {
         "type": "boolean",
         "mutable": false,
@@ -196,34 +202,31 @@ export class Link {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "If `true`, the 'open in new tab/window' icon will be displayed."
+          "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
       },
-      "appearance": {
+      "target": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "IcThemeForeground",
-          "resolved": "\"dark\" | \"default\" | \"light\"",
-          "references": {
-            "IcThemeForeground": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The appearance of the link, e.g. dark, light, or default."
+          "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
         },
-        "attribute": "appearance",
-        "reflect": false,
-        "defaultValue": "\"default\""
+        "attribute": "target",
+        "reflect": 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} 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]: unknown } = {};\n  private routerSlot: HTMLElement;\n\n  @Element() el: HTMLIcLinkElement;\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  /**\n   * If `true`, the 'open in new tab/window' icon will be displayed.\n   */\n  @Prop() showIcon?: boolean;\n\n  /**\n   * The appearance of the link, e.g. dark, light, or default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme || null);\n\n    switch (theme) {\n      case IcThemeForegroundEnum.Light:\n        this.appearance = IcThemeForegroundEnum.Light;\n        break;\n      case IcThemeForegroundEnum.Dark:\n        this.appearance = IcThemeForegroundEnum.Dark;\n        break;\n    }\n  }\n\n  /**\n   * Sets focus on the link.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"a\")) {\n      this.el.shadowRoot.querySelector(\"a\").focus();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n    ]);\n\n    this.updateTheme();\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  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 && (\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} 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]: unknown } = {};\n  private routerSlot: HTMLElement;\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, [\n      ...IC_INHERITED_ARIA,\n      \"aria-expanded\",\n    ]);\n\n    this.updateTheme();\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.updateTheme(theme.mode);\n  }\n\n  /**\n   * Sets focus on the link.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"a\")) {\n      this.el.shadowRoot.querySelector(\"a\").focus();\n    }\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme || null);\n\n    switch (theme) {\n      case IcThemeForegroundEnum.Light:\n        this.appearance = IcThemeForegroundEnum.Light;\n        break;\n      case IcThemeForegroundEnum.Dark:\n        this.appearance = IcThemeForegroundEnum.Dark;\n        break;\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  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"]}

package/dist/collection/components/ic-link/{ic-link.test.a11y.js → test/a11y/ic-link.test.a11y.js}

@@ -1,6 +1,6 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
-import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 describe("ic-link", () => {
   it("passes accessibility", async () => {
     const el = await fixture(`<ic-link>Link component</ic-link>`);

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-link.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-link/test/a11y/ic-link.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EACvB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,mCAAmC,CAAC,CAAC;IAC9D,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-link\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(`<ic-link>Link component</ic-link>`);\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}