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

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

@@ -0,0 +1,196 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  announced: false,
+  label: "Status tag label",
+  size: "medium",
+  status: "neutral",
+  variant: "filled",
+  theme: "inherit",
+  uppercase: true,
+};
+
+export default {
+  title: "Web Components/Status tag",
+  component: "ic-status-tag",
+};
+
+export const Neutral = {
+  render: () => html`
+    <ic-status-tag label="Neutral"></ic-status-tag>
+    <ic-status-tag label="Neutral" variant="outlined"></ic-status-tag>
+  `,
+
+  name: "Neutral",
+};
+
+export const Success = {
+  render: () => html`
+    <ic-status-tag label="Success" status="success"></ic-status-tag>
+    <ic-status-tag
+      label="Success"
+      status="success"
+      variant="outlined"
+    ></ic-status-tag>
+  `,
+
+  name: "Success",
+};
+
+export const Warning = {
+  render: () => html`
+    <ic-status-tag label="Warning" status="warning"></ic-status-tag>
+    <ic-status-tag
+      label="Warning"
+      status="warning"
+      variant="outlined"
+    ></ic-status-tag>
+  `,
+
+  name: "Warning",
+};
+
+export const Danger = {
+  render: () => html`
+    <ic-status-tag label="Danger" status="danger"></ic-status-tag>
+    <ic-status-tag
+      label="Danger"
+      status="danger"
+      variant="outlined"
+    ></ic-status-tag>
+  `,
+
+  name: "Danger",
+};
+
+export const LetterCase = {
+  render: () => html`
+    <ic-status-tag label="Uppercase status tag"></ic-status-tag>
+    <ic-status-tag
+      label="Uppercase status tag"
+      variant="outlined"
+    ></ic-status-tag>
+    <ic-status-tag
+      label="Sentence case status tag"
+      uppercase="false"
+    ></ic-status-tag>
+    <ic-status-tag
+      label="Sentence case status tag"
+      variant="outlined"
+      uppercase="false"
+    ></ic-status-tag>
+  `,
+
+  name: "Letter case",
+};
+
+export const Size = {
+  render: () => html`
+    <ic-status-tag label="Small" size="small"></ic-status-tag>
+    <ic-status-tag
+      label="Small"
+      variant="outlined"
+      size="small"
+    ></ic-status-tag>
+    <ic-status-tag label="Default" size="medium"></ic-status-tag>
+    <ic-status-tag
+      label="Default"
+      variant="outlined"
+      size="medium"
+    ></ic-status-tag>
+    <ic-status-tag label="Large" size="large"></ic-status-tag>
+    <ic-status-tag
+      label="Large"
+      variant="outlined"
+      size="large"
+    ></ic-status-tag>
+  `,
+
+  name: "Size",
+};
+
+export const Announced = {
+  render: () => html`
+    <ic-status-tag
+      label="Warning"
+      status="warning"
+      id="tag"
+      announced="false"
+    ></ic-status-tag>
+    <br />
+    <br />
+    <ic-button variant="primary" size="small" onClick="onClick()" id="btn"
+      >Toggle announced prop</ic-button
+    >
+    <script>
+      const tag = document.getElementById("tag");
+      const btn = document.getElementById("btn");
+      btn.addEventListener("click", onClick);
+      function onClick(e) {
+        e.preventDefault();
+        tag.announced
+          ? ((tag.announced = "false"),
+            (tag.status = "warning"),
+            (tag.label = "Warning"))
+          : ((tag.announced = "true"),
+            (tag.status = "success"),
+            (tag.label = "Success"));
+      }
+    </script>
+  `,
+
+  name: "Announced",
+};
+
+const inlineRadioSelector = "inline-radio";
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-status-tag
+      label=${args.label}
+      size=${args.size}
+      status=${args.status}
+      variant=${args.variant}
+      announced=${args.announced}
+      theme=${args.theme}
+      uppercase=${args.uppercase}
+    ></ic-status-tag>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    size: {
+      options: ["medium", "small", "large"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    status: {
+      options: ["neutral", "success", "warning", "danger"],
+
+      control: {
+        type: "select",
+      },
+    },
+
+    variant: {
+      options: ["filled", "outlined"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+  },
+
+  name: "Playground",
+};

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

@@ -6,38 +6,21 @@ describe("ic-status-tag component renders label", () => {
             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="filled-neutral medium tag">
-        <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="filled-neutral medium tag">
-        <ic-typography variant="label-uppercase">
-          <span>
-            Neutral
-          </span>
-        </ic-typography>
-      </strong>
-      </mock:shadow-root>
-    </ic-status-tag>
-    `);
+        expect(page.root).toMatchSnapshot(`renders label`);
+    });
+    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).toMatchSnapshot(`role of status if announced is true`);
+    });
+    it("should render a lowercase label when `uppercase` is set to false", async () => {
+        const page = await newSpecPage({
+            components: [StatusTag],
+            html: `<ic-status-tag label="Neutral" uppercase="false"></ic-status-tag>`,
         });
+        expect(page.root).toMatchSnapshot(`lowercase label when uppercase is false`);
+    });
 });
 //# sourceMappingURL=ic-status-tag.spec.js.map

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=\"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"]}
+{"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,eAAe,CAAC,eAAe,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iEAAiE,EAAE,KAAK,IAAI,EAAE;QAC/E,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,kEAAkE;SACzE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAAC,qCAAqC,CAAC,CAAC;IAC3E,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kEAAkE,EAAE,KAAK,IAAI,EAAE;QAChF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,SAAS,CAAC;YACvB,IAAI,EAAE,mEAAmE;SAC1E,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,CAC/B,yCAAyC,CAC1C,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,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).toMatchSnapshot(`renders label`);\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).toMatchSnapshot(`role of status if announced is true`);\n  });\n\n  it(\"should render a lowercase label when `uppercase` is set to false\", async () => {\n    const page = await newSpecPage({\n      components: [StatusTag],\n      html: `<ic-status-tag label=\"Neutral\" uppercase=\"false\"></ic-status-tag>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      `lowercase label when uppercase is false`\n    );\n  });\n});\n"]}

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

@@ -23,6 +23,10 @@
   white-space: pre-line;
 }
 
+.next-step {
+  color: var(--ic-stepper-compact-step-next-text);
+}
+
 .visually-hidden {
   position: absolute;
   left: -625rem;
@@ -37,15 +41,11 @@
   -moz-column-gap: var(--ic-space-sm);
        column-gap: var(--ic-space-sm);
 
-  --compact-step-inner-color: var(--ic-status-info);
+  --compact-step-inner-color: var(--ic-step-indicator-status-current);
+  --compact-step-outer-color: var(--ic-step-indicator-status-remaining);
   --compact-step-circular-line-width: var(--ic-space-xxs);
 }
 
-: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(.ic-step-compact) .step {
   -moz-column-gap: var(--ic-space-sm);
        column-gap: var(--ic-space-sm);
@@ -65,8 +65,8 @@
   border-radius: 50%;
 }
 
-:host(:not(.ic-step-light)) ic-loading-indicator::part(ic-loading-container) {
-  background-color: var(--ic-architectural-white);
+:host() ic-loading-indicator::part(ic-loading-container) {
+  background-color: var(--ic-step-indicator-background);
 }
 
 :host(.ic-step-compact) .heading-area {
@@ -75,8 +75,12 @@
   width: 14.25rem;
 }
 
-:host(.ic-step-compact.ic-step-light) .disabled .heading-area {
-  color: var(--ic-architectural-400);
+:host(.ic-step-compact) .heading {
+  color: var(--ic-stepper-compact-step-title);
+}
+
+:host(.ic-step-compact) .disabled .heading {
+  color: var(--ic-stepper-compact-step-title);
 }
 
 .info-line {
@@ -87,36 +91,24 @@
 
 .step-status {
   display: flex;
-  color: var(--ic-color-secondary-text);
+  color: var(--ic-stepper-compact-step-requirement-text);
   -moz-column-gap: var(--ic-space-xxxs);
        column-gap: var(--ic-space-xxxs);
 }
 
 .compact-step-completed .step-status {
-  color: var(--ic-status-success);
-}
-
-:host(.ic-step-light) .compact-step-completed .step-status {
-  color: var(--ic-status-success-contrast);
+  color: var(--ic-stepper-compact-step-completed-text);
 }
 
 .compact-step-disabled :is(.heading, .step-status) {
-  color: var(--ic-color-tertiary-text);
-}
-
-:host(.ic-step-light) .compact-step-disabled :is(.step-status) {
-  color: var(--ic-architectural-white);
+  color: var(--ic-stepper-compact-step-requirement-text-disabled);
 }
 
 .step-num {
-  color: var(--ic-color-secondary-text);
+  color: var(--ic-stepper-compact-step-stage-text);
   white-space: nowrap;
 }
 
-:host(.ic-step-light) .step-num {
-  color: var(--ic-architectural-white);
-}
-
 :host(.ic-step-compact) .step-icon {
   margin: var(--ic-space-xxxs);
 }
@@ -147,8 +139,8 @@
   border-radius: 50%;
 }
 
-:host(.ic-step-default:not(.ic-step-light)) .step-icon {
-  background-color: var(--ic-architectural-white);
+:host(.ic-step-default) .step-icon {
+  background-color: var(--ic-step-number-inactive);
 }
 
 .step-icon-inner {
@@ -158,10 +150,11 @@
   justify-content: center;
   align-items: center;
   border-radius: 50%;
+  color: var(--ic-step-number-text-inactive);
 }
 
 :host(.ic-step-default) .current {
-  color: var(--ic-status-info);
+  color: var(--ic-status-info-default);
 }
 
 :host(.ic-step-default.ic-step-light) .current,
@@ -189,20 +182,36 @@
   width: fit-content;
 }
 
-.subheading {
-  color: var(--ic-color-tertiary-text);
+.heading {
+  color: var(--ic-step-title);
 }
 
-:host(.ic-step-light) .subheading {
-  color: var(--ic-architectural-white);
+.current .heading {
+  color: var(--ic-step-title-current);
+}
+
+.completed .heading {
+  color: var(--ic-step-title-success);
+}
+
+.disabled .heading {
+  color: var(--ic-step-title-disabled);
+}
+
+.subheading {
+  color: var(--ic-step-title-status-text-inactive);
 }
 
 .current .subheading {
-  color: var(--ic-color-primary-text);
+  color: var(--ic-step-title-status-text-current);
+}
+
+.disabled .subheading {
+  color: var(--ic-step-title-status-text-disabled);
 }
 
 :host(.ic-step-default) .completed {
-  color: var(--ic-status-success);
+  color: var(--ic-status-success-default);
 }
 
 :host(.ic-step-default.ic-step-light) .completed,
@@ -211,7 +220,7 @@
 }
 
 .active .step-icon-inner {
-  box-shadow: inset var(--ic-architectural-200) 0 0 0 0.125rem;
+  box-shadow: inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem;
 }
 
 :host(.ic-step-light) .active .step-icon-inner {
@@ -219,12 +228,8 @@
 }
 
 .current .step-icon-inner {
-  background-color: var(--ic-status-info);
-  color: var(--ic-architectural-white);
-}
-
-:host(.ic-step-light) .current .step-icon-inner {
-  background-color: var(--ic-status-info-contrast);
+  background-color: var(--ic-step-number-background-active);
+  color: var(--ic-step-number-text);
 }
 
 .disabled {
@@ -237,55 +242,40 @@
 }
 
 .disabled .step-icon-inner {
-  border: var(--ic-border-width) dashed var(--ic-architectural-200);
+  border: var(--ic-border-width) dashed var(--ic-step-number-disabled);
   width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
   height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
+  color: var(--ic-step-number-text-disabled);
 }
 
-:host(.ic-step-light) .disabled .step-icon-inner {
-  border: var(--ic-border-width) dashed var(--ic-architectural-400);
-}
-
-.disabled .heading-area,
-:host(.ic-step-default.ic-step-light) .disabled .subheading {
-  color: var(--ic-color-tertiary-text);
+.disabled .step-icon {
+  background-color: transparent !important;
 }
 
 .completed .step-icon-inner {
-  background: var(--ic-status-success);
-  box-shadow: inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);
+  background: var(--ic-step-number-background-success);
+  box-shadow: inset var(--ic-step-number-background-success) 0 0 0
+    var(--ic-space-xxxs);
   border-radius: 100%;
 }
 
-: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(.ic-step-default) .current .step-icon {
-  border: var(--ic-space-xxxs) solid var(--ic-status-info);
+  border: var(--ic-space-xxxs) solid var(--ic-step-number-current-outline);
   padding: var(--ic-space-xxxs);
   margin: 0 calc(-1 * var(--ic-space-xxxs));
+  background-color: var(--ic-step-number-current-outer-fill);
 
   /* compensating for the circle being bigger than other steps */
 }
 
-:host(.ic-step-default.ic-step-light) .current .step-icon {
-  border: var(--ic-space-xxxs) solid var(--ic-status-info-contrast);
-}
-
 .step-connect {
   height: var(--ic-space-xxxs);
-  background-color: var(--ic-architectural-200);
+  background-color: var(--ic-stepper-connector-remaining-status);
   margin: 0 var(--ic-space-xs);
   border-radius: var(--ic-space-xxs);
   width: 100%;
 }
 
-:host(.ic-step-light) .step-connect {
-  background-color: var(--ic-architectural-600);
-}
-
 .aligned-full-width.step-connect {
   min-width: 6.25rem;
   width: 100%;
@@ -294,20 +284,12 @@
 .disabled .step-connect {
   height: 0;
   background-color: rgb(0 0 0 / 0%);
-  border-top: 0.125rem dashed var(--ic-architectural-200);
+  border-top: 0.125rem dashed var(--ic-stepper-connector-disabled);
   border-radius: 0;
 }
 
-:host(.ic-step-light) .disabled .step-connect {
-  border-top: 0.125rem dashed var(--ic-architectural-600);
-}
-
 .completed .step-connect {
-  background-color: var(--ic-status-success);
-}
-
-:host(.ic-step-light) .completed .step-connect {
-  background-color: var(--ic-status-success-contrast);
+  background-color: var(--ic-stepper-connector-success);
 }
 
 .step-connect-inner {
@@ -316,11 +298,7 @@
   flex: auto;
   height: var(--ic-space-xxxs);
   border-radius: var(--ic-space-xxs);
-  background-color: var(--ic-status-info);
-}
-
-:host(.ic-step-light) .step-connect-inner {
-  background-color: var(--ic-status-info-contrast);
+  background-color: var(--ic-stepper-connector-current-status);
 }
 
 .step-icon-inner .check-icon {
@@ -333,7 +311,7 @@
 }
 
 .step-icon-inner .check-icon > svg > path {
-  fill: var(--ic-color-white-text);
+  fill: var(--ic-step-number-icon-success);
 }
 
 /** High Contrast **/
@@ -345,7 +323,7 @@
 
   /* DEFAULT STEP */
   .step-connect:not(.disabled .step-connect) {
-    border: var(--ic-hc-border);
+    border: var(--ic-border-hc);
   }
 
   .active .step-icon-inner,
@@ -363,7 +341,9 @@
   }
 
   .disabled,
-  .disabled .heading-area {
+  .disabled .heading-area,
+  .disabled .step-icon-inner,
+  .disabled .heading {
     color: GrayText;
   }
 
@@ -376,16 +356,3 @@
     fill: canvastext;
   }
 }
-
-/* Add back in after storybook has the `color-scheme: light dark` code */
-
-/* @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {
-  :host(:not(.ic-step-light)) .step-icon-inner {
-    color: var(--ic-architectural-black);
-  }
-
-  .step-num,
-  .subheading {
-    color: var(--ic-architectural-white) !important;
-  }
-} */

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

@@ -14,6 +14,7 @@ export class Step {
         this.status = undefined;
         this.subheading = undefined;
         this.heading = undefined;
+        this.theme = "inherit";
         this.variant = undefined;
         this.type = "active";
     }
@@ -26,7 +27,6 @@ export class Step {
         }
     }
     render() {
-        var _a;
         // ARIA LABEL
         let ariaLabel = "";
         if (this.type === "completed") {
@@ -114,8 +114,7 @@ export class Step {
                 ["aligned-full-width"]: this.el.parentElement.classList.contains("ic-stepper-default") &&
                     !this.el.parentElement.classList.contains("ic-stepper-aligned-left"),
                 [`ic-step-${this.variant}`]: true,
-                ["ic-step-light"]: ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.appearance) ===
-                    "light",
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
             } }, this.variant === "compact" ? compactStep : defaultStep));
     }
     static get is() { return "ic-step"; }
@@ -336,6 +335,33 @@ export class Step {
                 "attribute": "heading",
                 "reflect": false
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "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."
+                        }],
+                    "text": ""
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,