@ukic/web-components 3.0.0-alpha.9 → 3.1.0

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;AASvE,MAAM,OAAO,SAAS;;yBAKU,KAAK;;oBAUV,QAAQ;sBAKM,SAAS;qBAKD,SAAS;yBAK1B,IAAI;uBAKC,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,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3E,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,EAAE,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,4BACxB,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 letter case of the status tag's label.\n   */\n  @Prop() uppercase?: boolean = true;\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, uppercase } = 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={uppercase ? \"label-uppercase\" : \"label\"}\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;IALtB;QAME;;;WAGG;QACK,cAAS,GAAa,KAAK,CAAC;QAOpC;;WAEG;QACK,SAAI,GAAa,QAAQ,CAAC;QAElC;;WAEG;QACK,WAAM,GAAyB,SAAS,CAAC;QAEjD;;WAEG;QACK,UAAK,GAAkC,SAAS,CAAC;QAEzD;;WAEG;QACK,cAAS,GAAa,IAAI,CAAC;QAEnC;;WAEG;QACK,YAAO,GAAoB,QAAQ,CAAC;KAmC7C;IAjCC,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,SAAS,EAAE,GAAG,IAAI,CAAC;QAC3E,OAAO,CACL,EAAC,IAAI,qDACH,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,+DACE,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,sEACE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,OAAO,4BACxB,KAAK;oBAE7B,+DAAO,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 letter case of the status tag's label.\n   */\n  @Prop() uppercase?: boolean = true;\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, uppercase } = 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={uppercase ? \"label-uppercase\" : \"label\"}\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.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-step/ic-step.css

@@ -29,13 +29,17 @@
 
 .visually-hidden {
   position: absolute;
-  left: -625rem;
+  left: -9999px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
 }
 
+.visually-hidden:dir(rtl) {
+  right: -9999px;
+}
+
 /* COMPACT STEP STYLING */
 :host(.ic-step-compact) {
   -moz-column-gap: var(--ic-space-sm);
@@ -80,7 +84,7 @@
 }
 
 :host(.ic-step-compact) .disabled .heading {
-  color: var(--ic-stepper-compact-step-title);
+  color: var(--ic-stepper-compact-step-title-disabled);
 }
 
 .info-line {
@@ -157,25 +161,12 @@
   color: var(--ic-status-info-default);
 }
 
-: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(.ic-step-default) .heading-area {
   margin: var(--ic-space-xs) 0;
   padding-right: var(--ic-space-xs);
   width: 100%;
 }
 
-:host(.ic-step-light) .heading-area {
-  color: var(--ic-architectural-200);
-}
-
-:host(.ic-step-compact.ic-step-light) .heading-area {
-  color: var(--ic-architectural-white);
-}
-
 :host(.ic-step-default) .heading,
 .subheading {
   width: -moz-fit-content;
@@ -214,31 +205,17 @@
   color: var(--ic-status-success-default);
 }
 
-:host(.ic-step-default.ic-step-light) .completed,
-:host(.ic-step-default.ic-step-light) .completed .heading-area {
-  color: var(--ic-status-success-contrast);
-}
-
 .active .step-icon-inner {
   box-shadow: inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem;
 }
 
-:host(.ic-step-light) .active .step-icon-inner {
-  color: var(--ic-architectural-white);
-}
-
 .current .step-icon-inner {
   background-color: var(--ic-step-number-background-active);
-  color: var(--ic-step-number-text);
+  color: var(--ic-step-number-text-current);
 }
 
 .disabled {
-  color: var(--ic-architectural-200);
-}
-
-:host(.ic-step-default.ic-step-light) .disabled,
-:host(.ic-step-default.ic-step-light) .disabled .heading-area {
-  color: var(--ic-architectural-400);
+  color: var(--ic-color-text-disabled-mid);
 }
 
 .disabled .step-icon-inner {

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

@@ -4,18 +4,17 @@ import warningIcon from "../../assets/warning-icon-outline.svg";
 import { isPropDefined } from "../../utils/helpers";
 export class Step {
     constructor() {
-        this.compactStepStyling = undefined;
+        /**
+         * @internal If `true`, and a compact stepper  is being used, the current step will be the only step in view.
+         */
         this.current = false;
-        this.lastStep = undefined;
-        this.lastStepNum = undefined;
-        this.nextStepHeading = undefined;
-        this.progress = undefined;
-        this.stepNum = undefined;
-        this.status = undefined;
-        this.subheading = undefined;
-        this.heading = undefined;
+        /**
+         * @internal 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.
+         */
         this.theme = "inherit";
-        this.variant = undefined;
+        /**
+         * The state of the step within the stepper.
+         */
         this.type = "active";
     }
     typeChangeHandler() {
@@ -27,6 +26,7 @@ export class Step {
         }
     }
     render() {
+        var _a, _b;
         // ARIA LABEL
         let ariaLabel = "";
         if (this.type === "completed") {
@@ -43,7 +43,7 @@ export class Step {
         }
         // STEP STATUS
         let stepStatus;
-        if (isPropDefined(this.status)) {
+        if (this.status && isPropDefined(this.status)) {
             stepStatus = this.status[0].toUpperCase() + this.status.slice(1);
         }
         // STEP TYPE
@@ -57,28 +57,29 @@ export class Step {
         // STATUS ICON FOR COMPACT STEP
         let statusIcon;
         if (this.type === "completed" || this.compactStepStyling === "completed") {
-            statusIcon = (h("span", { class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
+            statusIcon = (h("span", { key: '037cdd093417bdeff6f9de2795a2c0a29e23db63', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
         }
         else if (this.type === "disabled" ||
             this.compactStepStyling === "disabled") {
-            statusIcon = (h("span", { class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
+            statusIcon = (h("span", { key: '115e2d476464fb4b4c48516e6cfc108928e6ebdc', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
         }
         // COMPACT STEP COMPONENT
-        const compactStep = (h("div", { class: {
+        const compactStep = (h("div", { key: 'ff799c9a5ac470cd917ecf47896c07d3e8ad6a55', class: {
                 ["step"]: true,
-                ["current"]: this.current,
+                ["current"]: !!this.current,
                 [`compact-step-${this.compactStepStyling}`]: !!this.compactStepStyling,
-            } }, h("ic-loading-indicator", { class: {
+                ["disabled"]: this.type === "disabled" || this.compactStepStyling === "disabled",
+            } }, h("ic-loading-indicator", { key: 'd96083b68c5bd6c34adb1062ab508adf2f3274c0', class: {
                 "compact-step-progress-indicator": true,
                 "not-required": this.type === "disabled" ||
                     this.compactStepStyling === "disabled",
-            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { class: "heading-area" }, h("ic-typography", { variant: "h4", class: "heading" }, this.heading), h("div", { class: "info-line" }, h("ic-typography", { variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { class: "visually-hidden" }, " steps")), (this.subheading ||
+            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { key: '1f6b95b5b99ab252f68e3501f6909b9b8240546b', class: "heading-area" }, h("ic-typography", { key: '8de4cab1512b2406d9d6e38a34026dd786727c56', variant: "h4", class: "heading" }, this.heading), h("div", { key: 'f0aac2d40c6d7c75dba1a8ea061fe70fde1684f8', class: "info-line" }, h("ic-typography", { key: 'd7802839d057c38f72319063302e0f556b4b8799', variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { key: 'b1f8716701f30af917c056dea0b77b23cbb86a09', class: "visually-hidden" }, " steps")), (this.subheading ||
             this.type === "completed" ||
             this.type === "disabled" ||
             (this.variant === "compact" &&
                 !!this.compactStepStyling &&
                 this.compactStepStyling !== "active") ||
-            !!this.status) && (h("div", { class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (h("ic-typography", { variant: "caption" }, this.subheading !== null && isPropDefined(this.subheading)
+            !!this.status) && (h("div", { key: '230dc72e7a579193f8cf1a8552d1ef5749b1d04c', class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (h("ic-typography", { key: '4a089ec12dc7e4f77d3469e08e4ef77b3d3144a3', variant: "caption" }, this.subheading !== null && isPropDefined(this.subheading)
             ? this.subheading
             : this.type === "disabled" ||
                 (this.variant === "compact" &&
@@ -91,28 +92,28 @@ export class Step {
         // ICON FOR DEFAULT STEP
         let icon;
         if (this.type !== "completed") {
-            icon = (h("ic-typography", { variant: "subtitle-small" }, h("span", { class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+            icon = (h("ic-typography", { key: '74584e3b8e9d2d3554723b3b7f23ca9fd2637800', variant: "subtitle-small" }, h("span", { key: '60a00009b73f622ff0d040d09d9b569b28be9cde', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
         }
         else {
-            icon = (h("div", { class: "step-icon-inner", "aria-hidden": "true" }, h("span", { class: "check-icon", innerHTML: checkIcon })));
+            icon = (h("div", { key: 'fae4dd9d0eab63264e9aed6e7b659da9d3ff511e', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '7f83174116e62e676940ca9ec23561250803d15f', class: "check-icon", innerHTML: checkIcon })));
         }
         // STEP CONNECT FOR DEFAULT STEP
-        const partialBar = this.type === "current" && (h("div", { class: "step-connect-inner" }));
-        const finalStep = !this.lastStep && (h("div", { class: {
+        const partialBar = this.type === "current" && (h("div", { key: 'eb8b63c2d0af8d883c09a56b8d3c47afac3e5f81', class: "step-connect-inner" }));
+        const finalStep = !this.lastStep && (h("div", { key: 'cc6e694712782a11aeccc78a0a4f06f39fec3819', class: {
                 ["step-connect"]: true,
-                ["aligned-full-width"]: this.el.parentElement.classList.contains("ic-stepper-default") &&
-                    !this.el.parentElement.classList.contains("ic-stepper-aligned-left"),
+                ["aligned-full-width"]: !!(((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("ic-stepper-default")) &&
+                    !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
             } }, partialBar));
         // DEFAULT STEP COMPONENT
-        const defaultStep = (h("div", { class: {
+        const defaultStep = (h("div", { key: '91c97641133852cc4a5f4d3b8d1cae4996789cc3', class: {
                 ["step"]: true,
                 [`${this.type}`]: true,
-            } }, h("div", { class: "step-top" }, h("div", { class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (h("div", { class: "heading-area" }, this.heading && (h("ic-typography", { variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (h("ic-typography", { variant: "caption", class: "subheading" }, this.subheading !== null && isPropDefined(this.subheading)
+            } }, h("div", { key: '6ebf175f84536a4ab79e3a130e952b592ec9e965', class: "step-top" }, h("div", { key: '23f9b5a7cd4fb0908b7f65ea55c192ee3a2964de', class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (h("div", { key: '7be8f0257f73a29c0ff6f6bf31830a40cb3fe81f', class: "heading-area" }, this.heading && (h("ic-typography", { key: 'fd775a67501c4bd5db9498fc8fa57404f2a51163', variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (h("ic-typography", { key: '2a857f45ff18834e6199a56330e68d40b034afae', variant: "caption", class: "subheading" }, this.subheading !== null && isPropDefined(this.subheading)
             ? this.subheading
             : stepStatus))))));
-        return (h(Host, { role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.type === "current") && "step", class: {
-                ["aligned-full-width"]: this.el.parentElement.classList.contains("ic-stepper-default") &&
-                    !this.el.parentElement.classList.contains("ic-stepper-aligned-left"),
+        return (h(Host, { key: 'ad0c3301d762c11a2a2c78c3a25b4581dca348e9', role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.type === "current") && "step", class: {
+                ["aligned-full-width"]: !!(((_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains("ic-stepper-default")) &&
+                    !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
                 [`ic-step-${this.variant}`]: true,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
             } }, this.variant === "compact" ? compactStep : defaultStep));
@@ -136,7 +137,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "IcStepTypes",
-                    "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\"",
+                    "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\" | undefined",
                     "references": {
                         "IcStepTypes": {
                             "location": "import",
@@ -154,6 +155,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "compact-step-styling",
                 "reflect": false
             },
@@ -162,7 +165,7 @@ export class Step {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -174,6 +177,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "current",
                 "reflect": false,
                 "defaultValue": "false"
@@ -195,6 +200,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "last-step",
                 "reflect": false
             },
@@ -203,7 +210,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -215,6 +222,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "last-step-num",
                 "reflect": false
             },
@@ -223,7 +232,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -235,6 +244,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "next-step-heading",
                 "reflect": false
             },
@@ -243,7 +254,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -255,6 +266,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "progress",
                 "reflect": false
             },
@@ -263,7 +276,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -275,6 +288,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "step-num",
                 "reflect": false
             },
@@ -283,7 +298,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "IcStepStatuses",
-                    "resolved": "\"optional\" | \"required\"",
+                    "resolved": "\"optional\" | \"required\" | undefined",
                     "references": {
                         "IcStepStatuses": {
                             "location": "import",
@@ -298,6 +313,8 @@ export class Step {
                     "tags": [],
                     "text": "The status of the step. Use this prop to display a status message on the step if it is required or optional."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "status",
                 "reflect": false
             },
@@ -306,7 +323,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -315,6 +332,8 @@ export class Step {
                     "tags": [],
                     "text": "Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "subheading",
                 "reflect": false
             },
@@ -323,7 +342,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -332,6 +351,8 @@ export class Step {
                     "tags": [],
                     "text": "The title of the step within the stepper."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading",
                 "reflect": false
             },
@@ -340,7 +361,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -358,6 +379,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"inherit\""
@@ -385,6 +408,8 @@ export class Step {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false
             },
@@ -393,7 +418,7 @@ export class Step {
                 "mutable": false,
                 "complexType": {
                     "original": "IcStepTypes",
-                    "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\"",
+                    "resolved": "\"active\" | \"completed\" | \"current\" | \"disabled\" | undefined",
                     "references": {
                         "IcStepTypes": {
                             "location": "import",
@@ -408,6 +433,8 @@ export class Step {
                     "tags": [],
                     "text": "The state of the step within the stepper."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "\"active\""