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

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

@@ -0,0 +1,89 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Skeleton } from "../../ic-skeleton";
+beforeAll(() => {
+  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+});
+describe("ic-skeleton", () => {
+  it("should render with default height and width", async () => {
+    const page = await newSpecPage({
+      components: [Skeleton],
+      html: `<ic-skeleton></ic-skeleton>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-skeleton aria-disabled="true" class="skeleton" style="height: 93px; width: 260px;">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+    </ic-skeleton>
+    `);
+  });
+  it("should render with supplied height", async () => {
+    const page = await newSpecPage({
+      components: [Skeleton],
+      html: `<ic-skeleton style="height: 100px;"></ic-skeleton>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-skeleton aria-disabled="true" class="skeleton" style="height: 100px; width: 260px;">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+    </ic-skeleton>
+    `);
+  });
+  it("should render with supplied width", async () => {
+    const page = await newSpecPage({
+      components: [Skeleton],
+      html: `<ic-skeleton style="width: 300px;"></ic-skeleton>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-skeleton aria-disabled="true" class="skeleton" style="width: 300px; height: 93px;">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+    </ic-skeleton>
+    `);
+  });
+  it("should render with supplied height and width", async () => {
+    const page = await newSpecPage({
+      components: [Skeleton],
+      html: `<ic-skeleton style="height: 100px; width: 300px;"></ic-skeleton>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-skeleton aria-disabled="true" class="skeleton" style="height: 100px; width: 300px;">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+    </ic-skeleton>
+    `);
+  });
+  it("should render circular variant", async () => {
+    const page = await newSpecPage({
+      components: [Skeleton],
+      html: `<ic-skeleton variant="circle"></ic-skeleton>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-skeleton aria-disabled="true" class="circle skeleton" variant="circle" style="height: 25px; width: 25px;">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+    </ic-skeleton>
+    `);
+  });
+  it("should render text variant", async () => {
+    const page = await newSpecPage({
+      components: [Skeleton],
+      html: `<ic-skeleton variant="text"><ic-typography>Test</ic-typography></ic-skeleton>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-skeleton aria-disabled="true" class="skeleton" variant="text">
+      <mock:shadow-root>
+        <slot></slot>
+      </mock:shadow-root>
+      <ic-typography>
+        Test
+      </ic-typography>
+    </ic-skeleton>
+    `);
+  });
+});
+//# sourceMappingURL=ic-skeleton.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-skeleton.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-skeleton/test/basic/ic-skeleton.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,SAAS,CAAC,GAAG,EAAE;EACb,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;AAC5D,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;EAC3B,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;IAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,6BAA6B;KACpC,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IAClD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,oDAAoD;KAC3D,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;IACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,mDAAmD;KAC1D,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;IAC5D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,kEAAkE;KACzE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,8CAA8C;KACrD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;IAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,+EAA+E;KACtF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Skeleton } from \"../../ic-skeleton\";\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-skeleton\", () => {\n  it(\"should render with default height and width\", async () => {\n    const page = await newSpecPage({\n      components: [Skeleton],\n      html: `<ic-skeleton></ic-skeleton>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-skeleton aria-disabled=\"true\" class=\"skeleton\" style=\"height: 93px; width: 260px;\">\n      <mock:shadow-root>\n        <slot></slot>\n      </mock:shadow-root>\n    </ic-skeleton>\n    `);\n  });\n\n  it(\"should render with supplied height\", async () => {\n    const page = await newSpecPage({\n      components: [Skeleton],\n      html: `<ic-skeleton style=\"height: 100px;\"></ic-skeleton>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-skeleton aria-disabled=\"true\" class=\"skeleton\" style=\"height: 100px; width: 260px;\">\n      <mock:shadow-root>\n        <slot></slot>\n      </mock:shadow-root>\n    </ic-skeleton>\n    `);\n  });\n\n  it(\"should render with supplied width\", async () => {\n    const page = await newSpecPage({\n      components: [Skeleton],\n      html: `<ic-skeleton style=\"width: 300px;\"></ic-skeleton>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-skeleton aria-disabled=\"true\" class=\"skeleton\" style=\"width: 300px; height: 93px;\">\n      <mock:shadow-root>\n        <slot></slot>\n      </mock:shadow-root>\n    </ic-skeleton>\n    `);\n  });\n\n  it(\"should render with supplied height and width\", async () => {\n    const page = await newSpecPage({\n      components: [Skeleton],\n      html: `<ic-skeleton style=\"height: 100px; width: 300px;\"></ic-skeleton>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-skeleton aria-disabled=\"true\" class=\"skeleton\" style=\"height: 100px; width: 300px;\">\n      <mock:shadow-root>\n        <slot></slot>\n      </mock:shadow-root>\n    </ic-skeleton>\n    `);\n  });\n\n  it(\"should render circular variant\", async () => {\n    const page = await newSpecPage({\n      components: [Skeleton],\n      html: `<ic-skeleton variant=\"circle\"></ic-skeleton>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-skeleton aria-disabled=\"true\" class=\"circle skeleton\" variant=\"circle\" style=\"height: 25px; width: 25px;\">\n      <mock:shadow-root>\n        <slot></slot>\n      </mock:shadow-root>\n    </ic-skeleton>\n    `);\n  });\n\n  it(\"should render text variant\", async () => {\n    const page = await newSpecPage({\n      components: [Skeleton],\n      html: `<ic-skeleton variant=\"text\"><ic-typography>Test</ic-typography></ic-skeleton>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-skeleton aria-disabled=\"true\" class=\"skeleton\" variant=\"text\">\n      <mock:shadow-root>\n        <slot></slot>\n      </mock:shadow-root>\n      <ic-typography>\n        Test\n      </ic-typography>\n    </ic-skeleton>\n    `);\n  });\n});\n"]}

package/dist/collection/components/ic-status-tag/ic-status-tag.css

@@ -442,20 +442,22 @@ video {
 
 
 .tag {
-  padding: var(--ic-space-xs) var(--ic-space-sm);
+  padding: var(--ic-space-xxs) var(--ic-space-sm);
   font-size: 0.875rem;
-  border-radius: 5rem;
+  border-radius: var(--ic-space-md);
   display: inline-block;
   min-width: 2.5rem;
   text-align: center;
+  color: var(--ic-color-primary-text);
 }
 
 .small {
-  padding: var(--ic-space-xxs) var(--ic-space-sm);
+  padding: var(--ic-space-xxxs) var(--ic-space-sm);
+  border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));
 }
 
 .filled-neutral {
-  background-color: var(--ic-architectural-600);
+  background-color: var(--ic-architectural-700);
   color: var(--ic-architectural-white);
 }
 
@@ -466,7 +468,6 @@ video {
 
 .filled-warning {
   background-color: var(--ic-status-warning);
-  color: var(--ic-color-primary-text);
 }
 
 .filled-danger {
@@ -476,26 +477,22 @@ video {
 
 .outlined-neutral {
   background-color: var(--ic-architectural-200);
-  color: var(--ic-color-secondary-text);
-  border: 0.063rem solid var(--ic-architectural-400);
+  border: var(--ic-space-1px) solid var(--ic-architectural-400);
 }
 
 .outlined-success {
   background-color: var(--ic-status-success-background);
-  color: var(--ic-status-success);
-  border: 0.063rem solid var(--ic-status-success);
+  border: var(--ic-space-1px) solid var(--ic-status-success);
 }
 
 .outlined-warning {
   background-color: var(--ic-status-warning-background);
-  color: var(--ic-status-warning-dark);
-  border: 0.063rem solid var(--ic-status-warning-dark);
+  border: var(--ic-space-1px) solid var(--ic-status-warning-dark);
 }
 
 .outlined-danger {
   background-color: var(--ic-status-error-background);
-  color: var(--ic-status-error);
-  border: 0.063rem solid var(--ic-status-error);
+  border: var(--ic-space-1px) solid var(--ic-status-error);
 }
 
 @media (forced-colors: active) {

package/dist/collection/components/ic-status-tag/ic-status-tag.js

@@ -2,11 +2,11 @@ import { Host, h } from "@stencil/core";
 import { onComponentRequiredPropUndefined } from "../../utils/helpers";
 export class StatusTag {
   constructor() {
-    this.label = undefined;
-    this.status = "neutral";
+    this.announced = false;
     this.appearance = "filled";
+    this.label = undefined;
     this.small = false;
-    this.announced = false;
+    this.status = "neutral";
   }
   componentDidLoad() {
     onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Status Tag");
@@ -33,45 +33,23 @@ export class StatusTag {
   }
   static get properties() {
     return {
-      "label": {
-        "type": "string",
+      "announced": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The content rendered within the status tag."
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "status": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcStatusTagStatuses",
-          "resolved": "\"danger\" | \"neutral\" | \"success\" | \"warning\"",
-          "references": {
-            "IcStatusTagStatuses": {
-              "location": "import",
-              "path": "./ic-status-tag.types"
-            }
-          }
-        },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The colour of the status tag."
+          "text": "If `true`, role='status' is added to the component and it will act as an 'aria-live' region."
         },
-        "attribute": "status",
+        "attribute": "announced",
         "reflect": false,
-        "defaultValue": "\"neutral\""
+        "defaultValue": "false"
       },
       "appearance": {
         "type": "string",
@@ -96,6 +74,23 @@ export class StatusTag {
         "reflect": false,
         "defaultValue": "\"filled\""
       },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The content rendered within the status tag."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
       "small": {
         "type": "boolean",
         "mutable": false,
@@ -114,23 +109,28 @@ export class StatusTag {
         "reflect": false,
         "defaultValue": "false"
       },
-      "announced": {
-        "type": "boolean",
+      "status": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "IcStatusTagStatuses",
+          "resolved": "\"danger\" | \"neutral\" | \"success\" | \"warning\"",
+          "references": {
+            "IcStatusTagStatuses": {
+              "location": "import",
+              "path": "./ic-status-tag.types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, role='status' is added to the component and it will act as an 'aria-live' region."
+          "text": "The colour of the status tag."
         },
-        "attribute": "announced",
+        "attribute": "status",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "\"neutral\""
       }
     };
   }

package/dist/collection/components/ic-status-tag/ic-status-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-status-tag.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAWvE,MAAM,OAAO,SAAS;;;kBAQmB,SAAS;sBAIH,QAAQ;iBAI3B,KAAK;qBAID,KAAK;;EAEnC,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC7D,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,gBAAa,QAAQ;MAC1D,cACE,KAAK,EAAE;UACL,CAAC,KAAK,CAAC,EAAE,IAAI;UACb,CAAC,GAAG,UAAU,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;UACjC,CAAC,OAAO,CAAC,EAAE,KAAK;SACjB;QAED,qBACE,OAAO,EAAC,iBAAiB,4BACD,KAAK;UAE7B,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n  IcStatusTagStatuses,\n  IcStatusTagAppearance,\n} from \"./ic-status-tag.types\";\n\n@Component({\n  tag: \"ic-status-tag\",\n  styleUrl: \"ic-status-tag.css\",\n  shadow: true,\n})\nexport class StatusTag {\n  /**\n   * The content rendered within the status tag.\n   */\n  @Prop() label!: string;\n  /**\n   * The colour of the status tag.\n   */\n  @Prop() status?: IcStatusTagStatuses = \"neutral\";\n  /**\n   * The emphasis of the status tag.\n   */\n  @Prop() appearance?: IcStatusTagAppearance = \"filled\";\n  /**\n   * If `true`, the small styling will be applied to the status tag.\n   */\n  @Prop() small?: boolean = false;\n  /**\n   * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n   */\n  @Prop() announced?: boolean = false;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Status Tag\"\n    );\n  }\n\n  render() {\n    const { label, status, appearance, small, announced } = this;\n    return (\n      <Host role={announced ? \"status\" : null} aria-label=\"Status\">\n        <strong\n          class={{\n            [\"tag\"]: true,\n            [`${appearance}-${status}`]: true,\n            [\"small\"]: small,\n          }}\n        >\n          <ic-typography\n            variant=\"label-uppercase\"\n            apply-vertical-margins={false}\n          >\n            <span>{label}</span>\n          </ic-typography>\n        </strong>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-status-tag.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAWvE,MAAM,OAAO,SAAS;;qBAIU,KAAK;sBAKU,QAAQ;;iBAU3B,KAAK;kBAKQ,SAAS;;EAEhD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC7D,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,gBAAa,QAAQ;MAC1D,cACE,KAAK,EAAE;UACL,CAAC,KAAK,CAAC,EAAE,IAAI;UACb,CAAC,GAAG,UAAU,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;UACjC,CAAC,OAAO,CAAC,EAAE,KAAK;SACjB;QAED,qBACE,OAAO,EAAC,iBAAiB,4BACD,KAAK;UAE7B,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n  IcStatusTagStatuses,\n  IcStatusTagAppearance,\n} from \"./ic-status-tag.types\";\n\n@Component({\n  tag: \"ic-status-tag\",\n  styleUrl: \"ic-status-tag.css\",\n  shadow: true,\n})\nexport class StatusTag {\n  /**\n   * If `true`, role='status' is added to the component and it will act as an 'aria-live' region.\n   */\n  @Prop() announced?: boolean = false;\n\n  /**\n   * The emphasis of the status tag.\n   */\n  @Prop() appearance?: IcStatusTagAppearance = \"filled\";\n\n  /**\n   * The content rendered within the status tag.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the small styling will be applied to the status tag.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The colour of the status tag.\n   */\n  @Prop() status?: IcStatusTagStatuses = \"neutral\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Status Tag\"\n    );\n  }\n\n  render() {\n    const { label, status, appearance, small, announced } = this;\n    return (\n      <Host role={announced ? \"status\" : null} aria-label=\"Status\">\n        <strong\n          class={{\n            [\"tag\"]: true,\n            [`${appearance}-${status}`]: true,\n            [\"small\"]: small,\n          }}\n        >\n          <ic-typography\n            variant=\"label-uppercase\"\n            apply-vertical-margins={false}\n          >\n            <span>{label}</span>\n          </ic-typography>\n        </strong>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-status-tag/{ic-status-tag.test.a11y.js → test/a11y/ic-status-tag.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-status-tag", () => {
   it("passes accessibility", async () => {
     const el = await fixture("<ic-status-tag label='Neutral' />");

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-status-tag.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-status-tag/test/a11y/ic-status-tag.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,eAAe,EAAE,GAAG,EAAE;EAC7B,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-status-tag\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\"<ic-status-tag label='Neutral' />\");\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

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

@@ -0,0 +1,43 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { StatusTag } from "../../ic-status-tag";
+describe("ic-status-tag component renders label", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [StatusTag],
+      html: `<ic-status-tag label="Neutral"></ic-status-tag>`,
+    });
+    expect(page.root).toEqualHtml(`
+    <ic-status-tag aria-label="Status" label="Neutral">
+    <mock:shadow-root>
+      <strong class="tag filled-neutral" >
+        <ic-typography variant="label-uppercase">
+          <span>
+            Neutral
+          </span>
+        </ic-typography>
+      </strong>
+      </mock:shadow-root>
+    </ic-status-tag>
+    `);
+  }),
+    it("should have the role of 'status' if announced is passed as true", async () => {
+      const page = await newSpecPage({
+        components: [StatusTag],
+        html: `<ic-status-tag label="Neutral" announced="true"></ic-status-tag>`,
+      });
+      expect(page.root).toEqualHtml(`
+    <ic-status-tag announced="true" aria-label="Status" label="Neutral" role="status">
+    <mock:shadow-root>
+      <strong class="tag filled-neutral" >
+        <ic-typography variant="label-uppercase">
+          <span>
+            Neutral
+          </span>
+        </ic-typography>
+      </strong>
+      </mock:shadow-root>
+    </ic-status-tag>
+    `);
+    });
+});
+//# sourceMappingURL=ic-status-tag.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-status-tag.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-status-tag/test/basic/ic-status-tag.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,QAAQ,CAAC,uCAAuC,EAAE,GAAG,EAAE;EACrD,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;MACvB,IAAI,EAAE,iDAAiD;KACxD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC;IACA,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;MAC/E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;QAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;QACvB,IAAI,EAAE,kEAAkE;OACzE,CAAC,CAAC;MAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY/B,CAAC,CAAC;IACH,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { StatusTag } from \"../../ic-status-tag\";\n\ndescribe(\"ic-status-tag component renders label\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [StatusTag],\n      html: `<ic-status-tag label=\"Neutral\"></ic-status-tag>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-status-tag aria-label=\"Status\" label=\"Neutral\">\n    <mock:shadow-root>\n      <strong class=\"tag filled-neutral\" >\n        <ic-typography variant=\"label-uppercase\">\n          <span>\n            Neutral\n          </span>\n        </ic-typography>\n      </strong>\n      </mock:shadow-root>\n    </ic-status-tag>\n    `);\n  }),\n    it(\"should have the role of 'status' if announced is passed as true\", async () => {\n      const page = await newSpecPage({\n        components: [StatusTag],\n        html: `<ic-status-tag label=\"Neutral\" announced=\"true\"></ic-status-tag>`,\n      });\n\n      expect(page.root).toEqualHtml(`\n    <ic-status-tag announced=\"true\" aria-label=\"Status\" label=\"Neutral\" role=\"status\">\n    <mock:shadow-root>\n      <strong class=\"tag filled-neutral\" >\n        <ic-typography variant=\"label-uppercase\">\n          <span>\n            Neutral\n          </span>\n        </ic-typography>\n      </strong>\n      </mock:shadow-root>\n    </ic-status-tag>\n    `);\n    });\n});\n"]}

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

@@ -35,7 +35,7 @@
   -moz-column-gap: var(--ic-space-sm);
        column-gap: var(--ic-space-sm);
 
-  --compact-step-inner-color: var(--ic-theme-primary);
+  --compact-step-inner-color: var(--ic-status-info);
   --compact-step-circular-line-width: var(--ic-space-xxs);
 }
 
@@ -126,7 +126,7 @@
 }
 
 :host(.default) .current {
-  color: var(--ic-theme-primary);
+  color: var(--ic-status-info);
 }
 
 :host(.default) .step-title-area {
@@ -158,7 +158,7 @@
 }
 
 .current .step-icon-inner {
-  background-color: var(--ic-theme-primary);
+  background-color: var(--ic-status-info);
   color: white;
 }
 
@@ -167,7 +167,7 @@
 }
 
 .disabled .step-icon-inner {
-  border: 0.063rem dashed var(--ic-architectural-200);
+  border: var(--ic-space-1px) dashed var(--ic-architectural-200);
   width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
   height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
 }
@@ -183,7 +183,7 @@
 }
 
 :host(.default) .current .step-icon {
-  border: var(--ic-space-xxxs) solid var(--ic-theme-primary);
+  border: var(--ic-space-xxxs) solid var(--ic-status-info);
   padding: var(--ic-space-xxxs);
   margin: 0 calc(-1 * var(--ic-space-xxxs));
 
@@ -220,7 +220,7 @@
   flex: auto;
   height: var(--ic-space-xxxs);
   border-radius: var(--ic-space-xxs);
-  background-color: var(--ic-theme-primary);
+  background-color: var(--ic-status-info);
 }
 
 .step-icon-inner .check-icon {