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

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

@@ -3,29 +3,21 @@ import { onComponentRequiredPropUndefined } from "../../utils/helpers";
 export class StatusTag {
     constructor() {
         this.announced = false;
-        this.appearance = undefined;
         this.label = undefined;
-        this.size = "default";
-        this.small = false;
+        this.size = "medium";
         this.status = "neutral";
+        this.theme = "inherit";
         this.variant = "filled";
     }
-    componentWillLoad() {
-        if (this.appearance === "outlined") {
-            this.variant = "outlined";
-        }
-    }
     componentDidLoad() {
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Status Tag");
     }
     render() {
-        const { label, status, appearance, variant, small, size, announced } = this;
-        return (h(Host, { role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { class: {
+        const { label, status, variant, size, announced, theme } = this;
+        return (h(Host, { class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { class: {
                 ["tag"]: true,
-                [`${appearance}-${status}`]: appearance !== undefined,
                 [`${variant}-${status}`]: true,
                 ["outlined"]: variant === "outlined",
-                ["small"]: small || size === "small",
                 [`${size}`]: true,
             } }, h("ic-typography", { variant: "label-uppercase", "apply-vertical-margins": false }, h("span", null, label)))));
     }
@@ -61,32 +53,6 @@ export class StatusTag {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "appearance": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IcStatusTagAppearance",
-                    "resolved": "\"filled\" | \"outlined\"",
-                    "references": {
-                        "IcStatusTagAppearance": {
-                            "location": "import",
-                            "path": "./ic-status-tag.types",
-                            "id": "src/components/ic-status-tag/ic-status-tag.types.ts::IcStatusTagAppearance"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Use variant prop instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "appearance",
-                "reflect": false
-            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -109,7 +75,7 @@ export class StatusTag {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -126,28 +92,7 @@ export class StatusTag {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
-            },
-            "small": {
-                "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 `size` to \"small\" instead."
-                        }],
-                    "text": ""
-                },
-                "attribute": "small",
-                "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "\"medium\""
             },
             "status": {
                 "type": "string",
@@ -173,6 +118,24 @@ export class StatusTag {
                 "reflect": false,
                 "defaultValue": "\"neutral\""
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"dark\" | \"light\" | \"inherit\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,

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;AAYvE,MAAM,OAAO,SAAS;;yBAKU,KAAK;;;oBAeV,SAAS;qBAKR,KAAK;sBAKQ,SAAS;uBAKb,QAAQ;;IAE3C,iBAAiB;QACf,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,EAAE,CAAC;YACnC,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC5E,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,gBAAa,QAAQ;YAC1D,cACE,KAAK,EAAE;oBACL,CAAC,KAAK,CAAC,EAAE,IAAI;oBACb,CAAC,GAAG,UAAU,IAAI,MAAM,EAAE,CAAC,EAAE,UAAU,KAAK,SAAS;oBACrD,CAAC,GAAG,OAAO,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;oBAC9B,CAAC,UAAU,CAAC,EAAE,OAAO,KAAK,UAAU;oBACpC,CAAC,OAAO,CAAC,EAAE,KAAK,IAAI,IAAI,KAAK,OAAO;oBACpC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;iBAClB;gBAED,qBACE,OAAO,EAAC,iBAAiB,4BACD,KAAK;oBAE7B,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,CACR,CAAC;IACJ,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\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/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   * Screen readers will announce changes to the `label`, but not the initial value.\n   */\n  @Prop() announced?: boolean = false;\n\n  /**\n   * @deprecated This prop should not be used anymore. Use variant prop instead.\n   */\n  @Prop() appearance?: IcStatusTagAppearance;\n\n  /**\n   * The content rendered within the status tag.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The size of the status tag component.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The colour of the status tag.\n   */\n  @Prop() status?: IcStatusTagStatuses = \"neutral\";\n\n  /**\n   * The emphasis of the status tag.\n   */\n  @Prop() variant?: IcEmphasisType = \"filled\";\n\n  componentWillLoad(): void {\n    if (this.appearance === \"outlined\") {\n      this.variant = \"outlined\";\n    }\n  }\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, variant, small, size, announced } = this;\n    return (\n      <Host role={announced ? \"status\" : null} aria-label=\"Status\">\n        <strong\n          class={{\n            [\"tag\"]: true,\n            [`${appearance}-${status}`]: appearance !== undefined,\n            [`${variant}-${status}`]: true,\n            [\"outlined\"]: variant === \"outlined\",\n            [\"small\"]: small || size === \"small\",\n            [`${size}`]: true,\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;AASvE,MAAM,OAAO,SAAS;;yBAKU,KAAK;;oBAUV,QAAQ;sBAKM,SAAS;qBAKD,SAAS;uBAKrB,QAAQ;;IAE3C,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,YAAY,CACb,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAChE,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,EAAE,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS,EAAE,EACrD,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,gBACtB,QAAQ;YAEnB,cACE,KAAK,EAAE;oBACL,CAAC,KAAK,CAAC,EAAE,IAAI;oBACb,CAAC,GAAG,OAAO,IAAI,MAAM,EAAE,CAAC,EAAE,IAAI;oBAC9B,CAAC,UAAU,CAAC,EAAE,OAAO,KAAK,UAAU;oBACpC,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,IAAI;iBAClB;gBAED,qBACE,OAAO,EAAC,iBAAiB,4BACD,KAAK;oBAE7B,gBAAO,KAAK,CAAQ,CACN,CACT,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcStatusTagStatuses } from \"./ic-status-tag.types\";\nimport { IcEmphasisType, IcSizes } from \"../../utils/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   * Screen readers will announce changes to the `label`, but not the initial value.\n   */\n  @Prop() announced?: boolean = false;\n\n  /**\n   * The content rendered within the status tag.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The size of the status tag component.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * The colour of the status tag.\n   */\n  @Prop() status?: IcStatusTagStatuses = \"neutral\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: \"dark\" | \"light\" | \"inherit\" = \"inherit\";\n\n  /**\n   * The emphasis of the status tag.\n   */\n  @Prop() variant?: IcEmphasisType = \"filled\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Status Tag\"\n    );\n  }\n\n  render() {\n    const { label, status, variant, size, announced, theme } = this;\n    return (\n      <Host\n        class={{ [`ic-theme-${theme}`]: theme !== \"inherit\" }}\n        role={announced ? \"status\" : null}\n        aria-label=\"Status\"\n      >\n        <strong\n          class={{\n            [\"tag\"]: true,\n            [`${variant}-${status}`]: true,\n            [\"outlined\"]: variant === \"outlined\",\n            [`${size}`]: true,\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.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-status-tag.types.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcStatusTagStatuses = \"neutral\" | \"success\" | \"warning\" | \"danger\";\n\nexport type IcStatusTagAppearance = \"filled\" | \"outlined\";\n"]}
+{"version":3,"file":"ic-status-tag.types.js","sourceRoot":"","sources":["../../../src/components/ic-status-tag/ic-status-tag.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcStatusTagStatuses = \"neutral\" | \"success\" | \"warning\" | \"danger\";\n"]}

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

@@ -9,7 +9,7 @@ describe("ic-status-tag component renders label", () => {
         expect(page.root).toEqualHtml(`
     <ic-status-tag aria-label="Status" label="Neutral">
     <mock:shadow-root>
-      <strong class="default filled-neutral tag" >
+      <strong class="filled-neutral medium tag">
         <ic-typography variant="label-uppercase">
           <span>
             Neutral
@@ -28,7 +28,7 @@ describe("ic-status-tag component renders label", () => {
             expect(page.root).toEqualHtml(`
     <ic-status-tag announced="true" aria-label="Status" label="Neutral" role="status">
     <mock:shadow-root>
-      <strong class="default filled-neutral tag" >
+      <strong class="filled-neutral medium tag">
         <ic-typography variant="label-uppercase">
           <span>
             Neutral

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

@@ -1 +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;IACrD,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,iDAAiD;SACxD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;IACL,CAAC,CAAC;QACA,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;YAC/E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;gBAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;gBACvB,IAAI,EAAE,kEAAkE;aACzE,CAAC,CAAC;YAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY/B,CAAC,CAAC;QACH,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=\"default filled-neutral tag\" >\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=\"default filled-neutral tag\" >\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"]}
+{"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;IACrD,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,iDAAiD;SACxD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;IACL,CAAC,CAAC;QACA,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;YAC/E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;gBAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;gBACvB,IAAI,EAAE,kEAAkE;aACzE,CAAC,CAAC;YAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY/B,CAAC,CAAC;QACH,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=\"filled-neutral medium tag\">\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=\"filled-neutral medium tag\">\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

@@ -2,6 +2,8 @@
 :host {
   display: flex;
   flex: auto;
+
+  --ic-typography-color: currentcolor;
 }
 
 .step {
@@ -14,8 +16,8 @@
   justify-content: center;
 }
 
-.step-title,
-.step-subtitle,
+.heading,
+.subheading,
 .step-status,
 .next-step {
   white-space: pre-line;
@@ -31,7 +33,7 @@
 }
 
 /* COMPACT STEP STYLING */
-:host(.compact) {
+:host(.ic-step-compact) {
   -moz-column-gap: var(--ic-space-sm);
        column-gap: var(--ic-space-sm);
 
@@ -39,17 +41,17 @@
   --compact-step-circular-line-width: var(--ic-space-xxs);
 }
 
-:host(.compact.light) {
+:host(.ic-step-compact.ic-step-light) {
   --compact-step-inner-color: var(--ic-status-info-contrast);
   --compact-step-outer-color: var(--ic-architectural-600);
 }
 
-:host(.compact) .step {
+:host(.ic-step-compact) .step {
   -moz-column-gap: var(--ic-space-sm);
        column-gap: var(--ic-space-sm);
 }
 
-:host(.compact) .step:not(.current) {
+:host(.ic-step-compact) .step:not(.current) {
   display: none;
   opacity: 0;
   visibility: hidden;
@@ -63,17 +65,17 @@
   border-radius: 50%;
 }
 
-:host(:not(.light)) ic-loading-indicator::part(ic-loading-container) {
+:host(:not(.ic-step-light)) ic-loading-indicator::part(ic-loading-container) {
   background-color: var(--ic-architectural-white);
 }
 
-:host(.compact) .step-title-area {
+:host(.ic-step-compact) .heading-area {
   display: flex;
   flex-direction: column;
   width: 14.25rem;
 }
 
-:host(.compact.light) .disabled .step-title-area {
+:host(.ic-step-compact.ic-step-light) .disabled .heading-area {
   color: var(--ic-architectural-400);
 }
 
@@ -94,15 +96,15 @@
   color: var(--ic-status-success);
 }
 
-:host(.light) .compact-step-completed .step-status {
+:host(.ic-step-light) .compact-step-completed .step-status {
   color: var(--ic-status-success-contrast);
 }
 
-.compact-step-disabled :is(.step-title, .step-status) {
+.compact-step-disabled :is(.heading, .step-status) {
   color: var(--ic-color-tertiary-text);
 }
 
-:host(.light) .compact-step-disabled :is(.step-status) {
+:host(.ic-step-light) .compact-step-disabled :is(.step-status) {
   color: var(--ic-architectural-white);
 }
 
@@ -111,25 +113,25 @@
   white-space: nowrap;
 }
 
-:host(.light) .step-num {
+:host(.ic-step-light) .step-num {
   color: var(--ic-architectural-white);
 }
 
-:host(.compact) .step-icon {
+:host(.ic-step-compact) .step-icon {
   margin: var(--ic-space-xxxs);
 }
 
-:host(.compact) .step-icon svg {
+:host(.ic-step-compact) .step-icon svg {
   width: var(--ic-space-md);
   height: var(--ic-space-md);
 }
 
 /* DEFAULT STEP STYLING */
-:host(.default) .step {
+:host(.ic-step-default) .step {
   flex-direction: column;
 }
 
-:host(.default.last-step) {
+:host(.ic-step-default.last-step) {
   flex-grow: initial;
 }
 
@@ -141,11 +143,11 @@
   height: 2.5rem;
 }
 
-:host(.default) .step-icon {
+:host(.ic-step-default) .step-icon {
   border-radius: 50%;
 }
 
-:host(.default:not(.light)) .step-icon {
+:host(.ic-step-default:not(.ic-step-light)) .step-icon {
   background-color: var(--ic-architectural-white);
 }
 
@@ -158,53 +160,53 @@
   border-radius: 50%;
 }
 
-:host(.default) .current {
+:host(.ic-step-default) .current {
   color: var(--ic-status-info);
 }
 
-:host(.default.light) .current,
-:host(.default.light) .current .step-title-area {
+:host(.ic-step-default.ic-step-light) .current,
+:host(.ic-step-default.ic-step-light) .current .heading-area {
   color: var(--ic-status-info-contrast);
 }
 
-:host(.default) .step-title-area {
+:host(.ic-step-default) .heading-area {
   margin: var(--ic-space-xs) 0;
   padding-right: var(--ic-space-xs);
   width: 100%;
 }
 
-:host(.light) .step-title-area {
+:host(.ic-step-light) .heading-area {
   color: var(--ic-architectural-200);
 }
 
-:host(.compact.light) .step-title-area {
+:host(.ic-step-compact.ic-step-light) .heading-area {
   color: var(--ic-architectural-white);
 }
 
-:host(.default) .step-title,
-.step-subtitle {
+:host(.ic-step-default) .heading,
+.subheading {
   width: -moz-fit-content;
   width: fit-content;
 }
 
-.step-subtitle {
+.subheading {
   color: var(--ic-color-tertiary-text);
 }
 
-:host(.light) .step-subtitle {
+:host(.ic-step-light) .subheading {
   color: var(--ic-architectural-white);
 }
 
-.current .step-subtitle {
+.current .subheading {
   color: var(--ic-color-primary-text);
 }
 
-:host(.default) .completed {
+:host(.ic-step-default) .completed {
   color: var(--ic-status-success);
 }
 
-:host(.default.light) .completed,
-:host(.default.light) .completed .step-title-area {
+:host(.ic-step-default.ic-step-light) .completed,
+:host(.ic-step-default.ic-step-light) .completed .heading-area {
   color: var(--ic-status-success-contrast);
 }
 
@@ -212,16 +214,16 @@
   box-shadow: inset var(--ic-architectural-200) 0 0 0 0.125rem;
 }
 
-:host(.light) .active .step-icon-inner {
+:host(.ic-step-light) .active .step-icon-inner {
   color: var(--ic-architectural-white);
 }
 
 .current .step-icon-inner {
   background-color: var(--ic-status-info);
-  color: white;
+  color: var(--ic-architectural-white);
 }
 
-:host(.light) .current .step-icon-inner {
+:host(.ic-step-light) .current .step-icon-inner {
   background-color: var(--ic-status-info-contrast);
 }
 
@@ -229,8 +231,8 @@
   color: var(--ic-architectural-200);
 }
 
-:host(.default.light) .disabled,
-:host(.default.light) .disabled .step-title-area {
+:host(.ic-step-default.ic-step-light) .disabled,
+:host(.ic-step-default.ic-step-light) .disabled .heading-area {
   color: var(--ic-architectural-400);
 }
 
@@ -240,12 +242,12 @@
   height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
 }
 
-:host(.light) .disabled .step-icon-inner {
+:host(.ic-step-light) .disabled .step-icon-inner {
   border: var(--ic-border-width) dashed var(--ic-architectural-400);
 }
 
-.disabled .step-title-area,
-:host(.default.light) .disabled .step-subtitle {
+.disabled .heading-area,
+:host(.ic-step-default.ic-step-light) .disabled .subheading {
   color: var(--ic-color-tertiary-text);
 }
 
@@ -255,12 +257,12 @@
   border-radius: 100%;
 }
 
-:host(.light) .completed .step-icon-inner {
+:host(.ic-step-light) .completed .step-icon-inner {
   background: var(--ic-status-success-contrast);
   box-shadow: inset var(--ic-status-success-contrast) 0 0 0 var(--ic-space-xxxs);
 }
 
-:host(.default) .current .step-icon {
+:host(.ic-step-default) .current .step-icon {
   border: var(--ic-space-xxxs) solid var(--ic-status-info);
   padding: var(--ic-space-xxxs);
   margin: 0 calc(-1 * var(--ic-space-xxxs));
@@ -268,7 +270,7 @@
   /* compensating for the circle being bigger than other steps */
 }
 
-:host(.default.light) .current .step-icon {
+:host(.ic-step-default.ic-step-light) .current .step-icon {
   border: var(--ic-space-xxxs) solid var(--ic-status-info-contrast);
 }
 
@@ -280,7 +282,7 @@
   width: 100%;
 }
 
-:host(.light) .step-connect {
+:host(.ic-step-light) .step-connect {
   background-color: var(--ic-architectural-600);
 }
 
@@ -296,7 +298,7 @@
   border-radius: 0;
 }
 
-:host(.light) .disabled .step-connect {
+:host(.ic-step-light) .disabled .step-connect {
   border-top: 0.125rem dashed var(--ic-architectural-600);
 }
 
@@ -304,7 +306,7 @@
   background-color: var(--ic-status-success);
 }
 
-:host(.light) .completed .step-connect {
+:host(.ic-step-light) .completed .step-connect {
   background-color: var(--ic-status-success-contrast);
 }
 
@@ -317,7 +319,7 @@
   background-color: var(--ic-status-info);
 }
 
-:host(.light) .step-connect-inner {
+:host(.ic-step-light) .step-connect-inner {
   background-color: var(--ic-status-info-contrast);
 }
 
@@ -337,7 +339,7 @@
 /** High Contrast **/
 @media (forced-colors: active) {
   /* COMPACT STEP */
-  .compact-step-disabled :is(.step-title, .step-status) {
+  .compact-step-disabled :is(.heading, .step-status) {
     color: GrayText;
   }
 
@@ -355,13 +357,13 @@
     color: canvastext;
   }
 
-  :host(.default) .current .step-icon {
+  :host(.ic-step-default) .current .step-icon {
     padding: 0;
     border: none;
   }
 
   .disabled,
-  .disabled .step-title-area {
+  .disabled .heading-area {
     color: GrayText;
   }
 
@@ -378,12 +380,12 @@
 /* Add back in after storybook has the `color-scheme: light dark` code */
 
 /* @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {
-  :host(:not(.light)) .step-icon-inner {
+  :host(:not(.ic-step-light)) .step-icon-inner {
     color: var(--ic-architectural-black);
   }
 
   .step-num,
-  .step-subtitle {
+  .subheading {
     color: var(--ic-architectural-white) !important;
   }
 } */