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

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

@@ -7,10 +7,10 @@ describe("default variant of ic-stepper component", () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper>
-      <ic-step step-title="Create" step-type="completed"></ic-step>
-      <ic-step step-title="Read" step-type="current"></ic-step>
-      <ic-step step-title="Update"></ic-step>
-      <ic-step step-title="Delete"></ic-step></ic-stepper>`,
+      <ic-step heading="Create" type="completed"></ic-step>
+      <ic-step heading="Read" type="current"></ic-step>
+      <ic-step heading="Update"></ic-step>
+      <ic-step heading="Delete"></ic-step></ic-stepper>`,
         });
         page.rootInstance.resizeObserverCallback();
         await page.waitForChanges();
@@ -25,26 +25,26 @@ describe("default variant of ic-stepper component", () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper aligned="left">
-      <ic-step step-title="Create" step-type="completed"></ic-step>
-      <ic-step step-title="Read" step-type="current"></ic-step>
-      <ic-step step-title="Update"></ic-step>
-      <ic-step step-title="Delete"></ic-step></ic-stepper>`,
+      <ic-step heading="Create" type="completed"></ic-step>
+      <ic-step heading="Read" type="current"></ic-step>
+      <ic-step heading="Update"></ic-step>
+      <ic-step heading="Delete"></ic-step></ic-stepper>`,
         });
         page.rootInstance.resizeObserverCallback();
         await page.waitForChanges();
         expect(page.rootInstance.variant).toMatch("default");
         expect(page.rootInstance.aligned).toMatch("left");
-        expect(page.root.classList.contains("aligned-left")).toBeTruthy();
+        expect(page.root.classList.contains("ic-stepper-aligned-left")).toBeTruthy();
         expect(page.root).toMatchSnapshot();
     });
     it("should render a stepper with hidden step info", async () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper hide-step-info>
-      <ic-step step-title="Create" step-type="completed"></ic-step>
-      <ic-step step-title="Read" step-type="current"></ic-step>
-      <ic-step step-title="Update"></ic-step>
-      <ic-step step-title="Delete"></ic-step></ic-stepper>`,
+      <ic-step heading="Create" type="completed"></ic-step>
+      <ic-step heading="Read" type="current"></ic-step>
+      <ic-step heading="Update"></ic-step>
+      <ic-step heading="Delete"></ic-step></ic-stepper>`,
         });
         page.rootInstance.resizeObserverCallback();
         await page.waitForChanges();
@@ -52,7 +52,7 @@ describe("default variant of ic-stepper component", () => {
         expect(page.rootInstance.hideStepInfo).toBeTruthy();
         const steps = page.root.querySelectorAll("ic-step");
         steps.forEach((step) => {
-            const stepTitleArea = step.shadowRoot.querySelector(".step > .step-title-area");
+            const stepTitleArea = step.shadowRoot.querySelector(".step > .heading-area");
             expect(stepTitleArea.classList.contains("visually-hidden")).toBeTruthy();
         });
         expect(page.root).toMatchSnapshot();
@@ -62,10 +62,10 @@ describe("default variant of ic-stepper component", () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper>
-      <ic-step step-type="completed"></ic-step>
-      <ic-step step-type="current"></ic-step>
-      <ic-step step-type="disabled"></ic-step>
-      <ic-step step-type="active"></ic-step></ic-stepper>`,
+      <ic-step type="completed"></ic-step>
+      <ic-step type="current"></ic-step>
+      <ic-step type="disabled"></ic-step>
+      <ic-step type="active"></ic-step></ic-stepper>`,
         });
         page.rootInstance.resizeObserverCallback();
         await page.waitForChanges();
@@ -77,9 +77,9 @@ describe("default variant of ic-stepper component", () => {
         expect(page.rootInstance.variant).toMatch("default");
         expect(page.rootInstance["noOfResizes"]).toBe(0);
         steps.forEach((step) => {
-            expect(step["stepTitle"]).toBeUndefined();
-            expect(step["stepSubtitle"]).toBeUndefined();
-            const stepTitleArea = step.shadowRoot.querySelector(".step > .step-title-area");
+            expect(step["heading"]).toBeUndefined();
+            expect(step["subheading"]).toBeUndefined();
+            const stepTitleArea = step.shadowRoot.querySelector(".step > .heading-area");
             expect(stepTitleArea).toBeNull();
         });
         page.rootInstance.resizeObserverCallback();
@@ -90,64 +90,64 @@ describe("default variant of ic-stepper component", () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper aligned="left" connector-width="150">
-      <ic-step step-title="Create" step-type="completed"></ic-step>
-      <ic-step step-title="Read" step-type="current"></ic-step>
-      <ic-step step-title="Update"></ic-step>
-      <ic-step step-title="Delete"></ic-step></ic-stepper>`,
+      <ic-step heading="Create" type="completed"></ic-step>
+      <ic-step heading="Read" type="current"></ic-step>
+      <ic-step heading="Update"></ic-step>
+      <ic-step heading="Delete"></ic-step></ic-stepper>`,
         });
         page.rootInstance.resizeObserverCallback();
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
-        expect(page.root.classList.contains("aligned-left")).toBeTruthy();
+        expect(page.root.classList.contains("ic-stepper-aligned-left")).toBeTruthy();
     });
     it("should ignore the connectorWidth prop if the stepper is set to be aligned full-width", async () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper connector-width="150">
-      <ic-step step-title="Create" step-type="completed"></ic-step>
-      <ic-step step-title="Read" step-type="current"></ic-step>
-      <ic-step step-title="Update"></ic-step>
-      <ic-step step-title="Delete"></ic-step></ic-stepper>`,
+      <ic-step heading="Create" type="completed"></ic-step>
+      <ic-step heading="Read" type="current"></ic-step>
+      <ic-step heading="Update"></ic-step>
+      <ic-step heading="Delete"></ic-step></ic-stepper>`,
         });
         page.rootInstance.resizeObserverCallback();
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
-        expect(page.root.classList.contains("aligned-left")).toBeFalsy();
+        expect(page.root.classList.contains("ic-stepper-aligned-left")).toBeFalsy();
     });
     it("should add 'disabled step' to the aria labels of all disabled steps", async () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper variant="compact" id="custom-stepper">
-        <ic-step variant="compact" step-type="disabled" step-title="First"></ic-step>
+        <ic-step variant="compact" type="disabled" heading="First"></ic-step>
         <ic-step
           variant="compact"
-          step-title="Second With a Very Long Title"
-          step-subtitle="Optional subtitle that is long and should wrap"
+          heading="Second With a Very Long Title"
+          subheading="Optional subtitle that is long and should wrap"
           current
-          step-type="current"
+          type="current"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Third"
-          step-type="disabled"
+          heading="Third"
+          type="disabled"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Fourth title that is long and should wrap"
-          step-subtitle="Optional Subtitle"
-          step-type="completed"
+          heading="Fourth title that is long and should wrap"
+          subheading="Optional Subtitle"
+          type="completed"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Fifth and final step"
-          step-subtitle="Optional Subtitle"
-          step-status="optional"
+          heading="Fifth and final step"
+          subheading="Optional Subtitle"
+          status="optional"
         ></ic-step>
       </ic-stepper>`,
         });
         page.rootInstance.resizeObserverCallback();
         await page.waitForChanges();
-        const disabledSteps = page.root.querySelectorAll('ic-step[step-type="disabled"]');
+        const disabledSteps = page.root.querySelectorAll('ic-step[type="disabled"]');
         disabledSteps.forEach((step) => {
             expect(step.getAttribute("aria-label")).toMatch(/. Non-required step/i);
         });
@@ -157,10 +157,10 @@ describe("default variant of ic-stepper component", () => {
             components: [Stepper, Step],
             html: `
     <ic-stepper>
-      <ic-step step-title="Create" step-type="completed"></ic-step>
-      <ic-step step-title="Read" step-type="current"></ic-step>
-      <ic-step step-title="Update"></ic-step>
-      <ic-step last-step step-title="Delete"></ic-step>
+      <ic-step heading="Create" type="completed"></ic-step>
+      <ic-step heading="Read" type="current"></ic-step>
+      <ic-step heading="Update"></ic-step>
+      <ic-step last-step heading="Delete"></ic-step>
     </ic-stepper>
     `,
         });
@@ -177,10 +177,10 @@ describe("resizeObserver for ic-stepper", () => {
             components: [Stepper],
             html: `
     <ic-stepper>
-      <ic-step step-title="Create" step-type="completed"></ic-step>
-      <ic-step step-title="Read" step-type="current"></ic-step>
-      <ic-step step-title="Update"></ic-step>
-      <ic-step step-title="Delete"></ic-step>
+      <ic-step heading="Create" type="completed"></ic-step>
+      <ic-step heading="Read" type="current"></ic-step>
+      <ic-step heading="Update"></ic-step>
+      <ic-step heading="Delete"></ic-step>
     </ic-stepper>
     `,
         });
@@ -192,10 +192,10 @@ describe("resizeObserver for ic-stepper", () => {
             components: [Stepper],
             html: `
     <ic-stepper>
-      <ic-step step-title="Create" step-type="completed"></ic-step>
-      <ic-step step-title="Read" step-type="current"></ic-step>
-      <ic-step step-title="Update"></ic-step>
-      <ic-step step-title="Delete"></ic-step>
+      <ic-step heading="Create" type="completed"></ic-step>
+      <ic-step heading="Read" type="current"></ic-step>
+      <ic-step heading="Update"></ic-step>
+      <ic-step heading="Delete"></ic-step>
     </ic-stepper>
     `,
         });
@@ -213,27 +213,27 @@ describe("compact variant of ic-stepper component", () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper variant="compact" id="custom-stepper">
-        <ic-step step-title="First"></ic-step>
+        <ic-step heading="First"></ic-step>
         <ic-step
-          step-title="Second With a Very Long Title"
-          step-subtitle="Optional subtitle that is long and should wrap"
+          heading="Second With a Very Long Title"
+          subheading="Optional subtitle that is long and should wrap"
           current
-          step-type="current"
+          type="current"
         ></ic-step>
         <ic-step
-          step-title="Third"
-          step-type="disabled"
+          heading="Third"
+          type="disabled"
         ></ic-step>
         <ic-step
-          step-title="Fourth title that is long and should wrap"
-          step-subtitle="Optional Subtitle"
-          step-type="completed"
+          heading="Fourth title that is long and should wrap"
+          subheading="Optional Subtitle"
+          type="completed"
         ></ic-step>
         <ic-step
-          step-title="Fifth and final step"
-          step-subtitle="Optional Subtitle"
-          step-status="optional"
-          step-type="completed"
+          heading="Fifth and final step"
+          subheading="Optional Subtitle"
+          status="optional"
+          type="completed"
         ></ic-step>
       </ic-stepper>`,
         });
@@ -244,19 +244,19 @@ describe("compact variant of ic-stepper component", () => {
         expect(page.rootInstance.hideStepInfo).toBeFalsy();
         const steps = page.root.querySelectorAll("ic-step");
         steps.forEach((step) => {
-            const stepTitle = step.shadowRoot.querySelector(".step > .step-title-area > .step-title");
-            expect(stepTitle).not.toBeNull();
-            expect(stepTitle.classList.contains("hide")).toBeFalsy();
+            const heading = step.shadowRoot.querySelector(".step > .heading-area > .heading");
+            expect(heading).not.toBeNull();
+            expect(heading.classList.contains("hide")).toBeFalsy();
         });
     });
     it("should render a stepper with hidden step information", async () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper hide-step-info>
-      <ic-step step-title="Create" step-type="completed"></ic-step>
-      <ic-step step-title="Read" step-type="current"></ic-step>
-      <ic-step step-title="Update"></ic-step>
-      <ic-step step-title="Delete"></ic-step></ic-stepper>`,
+      <ic-step heading="Create" type="completed"></ic-step>
+      <ic-step heading="Read" type="current"></ic-step>
+      <ic-step heading="Update"></ic-step>
+      <ic-step heading="Delete"></ic-step></ic-stepper>`,
         });
         page.rootInstance.el.clientWidth = 50;
         page.rootInstance.resizeObserverCallback();
@@ -265,9 +265,9 @@ describe("compact variant of ic-stepper component", () => {
         expect(page.rootInstance.hideStepInfo).toBeTruthy();
         const steps = page.root.querySelectorAll("ic-step");
         steps.forEach((step) => {
-            const stepTitle = step.shadowRoot.querySelector(".step > .step-title-area > .step-title");
-            expect(stepTitle).not.toBeNull();
-            expect(stepTitle.classList.contains("visually-hidden")).toBeFalsy();
+            const heading = step.shadowRoot.querySelector(".step > .heading-area > .heading");
+            expect(heading).not.toBeNull();
+            expect(heading.classList.contains("visually-hidden")).toBeFalsy();
         });
         expect(page.root).toMatchSnapshot();
     });
@@ -275,10 +275,10 @@ describe("compact variant of ic-stepper component", () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper >
-      <ic-step step-type="completed"></ic-step>
-      <ic-step step-type="current"></ic-step>
-      <ic-step step-type="disabled"></ic-step>
-      <ic-step step-type="active" ></ic-step></ic-stepper>`,
+      <ic-step type="completed"></ic-step>
+      <ic-step type="current"></ic-step>
+      <ic-step type="disabled"></ic-step>
+      <ic-step type="active" ></ic-step></ic-stepper>`,
         });
         page.rootInstance.el.clientWidth = 50;
         page.rootInstance.resizeObserverCallback();
@@ -290,9 +290,9 @@ describe("compact variant of ic-stepper component", () => {
         expect(page.rootInstance.variant).toMatch("compact");
         expect(page.rootInstance["noOfResizes"]).toBe(0);
         steps.forEach((step) => {
-            const stepTitle = "Step " + step["stepNum"];
-            expect(step["stepTitle"]).toMatch(stepTitle);
-            expect(step["stepSubtitle"]).toBeUndefined();
+            const heading = "Step " + step["stepNum"];
+            expect(step["heading"]).toMatch(heading);
+            expect(step["subheading"]).toBeUndefined();
         });
         page.rootInstance.resizeObserverCallback();
         await page.waitForChanges();
@@ -302,27 +302,27 @@ describe("compact variant of ic-stepper component", () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper variant="compact" id="custom-stepper">
-        <ic-step step-title="First"></ic-step>
+        <ic-step heading="First"></ic-step>
         <ic-step
-          step-title="Second With a Very Long Title"
-          step-subtitle="Optional subtitle that is long and should wrap"
+          heading="Second With a Very Long Title"
+          subheading="Optional subtitle that is long and should wrap"
           current
-          step-type="current"
+          type="current"
         ></ic-step>
         <ic-step
-          step-title="Third"
-          step-type="disabled"
+          heading="Third"
+          type="disabled"
         ></ic-step>
         <ic-step
-          step-title="Fourth title that is long and should wrap"
-          step-subtitle="Optional Subtitle"
-          step-type="completed"
+          heading="Fourth title that is long and should wrap"
+          subheading="Optional Subtitle"
+          type="completed"
         ></ic-step>
         <ic-step
-          step-title="Fifth and final step"
-          step-subtitle="Optional Subtitle"
-          step-status="optional"
-          step-type="completed"
+          heading="Fifth and final step"
+          subheading="Optional Subtitle"
+          status="optional"
+          type="completed"
         ></ic-step>
       </ic-stepper>`,
         });
@@ -348,27 +348,27 @@ describe("compact variant of ic-stepper component", () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper>
-        <ic-step step-title="First"></ic-step>
+        <ic-step heading="First"></ic-step>
         <ic-step
-          step-title="Second With a Very Long Title"
-          step-subtitle="Optional subtitle that is long and should wrap"
+          heading="Second With a Very Long Title"
+          subheading="Optional subtitle that is long and should wrap"
           current
-          step-type="current"
+          type="current"
         ></ic-step>
         <ic-step
-          step-title="Third"
-          step-type="disabled"
+          heading="Third"
+          type="disabled"
         ></ic-step>
         <ic-step
-          step-title="Fourth title that is long and should wrap"
-          step-subtitle="Optional Subtitle"
-          step-type="completed"
+          heading="Fourth title that is long and should wrap"
+          subheading="Optional Subtitle"
+          type="completed"
         ></ic-step>
         <ic-step
-          step-title="Fifth and final step"
-          step-subtitle="Optional Subtitle"
-          step-status="optional"
-          step-type="completed"
+          heading="Fifth and final step"
+          subheading="Optional Subtitle"
+          status="optional"
+          type="completed"
         ></ic-step>
       </ic-stepper>`,
         });
@@ -389,31 +389,31 @@ describe("compact variant of ic-stepper component", () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper variant="compact">
-        <ic-step variant="compact" step-title="First"></ic-step>
+        <ic-step variant="compact" heading="First"></ic-step>
         <ic-step
           variant="compact"
-          step-title="Second With a Very Long Title"
-          step-subtitle="Optional subtitle that is long and should wrap"
+          heading="Second With a Very Long Title"
+          subheading="Optional subtitle that is long and should wrap"
           current
-          step-type="current"
+          type="current"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Third"
-          step-type="disabled"
+          heading="Third"
+          type="disabled"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Fourth title that is long and should wrap"
-          step-subtitle="Optional Subtitle"
-          step-type="completed"
+          heading="Fourth title that is long and should wrap"
+          subheading="Optional Subtitle"
+          type="completed"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Fifth and final step"
-          step-subtitle="Optional Subtitle"
-          step-status="optional"
-          step-type="completed"
+          heading="Fifth and final step"
+          subheading="Optional Subtitle"
+          status="optional"
+          type="completed"
         ></ic-step>
       </ic-stepper>`,
         });
@@ -430,159 +430,159 @@ describe("compact variant of ic-stepper component", () => {
         expect(notCurrentSteps.classList.contains("show")).toBeFalsy;
         expect(notCurrentSteps.classList.contains("hide")).toBeTruthy;
     });
-    it("should render status icons next to all steps with a disabled stepType", async () => {
+    it("should render status icons next to all steps with a disabled type", async () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper variant="compact" id="custom-stepper">
-        <ic-step variant="compact" step-title="First"></ic-step>
+        <ic-step variant="compact" heading="First"></ic-step>
         <ic-step
           variant="compact"
-          step-title="Second With a Very Long Title"
-          step-subtitle="Optional subtitle that is long and should wrap"
+          heading="Second With a Very Long Title"
+          subheading="Optional subtitle that is long and should wrap"
           current
-          step-type="current"
+          type="current"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Third"
-          step-status="required"
+          heading="Third"
+          status="required"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Fourth title that is long and should wrap"
-          step-subtitle="Optional Subtitle"
-          step-type="completed"
+          heading="Fourth title that is long and should wrap"
+          subheading="Optional Subtitle"
+          type="completed"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Fifth and final step"
-          step-type="disabled"
+          heading="Fifth and final step"
+          type="disabled"
         ></ic-step>
       </ic-stepper>`,
         });
         page.rootInstance.resizeObserverCallback();
         await page.waitForChanges();
-        const notRequiredSteps = page.root.querySelectorAll('ic-step[step-type="disabled"]');
+        const notRequiredSteps = page.root.querySelectorAll('ic-step[type="disabled"]');
         notRequiredSteps.forEach((step) => {
-            const textContent = step.shadowRoot.querySelector(".step > .step-title-area > .info-line > .step-status > ic-typography").textContent;
+            const textContent = step.shadowRoot.querySelector(".step > .heading-area > .info-line > .step-status > ic-typography").textContent;
             expect(textContent).toBe("Not required");
-            const statusIcon = step.shadowRoot.querySelector(".step > .step-title-area > .info-line > .step-status > .step-icon");
+            const statusIcon = step.shadowRoot.querySelector(".step > .heading-area > .info-line > .step-status > .step-icon");
             expect(statusIcon).toEqualHtml(`<span class="warning-icon step-icon" aria-hidden="true">svg</span>`);
             expect(step.getAttribute("aria-label")).toMatch(/. Non-required step/i);
         });
     });
-    it("should render status icons next to all steps with a completed stepType", async () => {
+    it("should render status icons next to all steps with a completed type", async () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper variant="compact" id="custom-stepper">
-        <ic-step variant="compact" step-title="First"></ic-step>
+        <ic-step variant="compact" heading="First"></ic-step>
         <ic-step
           variant="compact"
-          step-title="Second With a Very Long Title"
-          step-subtitle="Optional subtitle that is long and should wrap"
+          heading="Second With a Very Long Title"
+          subheading="Optional subtitle that is long and should wrap"
           current
-          step-type="current"
+          type="current"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Third"
-          step-type="disabled"
+          heading="Third"
+          type="disabled"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Fourth title that is long and should wrap"
-          step-type="completed"
+          heading="Fourth title that is long and should wrap"
+          type="completed"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Fifth and final step"
-          step-subtitle="Optional Subtitle"
+          heading="Fifth and final step"
+          subheading="Optional Subtitle"
         ></ic-step>
       </ic-stepper>`,
         });
         page.rootInstance.resizeObserverCallback();
         await page.waitForChanges();
-        const completeSteps = page.root.querySelectorAll('ic-step[step-type="completed"]');
+        const completeSteps = page.root.querySelectorAll('ic-step[type="completed"]');
         completeSteps.forEach((step) => {
-            const textContent = step.shadowRoot.querySelector(".step > .step-title-area > .info-line > .step-status > ic-typography").textContent;
+            const textContent = step.shadowRoot.querySelector(".step > .heading-area > .info-line > .step-status > ic-typography").textContent;
             expect(textContent).toBe("Completed");
-            const statusIcon = step.shadowRoot.querySelector(".step > .step-title-area > .info-line > .step-status > span.step-icon");
+            const statusIcon = step.shadowRoot.querySelector(".step > .heading-area > .info-line > .step-status > span.step-icon");
             expect(statusIcon).toEqualHtml(`<span class="check-icon step-icon" aria-hidden="true">svg</span>`);
             expect(step.getAttribute("aria-label")).toMatch(/. Completed step/i);
         });
     });
-    it("should update the aria label of a step if its stepStatus is set to 'optional'", async () => {
+    it("should update the aria label of a step if its status is set to 'optional'", async () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper variant="compact" id="custom-stepper">
-        <ic-step variant="compact" step-title="First"></ic-step>
+        <ic-step variant="compact" heading="First"></ic-step>
         <ic-step
           variant="compact"
-          step-title="Second With a Very Long Title"
-          step-subtitle="Optional subtitle that is long and should wrap"
+          heading="Second With a Very Long Title"
+          subheading="Optional subtitle that is long and should wrap"
           current
-          step-type="current"
+          type="current"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Third"
-          step-status="optional"
+          heading="Third"
+          status="optional"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Fourth title that is long and should wrap"
-          step-subtitle="Optional Subtitle"
-          step-type="completed"
+          heading="Fourth title that is long and should wrap"
+          subheading="Optional Subtitle"
+          type="completed"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Fifth and final step"
-          step-subtitle="Optional Subtitle"
-          step-status="optional"
+          heading="Fifth and final step"
+          subheading="Optional Subtitle"
+          status="optional"
         ></ic-step>
       </ic-stepper>`,
         });
         page.rootInstance.resizeObserverCallback();
         await page.waitForChanges();
-        const optionalSteps = page.root.querySelectorAll('ic-step[step-status="optional"]');
+        const optionalSteps = page.root.querySelectorAll('ic-step[status="optional"]');
         optionalSteps.forEach((step) => {
             expect(step.getAttribute("aria-label")).toMatch(/. Optional step/i);
         });
     });
-    it("should update the aria label of a step if its stepStatus is set to 'required'", async () => {
+    it("should update the aria label of a step if its status is set to 'required'", async () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper variant="compact" id="custom-stepper">
-        <ic-step variant="compact" step-title="First"></ic-step>
+        <ic-step variant="compact" heading="First"></ic-step>
         <ic-step
           variant="compact"
-          step-title="Second With a Very Long Title"
-          step-subtitle="Optional subtitle that is long and should wrap"
+          heading="Second With a Very Long Title"
+          subheading="Optional subtitle that is long and should wrap"
           current
-          step-type="current"
+          type="current"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Third"
-          step-status="required"
+          heading="Third"
+          status="required"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Fourth title that is long and should wrap"
-          step-subtitle="Optional Subtitle"
-          step-type="completed"
+          heading="Fourth title that is long and should wrap"
+          subheading="Optional Subtitle"
+          type="completed"
         ></ic-step>
         <ic-step
           variant="compact"
-          step-title="Fifth and final step"
-          step-subtitle="Optional Subtitle"
-          step-status="optional"
+          heading="Fifth and final step"
+          subheading="Optional Subtitle"
+          status="optional"
         ></ic-step>
       </ic-stepper>`,
         });
         page.rootInstance.resizeObserverCallback();
         await page.waitForChanges();
-        const requiredSteps = page.root.querySelectorAll('ic-step[step-status="required"]');
+        const requiredSteps = page.root.querySelectorAll('ic-step[status="required"]');
         requiredSteps.forEach((step) => {
             expect(step.getAttribute("aria-label")).toMatch(/. Required step/i);
         });
@@ -591,25 +591,25 @@ describe("compact variant of ic-stepper component", () => {
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper variant="compact" id="custom-stepper">
-        <ic-step step-title="First"></ic-step>
+        <ic-step heading="First"></ic-step>
         <ic-step
-          step-title="Second With a Very Long Title"
-          step-subtitle="Optional subtitle that is long and should wrap"
+          heading="Second With a Very Long Title"
+          subheading="Optional subtitle that is long and should wrap"
           current
-          step-type="current"
+          type="current"
         ></ic-step>
         <ic-step
-          step-title="Third"
-          step-type="disabled"
+          heading="Third"
+          type="disabled"
         ></ic-step>
         <ic-step
-          step-title="Fourth title that is long and should wrap"
-          step-subtitle="Optional Subtitle"
-          step-type="completed"
+          heading="Fourth title that is long and should wrap"
+          subheading="Optional Subtitle"
+          type="completed"
         ></ic-step>
         <ic-step
-          step-title="Fifth and final step"
-          step-subtitle="Optional Subtitle"
+          heading="Fifth and final step"
+          subheading="Optional Subtitle"
         ></ic-step>
       </ic-stepper>`,
         });
@@ -622,10 +622,10 @@ describe("compact variant of ic-stepper component", () => {
         });
         for (let i = 0; i < steps.length; i++) {
             if (steps[i] !== steps[steps.length - 1]) {
-                expect(steps[i]["nextStepTitle"]).toBe(steps[i + 1]["stepTitle"]);
+                expect(steps[i]["nextStepHeading"]).toBe(steps[i + 1]["heading"]);
             }
             else {
-                expect(steps[i]["nextStepTitle"]).toBeUndefined();
+                expect(steps[i]["nextStepHeading"]).toBeUndefined();
             }
         }
     });
@@ -635,26 +635,26 @@ describe("switch between the compact and default stepper depending on whether th
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper >
-        <ic-step step-title="First"></ic-step>
+        <ic-step heading="First"></ic-step>
         <ic-step
-          step-title="Second With a Very Long Title"
-          step-subtitle="Optional subtitle that is long and should wrap"
+          heading="Second With a Very Long Title"
+          subheading="Optional subtitle that is long and should wrap"
           current
-          step-type="current"
+          type="current"
         ></ic-step>
         <ic-step
-          step-title="Third"
-          step-type="disabled"
+          heading="Third"
+          type="disabled"
         ></ic-step>
         <ic-step
-          step-title="Fourth title that is long and should wrap"
-          step-subtitle="Optional Subtitle"
-          step-type="completed"
+          heading="Fourth title that is long and should wrap"
+          subheading="Optional Subtitle"
+          type="completed"
         ></ic-step>
         <ic-step
-          step-title="Fifth and final step"
-          step-subtitle="Optional Subtitle"
-          step-status="optional"
+          heading="Fifth and final step"
+          subheading="Optional Subtitle"
+          status="optional"
         ></ic-step>
       </ic-stepper>`,
         });
@@ -669,26 +669,26 @@ describe("switch between the compact and default stepper depending on whether th
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper>
-        <ic-step step-title="First"></ic-step>
+        <ic-step heading="First"></ic-step>
         <ic-step
-          step-title="Second With a Very Long Title"
-          step-subtitle="Optional subtitle that is long and should wrap"
+          heading="Second With a Very Long Title"
+          subheading="Optional subtitle that is long and should wrap"
           current
-          step-type="current"
+          type="current"
         ></ic-step>
         <ic-step
-          step-title="Third"
-          step-type="disabled"
+          heading="Third"
+          type="disabled"
         ></ic-step>
         <ic-step
-          step-title="Fourth title that is long and should wrap"
-          step-subtitle="Optional Subtitle"
-          step-type="completed"
+          heading="Fourth title that is long and should wrap"
+          subheading="Optional Subtitle"
+          type="completed"
         ></ic-step>
         <ic-step
-          step-title="Fifth and final step"
-          step-subtitle="Optional Subtitle"
-          step-status="optional"
+          heading="Fifth and final step"
+          subheading="Optional Subtitle"
+          status="optional"
         ></ic-step>
       </ic-stepper>`,
         });
@@ -708,17 +708,17 @@ describe("switch between the compact and default stepper depending on whether th
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper appearance="light">
-      <ic-step step-title="Create" step-type="completed"></ic-step>
-      <ic-step step-title="Read" step-type="current"></ic-step>
-      <ic-step step-title="Update"></ic-step>
-      <ic-step step-title="Delete"></ic-step></ic-stepper>`,
+      <ic-step heading="Create" type="completed"></ic-step>
+      <ic-step heading="Read" type="current"></ic-step>
+      <ic-step heading="Update"></ic-step>
+      <ic-step heading="Delete"></ic-step></ic-stepper>`,
         });
         page.rootInstance.resizeObserverCallback();
         await page.waitForChanges();
         expect(page.rootInstance.appearance).toMatch("light");
         const steps = page.root.querySelectorAll("ic-step");
         steps.forEach((step) => {
-            expect(step.classList.contains("light")).toBeTruthy();
+            expect(step.classList.contains("ic-step-light")).toBeTruthy();
         });
         expect(page.root).toMatchSnapshot();
     });
@@ -726,26 +726,26 @@ describe("switch between the compact and default stepper depending on whether th
         const page = await newSpecPage({
             components: [Stepper, Step],
             html: `<ic-stepper>
-      <ic-step step-title="Create" step-type="completed"></ic-step>
-      <ic-step step-title="Read" step-type="current"></ic-step>
-      <ic-step step-title="Update"></ic-step>
-      <ic-step step-title="Delete"></ic-step></ic-stepper>`,
+      <ic-step heading="Create" type="completed"></ic-step>
+      <ic-step heading="Read" type="current"></ic-step>
+      <ic-step heading="Update"></ic-step>
+      <ic-step heading="Delete"></ic-step></ic-stepper>`,
         });
         await page.waitForChanges();
         expect(page.rootInstance.hideStepInfo).toBeFalsy();
         const steps = page.root.querySelectorAll("ic-step");
         steps.forEach((step) => {
-            const stepTitle = step.shadowRoot.querySelector(".step > .step-title-area");
-            expect(stepTitle).not.toBeNull();
-            expect(stepTitle.classList.contains("visually-hidden")).toBeFalsy();
+            const heading = step.shadowRoot.querySelector(".step > .heading-area");
+            expect(heading).not.toBeNull();
+            expect(heading.classList.contains("visually-hidden")).toBeFalsy();
         });
         page.rootInstance.hideStepInfo = true;
         await page.waitForChanges();
         expect(page.rootInstance.hideStepInfo).toBeTruthy();
         steps.forEach((step) => {
-            const stepTitle = step.shadowRoot.querySelector(".step > .step-title-area");
-            expect(stepTitle).not.toBeNull();
-            expect(stepTitle.classList.contains("visually-hidden")).toBeTruthy();
+            const heading = step.shadowRoot.querySelector(".step > .heading-area");
+            expect(heading).not.toBeNull();
+            expect(heading.classList.contains("visually-hidden")).toBeTruthy();
         });
     });
 });