@ukic/web-components 3.17.0 → 3.18.0

package/dist/cjs/ic-input-label_2.cjs.entry.js

@@ -120,20 +120,19 @@ const InputValidation = class {
         }, 200); // Delay to help ensure screen readers detect change
     }
     componentDidLoad() {
-        helpers.onComponentRequiredPropUndefined([{ prop: this.message, propName: "message" }], "Input Validation");
         this.messageEl.textContent = INVISIBLE_CHAR;
     }
     render() {
         const { ariaLiveMode, fullWidth, status, message } = this;
         const displayIcon = status !== "" ? ICON[status] : "";
-        return (index.h(index.Host, { key: '0513b4d21426f48a3751fbb4f16786d8cdde6f30', class: {
+        return (index.h(index.Host, { key: '2314e8e4f655e95cee33a0717322b65a5077cc3a', class: {
                 [`ic-input-validation-${status}`]: status !== "",
                 "ic-input-validation-full-width": !!fullWidth,
                 "ic-input-validation-with-status": status !== "",
-            } }, displayIcon !== "" && (index.h("span", { key: '3e6de247d788f9836f338e109d7be5914fa2f320', class: {
+            } }, displayIcon !== "" && (index.h("span", { key: '171000e63f0d8ea96cd34e283700cfa641795419', class: {
                 "status-icon": true,
                 [`icon-${status}`]: true,
-            }, innerHTML: displayIcon })), index.h("ic-typography", { key: '5ee4e673c1f2934d74eafbc08241cdfae1aa5f9f', variant: "caption", class: "statustext" }, index.h("span", { key: '850149ffb8c4cdab21ab0c05a8787747e399ca41', id: this.for && helpers.getInputValidationTextID(this.for) }, message), index.h("span", { key: 'a26f5aa58e81cf3e9d982d86b75b3ab7e14897ad', ref: (el) => (this.messageEl = el), class: "sr-only", "aria-live": ariaLiveMode })), index.h("slot", { key: '4dba13235c6ec27d634b0dd38523963798676b36', name: "validation-message-adornment" })));
+            }, innerHTML: displayIcon })), index.h("ic-typography", { key: '87c722d45b0b7c02602f65b418748b8fe890fed8', variant: "caption", class: "statustext" }, index.h("span", { key: 'd4440c3115b085b471b0de094cb89f9e775df5cb', id: this.for && helpers.getInputValidationTextID(this.for) }, message), index.h("span", { key: '3e1f4328c6ae86a01eccc0bc99a26e37af3aa4c4', ref: (el) => (this.messageEl = el), class: "sr-only", "aria-live": ariaLiveMode })), index.h("slot", { key: 'b042762de928907af3e92882ae2f6068a3c2808d', name: "validation-message-adornment" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ic-input-label_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-input-label.ic-input-validation.entry.cjs.js","mappings":"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","names":["onComponentRequiredPropUndefined","getInputHelperTextID","h","Host","IcInformationStatus","warningIcon","errorIcon","successIcon","getInputValidationTextID"],"sources":["src/components/ic-input-label/ic-input-label.css?tag=ic-input-label","src/components/ic-input-label/ic-input-label.tsx","src/components/ic-input-validation/ic-input-validation.css?tag=ic-input-validation","src/components/ic-input-validation/ic-input-validation.tsx"],"sourcesContent":["ic-input-label {\n  margin-bottom: var(--ic-space-xs);\n\n  --ic-typography-color: var(\n    --ic-input-label-text-color,\n    var(--ic-color-text-primary)\n  );\n}\n\nic-input-label.with-helper {\n  margin-bottom: 0;\n}\n\nic-input-label.ic-input-label-readonly {\n  --ic-typography-color: var(--ic-input-label-readonly-typography-color);\n}\n\nic-input-label .helpertext,\nic-input-label .helpertext ::slotted(*) {\n  margin-top: var(--ic-space-xxxs);\n  padding-bottom: var(--ic-input-label-helpertext-padding, 0);\n\n  --ic-typography-color: var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  );\n}\n\nic-input-label .helpertext-normal {\n  --ic-typography-color: var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  );\n}\n\nic-input-label .helpertext-readonly {\n  --ic-typography-color: var(--ic-input-label-readonly-helpertext-color);\n}\n\nic-input-label .readonly-label {\n  --ic-typography-color: var(--ic-input-label-readonly-label-color);\n}\n\nic-input-label .error-label {\n  --ic-typography-color: var(--ic-input-label-error-label-color);\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  @Element() el: HTMLIcInputLabelElement;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for?: string;\n\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The label will be visually hidden.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The status of the label - e.g. 'error'.\n   */\n  @Prop() status: \"error\" | \"\" = \"\";\n\n  /**\n   * @internal If `true`, wraps label text in label tag\n   */\n  @Prop() useLabelTag: boolean = true;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  private isHelperTextSlotUsed = (slot: Element | null): boolean => {\n    const assignedEls = (slot as HTMLSlotElement)?.assignedElements();\n    if (assignedEls && assignedEls.length) {\n      for (const el of assignedEls) {\n        if (el.tagName === \"SLOT\") {\n          // Recursion needed for when slot is forwarded multiple times - through child components\n          // (e.g. in date picker)\n          if (this.isHelperTextSlotUsed(el as HTMLSlotElement)) {\n            return true;\n          }\n        } else {\n          // Found an assigned element which is not a nested <slot>\n          return true;\n        }\n      }\n    }\n    return false;\n  };\n\n  render() {\n    const {\n      disabled,\n      readonly,\n      label,\n      required,\n      helperText,\n      status,\n      hideLabel,\n      useLabelTag,\n    } = this;\n    const labelText = required ? label + \" *\" : label;\n    const helperTextId = this.for && getInputHelperTextID(this.for);\n    const helperTextClass = {\n      helpertext: true,\n      \"helpertext-normal\": !disabled && !readonly,\n      \"helpertext-readonly\": readonly,\n    };\n\n    const helperTextSlot = this.el.querySelector(\"slot[name='helper-text']\");\n\n    return (\n      <Host\n        class={{\n          \"ic-input-label-disabled\": !!disabled,\n          \"ic-input-label-readonly\": readonly,\n          \"with-helper\":\n            this.isHelperTextSlotUsed(helperTextSlot) || helperText !== \"\",\n        }}\n      >\n        {!hideLabel && (\n          <ic-typography\n            variant=\"label\"\n            class={{\n              \"readonly-label\": readonly,\n              \"error-label\": status === \"error\" && !(readonly || disabled),\n            }}\n          >\n            {readonly || !useLabelTag ? (\n              `${labelText}`\n            ) : (\n              <label htmlFor={this.for}>{labelText}</label>\n            )}\n          </ic-typography>\n        )}\n        {this.isHelperTextSlotUsed(helperTextSlot) ? (\n          <span id={helperTextId} class={helperTextClass}>\n            <slot name=\"helper-text\"></slot>\n          </span>\n        ) : (\n          helperText !== \"\" && (\n            <ic-typography variant=\"caption\" class={helperTextClass}>\n              <span id={helperTextId}>{helperText}</span>\n            </ic-typography>\n          )\n        )}\n      </Host>\n    );\n  }\n}\n","ic-input-validation {\n  max-width: var(--input-width, 20rem);\n  display: flex;\n}\n\nic-input-validation.ic-input-validation-with-status {\n  margin-top: var(--ic-space-xs);\n}\n\nic-input-validation.ic-input-validation-full-width {\n  width: 100%;\n  max-width: none;\n}\n\nic-input-validation span.status-icon {\n  padding-right: var(--ic-space-xxs);\n}\n\nic-input-validation span.status-icon > svg {\n  height: 1.25rem;\n  width: 1.25rem;\n}\n\nic-input-validation span.icon-success > svg {\n  fill: var(--ic-input-validation-success-icon-color);\n}\n\nic-input-validation span.icon-error > svg {\n  fill: var(--ic-input-validation-error, var(--ic-atoms-status-icon-error));\n}\n\nic-input-validation span.icon-warning > svg {\n  fill: var(--ic-input-validation-warning-icon-color);\n}\n\nic-input-validation .statustext {\n  flex-grow: 1;\n  color: var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  );\n\n  --ic-typography-color: var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  );\n}\n\nic-input-validation .sr-only {\n  position: absolute;\n  left: -9999px;\n}\n","import { Element, Component, Host, Prop, h, Watch } from \"@stencil/core\";\n\nimport {\n  IcAriaLive,\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n  getInputValidationTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst ICON = {\n  [IcInformationStatus.Warning]: warningIcon,\n  [IcInformationStatus.Error]: errorIcon,\n  [IcInformationStatus.Success]: successIcon,\n};\nconst INVISIBLE_CHAR = \"\\u200B\";\n\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\n@Component({\n  tag: \"ic-input-validation\",\n  styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n  private messageEl!: HTMLSpanElement;\n\n  @Element() el: HTMLIcInputValidationElement;\n\n  /**\n   *  The ARIA live mode to apply to the message.\n   */\n  @Prop() ariaLiveMode?: IcAriaLive = \"polite\";\n\n  /**\n   * The ID of the form element the validation is bound to.\n   */\n  @Prop() for?: string;\n\n  /**\n   *  If `true`, the input validation will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The validation message to display.\n   */\n  @Prop() message!: string;\n  @Watch(\"message\")\n  watchMessageHandler(newValue: string) {\n    // Force detectable DOM changes\n    // Invisible character used as screen readers can ignore whitespace changes e.g. \"\" and \" \"\n    this.messageEl.textContent = INVISIBLE_CHAR;\n    setTimeout(() => {\n      this.messageEl.textContent = newValue;\n    }, 200); // Delay to help ensure screen readers detect change\n  }\n\n  /**\n   * The status of the validation - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() status?: IcInformationStatusOrEmpty = \"\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.message, propName: \"message\" }],\n      \"Input Validation\"\n    );\n    this.messageEl.textContent = INVISIBLE_CHAR;\n  }\n\n  render() {\n    const { ariaLiveMode, fullWidth, status, message } = this;\n    const displayIcon = status !== \"\" ? ICON[status!] : \"\";\n    return (\n      <Host\n        class={{\n          [`ic-input-validation-${status}`]: status !== \"\",\n          \"ic-input-validation-full-width\": !!fullWidth,\n          \"ic-input-validation-with-status\": status !== \"\",\n        }}\n      >\n        {displayIcon !== \"\" && (\n          <span\n            class={{\n              \"status-icon\": true,\n              [`icon-${status}`]: true,\n            }}\n            innerHTML={displayIcon}\n          />\n        )}\n        <ic-typography variant=\"caption\" class=\"statustext\">\n          <span id={this.for && getInputValidationTextID(this.for)}>\n            {message}\n          </span>\n          {/* Separate aria-live region to avoid flashing due to textContent delay */}\n          <span\n            ref={(el) => (this.messageEl = el as HTMLSpanElement)}\n            class=\"sr-only\"\n            aria-live={ariaLiveMode}\n          ></span>\n        </ic-typography>\n        <slot name=\"validation-message-adornment\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-input-label.ic-input-validation.entry.cjs.js","mappings":"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","names":["onComponentRequiredPropUndefined","getInputHelperTextID","h","Host","IcInformationStatus","warningIcon","errorIcon","successIcon","getInputValidationTextID"],"sources":["src/components/ic-input-label/ic-input-label.css?tag=ic-input-label","src/components/ic-input-label/ic-input-label.tsx","src/components/ic-input-validation/ic-input-validation.css?tag=ic-input-validation","src/components/ic-input-validation/ic-input-validation.tsx"],"sourcesContent":["ic-input-label {\n  margin-bottom: var(--ic-space-xs);\n\n  --ic-typography-color: var(\n    --ic-input-label-text-color,\n    var(--ic-color-text-primary)\n  );\n}\n\nic-input-label.with-helper {\n  margin-bottom: 0;\n}\n\nic-input-label.ic-input-label-readonly {\n  --ic-typography-color: var(--ic-input-label-readonly-typography-color);\n}\n\nic-input-label .helpertext,\nic-input-label .helpertext ::slotted(*) {\n  margin-top: var(--ic-space-xxxs);\n  padding-bottom: var(--ic-input-label-helpertext-padding, 0);\n\n  --ic-typography-color: var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  );\n}\n\nic-input-label .helpertext-normal {\n  --ic-typography-color: var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  );\n}\n\nic-input-label .helpertext-readonly {\n  --ic-typography-color: var(--ic-input-label-readonly-helpertext-color);\n}\n\nic-input-label .readonly-label {\n  --ic-typography-color: var(--ic-input-label-readonly-label-color);\n}\n\nic-input-label .error-label {\n  --ic-typography-color: var(--ic-input-label-error-label-color);\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  @Element() el: HTMLIcInputLabelElement;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for?: string;\n\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The label will be visually hidden.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The status of the label - e.g. 'error'.\n   */\n  @Prop() status: \"error\" | \"\" = \"\";\n\n  /**\n   * @internal If `true`, wraps label text in label tag\n   */\n  @Prop() useLabelTag: boolean = true;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  private isHelperTextSlotUsed = (slot: Element | null): boolean => {\n    const assignedEls = (slot as HTMLSlotElement)?.assignedElements();\n    if (assignedEls && assignedEls.length) {\n      for (const el of assignedEls) {\n        if (el.tagName === \"SLOT\") {\n          // Recursion needed for when slot is forwarded multiple times - through child components\n          // (e.g. in date picker)\n          if (this.isHelperTextSlotUsed(el as HTMLSlotElement)) {\n            return true;\n          }\n        } else {\n          // Found an assigned element which is not a nested <slot>\n          return true;\n        }\n      }\n    }\n    return false;\n  };\n\n  render() {\n    const {\n      disabled,\n      readonly,\n      label,\n      required,\n      helperText,\n      status,\n      hideLabel,\n      useLabelTag,\n    } = this;\n    const labelText = required ? label + \" *\" : label;\n    const helperTextId = this.for && getInputHelperTextID(this.for);\n    const helperTextClass = {\n      helpertext: true,\n      \"helpertext-normal\": !disabled && !readonly,\n      \"helpertext-readonly\": readonly,\n    };\n\n    const helperTextSlot = this.el.querySelector(\"slot[name='helper-text']\");\n\n    return (\n      <Host\n        class={{\n          \"ic-input-label-disabled\": !!disabled,\n          \"ic-input-label-readonly\": readonly,\n          \"with-helper\":\n            this.isHelperTextSlotUsed(helperTextSlot) || helperText !== \"\",\n        }}\n      >\n        {!hideLabel && (\n          <ic-typography\n            variant=\"label\"\n            class={{\n              \"readonly-label\": readonly,\n              \"error-label\": status === \"error\" && !(readonly || disabled),\n            }}\n          >\n            {readonly || !useLabelTag ? (\n              `${labelText}`\n            ) : (\n              <label htmlFor={this.for}>{labelText}</label>\n            )}\n          </ic-typography>\n        )}\n        {this.isHelperTextSlotUsed(helperTextSlot) ? (\n          <span id={helperTextId} class={helperTextClass}>\n            <slot name=\"helper-text\"></slot>\n          </span>\n        ) : (\n          helperText !== \"\" && (\n            <ic-typography variant=\"caption\" class={helperTextClass}>\n              <span id={helperTextId}>{helperText}</span>\n            </ic-typography>\n          )\n        )}\n      </Host>\n    );\n  }\n}\n","ic-input-validation {\n  max-width: var(--input-width, 20rem);\n  display: flex;\n}\n\nic-input-validation.ic-input-validation-with-status {\n  margin-top: var(--ic-space-xs);\n}\n\nic-input-validation.ic-input-validation-full-width {\n  width: 100%;\n  max-width: none;\n}\n\nic-input-validation span.status-icon {\n  padding-right: var(--ic-space-xxs);\n}\n\nic-input-validation span.status-icon > svg {\n  height: 1.25rem;\n  width: 1.25rem;\n}\n\nic-input-validation span.icon-success > svg {\n  fill: var(--ic-input-validation-success-icon-color);\n}\n\nic-input-validation span.icon-error > svg {\n  fill: var(--ic-input-validation-error, var(--ic-atoms-status-icon-error));\n}\n\nic-input-validation span.icon-warning > svg {\n  fill: var(--ic-input-validation-warning-icon-color);\n}\n\nic-input-validation .statustext {\n  flex-grow: 1;\n  color: var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  );\n\n  --ic-typography-color: var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  );\n}\n\nic-input-validation .sr-only {\n  position: absolute;\n  left: -9999px;\n}\n","import { Element, Component, Host, Prop, h, Watch } from \"@stencil/core\";\n\nimport {\n  IcAriaLive,\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport { getInputValidationTextID } from \"../../utils/helpers\";\n\nconst ICON = {\n  [IcInformationStatus.Warning]: warningIcon,\n  [IcInformationStatus.Error]: errorIcon,\n  [IcInformationStatus.Success]: successIcon,\n};\nconst INVISIBLE_CHAR = \"\\u200B\";\n\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\n@Component({\n  tag: \"ic-input-validation\",\n  styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n  private messageEl!: HTMLSpanElement;\n\n  @Element() el: HTMLIcInputValidationElement;\n\n  /**\n   *  The ARIA live mode to apply to the message.\n   */\n  @Prop() ariaLiveMode?: IcAriaLive = \"polite\";\n\n  /**\n   * The ID of the form element the validation is bound to.\n   */\n  @Prop() for?: string;\n\n  /**\n   *  If `true`, the input validation will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The validation message to display.\n   */\n  @Prop() message?: string;\n  @Watch(\"message\")\n  watchMessageHandler(newValue: string) {\n    // Force detectable DOM changes\n    // Invisible character used as screen readers can ignore whitespace changes e.g. \"\" and \" \"\n    this.messageEl.textContent = INVISIBLE_CHAR;\n    setTimeout(() => {\n      this.messageEl.textContent = newValue;\n    }, 200); // Delay to help ensure screen readers detect change\n  }\n\n  /**\n   * The status of the validation - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() status?: IcInformationStatusOrEmpty = \"\";\n\n  componentDidLoad(): void {\n    this.messageEl.textContent = INVISIBLE_CHAR;\n  }\n\n  render() {\n    const { ariaLiveMode, fullWidth, status, message } = this;\n    const displayIcon = status !== \"\" ? ICON[status!] : \"\";\n    return (\n      <Host\n        class={{\n          [`ic-input-validation-${status}`]: status !== \"\",\n          \"ic-input-validation-full-width\": !!fullWidth,\n          \"ic-input-validation-with-status\": status !== \"\",\n        }}\n      >\n        {displayIcon !== \"\" && (\n          <span\n            class={{\n              \"status-icon\": true,\n              [`icon-${status}`]: true,\n            }}\n            innerHTML={displayIcon}\n          />\n        )}\n        <ic-typography variant=\"caption\" class=\"statustext\">\n          <span id={this.for && getInputValidationTextID(this.for)}>\n            {message}\n          </span>\n          {/* Separate aria-live region to avoid flashing due to textContent delay */}\n          <span\n            ref={(el) => (this.messageEl = el as HTMLSpanElement)}\n            class=\"sr-only\"\n            aria-live={ariaLiveMode}\n          ></span>\n        </ic-typography>\n        <slot name=\"validation-message-adornment\"></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-skeleton.cjs.entry.js

@@ -12,6 +12,11 @@ const DEFAULT_HEIGHTS = {
     circle: "25px",
     rectangle: "93px",
 };
+const DEFAULT_WIDTHS = {
+    text: "260px",
+    circle: "25px",
+    rectangle: "260px",
+};
 const Skeleton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -25,18 +30,28 @@ const Skeleton = class {
         this.variant = "rectangle";
     }
     render() {
-        const { variant, theme, el } = this;
+        const { variant = "rectangle", theme, el } = this;
+        let height = this.height;
+        let width = this.width;
+        if (variant === "circle") {
+            if (height && !width) {
+                width = height;
+            }
+            else if (width && !height) {
+                height = width;
+            }
+        }
         const style = !el.firstElementChild
             ? {
-                height: el.style.height || DEFAULT_HEIGHTS[variant],
-                width: el.style.width || (variant === "circle" ? "25px" : "260px"),
+                height: el.style.height || height || DEFAULT_HEIGHTS[variant],
+                width: el.style.width || width || DEFAULT_WIDTHS[variant],
             }
             : undefined;
-        return (index.h(index.Host, { key: '2f2a4aaef02912dae3994346722c17a7bb7862c4', class: {
+        return (index.h(index.Host, { key: '3cb324b15256dfa0f641621061b5c9a0a102da61', class: {
                 skeleton: true,
                 "ic-skeleton-circle": variant === "circle",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, style: style, "aria-disabled": "true" }, index.h("slot", { key: 'f483005261989c75b36bd880d09f855aa4152ca3' })));
+            }, style: style, "aria-disabled": "true" }, index.h("slot", { key: '93a1efa371acaf2aaff6674198e4083a4cf21862' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ic-skeleton.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-skeleton.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,i7FAAi7F,CAAC;AACx8F,yBAAe,aAAa;;ACG5B,MAAM,eAAe,GAAG;IACtB,IAAI,EAAE,KAAK;IACX,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,MAAM;CAClB,CAAC;MAOW,QAAQ;IALrB;;;;;QAWU,UAAK,GAAiB,SAAS,CAAC;;;;QAKhC,YAAO,GAAwB,WAAW,CAAC;KA0BpD;IAxBC,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QAEpC,MAAM,KAAK,GAAG,CAAC,EAAE,CAAC,iBAAiB;cAC/B;gBACE,MAAM,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,eAAe,CAAC,OAAQ,CAAC;gBACpD,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,OAAO,KAAK,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;aACnE;cACD,SAAS,CAAC;QAEd,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,oBAAoB,EAAE,OAAO,KAAK,QAAQ;gBAC1C,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;aAC3C,EACD,KAAK,EAAE,KAAK,mBACE,MAAM,IAEpBD,oEAAQ,CACH,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/ic-skeleton/ic-skeleton.css?tag=ic-skeleton&encapsulation=shadow","src/components/ic-skeleton/ic-skeleton.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n@keyframes loading {\n  0% {\n    background-color: var(--ic-skeleton-background);\n  }\n\n  50% {\n    background-color: var(--ic-skeleton-background-secondary);\n  }\n\n  100% {\n    background-color: var(--ic-skeleton-background);\n  }\n}\n\n:host(.skeleton) {\n  background-color: var(--ic-skeleton-background);\n  border-radius: var(--ic-border-radius);\n  animation: loading 1200ms infinite;\n  display: inline-block;\n}\n\n:host(.skeleton) > * {\n  opacity: 0;\n  visibility: hidden;\n}\n\n:host(.ic-skeleton-circle) {\n  border-radius: 50%;\n}\n\n@media (forced-colors: active) {\n  :host(.skeleton) {\n    -ms-high-contrast-adjust: none;\n    forced-color-adjust: none;\n    background: currentcolor;\n  }\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\nconst DEFAULT_HEIGHTS = {\n  text: \"1em\",\n  circle: \"25px\",\n  rectangle: \"93px\",\n};\n\n@Component({\n  tag: \"ic-skeleton\",\n  styleUrl: \"ic-skeleton.css\",\n  shadow: true,\n})\nexport class Skeleton {\n  @Element() el: HTMLIcSkeletonElement;\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?: IcThemeMode = \"inherit\";\n\n  /**\n   * The variant of the skeleton that will be displayed.\n   */\n  @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n\n  render() {\n    const { variant, theme, el } = this;\n\n    const style = !el.firstElementChild\n      ? {\n          height: el.style.height || DEFAULT_HEIGHTS[variant!],\n          width: el.style.width || (variant === \"circle\" ? \"25px\" : \"260px\"),\n        }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          skeleton: true,\n          \"ic-skeleton-circle\": variant === \"circle\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        style={style}\n        aria-disabled=\"true\"\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-skeleton.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,i7FAAi7F,CAAC;AACx8F,yBAAe,aAAa;;ACG5B,MAAM,eAAe,GAAG;IACtB,IAAI,EAAE,KAAK;IACX,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,MAAM;CAClB,CAAC;AAEF,MAAM,cAAc,GAAG;IACrB,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,OAAO;CACnB,CAAC;MAOW,QAAQ;IALrB;;;;;QAWU,UAAK,GAAiB,SAAS,CAAC;;;;QAKhC,YAAO,GAAwB,WAAW,CAAC;KA+CpD;IAnCC,MAAM;QACJ,MAAM,EAAE,OAAO,GAAG,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QAElD,IAAI,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QACzB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAEvB,IAAI,OAAO,KAAK,QAAQ,EAAE;YACxB,IAAI,MAAM,IAAI,CAAC,KAAK,EAAE;gBACpB,KAAK,GAAG,MAAM,CAAC;aAChB;iBAAM,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC3B,MAAM,GAAG,KAAK,CAAC;aAChB;SACF;QAED,MAAM,KAAK,GAAG,CAAC,EAAE,CAAC,iBAAiB;cAC/B;gBACE,MAAM,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,MAAM,IAAI,eAAe,CAAC,OAAQ,CAAC;gBAC9D,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,IAAI,cAAc,CAAC,OAAQ,CAAC;aAC3D;cACD,SAAS,CAAC;QAEd,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,oBAAoB,EAAE,OAAO,KAAK,QAAQ;gBAC1C,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;aAC3C,EACD,KAAK,EAAE,KAAK,mBACE,MAAM,IAEpBD,oEAAQ,CACH,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/ic-skeleton/ic-skeleton.css?tag=ic-skeleton&encapsulation=shadow","src/components/ic-skeleton/ic-skeleton.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n@keyframes loading {\n  0% {\n    background-color: var(--ic-skeleton-background);\n  }\n\n  50% {\n    background-color: var(--ic-skeleton-background-secondary);\n  }\n\n  100% {\n    background-color: var(--ic-skeleton-background);\n  }\n}\n\n:host(.skeleton) {\n  background-color: var(--ic-skeleton-background);\n  border-radius: var(--ic-border-radius);\n  animation: loading 1200ms infinite;\n  display: inline-block;\n}\n\n:host(.skeleton) > * {\n  opacity: 0;\n  visibility: hidden;\n}\n\n:host(.ic-skeleton-circle) {\n  border-radius: 50%;\n}\n\n@media (forced-colors: active) {\n  :host(.skeleton) {\n    -ms-high-contrast-adjust: none;\n    forced-color-adjust: none;\n    background: currentcolor;\n  }\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\nconst DEFAULT_HEIGHTS = {\n  text: \"1em\",\n  circle: \"25px\",\n  rectangle: \"93px\",\n};\n\nconst DEFAULT_WIDTHS = {\n  text: \"260px\",\n  circle: \"25px\",\n  rectangle: \"260px\",\n};\n\n@Component({\n  tag: \"ic-skeleton\",\n  styleUrl: \"ic-skeleton.css\",\n  shadow: true,\n})\nexport class Skeleton {\n  @Element() el: HTMLIcSkeletonElement;\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?: IcThemeMode = \"inherit\";\n\n  /**\n   * The variant of the skeleton that will be displayed.\n   */\n  @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n\n  /**\n   * Height of the skeleton. Accepts any valid CSS length (e.g. \"24px\", \"2rem\", \"100%\").\n   */\n  @Prop() height?: string;\n\n  /**\n   * Width of the skeleton. Accepts any valid CSS length (e.g. \"24px\", \"2rem\", \"100%\").\n   */\n  @Prop() width?: string;\n\n  render() {\n    const { variant = \"rectangle\", theme, el } = this;\n\n    let height = this.height;\n    let width = this.width;\n\n    if (variant === \"circle\") {\n      if (height && !width) {\n        width = height;\n      } else if (width && !height) {\n        height = width;\n      }\n    }\n\n    const style = !el.firstElementChild\n      ? {\n          height: el.style.height || height || DEFAULT_HEIGHTS[variant!],\n          width: el.style.width || width || DEFAULT_WIDTHS[variant!],\n        }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          skeleton: true,\n          \"ic-skeleton-circle\": variant === \"circle\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        style={style}\n        aria-disabled=\"true\"\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-step.cjs.entry.js

@@ -11,7 +11,7 @@ const warningIcon = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
 <path d="M7.99935 4.32666L13.0193 13H2.97935L7.99935 4.32666ZM7.99935 1.66666L0.666016 14.3333H15.3327L7.99935 1.66666ZM8.66602 11H7.33268V12.3333H8.66602V11ZM8.66602 6.99999H7.33268V9.66666H8.66602V6.99999Z" fill="currentColor"/>
 </svg>`;
 
-const icStepCss = ":host{display:flex;flex:auto;--ic-typography-color:currentcolor}.step{display:flex;flex:1 1 0}.step-icon{display:flex;justify-content:center}.heading,.subheading,.step-status,.next-step{white-space:pre-line}.next-step{color:var(--ic-stepper-compact-step-next-text)}.visually-hidden{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.visually-hidden:dir(rtl){right:-9999px}:host(.ic-step-compact){-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm);--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) .step{-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm)}:host(.ic-step-compact) .step:not(.current){display:none;opacity:0;visibility:hidden}.compact-step-progress-indicator{margin:var(--ic-space-xs) 0 0}:host ic-loading-indicator::part(ic-loading-container){border-radius:50%}:host() ic-loading-indicator::part(ic-loading-container){background-color:var(--ic-step-indicator-background)}:host(.ic-step-compact) .heading-area{display:flex;flex-direction:column;width:14.25rem}: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-disabled)}.info-line{display:flex;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs)}.step-status{display:flex;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-stepper-compact-step-completed-text)}.compact-step-disabled :is(.heading,.step-status){color:var(--ic-stepper-compact-step-requirement-text-disabled)}.step-num{color:var(--ic-stepper-compact-step-stage-text);white-space:nowrap}:host(.ic-step-compact) .step-icon{margin:var(--ic-space-xxxs)}:host(.ic-step-compact) .step-icon svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-step-default) .step{flex-direction:column}:host(.ic-step-default.last-step){flex-grow:initial}.step-top{display:flex;width:100%;align-items:center;align-self:flex-start;height:2.5rem}:host(.ic-step-default) .step-icon{border-radius:50%;background-color:var(--ic-step-number-inactive)}.step-icon-inner{width:var(--ic-space-xl);height:var(--ic-space-xl);display:flex;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-default)}:host(.ic-step-default) .heading-area{margin:var(--ic-space-xs) 0;padding-right:var(--ic-space-xs);width:100%}:host(.ic-step-default) .heading,.subheading{width:-moz-fit-content;width:fit-content}.heading{color:var(--ic-step-title)}.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-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-default)}.active .step-icon-inner{box-shadow:inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem}.current .step-icon-inner{background-color:var(--ic-step-number-background-active);color:var(--ic-step-number-text-current)}.disabled{color:var(--ic-color-text-disabled-mid)}.disabled .step-icon-inner{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)}.disabled .step-icon{background-color:transparent !important}.completed .step-icon-inner{background:var(--ic-step-number-background-success);box-shadow:inset var(--ic-step-number-background-success) 0 0 0\n    var(--ic-space-xxxs);border-radius:100%}:host(.ic-step-default) .current .step-icon{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);}.step-connect{height:var(--ic-space-xxxs);background-color:var(--ic-stepper-connector-remaining-status);margin:0 var(--ic-space-xs);border-radius:var(--ic-space-xxs);width:100%}.aligned-full-width.step-connect{min-width:6.25rem;width:100%}.disabled .step-connect{height:0;background-color:rgb(0 0 0 / 0%);border-top:0.125rem dashed var(--ic-stepper-connector-disabled);border-radius:0}.completed .step-connect{background-color:var(--ic-stepper-connector-success)}.step-connect-inner{width:70%;display:flex;flex:auto;height:var(--ic-space-xxxs);border-radius:var(--ic-space-xxs);background-color:var(--ic-stepper-connector-current-status)}.step-icon-inner .check-icon{padding-top:var(--ic-space-xxs)}.step-icon-inner .check-icon svg{width:var(--ic-space-md);height:auto}.step-icon-inner .check-icon>svg>path{fill:var(--ic-step-number-icon-success)}@media (forced-colors: active){.compact-step-disabled :is(.heading,.step-status){color:GrayText}.step-connect:not(.disabled .step-connect){border:var(--ic-border-hc)}.active .step-icon-inner,.completed .step-icon-inner,.current .step-icon-inner{forced-color-adjust:none;box-shadow:inset canvastext 0 0 0 0.125rem;background-color:transparent;color:canvastext}:host(.ic-step-default) .current .step-icon{padding:0;border:none}.disabled,.disabled .heading-area,.disabled .step-icon-inner,.disabled .heading{color:GrayText}.step-connect-inner,.completed .step-connect{background-color:canvastext}.step-icon-inner .check-icon>svg>path{fill:canvastext}}";
+const icStepCss = ":host{display:flex;flex:auto;--ic-typography-color:currentcolor}.step{display:flex;flex:1 1 0}.step-icon{display:flex;justify-content:center}.heading,::slotted([slot=\"heading\"]),.subheading,.step-status,.next-step{white-space:pre-line}.next-step{color:var(--ic-stepper-compact-step-next-text)}.visually-hidden{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.visually-hidden:dir(rtl){right:-9999px}:host(.ic-step-compact){-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm);--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) .step{-moz-column-gap:var(--ic-space-sm);column-gap:var(--ic-space-sm)}:host(.ic-step-compact) .step:not(.current){display:none;opacity:0;visibility:hidden}.compact-step-progress-indicator{margin:var(--ic-space-xs) 0 0}:host ic-loading-indicator::part(ic-loading-container){border-radius:50%}:host() ic-loading-indicator::part(ic-loading-container){background-color:var(--ic-step-indicator-background)}:host(.ic-step-compact) .heading-area{display:flex;flex-direction:column;width:14.25rem}:host(.ic-step-compact) .heading,:host(.ic-step-compact) ::slotted([slot=\"heading\"]){color:var(--ic-stepper-compact-step-title)}:host(.ic-step-compact) .disabled .heading,:host(.ic-step-compact) .disabled ::slotted([slot=\"heading\"]){color:var(--ic-stepper-compact-step-title-disabled)}.info-line{display:flex;-moz-column-gap:var(--ic-space-xs);column-gap:var(--ic-space-xs)}.step-status{display:flex;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-stepper-compact-step-completed-text)}.compact-step-disabled :is(.heading,.step-status){color:var(--ic-stepper-compact-step-requirement-text-disabled)}.step-num{color:var(--ic-stepper-compact-step-stage-text);white-space:nowrap}:host(.ic-step-compact) .step-icon{margin:var(--ic-space-xxxs)}:host(.ic-step-compact) .step-icon svg{width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-step-default) .step{flex-direction:column}:host(.ic-step-default.last-step){flex-grow:initial}.step-top{display:flex;width:100%;align-items:center;align-self:flex-start;height:2.5rem}:host(.ic-step-default) .step-icon{border-radius:50%;background-color:var(--ic-step-number-inactive)}.step-icon-inner{width:var(--ic-space-xl);height:var(--ic-space-xl);display:flex;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-default)}:host(.ic-step-default) .heading-area{margin:var(--ic-space-xs) 0;padding-right:var(--ic-space-xs);width:100%}:host(.ic-step-default) .heading,:host(.ic-step-default) ::slotted([slot=\"heading\"]),.subheading{width:-moz-fit-content;width:fit-content}.heading,::slotted([slot=\"heading\"]){color:var(--ic-step-title)}.current .heading,.current ::slotted([slot=\"heading\"]){color:var(--ic-step-title-current)}.completed .heading,.completed ::slotted([slot=\"heading\"]){color:var(--ic-step-title-success)}.disabled .heading,.disabled ::slotted([slot=\"heading\"]){color:var(--ic-step-title-disabled)}.subheading{color:var(--ic-step-title-status-text-inactive)}.current .subheading{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-default)}.active .step-icon-inner{box-shadow:inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem}.current .step-icon-inner{background-color:var(--ic-step-number-background-active);color:var(--ic-step-number-text-current)}.disabled{color:var(--ic-color-text-disabled-mid)}.disabled .step-icon-inner{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)}.disabled .step-icon{background-color:transparent !important}.completed .step-icon-inner{background:var(--ic-step-number-background-success);box-shadow:inset var(--ic-step-number-background-success) 0 0 0\n    var(--ic-space-xxxs);border-radius:100%}:host(.ic-step-default) .current .step-icon{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);}.step-connect{height:var(--ic-space-xxxs);background-color:var(--ic-stepper-connector-remaining-status);margin:0 var(--ic-space-xs);border-radius:var(--ic-space-xxs);width:100%}.aligned-full-width.step-connect{min-width:6.25rem;width:100%}.disabled .step-connect{height:0;background-color:rgb(0 0 0 / 0%);border-top:0.125rem dashed var(--ic-stepper-connector-disabled);border-radius:0}.completed .step-connect{background-color:var(--ic-stepper-connector-success)}.step-connect-inner{width:70%;display:flex;flex:auto;height:var(--ic-space-xxxs);border-radius:var(--ic-space-xxs);background-color:var(--ic-stepper-connector-current-status)}.step-icon-inner .check-icon{padding-top:var(--ic-space-xxs)}.step-icon-inner .check-icon svg{width:var(--ic-space-md);height:auto}.step-icon-inner .check-icon>svg>path{fill:var(--ic-step-number-icon-success)}@media (forced-colors: active){.compact-step-disabled :is(.heading,.step-status){color:GrayText}.step-connect:not(.disabled .step-connect){border:var(--ic-border-hc)}.active .step-icon-inner,.completed .step-icon-inner,.current .step-icon-inner{forced-color-adjust:none;box-shadow:inset canvastext 0 0 0 0.125rem;background-color:transparent;color:canvastext}:host(.ic-step-default) .current .step-icon{padding:0;border:none}.disabled,.disabled .heading-area,.disabled .step-icon-inner,.disabled .heading,.disabled ::slotted([slot=\"heading\"]){color:GrayText}.step-connect-inner,.completed .step-connect{background-color:canvastext}.step-icon-inner .check-icon>svg>path{fill:canvastext}}";
 const IcStepStyle0 = icStepCss;
 
 const Step = class {
@@ -57,6 +57,8 @@ const Step = class {
         const { compactStepStyling, current, heading, icI18n, lastStep, lastStepNum, nextStepHeading, progress, status, stepNum, subheading, theme, type, variant, } = this;
         // ARIA LABEL
         let ariaLabel = "";
+        const hasHeading = (helpers.isPropDefined(heading) && heading !== "") ||
+            helpers.isSlotUsed(this.el, "heading");
         if (type === "completed") {
             ariaLabel = `. ${icI18n.completed}`;
         }
@@ -85,27 +87,27 @@ const Step = class {
         // STATUS ICON FOR COMPACT STEP
         let statusIcon;
         if (type === "completed" || compactStepStyling === "completed") {
-            statusIcon = (index.h("span", { key: '864d4561a571389ff3128b00ffb529010930b4b5', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon.Check }));
+            statusIcon = (index.h("span", { key: 'ba84e43d6b6febb1b465c7d0a5a5bd76e6645c01', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon.Check }));
         }
         else if (type === "disabled" || compactStepStyling === "disabled") {
-            statusIcon = (index.h("span", { key: '7bf14abf049e8e5d3fc870c574393adb49e68b8c', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
+            statusIcon = (index.h("span", { key: '43b597121b17fa8aef98f41792b9e75e5da95d73', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
         }
         // COMPACT STEP COMPONENT
-        const compactStep = (index.h("div", { key: '4f3ac82fbcc83d16b72393415b08bb383b3844e1', class: {
+        const compactStep = (index.h("div", { key: 'cac4daaa6da8904d2e69ec16346262d18281819d', class: {
                 ["step"]: true,
                 ["current"]: !!current,
                 [`compact-step-${compactStepStyling}`]: !!compactStepStyling,
                 ["disabled"]: type === "disabled" || compactStepStyling === "disabled",
-            } }, index.h("ic-loading-indicator", { key: '53ebcdba2a35459adeb1ac198e7a48620eb5ed8f', class: {
+            } }, index.h("ic-loading-indicator", { key: 'aef65f9660c2bd2fe46dc205afbf582c16d6b6a0', class: {
                 "compact-step-progress-indicator": true,
                 "not-required": type === "disabled" || compactStepStyling === "disabled",
-            }, "aria-hidden": "true", size: "small", "inner-label": stepNum, progress: progress }), index.h("div", { key: '1206ec1c72eafac85fa94f936db215fd6d66a9da', class: "heading-area" }, index.h("ic-typography", { key: 'ecd033d92e805fc2538f92253f43a667594d30da', variant: "h4", class: "heading" }, heading), index.h("div", { key: '98f5a4369ed8e41271c9e5121d6ef4e68191e766', class: "info-line" }, index.h("ic-typography", { key: '5b58bcbe7124d039d41e6cddd1c737a82e689f46', variant: "caption", class: "step-num" }, `${stepNum} ${icI18n.of} ${lastStepNum}`, index.h("span", { key: '86b332b0596baaa8f14e6232ca4742fca349b401', class: "visually-hidden" }, ` ${icI18n.steps}`)), (this.subheading ||
+            }, "aria-hidden": "true", size: "small", "inner-label": stepNum, progress: progress }), index.h("div", { key: 'ddb67de08977f0f460d72493d9049d332296aeaa', class: "heading-area" }, helpers.isSlotUsed(this.el, "heading") ? (index.h("slot", { name: "heading" })) : (index.h("ic-typography", { variant: "h4", class: "heading" }, heading)), index.h("div", { key: 'f6b657968d62be2010ee736bbccbcf3484f56196', class: "info-line" }, index.h("ic-typography", { key: 'c632f49ad68d701a398e3cfb7a60bf08ceb00b98', variant: "caption", class: "step-num" }, `${stepNum} ${icI18n.of} ${lastStepNum}`, index.h("span", { key: '6fa841aa5da07894c41076b60ffc7846ceee6595', class: "visually-hidden" }, ` ${icI18n.steps}`)), (this.subheading ||
             type === "completed" ||
             type === "disabled" ||
             (this.variant === "compact" &&
                 !!compactStepStyling &&
                 compactStepStyling !== "active") ||
-            !!status) && (index.h("div", { key: 'e7348cf5cb486de2bd35047429b8baedb64e7945', class: "step-status" }, statusIcon !== undefined && statusIcon, (subheading || stepType) && (index.h("ic-typography", { key: '1e636d26071c9274b29b3e9fbd5edcff666bf650', variant: "caption" }, subheading !== null && helpers.isPropDefined(subheading)
+            !!status) && (index.h("div", { key: '7a309e8ff089ca29c132aec776ee076bc107b46a', class: "step-status" }, statusIcon !== undefined && statusIcon, (subheading || stepType) && (index.h("ic-typography", { key: '9aeddf74fce64cfb90861b7e0ca88ac7c206c0ad', variant: "caption" }, subheading !== null && helpers.isPropDefined(subheading)
             ? subheading
             : type === "disabled" ||
                 (variant === "compact" &&
@@ -118,26 +120,26 @@ const Step = class {
         // ICON FOR DEFAULT STEP
         let icon;
         if (type !== "completed") {
-            icon = (index.h("ic-typography", { key: '11944edb6340175b2619cd7bf1a92a077c2581e7', variant: "subtitle-small" }, index.h("span", { key: '5636bdbab2cbae08c7122adae7376b380d2c0e6b', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+            icon = (index.h("ic-typography", { key: 'b2bd2aec5f28419635b1d0c2983c1d131fa0cf93', variant: "subtitle-small" }, index.h("span", { key: '26ad3501e4f159aac36162064f712c404b896017', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
         }
         else {
-            icon = (index.h("div", { key: 'b479680a69976f4a1fecff4944fe49d6ad7a1803', class: "step-icon-inner", "aria-hidden": "true" }, index.h("span", { key: 'f147fc626a8a1ee01f7a00e642353f0393f2a9bf', class: "check-icon", innerHTML: checkIcon.Check })));
+            icon = (index.h("div", { key: '6b34304442c6b4eb8b106a0ff2ad5c231bf205bf', class: "step-icon-inner", "aria-hidden": "true" }, index.h("span", { key: 'd62fc155679ce30e9fbf87e2a26d47a7f4b546ed', class: "check-icon", innerHTML: checkIcon.Check })));
         }
         // STEP CONNECT FOR DEFAULT STEP
-        const partialBar = type === "current" && (index.h("div", { key: '38562e1d3953a8e3fad8a666be017c6eb8b023d8', class: "step-connect-inner" }));
-        const finalStep = !lastStep && (index.h("div", { key: '92355de2de8a20e3efd244e90181ed4728908396', class: {
+        const partialBar = type === "current" && (index.h("div", { key: '9aca98b76e886d9d11cedba769002d757c85f6f0', class: "step-connect-inner" }));
+        const finalStep = !lastStep && (index.h("div", { key: '494c8fb9fe72ce7ba37a52b56edcd00460248cca', class: {
                 ["step-connect"]: true,
                 ["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 = (index.h("div", { key: '26938dd799f54d8440d45c9d9615a4831f7cab98', class: {
+        const defaultStep = (index.h("div", { key: '00c780fca9cab9cf01f5662d10fed10474d84045', class: {
                 ["step"]: true,
                 [`${type}`]: true,
-            } }, index.h("div", { key: '34aca5fbe4025940b5226476d1da17725831a7db', class: "step-top" }, index.h("div", { key: 'e59c7c95a9b32b9e897a6dc6d37000cd45294caf', class: "step-icon" }, icon), finalStep), (heading || subheading || status) && (index.h("div", { key: '568405e10345dfe382fd78d096391cc870914f6a', class: "heading-area" }, heading && (index.h("ic-typography", { key: '6dcac8ec5550fe94c80e75c65ecec33dee7b4157', variant: "subtitle-large", class: "heading" }, heading)), heading && (subheading || status) && (index.h("ic-typography", { key: 'efe9c1f647e25a84eded6c390ff1b487e0ea5a0d', variant: "caption", class: "subheading" }, subheading !== null && helpers.isPropDefined(subheading)
+            } }, index.h("div", { key: 'd727e05be7c6179c65fafc7eb6508b871ff5e30c', class: "step-top" }, index.h("div", { key: 'e03d6f2665ef97f1d6f2d38e86cf1461d515cd7a', class: "step-icon" }, icon), finalStep), (hasHeading || subheading || status) && (index.h("div", { key: '04d1c9ac6ee4df8e5d4394a1d1f6fe073d8ee307', class: "heading-area" }, helpers.isSlotUsed(this.el, "heading") ? (index.h("slot", { name: "heading" })) : (index.h("ic-typography", { variant: "subtitle-large", class: "heading" }, heading)), hasHeading && (subheading || status) && (index.h("ic-typography", { key: '16fc9c541e21d0be0d8f0f7566ed8ac8e5c333cd', variant: "caption", class: "subheading" }, subheading !== null && helpers.isPropDefined(subheading)
             ? subheading
             : stepStatus))))));
-        return (index.h(index.Host, { key: '359b602ab02607c5ec02673283f99172c3b4a924', role: "listitem", "aria-label": `${icI18n.step} ${stepNum}${ariaLabel}`, "aria-current": (current || type === "current") && "step", class: {
+        return (index.h(index.Host, { key: 'b0ae592b4c3148fe977efc52cd17f88c2a01da2c', role: "listitem", "aria-label": `${icI18n.step} ${stepNum}${ariaLabel}`, "aria-current": (current || 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-${variant}`]: true,

package/dist/cjs/ic-step.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-step.entry.cjs.js","mappings":"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","names":["isPropDefined","h","checkIcon","Host"],"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"sourcesContent":["/* SHARED STYLING */\n:host {\n  display: flex;\n  flex: auto;\n\n  --ic-typography-color: currentcolor;\n}\n\n.step {\n  display: flex;\n  flex: 1 1 0;\n}\n\n.step-icon {\n  display: flex;\n  justify-content: center;\n}\n\n.heading,\n.subheading,\n.step-status,\n.next-step {\n  white-space: pre-line;\n}\n\n.next-step {\n  color: var(--ic-stepper-compact-step-next-text);\n}\n\n.visually-hidden {\n  position: absolute;\n  left: -9999px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n.visually-hidden:dir(rtl) {\n  right: -9999px;\n}\n\n/* COMPACT STEP STYLING */\n:host(.ic-step-compact) {\n  column-gap: var(--ic-space-sm);\n\n  --compact-step-inner-color: var(--ic-step-indicator-status-current);\n  --compact-step-outer-color: var(--ic-step-indicator-status-remaining);\n  --compact-step-circular-line-width: var(--ic-space-xxs);\n}\n\n:host(.ic-step-compact) .step {\n  column-gap: var(--ic-space-sm);\n}\n\n:host(.ic-step-compact) .step:not(.current) {\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.compact-step-progress-indicator {\n  margin: var(--ic-space-xs) 0 0;\n}\n\n:host ic-loading-indicator::part(ic-loading-container) {\n  border-radius: 50%;\n}\n\n:host() ic-loading-indicator::part(ic-loading-container) {\n  background-color: var(--ic-step-indicator-background);\n}\n\n:host(.ic-step-compact) .heading-area {\n  display: flex;\n  flex-direction: column;\n  width: 14.25rem;\n}\n\n:host(.ic-step-compact) .heading {\n  color: var(--ic-stepper-compact-step-title);\n}\n\n:host(.ic-step-compact) .disabled .heading {\n  color: var(--ic-stepper-compact-step-title-disabled);\n}\n\n.info-line {\n  display: flex;\n  column-gap: var(--ic-space-xs);\n}\n\n.step-status {\n  display: flex;\n  color: var(--ic-stepper-compact-step-requirement-text);\n  column-gap: var(--ic-space-xxxs);\n}\n\n.compact-step-completed .step-status {\n  color: var(--ic-stepper-compact-step-completed-text);\n}\n\n.compact-step-disabled :is(.heading, .step-status) {\n  color: var(--ic-stepper-compact-step-requirement-text-disabled);\n}\n\n.step-num {\n  color: var(--ic-stepper-compact-step-stage-text);\n  white-space: nowrap;\n}\n\n:host(.ic-step-compact) .step-icon {\n  margin: var(--ic-space-xxxs);\n}\n\n:host(.ic-step-compact) .step-icon svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n/* DEFAULT STEP STYLING */\n:host(.ic-step-default) .step {\n  flex-direction: column;\n}\n\n:host(.ic-step-default.last-step) {\n  flex-grow: initial;\n}\n\n.step-top {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  align-self: flex-start;\n  height: 2.5rem;\n}\n\n:host(.ic-step-default) .step-icon {\n  border-radius: 50%;\n  background-color: var(--ic-step-number-inactive);\n}\n\n.step-icon-inner {\n  width: var(--ic-space-xl);\n  height: var(--ic-space-xl);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  color: var(--ic-step-number-text-inactive);\n}\n\n:host(.ic-step-default) .current {\n  color: var(--ic-status-info-default);\n}\n\n:host(.ic-step-default) .heading-area {\n  margin: var(--ic-space-xs) 0;\n  padding-right: var(--ic-space-xs);\n  width: 100%;\n}\n\n:host(.ic-step-default) .heading,\n.subheading {\n  width: fit-content;\n}\n\n.heading {\n  color: var(--ic-step-title);\n}\n\n.current .heading {\n  color: var(--ic-step-title-current);\n}\n\n.completed .heading {\n  color: var(--ic-step-title-success);\n}\n\n.disabled .heading {\n  color: var(--ic-step-title-disabled);\n}\n\n.subheading {\n  color: var(--ic-step-title-status-text-inactive);\n}\n\n.current .subheading {\n  color: var(--ic-step-title-status-text-current);\n}\n\n.disabled .subheading {\n  color: var(--ic-step-title-status-text-disabled);\n}\n\n:host(.ic-step-default) .completed {\n  color: var(--ic-status-success-default);\n}\n\n.active .step-icon-inner {\n  box-shadow: inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem;\n}\n\n.current .step-icon-inner {\n  background-color: var(--ic-step-number-background-active);\n  color: var(--ic-step-number-text-current);\n}\n\n.disabled {\n  color: var(--ic-color-text-disabled-mid);\n}\n\n.disabled .step-icon-inner {\n  border: var(--ic-border-width) dashed var(--ic-step-number-disabled);\n  width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n  height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n  color: var(--ic-step-number-text-disabled);\n}\n\n.disabled .step-icon {\n  background-color: transparent !important;\n}\n\n.completed .step-icon-inner {\n  background: var(--ic-step-number-background-success);\n  box-shadow: inset var(--ic-step-number-background-success) 0 0 0\n    var(--ic-space-xxxs);\n  border-radius: 100%;\n}\n\n:host(.ic-step-default) .current .step-icon {\n  border: var(--ic-space-xxxs) solid var(--ic-step-number-current-outline);\n  padding: var(--ic-space-xxxs);\n  margin: 0 calc(-1 * var(--ic-space-xxxs));\n  background-color: var(--ic-step-number-current-outer-fill);\n\n  /* compensating for the circle being bigger than other steps */\n}\n\n.step-connect {\n  height: var(--ic-space-xxxs);\n  background-color: var(--ic-stepper-connector-remaining-status);\n  margin: 0 var(--ic-space-xs);\n  border-radius: var(--ic-space-xxs);\n  width: 100%;\n}\n\n.aligned-full-width.step-connect {\n  min-width: 6.25rem;\n  width: 100%;\n}\n\n.disabled .step-connect {\n  height: 0;\n  background-color: rgb(0 0 0 / 0%);\n  border-top: 0.125rem dashed var(--ic-stepper-connector-disabled);\n  border-radius: 0;\n}\n\n.completed .step-connect {\n  background-color: var(--ic-stepper-connector-success);\n}\n\n.step-connect-inner {\n  width: 70%;\n  display: flex;\n  flex: auto;\n  height: var(--ic-space-xxxs);\n  border-radius: var(--ic-space-xxs);\n  background-color: var(--ic-stepper-connector-current-status);\n}\n\n.step-icon-inner .check-icon {\n  padding-top: var(--ic-space-xxs);\n}\n\n.step-icon-inner .check-icon svg {\n  width: var(--ic-space-md);\n  height: auto;\n}\n\n.step-icon-inner .check-icon > svg > path {\n  fill: var(--ic-step-number-icon-success);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  /* COMPACT STEP */\n  .compact-step-disabled :is(.heading, .step-status) {\n    color: GrayText;\n  }\n\n  /* DEFAULT STEP */\n  .step-connect:not(.disabled .step-connect) {\n    border: var(--ic-border-hc);\n  }\n\n  .active .step-icon-inner,\n  .completed .step-icon-inner,\n  .current .step-icon-inner {\n    forced-color-adjust: none;\n    box-shadow: inset canvastext 0 0 0 0.125rem;\n    background-color: transparent;\n    color: canvastext;\n  }\n\n  :host(.ic-step-default) .current .step-icon {\n    padding: 0;\n    border: none;\n  }\n\n  .disabled,\n  .disabled .heading-area,\n  .disabled .step-icon-inner,\n  .disabled .heading {\n    color: GrayText;\n  }\n\n  .step-connect-inner,\n  .completed .step-connect {\n    background-color: canvastext;\n  }\n\n  .step-icon-inner .check-icon > svg > path {\n    fill: canvastext;\n  }\n}\n","import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport {\n  IcStepVariants,\n  IcStepStatuses,\n  IcStepTypes,\n  IcStepI18n,\n} from \"./ic-step.types\";\nimport { isPropDefined } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-step\",\n  styleUrl: \"ic-step.css\",\n  shadow: true,\n})\nexport class Step {\n  @Element() el: HTMLIcStepElement;\n\n  /**\n   * @internal If a compact stepper is being used, this sets the styling of the step.\n   */\n  @Prop() compactStepStyling?: IcStepTypes;\n\n  /**\n   * @internal If `true`, and a compact stepper  is being used, the current step will be the only step in view.\n   */\n  @Prop({ mutable: true }) current?: boolean = false;\n\n  /**\n   * Words within the component that can be replaced to translate the component into a different language\n   */\n  @Prop() icI18n: IcStepI18n = {\n    next: \"Next\",\n    step: \"Step\",\n    steps: \"Steps\",\n    of: \"of\",\n    lastStep: \"Last step\",\n    completed: \"Completed\",\n    notRequired: \"Not required\",\n    required: \"Required\",\n    optional: \"Optional\",\n  };\n\n  /**\n   * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n   */\n  @Prop() lastStep!: boolean;\n\n  /**\n   * @internal The step number of the final step. This is managed by ic-stepper.\n   */\n  @Prop() lastStepNum?: number;\n\n  /**\n   * @internal The name of the next step. This is managed by ic-stepper.\n   */\n  @Prop() nextStepHeading?: string;\n\n  /**\n   * @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n   */\n  @Prop() progress?: number;\n\n  /**\n   * @internal The step number, managed by ic-stepper.\n   */\n  @Prop() stepNum?: number;\n\n  /**\n   * The status of the step. Use this prop to display a status message on the step if it is required or optional.\n   */\n  @Prop() status?: IcStepStatuses;\n\n  /**\n   * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * The title of the step within the stepper.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * @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.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * @internal The variant of the step. This is managed by ic-stepper.\n   */\n  @Prop() variant!: IcStepVariants;\n\n  /**\n   * The state of the step within the stepper.\n   */\n  @Prop() type?: IcStepTypes = \"active\";\n\n  @Watch(\"type\")\n  typeChangeHandler(): void {\n    if (this.variant === \"compact\" && this.type === \"current\") {\n      this.current = true;\n    } else {\n      this.current = false;\n    }\n  }\n\n  render() {\n    const {\n      compactStepStyling,\n      current,\n      heading,\n      icI18n,\n      lastStep,\n      lastStepNum,\n      nextStepHeading,\n      progress,\n      status,\n      stepNum,\n      subheading,\n      theme,\n      type,\n      variant,\n    } = this;\n\n    // ARIA LABEL\n    let ariaLabel = \"\";\n\n    if (type === \"completed\") {\n      ariaLabel = `. ${icI18n.completed}`;\n    } else if (type === \"disabled\") {\n      ariaLabel = `. ${icI18n.notRequired}`;\n    } else if (status === \"required\") {\n      ariaLabel = `. ${icI18n.required}`;\n    } else if (status === \"optional\") {\n      ariaLabel = `. ${icI18n.optional}`;\n    }\n\n    // STEP STATUS\n    let stepStatus;\n    if (status && isPropDefined(status)) {\n      stepStatus = status[0].toUpperCase() + status.slice(1);\n    }\n\n    // STEP TYPE\n    let stepType;\n    if (type === \"disabled\" || compactStepStyling === \"disabled\") {\n      stepType = icI18n.notRequired;\n    } else if (compactStepStyling === \"completed\") {\n      stepType = icI18n.completed;\n    }\n\n    // STATUS ICON FOR COMPACT STEP\n    let statusIcon;\n    if (type === \"completed\" || compactStepStyling === \"completed\") {\n      statusIcon = (\n        <span\n          class=\"check-icon step-icon\"\n          aria-hidden=\"true\"\n          innerHTML={checkIcon}\n        ></span>\n      );\n    } else if (type === \"disabled\" || compactStepStyling === \"disabled\") {\n      statusIcon = (\n        <span\n          class=\"warning-icon step-icon\"\n          aria-hidden=\"true\"\n          innerHTML={warningIcon}\n        ></span>\n      );\n    }\n\n    // COMPACT STEP COMPONENT\n    const compactStep = (\n      <div\n        class={{\n          [\"step\"]: true,\n          [\"current\"]: !!current,\n          [`compact-step-${compactStepStyling}`]: !!compactStepStyling,\n          [\"disabled\"]:\n            type === \"disabled\" || compactStepStyling === \"disabled\",\n        }}\n      >\n        <ic-loading-indicator\n          class={{\n            \"compact-step-progress-indicator\": true,\n            \"not-required\":\n              type === \"disabled\" || compactStepStyling === \"disabled\",\n          }}\n          aria-hidden=\"true\"\n          size=\"small\"\n          inner-label={stepNum}\n          progress={progress}\n        ></ic-loading-indicator>\n        <div class=\"heading-area\">\n          <ic-typography variant=\"h4\" class=\"heading\">\n            {heading}\n          </ic-typography>\n          <div class=\"info-line\">\n            <ic-typography variant=\"caption\" class=\"step-num\">\n              {`${stepNum} ${icI18n.of} ${lastStepNum}`}\n              <span class=\"visually-hidden\">{` ${icI18n.steps}`}</span>\n            </ic-typography>\n            {(this.subheading ||\n              type === \"completed\" ||\n              type === \"disabled\" ||\n              (this.variant === \"compact\" &&\n                !!compactStepStyling &&\n                compactStepStyling !== \"active\") ||\n              !!status) && (\n              <div class=\"step-status\">\n                {statusIcon !== undefined && statusIcon}\n                {(subheading || stepType) && (\n                  <ic-typography variant=\"caption\">\n                    {subheading !== null && isPropDefined(subheading)\n                      ? subheading\n                      : type === \"disabled\" ||\n                        (variant === \"compact\" &&\n                          compactStepStyling === \"disabled\") ||\n                        type === \"completed\" ||\n                        (variant === \"compact\" &&\n                          compactStepStyling === \"completed\")\n                      ? stepType\n                      : status && stepStatus}\n                  </ic-typography>\n                )}\n              </div>\n            )}\n          </div>\n          {lastStep ? (\n            <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n              {icI18n.lastStep}\n            </ic-typography>\n          ) : (\n            isPropDefined(nextStepHeading) && (\n              <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n                {icI18n.next}\n                <span class=\"visually-hidden\"> {icI18n.step}</span>:{\" \"}\n                {this.nextStepHeading}\n              </ic-typography>\n            )\n          )}\n        </div>\n      </div>\n    );\n\n    // ICON FOR DEFAULT STEP\n    let icon;\n    if (type !== \"completed\") {\n      icon = (\n        <ic-typography variant=\"subtitle-small\">\n          <span class=\"step-icon-inner\" aria-hidden=\"true\">\n            {this.stepNum}\n          </span>\n        </ic-typography>\n      );\n    } else {\n      icon = (\n        <div class=\"step-icon-inner\" aria-hidden=\"true\">\n          <span class=\"check-icon\" innerHTML={checkIcon}></span>\n        </div>\n      );\n    }\n\n    // STEP CONNECT FOR DEFAULT STEP\n    const partialBar = type === \"current\" && (\n      <div class=\"step-connect-inner\"></div>\n    );\n\n    const finalStep = !lastStep && (\n      <div\n        class={{\n          [\"step-connect\"]: true,\n          [\"aligned-full-width\"]: !!(\n            this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n            !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n          ),\n        }}\n      >\n        {partialBar}\n      </div>\n    );\n\n    // DEFAULT STEP COMPONENT\n    const defaultStep = (\n      <div\n        class={{\n          [\"step\"]: true,\n          [`${type}`]: true,\n        }}\n      >\n        <div class=\"step-top\">\n          <div class=\"step-icon\">{icon}</div>\n          {finalStep}\n        </div>\n        {(heading || subheading || status) && (\n          <div class=\"heading-area\">\n            {heading && (\n              <ic-typography variant=\"subtitle-large\" class=\"heading\">\n                {heading}\n              </ic-typography>\n            )}\n            {heading && (subheading || status) && (\n              <ic-typography variant=\"caption\" class=\"subheading\">\n                {subheading !== null && isPropDefined(subheading)\n                  ? subheading\n                  : stepStatus}\n              </ic-typography>\n            )}\n          </div>\n        )}\n      </div>\n    );\n\n    return (\n      <Host\n        role=\"listitem\"\n        aria-label={`${icI18n.step} ${stepNum}${ariaLabel}`}\n        aria-current={(current || type === \"current\") && \"step\"}\n        class={{\n          [\"aligned-full-width\"]: !!(\n            this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n            !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n          ),\n          [`ic-step-${variant}`]: true,\n          [`ic-theme-${theme}`]: this.theme !== \"inherit\",\n        }}\n      >\n        {variant === \"compact\" ? compactStep : defaultStep}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-step.entry.cjs.js","mappings":"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","names":["isPropDefined","isSlotUsed","h","checkIcon","Host"],"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"sourcesContent":["/* SHARED STYLING */\n:host {\n  display: flex;\n  flex: auto;\n\n  --ic-typography-color: currentcolor;\n}\n\n.step {\n  display: flex;\n  flex: 1 1 0;\n}\n\n.step-icon {\n  display: flex;\n  justify-content: center;\n}\n\n.heading,\n::slotted([slot=\"heading\"]),\n.subheading,\n.step-status,\n.next-step {\n  white-space: pre-line;\n}\n\n.next-step {\n  color: var(--ic-stepper-compact-step-next-text);\n}\n\n.visually-hidden {\n  position: absolute;\n  left: -9999px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n}\n\n.visually-hidden:dir(rtl) {\n  right: -9999px;\n}\n\n/* COMPACT STEP STYLING */\n:host(.ic-step-compact) {\n  column-gap: var(--ic-space-sm);\n\n  --compact-step-inner-color: var(--ic-step-indicator-status-current);\n  --compact-step-outer-color: var(--ic-step-indicator-status-remaining);\n  --compact-step-circular-line-width: var(--ic-space-xxs);\n}\n\n:host(.ic-step-compact) .step {\n  column-gap: var(--ic-space-sm);\n}\n\n:host(.ic-step-compact) .step:not(.current) {\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.compact-step-progress-indicator {\n  margin: var(--ic-space-xs) 0 0;\n}\n\n:host ic-loading-indicator::part(ic-loading-container) {\n  border-radius: 50%;\n}\n\n:host() ic-loading-indicator::part(ic-loading-container) {\n  background-color: var(--ic-step-indicator-background);\n}\n\n:host(.ic-step-compact) .heading-area {\n  display: flex;\n  flex-direction: column;\n  width: 14.25rem;\n}\n\n:host(.ic-step-compact) .heading,\n:host(.ic-step-compact) ::slotted([slot=\"heading\"]) {\n  color: var(--ic-stepper-compact-step-title);\n}\n\n:host(.ic-step-compact) .disabled .heading,\n:host(.ic-step-compact) .disabled ::slotted([slot=\"heading\"]) {\n  color: var(--ic-stepper-compact-step-title-disabled);\n}\n\n.info-line {\n  display: flex;\n  column-gap: var(--ic-space-xs);\n}\n\n.step-status {\n  display: flex;\n  color: var(--ic-stepper-compact-step-requirement-text);\n  column-gap: var(--ic-space-xxxs);\n}\n\n.compact-step-completed .step-status {\n  color: var(--ic-stepper-compact-step-completed-text);\n}\n\n.compact-step-disabled :is(.heading, .step-status) {\n  color: var(--ic-stepper-compact-step-requirement-text-disabled);\n}\n\n.step-num {\n  color: var(--ic-stepper-compact-step-stage-text);\n  white-space: nowrap;\n}\n\n:host(.ic-step-compact) .step-icon {\n  margin: var(--ic-space-xxxs);\n}\n\n:host(.ic-step-compact) .step-icon svg {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n/* DEFAULT STEP STYLING */\n:host(.ic-step-default) .step {\n  flex-direction: column;\n}\n\n:host(.ic-step-default.last-step) {\n  flex-grow: initial;\n}\n\n.step-top {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  align-self: flex-start;\n  height: 2.5rem;\n}\n\n:host(.ic-step-default) .step-icon {\n  border-radius: 50%;\n  background-color: var(--ic-step-number-inactive);\n}\n\n.step-icon-inner {\n  width: var(--ic-space-xl);\n  height: var(--ic-space-xl);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  color: var(--ic-step-number-text-inactive);\n}\n\n:host(.ic-step-default) .current {\n  color: var(--ic-status-info-default);\n}\n\n:host(.ic-step-default) .heading-area {\n  margin: var(--ic-space-xs) 0;\n  padding-right: var(--ic-space-xs);\n  width: 100%;\n}\n\n:host(.ic-step-default) .heading,\n:host(.ic-step-default) ::slotted([slot=\"heading\"]),\n.subheading {\n  width: fit-content;\n}\n\n.heading,\n::slotted([slot=\"heading\"]) {\n  color: var(--ic-step-title);\n}\n\n.current .heading,\n.current ::slotted([slot=\"heading\"]) {\n  color: var(--ic-step-title-current);\n}\n\n.completed .heading,\n.completed ::slotted([slot=\"heading\"]) {\n  color: var(--ic-step-title-success);\n}\n\n.disabled .heading,\n.disabled ::slotted([slot=\"heading\"]) {\n  color: var(--ic-step-title-disabled);\n}\n\n.subheading {\n  color: var(--ic-step-title-status-text-inactive);\n}\n\n.current .subheading {\n  color: var(--ic-step-title-status-text-current);\n}\n\n.disabled .subheading {\n  color: var(--ic-step-title-status-text-disabled);\n}\n\n:host(.ic-step-default) .completed {\n  color: var(--ic-status-success-default);\n}\n\n.active .step-icon-inner {\n  box-shadow: inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem;\n}\n\n.current .step-icon-inner {\n  background-color: var(--ic-step-number-background-active);\n  color: var(--ic-step-number-text-current);\n}\n\n.disabled {\n  color: var(--ic-color-text-disabled-mid);\n}\n\n.disabled .step-icon-inner {\n  border: var(--ic-border-width) dashed var(--ic-step-number-disabled);\n  width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n  height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n  color: var(--ic-step-number-text-disabled);\n}\n\n.disabled .step-icon {\n  background-color: transparent !important;\n}\n\n.completed .step-icon-inner {\n  background: var(--ic-step-number-background-success);\n  box-shadow: inset var(--ic-step-number-background-success) 0 0 0\n    var(--ic-space-xxxs);\n  border-radius: 100%;\n}\n\n:host(.ic-step-default) .current .step-icon {\n  border: var(--ic-space-xxxs) solid var(--ic-step-number-current-outline);\n  padding: var(--ic-space-xxxs);\n  margin: 0 calc(-1 * var(--ic-space-xxxs));\n  background-color: var(--ic-step-number-current-outer-fill);\n\n  /* compensating for the circle being bigger than other steps */\n}\n\n.step-connect {\n  height: var(--ic-space-xxxs);\n  background-color: var(--ic-stepper-connector-remaining-status);\n  margin: 0 var(--ic-space-xs);\n  border-radius: var(--ic-space-xxs);\n  width: 100%;\n}\n\n.aligned-full-width.step-connect {\n  min-width: 6.25rem;\n  width: 100%;\n}\n\n.disabled .step-connect {\n  height: 0;\n  background-color: rgb(0 0 0 / 0%);\n  border-top: 0.125rem dashed var(--ic-stepper-connector-disabled);\n  border-radius: 0;\n}\n\n.completed .step-connect {\n  background-color: var(--ic-stepper-connector-success);\n}\n\n.step-connect-inner {\n  width: 70%;\n  display: flex;\n  flex: auto;\n  height: var(--ic-space-xxxs);\n  border-radius: var(--ic-space-xxs);\n  background-color: var(--ic-stepper-connector-current-status);\n}\n\n.step-icon-inner .check-icon {\n  padding-top: var(--ic-space-xxs);\n}\n\n.step-icon-inner .check-icon svg {\n  width: var(--ic-space-md);\n  height: auto;\n}\n\n.step-icon-inner .check-icon > svg > path {\n  fill: var(--ic-step-number-icon-success);\n}\n\n/** High Contrast **/\n@media (forced-colors: active) {\n  /* COMPACT STEP */\n  .compact-step-disabled :is(.heading, .step-status) {\n    color: GrayText;\n  }\n\n  /* DEFAULT STEP */\n  .step-connect:not(.disabled .step-connect) {\n    border: var(--ic-border-hc);\n  }\n\n  .active .step-icon-inner,\n  .completed .step-icon-inner,\n  .current .step-icon-inner {\n    forced-color-adjust: none;\n    box-shadow: inset canvastext 0 0 0 0.125rem;\n    background-color: transparent;\n    color: canvastext;\n  }\n\n  :host(.ic-step-default) .current .step-icon {\n    padding: 0;\n    border: none;\n  }\n\n  .disabled,\n  .disabled .heading-area,\n  .disabled .step-icon-inner,\n  .disabled .heading,\n  .disabled ::slotted([slot=\"heading\"]) {\n    color: GrayText;\n  }\n\n  .step-connect-inner,\n  .completed .step-connect {\n    background-color: canvastext;\n  }\n\n  .step-icon-inner .check-icon > svg > path {\n    fill: canvastext;\n  }\n}\n","import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport {\n  IcStepVariants,\n  IcStepStatuses,\n  IcStepTypes,\n  IcStepI18n,\n} from \"./ic-step.types\";\nimport { isPropDefined, isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot heading - Content will be rendered in place of the heading prop.\n */\n@Component({\n  tag: \"ic-step\",\n  styleUrl: \"ic-step.css\",\n  shadow: true,\n})\nexport class Step {\n  @Element() el: HTMLIcStepElement;\n\n  /**\n   * @internal If a compact stepper is being used, this sets the styling of the step.\n   */\n  @Prop() compactStepStyling?: IcStepTypes;\n\n  /**\n   * @internal If `true`, and a compact stepper  is being used, the current step will be the only step in view.\n   */\n  @Prop({ mutable: true }) current?: boolean = false;\n\n  /**\n   * Words within the component that can be replaced to translate the component into a different language\n   */\n  @Prop() icI18n: IcStepI18n = {\n    next: \"Next\",\n    step: \"Step\",\n    steps: \"Steps\",\n    of: \"of\",\n    lastStep: \"Last step\",\n    completed: \"Completed\",\n    notRequired: \"Not required\",\n    required: \"Required\",\n    optional: \"Optional\",\n  };\n\n  /**\n   * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n   */\n  @Prop() lastStep!: boolean;\n\n  /**\n   * @internal The step number of the final step. This is managed by ic-stepper.\n   */\n  @Prop() lastStepNum?: number;\n\n  /**\n   * @internal The name of the next step. This is managed by ic-stepper.\n   */\n  @Prop() nextStepHeading?: string;\n\n  /**\n   * @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n   */\n  @Prop() progress?: number;\n\n  /**\n   * @internal The step number, managed by ic-stepper.\n   */\n  @Prop() stepNum?: number;\n\n  /**\n   * The status of the step. Use this prop to display a status message on the step if it is required or optional.\n   */\n  @Prop() status?: IcStepStatuses;\n\n  /**\n   * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * The title of the step within the stepper.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * @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.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * @internal The variant of the step. This is managed by ic-stepper.\n   */\n  @Prop() variant!: IcStepVariants;\n\n  /**\n   * The state of the step within the stepper.\n   */\n  @Prop() type?: IcStepTypes = \"active\";\n\n  @Watch(\"type\")\n  typeChangeHandler(): void {\n    if (this.variant === \"compact\" && this.type === \"current\") {\n      this.current = true;\n    } else {\n      this.current = false;\n    }\n  }\n\n  render() {\n    const {\n      compactStepStyling,\n      current,\n      heading,\n      icI18n,\n      lastStep,\n      lastStepNum,\n      nextStepHeading,\n      progress,\n      status,\n      stepNum,\n      subheading,\n      theme,\n      type,\n      variant,\n    } = this;\n\n    // ARIA LABEL\n    let ariaLabel = \"\";\n\n    const hasHeading =\n      (isPropDefined(heading) && heading !== \"\") ||\n      isSlotUsed(this.el, \"heading\");\n\n    if (type === \"completed\") {\n      ariaLabel = `. ${icI18n.completed}`;\n    } else if (type === \"disabled\") {\n      ariaLabel = `. ${icI18n.notRequired}`;\n    } else if (status === \"required\") {\n      ariaLabel = `. ${icI18n.required}`;\n    } else if (status === \"optional\") {\n      ariaLabel = `. ${icI18n.optional}`;\n    }\n\n    // STEP STATUS\n    let stepStatus;\n    if (status && isPropDefined(status)) {\n      stepStatus = status[0].toUpperCase() + status.slice(1);\n    }\n\n    // STEP TYPE\n    let stepType;\n    if (type === \"disabled\" || compactStepStyling === \"disabled\") {\n      stepType = icI18n.notRequired;\n    } else if (compactStepStyling === \"completed\") {\n      stepType = icI18n.completed;\n    }\n\n    // STATUS ICON FOR COMPACT STEP\n    let statusIcon;\n    if (type === \"completed\" || compactStepStyling === \"completed\") {\n      statusIcon = (\n        <span\n          class=\"check-icon step-icon\"\n          aria-hidden=\"true\"\n          innerHTML={checkIcon}\n        ></span>\n      );\n    } else if (type === \"disabled\" || compactStepStyling === \"disabled\") {\n      statusIcon = (\n        <span\n          class=\"warning-icon step-icon\"\n          aria-hidden=\"true\"\n          innerHTML={warningIcon}\n        ></span>\n      );\n    }\n\n    // COMPACT STEP COMPONENT\n    const compactStep = (\n      <div\n        class={{\n          [\"step\"]: true,\n          [\"current\"]: !!current,\n          [`compact-step-${compactStepStyling}`]: !!compactStepStyling,\n          [\"disabled\"]:\n            type === \"disabled\" || compactStepStyling === \"disabled\",\n        }}\n      >\n        <ic-loading-indicator\n          class={{\n            \"compact-step-progress-indicator\": true,\n            \"not-required\":\n              type === \"disabled\" || compactStepStyling === \"disabled\",\n          }}\n          aria-hidden=\"true\"\n          size=\"small\"\n          inner-label={stepNum}\n          progress={progress}\n        ></ic-loading-indicator>\n        <div class=\"heading-area\">\n          {isSlotUsed(this.el, \"heading\") ? (\n            <slot name=\"heading\"></slot>\n          ) : (\n            <ic-typography variant=\"h4\" class=\"heading\">\n              {heading}\n            </ic-typography>\n          )}\n          <div class=\"info-line\">\n            <ic-typography variant=\"caption\" class=\"step-num\">\n              {`${stepNum} ${icI18n.of} ${lastStepNum}`}\n              <span class=\"visually-hidden\">{` ${icI18n.steps}`}</span>\n            </ic-typography>\n            {(this.subheading ||\n              type === \"completed\" ||\n              type === \"disabled\" ||\n              (this.variant === \"compact\" &&\n                !!compactStepStyling &&\n                compactStepStyling !== \"active\") ||\n              !!status) && (\n              <div class=\"step-status\">\n                {statusIcon !== undefined && statusIcon}\n                {(subheading || stepType) && (\n                  <ic-typography variant=\"caption\">\n                    {subheading !== null && isPropDefined(subheading)\n                      ? subheading\n                      : type === \"disabled\" ||\n                        (variant === \"compact\" &&\n                          compactStepStyling === \"disabled\") ||\n                        type === \"completed\" ||\n                        (variant === \"compact\" &&\n                          compactStepStyling === \"completed\")\n                      ? stepType\n                      : status && stepStatus}\n                  </ic-typography>\n                )}\n              </div>\n            )}\n          </div>\n          {lastStep ? (\n            <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n              {icI18n.lastStep}\n            </ic-typography>\n          ) : (\n            isPropDefined(nextStepHeading) && (\n              <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n                {icI18n.next}\n                <span class=\"visually-hidden\"> {icI18n.step}</span>:{\" \"}\n                {this.nextStepHeading}\n              </ic-typography>\n            )\n          )}\n        </div>\n      </div>\n    );\n\n    // ICON FOR DEFAULT STEP\n    let icon;\n    if (type !== \"completed\") {\n      icon = (\n        <ic-typography variant=\"subtitle-small\">\n          <span class=\"step-icon-inner\" aria-hidden=\"true\">\n            {this.stepNum}\n          </span>\n        </ic-typography>\n      );\n    } else {\n      icon = (\n        <div class=\"step-icon-inner\" aria-hidden=\"true\">\n          <span class=\"check-icon\" innerHTML={checkIcon}></span>\n        </div>\n      );\n    }\n\n    // STEP CONNECT FOR DEFAULT STEP\n    const partialBar = type === \"current\" && (\n      <div class=\"step-connect-inner\"></div>\n    );\n\n    const finalStep = !lastStep && (\n      <div\n        class={{\n          [\"step-connect\"]: true,\n          [\"aligned-full-width\"]: !!(\n            this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n            !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n          ),\n        }}\n      >\n        {partialBar}\n      </div>\n    );\n\n    // DEFAULT STEP COMPONENT\n    const defaultStep = (\n      <div\n        class={{\n          [\"step\"]: true,\n          [`${type}`]: true,\n        }}\n      >\n        <div class=\"step-top\">\n          <div class=\"step-icon\">{icon}</div>\n          {finalStep}\n        </div>\n        {(hasHeading || subheading || status) && (\n          <div class=\"heading-area\">\n            {isSlotUsed(this.el, \"heading\") ? (\n              <slot name=\"heading\"></slot>\n            ) : (\n              <ic-typography variant=\"subtitle-large\" class=\"heading\">\n                {heading}\n              </ic-typography>\n            )}\n            {hasHeading && (subheading || status) && (\n              <ic-typography variant=\"caption\" class=\"subheading\">\n                {subheading !== null && isPropDefined(subheading)\n                  ? subheading\n                  : stepStatus}\n              </ic-typography>\n            )}\n          </div>\n        )}\n      </div>\n    );\n\n    return (\n      <Host\n        role=\"listitem\"\n        aria-label={`${icI18n.step} ${stepNum}${ariaLabel}`}\n        aria-current={(current || type === \"current\") && \"step\"}\n        class={{\n          [\"aligned-full-width\"]: !!(\n            this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n            !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n          ),\n          [`ic-step-${variant}`]: true,\n          [`ic-theme-${theme}`]: this.theme !== \"inherit\",\n        }}\n      >\n        {variant === \"compact\" ? compactStep : defaultStep}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-stepper.cjs.entry.js

@@ -57,10 +57,29 @@ const Stepper = class {
          * The variant of the stepper.
          */
         this.variant = "default";
+        this.stepHeading = (step, includeAutogeneratedTitles = false) => {
+            var _a, _b, _c, _d;
+            if (step.hasAttribute("heading") && step.getAttribute("heading") !== "") {
+                return step.getAttribute("heading") || undefined;
+            }
+            const headingSlot = (_a = step.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="heading"]');
+            const assignedNodes = ((_b = headingSlot === null || headingSlot === void 0 ? void 0 : headingSlot.assignedNodes) === null || _b === void 0 ? void 0 : _b.call(headingSlot)) || [];
+            for (const node of assignedNodes) {
+                const text = node.nodeType === Node.TEXT_NODE
+                    ? (_c = node.textContent) === null || _c === void 0 ? void 0 : _c.trim()
+                    : (_d = node.innerText) === null || _d === void 0 ? void 0 : _d.trim();
+                if (text)
+                    return text;
+            }
+            if (includeAutogeneratedTitles && step.heading) {
+                return step.heading;
+            }
+            return undefined;
+        };
         // Get all steps currently within this stepper
         this.getChildren = () => {
             this.steps = Array.from(this.el.querySelectorAll("ic-step"));
-            this.stepsWithStepTitles = Array.from(this.el.querySelectorAll("ic-step[heading]"));
+            this.stepsWithStepTitles = this.steps.filter((step) => !!this.stepHeading(step, false));
         };
         // Inform the user that stepTitles are required on all steps in a compact stepper
         this.checkStepTitles = () => {
@@ -142,7 +161,8 @@ const Stepper = class {
                         step.classList.add("hide");
                     }
                     if (!step.lastStep) {
-                        step.nextStepHeading = this.steps[index + 1].heading;
+                        const nextStep = this.steps[index + 1];
+                        step.nextStepHeading = this.stepHeading(nextStep, true);
                         step.progress = (step.stepNum / this.steps.length) * 100;
                     }
                     else if (step.lastStep && this.stepTypes[index] !== "completed") {
@@ -269,11 +289,11 @@ const Stepper = class {
         helpers.checkResizeObserver(this.runResizeObserver);
     }
     render() {
-        return (index.h(index.Host, { key: '8905befe9177785369ef0d277f7f21d823cd727b', class: {
+        return (index.h(index.Host, { key: '2ec1fcb09c175807a7d6c4f56748378363073f1e', class: {
                 [`ic-stepper-${this.variant}`]: true,
                 ["ic-stepper-aligned-left"]: this.variant === "default" && this.aligned === "left",
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, index.h("ul", { key: '19d67dcea521d17802c2d98946ce24254ef4969a', class: "step-item-list" }, index.h("slot", { key: 'fe75a601beeed1e3dbfc9df495909af26ad11523' }))));
+            } }, index.h("ul", { key: 'a83274c2c50ef587165b467a169f0f252e5540c7', class: "step-item-list" }, index.h("slot", { key: '0143ddf0255e345ded3a8d741797c0d0ce1da4ca' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ic-stepper.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-stepper.entry.cjs.js","mappings":"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","names":["pxToRem","checkResizeObserver","h","Host"],"sources":["src/components/ic-stepper/ic-stepper.css?tag=ic-stepper&encapsulation=shadow","src/components/ic-stepper/ic-stepper.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n}\n\n.step-item-list {\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n\n:host(.ic-stepper-default:not(.ic-stepper-aligned-left)) .step-item-list {\n  flex: auto;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step) {\n  display: none;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step.show) {\n  display: flex;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step.hide) {\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n}\n","import { Component, Element, Host, Prop, h, State, Watch } from \"@stencil/core\";\nimport { checkResizeObserver, pxToRem } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\nimport {\n  IcStepTypes,\n  IcStepVariants,\n  IcStepI18n,\n} from \"../ic-step/ic-step.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-stepper\",\n  styleUrl: \"ic-stepper.css\",\n  shadow: true,\n})\nexport class Stepper {\n  private resizeObserver: ResizeObserver | null = null;\n  private steps: HTMLIcStepElement[];\n  private stepsWithStepTitles: HTMLIcStepElement[];\n  private visuallyHidden: string = \"visually-hidden\";\n\n  @Element() el: HTMLIcStepperElement;\n\n  @State() alignedFullWidth: boolean = true;\n  @State() autoSetStepTitles: boolean = true;\n  @State() lastStepWidth: number = 0;\n  @State() noOfResizes?: number = 0;\n  @State() stepperWidth: number | undefined = document\n    .querySelector(\"ic-stepper\")\n    ?.getBoundingClientRect().width;\n  @State() stepTypes: IcStepTypes[] = [];\n  @State() variantOverride?: boolean = this.variant !== \"compact\";\n\n  /**\n   * The alignment of the default stepper within its container.\n   */\n  @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n  /**\n   * The length of the connector between each step in pixels. Minimum length is 100px.\n   */\n  @Prop() connectorWidth?: number = 100;\n\n  /**\n   * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.\n   */\n  @Prop() hideStepInfo?: boolean = false;\n\n  /**\n   * Provide alternative values for text in all child steps. For the purpose of translating the application into other languages.\n   */\n  @Prop() icI18n?: IcStepI18n = {\n    next: \"Next\",\n    step: \"Step\",\n    steps: \"Steps\",\n    of: \"of\",\n    lastStep: \"Last step\",\n    completed: \"Completed\",\n    notRequired: \"Not required\",\n    required: \"Required\",\n    optional: \"Optional\",\n  };\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?: IcThemeMode = \"inherit\";\n  @Watch(\"theme\")\n  handleThemeChange(): void {\n    this.getChildren();\n    this.steps.forEach((step) => {\n      step.theme = this.theme;\n    });\n  }\n\n  /**\n   * The variant of the stepper.\n   */\n  @Prop({ mutable: true }) variant?: IcStepVariants = \"default\";\n\n  @Watch(\"hideStepInfo\")\n  @Watch(\"variant\")\n  handlePropChange(): void {\n    this.setHideStepInfo();\n    this.getChildren();\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.setStepTypes();\n    this.handleThemeChange();\n\n    if (this.variant === \"compact\") {\n      this.variantOverride = false;\n    }\n  }\n\n  componentWillRender(): void {\n    this.initialiseStepStates();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  // Get all steps currently within this stepper\n  private getChildren = (): void => {\n    this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n\n    this.stepsWithStepTitles = Array.from(\n      this.el.querySelectorAll(\"ic-step[heading]\")\n    );\n  };\n\n  // Inform the user that stepTitles are required on all steps in a compact stepper\n  private checkStepTitles = (): void => {\n    if (\n      this.stepsWithStepTitles.length < this.steps.length &&\n      this.variantOverride &&\n      this.variant === \"compact\"\n    ) {\n      this.noOfResizes = this.noOfResizes! + 1;\n      if (this.noOfResizes === 1) {\n        console.error(\n          `The prop 'heading' is required for all steps of the Stepper component (compact variant)`\n        );\n      }\n    }\n  };\n\n  private setStepTypes = (): void => {\n    this.getChildren();\n    this.stepTypes = [];\n    for (let i = 0; i < this.steps.length; i++) {\n      this.stepTypes.push(\"active\");\n    }\n  };\n\n  private setStepperWidth = (): void => {\n    this.alignedFullWidth =\n      this.variant === \"default\" && this.aligned === \"full-width\";\n\n    const lastStep = this.steps[this.steps.length - 1];\n    lastStep.style.maxWidth = \"none\";\n\n    if (this.alignedFullWidth) {\n      this.stepperWidth = this.el.offsetWidth;\n      lastStep.style.maxWidth = pxToRem(\n        `${this.stepperWidth / this.steps.length}px`\n      );\n      this.lastStepWidth = lastStep.offsetWidth;\n    }\n  };\n\n  private initialiseStepStates = (): void => {\n    this.steps.forEach((step, index) => {\n      // Set language\n      if (this.icI18n !== undefined) {\n        step.icI18n = this.icI18n;\n      }\n      // Set variant\n      step.variant = this.variant!;\n      // Assign stepNum to each step\n      step.stepNum = index + 1;\n      // Assign lastStep to final step\n      step.lastStep = index === this.steps.length - 1;\n      step.lastStepNum = this.steps.length;\n\n      if (step.type !== \"current\") {\n        step.current = false;\n        this.stepTypes[index] = step.type!;\n      } else {\n        step.current = true;\n      }\n\n      const stepTitleArea =\n        step.shadowRoot &&\n        step.shadowRoot.querySelector(\".step > .heading-area\");\n\n      if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {\n        if (this.variant === \"compact\") {\n          this.autoSetStepTitles = true;\n          if (this.autoSetStepTitles) {\n            step.heading = \"Step \" + step.stepNum;\n            stepTitleArea &&\n              stepTitleArea\n                ?.querySelector(\".heading\")\n                ?.setAttribute(\"aria-hidden\", \"true\");\n          }\n        }\n        if (this.variant === \"default\") {\n          this.autoSetStepTitles = false;\n          if (!this.autoSetStepTitles) {\n            step.heading = undefined;\n            stepTitleArea &&\n              stepTitleArea\n                ?.querySelector(\".heading\")\n                ?.removeAttribute(\"aria-hidden\");\n          }\n        }\n      }\n\n      if (this.variant === \"compact\") {\n        if (step.current === true || step.type === \"current\") {\n          step.classList.remove(\"hide\");\n          step.classList.add(\"show\");\n        } else if (step.classList.contains(\"show\")) {\n          step.classList.remove(\"show\");\n          step.classList.add(\"hide\");\n        }\n\n        if (!step.lastStep) {\n          step.nextStepHeading = this.steps[index + 1].heading;\n          step.progress = (step.stepNum / this.steps.length) * 100;\n        } else if (step.lastStep && this.stepTypes[index] !== \"completed\") {\n          step.progress = 95;\n        } else {\n          step.progress = 100;\n        }\n\n        if (this.hideStepInfo && stepTitleArea !== null) {\n          stepTitleArea.classList.remove(this.visuallyHidden);\n        }\n\n        step.compactStepStyling = this.stepTypes[index];\n      }\n\n      if (this.variant === \"default\") {\n        if (!step.lastStep) {\n          if (this.alignedFullWidth && this.stepperWidth !== undefined) {\n            step.style.width = pxToRem(\n              `${\n                (this.stepperWidth - this.lastStepWidth) /\n                (this.steps.length - 1)\n              }px`\n            );\n            step.style.minWidth = pxToRem(\"148px\");\n          }\n        } else if (step.lastStep) {\n          step.classList.add(\"last-step\");\n          if (this.alignedFullWidth) {\n            step.style.maxWidth = `${this.lastStepWidth}px`;\n          } else if (this.connectorWidth) {\n            step.style.maxWidth =\n              this.connectorWidth > 100\n                ? pxToRem(`${this.connectorWidth + 48}px`)\n                : pxToRem(\"148px\");\n          }\n        }\n\n        if (this.aligned === \"left\" && this.connectorWidth) {\n          step.style.width =\n            this.connectorWidth > 100\n              ? pxToRem(`${this.connectorWidth + 48}px`)\n              : pxToRem(\"148px\");\n          const stepConnect = step.shadowRoot?.querySelector(\n            \".step > .step-top > .step-connect\"\n          ) as HTMLElement;\n\n          if (stepConnect) {\n            stepConnect.style.width =\n              this.connectorWidth > 100\n                ? pxToRem(`${this.connectorWidth}px`)\n                : pxToRem(\"100px\");\n          }\n        }\n\n        if (this.hideStepInfo && stepTitleArea !== null) {\n          stepTitleArea.classList.add(this.visuallyHidden);\n        }\n      }\n    });\n  };\n\n  private setHideStepInfo = (): void => {\n    this.steps.forEach((step) => {\n      const stepTitleArea = step.shadowRoot?.querySelector(\n        \".step > .heading-area\"\n      );\n\n      if (stepTitleArea) {\n        if (this.hideStepInfo) {\n          stepTitleArea.classList?.add(this.visuallyHidden);\n        } else {\n          stepTitleArea.classList?.remove(this.visuallyHidden);\n        }\n      }\n    });\n  };\n\n  private overrideVariant = () => {\n    if (this.variantOverride) {\n      let minDefaultStepperWidth = 148 * this.steps.length;\n\n      if (\n        this.aligned === \"left\" &&\n        this.connectorWidth &&\n        this.connectorWidth > 100\n      ) {\n        minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;\n      }\n      if (this.el.clientWidth < minDefaultStepperWidth) {\n        this.variant = \"compact\";\n      } else {\n        this.variant = \"default\";\n      }\n    }\n  };\n\n  private resizeObserverCallback = () => {\n    this.getChildren();\n    this.checkStepTitles();\n    this.overrideVariant();\n    this.setStepperWidth();\n    this.initialiseStepStates();\n    this.handleThemeChange();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`ic-stepper-${this.variant}`]: true,\n          [\"ic-stepper-aligned-left\"]:\n            this.variant === \"default\" && this.aligned === \"left\",\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n      >\n        <ul class=\"step-item-list\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-stepper.entry.cjs.js","mappings":"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","names":["pxToRem","checkResizeObserver","h","Host"],"sources":["src/components/ic-stepper/ic-stepper.css?tag=ic-stepper&encapsulation=shadow","src/components/ic-stepper/ic-stepper.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n}\n\n.step-item-list {\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n\n:host(.ic-stepper-default:not(.ic-stepper-aligned-left)) .step-item-list {\n  flex: auto;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step) {\n  display: none;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step.show) {\n  display: flex;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step.hide) {\n  display: none;\n  opacity: 0;\n  visibility: hidden;\n}\n","import { Component, Element, Host, Prop, h, State, Watch } from \"@stencil/core\";\nimport { checkResizeObserver, pxToRem } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\nimport {\n  IcStepTypes,\n  IcStepVariants,\n  IcStepI18n,\n} from \"../ic-step/ic-step.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-stepper\",\n  styleUrl: \"ic-stepper.css\",\n  shadow: true,\n})\nexport class Stepper {\n  private resizeObserver: ResizeObserver | null = null;\n  private steps: HTMLIcStepElement[];\n  private stepsWithStepTitles: HTMLIcStepElement[];\n  private visuallyHidden: string = \"visually-hidden\";\n\n  @Element() el: HTMLIcStepperElement;\n\n  @State() alignedFullWidth: boolean = true;\n  @State() autoSetStepTitles: boolean = true;\n  @State() lastStepWidth: number = 0;\n  @State() noOfResizes?: number = 0;\n  @State() stepperWidth: number | undefined = document\n    .querySelector(\"ic-stepper\")\n    ?.getBoundingClientRect().width;\n  @State() stepTypes: IcStepTypes[] = [];\n  @State() variantOverride?: boolean = this.variant !== \"compact\";\n\n  /**\n   * The alignment of the default stepper within its container.\n   */\n  @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n  /**\n   * The length of the connector between each step in pixels. Minimum length is 100px.\n   */\n  @Prop() connectorWidth?: number = 100;\n\n  /**\n   * If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.\n   */\n  @Prop() hideStepInfo?: boolean = false;\n\n  /**\n   * Provide alternative values for text in all child steps. For the purpose of translating the application into other languages.\n   */\n  @Prop() icI18n?: IcStepI18n = {\n    next: \"Next\",\n    step: \"Step\",\n    steps: \"Steps\",\n    of: \"of\",\n    lastStep: \"Last step\",\n    completed: \"Completed\",\n    notRequired: \"Not required\",\n    required: \"Required\",\n    optional: \"Optional\",\n  };\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?: IcThemeMode = \"inherit\";\n  @Watch(\"theme\")\n  handleThemeChange(): void {\n    this.getChildren();\n    this.steps.forEach((step) => {\n      step.theme = this.theme;\n    });\n  }\n\n  /**\n   * The variant of the stepper.\n   */\n  @Prop({ mutable: true }) variant?: IcStepVariants = \"default\";\n\n  @Watch(\"hideStepInfo\")\n  @Watch(\"variant\")\n  handlePropChange(): void {\n    this.setHideStepInfo();\n    this.getChildren();\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.setStepTypes();\n    this.handleThemeChange();\n\n    if (this.variant === \"compact\") {\n      this.variantOverride = false;\n    }\n  }\n\n  componentWillRender(): void {\n    this.initialiseStepStates();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  private stepHeading = (\n    step: HTMLIcStepElement,\n    includeAutogeneratedTitles: boolean = false\n  ): string | undefined => {\n    if (step.hasAttribute(\"heading\") && step.getAttribute(\"heading\") !== \"\") {\n      return step.getAttribute(\"heading\") || undefined;\n    }\n\n    const headingSlot = step.shadowRoot?.querySelector(\n      'slot[name=\"heading\"]'\n    ) as HTMLSlotElement | null;\n    const assignedNodes = headingSlot?.assignedNodes?.() || [];\n    for (const node of assignedNodes) {\n      const text =\n        node.nodeType === Node.TEXT_NODE\n          ? node.textContent?.trim()\n          : (node as HTMLElement).innerText?.trim();\n      if (text) return text;\n    }\n\n    if (includeAutogeneratedTitles && step.heading) {\n      return step.heading;\n    }\n    return undefined;\n  };\n\n  // Get all steps currently within this stepper\n  private getChildren = (): void => {\n    this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n\n    this.stepsWithStepTitles = this.steps.filter(\n      (step) => !!this.stepHeading(step, false)\n    );\n  };\n\n  // Inform the user that stepTitles are required on all steps in a compact stepper\n  private checkStepTitles = (): void => {\n    if (\n      this.stepsWithStepTitles.length < this.steps.length &&\n      this.variantOverride &&\n      this.variant === \"compact\"\n    ) {\n      this.noOfResizes = this.noOfResizes! + 1;\n      if (this.noOfResizes === 1) {\n        console.error(\n          `The prop 'heading' is required for all steps of the Stepper component (compact variant)`\n        );\n      }\n    }\n  };\n\n  private setStepTypes = (): void => {\n    this.getChildren();\n    this.stepTypes = [];\n    for (let i = 0; i < this.steps.length; i++) {\n      this.stepTypes.push(\"active\");\n    }\n  };\n\n  private setStepperWidth = (): void => {\n    this.alignedFullWidth =\n      this.variant === \"default\" && this.aligned === \"full-width\";\n\n    const lastStep = this.steps[this.steps.length - 1];\n    lastStep.style.maxWidth = \"none\";\n\n    if (this.alignedFullWidth) {\n      this.stepperWidth = this.el.offsetWidth;\n      lastStep.style.maxWidth = pxToRem(\n        `${this.stepperWidth / this.steps.length}px`\n      );\n      this.lastStepWidth = lastStep.offsetWidth;\n    }\n  };\n\n  private initialiseStepStates = (): void => {\n    this.steps.forEach((step, index) => {\n      // Set language\n      if (this.icI18n !== undefined) {\n        step.icI18n = this.icI18n;\n      }\n      // Set variant\n      step.variant = this.variant!;\n      // Assign stepNum to each step\n      step.stepNum = index + 1;\n      // Assign lastStep to final step\n      step.lastStep = index === this.steps.length - 1;\n      step.lastStepNum = this.steps.length;\n\n      if (step.type !== \"current\") {\n        step.current = false;\n        this.stepTypes[index] = step.type!;\n      } else {\n        step.current = true;\n      }\n\n      const stepTitleArea =\n        step.shadowRoot &&\n        step.shadowRoot.querySelector(\".step > .heading-area\");\n\n      if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {\n        if (this.variant === \"compact\") {\n          this.autoSetStepTitles = true;\n          if (this.autoSetStepTitles) {\n            step.heading = \"Step \" + step.stepNum;\n            stepTitleArea &&\n              stepTitleArea\n                ?.querySelector(\".heading\")\n                ?.setAttribute(\"aria-hidden\", \"true\");\n          }\n        }\n        if (this.variant === \"default\") {\n          this.autoSetStepTitles = false;\n          if (!this.autoSetStepTitles) {\n            step.heading = undefined;\n            stepTitleArea &&\n              stepTitleArea\n                ?.querySelector(\".heading\")\n                ?.removeAttribute(\"aria-hidden\");\n          }\n        }\n      }\n\n      if (this.variant === \"compact\") {\n        if (step.current === true || step.type === \"current\") {\n          step.classList.remove(\"hide\");\n          step.classList.add(\"show\");\n        } else if (step.classList.contains(\"show\")) {\n          step.classList.remove(\"show\");\n          step.classList.add(\"hide\");\n        }\n\n        if (!step.lastStep) {\n          const nextStep = this.steps[index + 1];\n          step.nextStepHeading = this.stepHeading(nextStep, true);\n          step.progress = (step.stepNum / this.steps.length) * 100;\n        } else if (step.lastStep && this.stepTypes[index] !== \"completed\") {\n          step.progress = 95;\n        } else {\n          step.progress = 100;\n        }\n\n        if (this.hideStepInfo && stepTitleArea !== null) {\n          stepTitleArea.classList.remove(this.visuallyHidden);\n        }\n\n        step.compactStepStyling = this.stepTypes[index];\n      }\n\n      if (this.variant === \"default\") {\n        if (!step.lastStep) {\n          if (this.alignedFullWidth && this.stepperWidth !== undefined) {\n            step.style.width = pxToRem(\n              `${\n                (this.stepperWidth - this.lastStepWidth) /\n                (this.steps.length - 1)\n              }px`\n            );\n            step.style.minWidth = pxToRem(\"148px\");\n          }\n        } else if (step.lastStep) {\n          step.classList.add(\"last-step\");\n          if (this.alignedFullWidth) {\n            step.style.maxWidth = `${this.lastStepWidth}px`;\n          } else if (this.connectorWidth) {\n            step.style.maxWidth =\n              this.connectorWidth > 100\n                ? pxToRem(`${this.connectorWidth + 48}px`)\n                : pxToRem(\"148px\");\n          }\n        }\n\n        if (this.aligned === \"left\" && this.connectorWidth) {\n          step.style.width =\n            this.connectorWidth > 100\n              ? pxToRem(`${this.connectorWidth + 48}px`)\n              : pxToRem(\"148px\");\n          const stepConnect = step.shadowRoot?.querySelector(\n            \".step > .step-top > .step-connect\"\n          ) as HTMLElement;\n\n          if (stepConnect) {\n            stepConnect.style.width =\n              this.connectorWidth > 100\n                ? pxToRem(`${this.connectorWidth}px`)\n                : pxToRem(\"100px\");\n          }\n        }\n\n        if (this.hideStepInfo && stepTitleArea !== null) {\n          stepTitleArea.classList.add(this.visuallyHidden);\n        }\n      }\n    });\n  };\n\n  private setHideStepInfo = (): void => {\n    this.steps.forEach((step) => {\n      const stepTitleArea = step.shadowRoot?.querySelector(\n        \".step > .heading-area\"\n      );\n\n      if (stepTitleArea) {\n        if (this.hideStepInfo) {\n          stepTitleArea.classList?.add(this.visuallyHidden);\n        } else {\n          stepTitleArea.classList?.remove(this.visuallyHidden);\n        }\n      }\n    });\n  };\n\n  private overrideVariant = () => {\n    if (this.variantOverride) {\n      let minDefaultStepperWidth = 148 * this.steps.length;\n\n      if (\n        this.aligned === \"left\" &&\n        this.connectorWidth &&\n        this.connectorWidth > 100\n      ) {\n        minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;\n      }\n      if (this.el.clientWidth < minDefaultStepperWidth) {\n        this.variant = \"compact\";\n      } else {\n        this.variant = \"default\";\n      }\n    }\n  };\n\n  private resizeObserverCallback = () => {\n    this.getChildren();\n    this.checkStepTitles();\n    this.overrideVariant();\n    this.setStepperWidth();\n    this.initialiseStepStates();\n    this.handleThemeChange();\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`ic-stepper-${this.variant}`]: true,\n          [\"ic-stepper-aligned-left\"]:\n            this.variant === \"default\" && this.aligned === \"left\",\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n      >\n        <ul class=\"step-item-list\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-switch.cjs.entry.js

@@ -100,16 +100,16 @@ const Switch = class {
         const { label, checkedState, size, disabled, name, value, hideLabel, helperText, inputId, theme, } = this;
         const isSmall = size === "small";
         helpers.renderHiddenInput(this.el, checkedState ? value : "", name, disabled);
-        return (index.h(index.Host, { key: '83cfaa808706cfbd930349b19264611eeb9eb7a1', class: {
+        return (index.h(index.Host, { key: 'e11db5d9ef7157f5b496107646dd45989b3fd2cf', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, index.h("label", { key: '3952a6e8d7bd6778f6e72bd714f3413fb32ce43c', class: {
+            } }, index.h("label", { key: '3f0b6684b623d60898f68ae91914696ed1856907', class: {
                 "ic-switch-container": true,
                 "ic-switch-disabled": !!disabled,
                 "ic-switch-small": isSmall,
-            }, htmlFor: inputId }, !hideLabel && (index.h("ic-input-label", { key: 'da48a174f9dd1a8ec052f102424cecfe39b629f1', for: inputId, label: label, helperText: helperText, readonly: false, disabled: disabled, class: {
+            }, htmlFor: inputId }, !hideLabel && (index.h("ic-input-label", { key: 'd170da813d11e7842c7b52ad33a0e003326c91b2', for: inputId, label: label, helperText: helperText, readonly: false, disabled: disabled, class: {
                 "ic-switch-label": true,
                 "ic-switch-label-small": isSmall,
-            } }, index.h("slot", { key: 'f80f2d947f1ef1c448152a54878e00ca8ad93733', name: "helper-text", slot: "helper-text" }))), !hideLabel && index.h("span", { key: '3c56f4c0fb5e15be23d11931b95d9abfe6dc56f0', class: "ic-switch-line-break" }), index.h("input", { key: '2f23a8d5ef4aed9348bae49cf1d65d27d6af7f50', checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": helpers.getInputDescribedByText(this.el, inputId, helperText !== "", false), role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), index.h("span", { key: '1799cf9b15ba7f41ecdd5846c874313270b005d7', class: "ic-switch-toggle" }, index.h("svg", { key: 'dfdd27f600056edb4f0c21dc52c9c5b316a58749', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, index.h("line", { key: 'e1fc26ba3d5ffe9901f5ded149c6783e5e897951', class: "ic-switch-icon-line", x1: "9", y1: isSmall ? "2" : "1", x2: "9", y2: isSmall ? "8" : "9" })), index.h("svg", { key: 'dbe0ba812d70c2ced199a5fbdfd2637a67477f3c', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '41fab06f91865db47d4c82b44eb913cb566a965c', class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: isSmall ? "3.335" : "4.445" }))), index.h("slot", { key: '26b7e9ad4067d5571b676872dd506371c03766b2', name: "right-adornment" }))));
+            } }, index.h("slot", { key: '86b0675dc2701c7eae251047fd8cc4177d3ec3a5', name: "helper-text", slot: "helper-text" }))), !hideLabel && index.h("span", { key: '10a20bc44042273b6dda222f4c0547279b89844f', class: "ic-switch-line-break" }), index.h("input", { key: '6edd5108b2f94b6fb0766b142980e1c7d5ef2209', checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": helpers.getInputDescribedByText(this.el, inputId, helperText !== "", false), role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), index.h("span", { key: 'f8fe1fa3345d804d3df07284bc66d8f54127833a', class: "ic-switch-toggle" }, index.h("svg", { key: 'bbd2c67828e7931dc5618be39e454075352ba321', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, index.h("line", { key: '430057b77a9506f2eeb2338ab9db8917234d1f93', class: "ic-switch-icon-line", x1: "9", y1: isSmall ? "2" : "1", x2: "9", y2: isSmall ? "8" : "9" })), index.h("svg", { key: 'f3a8b817039210b892faee6ca5a115d4fdb07286', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: 'f7d2d56b743834016888f477892202e17b2b3fef', class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: isSmall ? "3.335" : "4.445" }))), index.h("slot", { key: 'fec7bad487e3f3c4e3223b713b74653c155114ae', name: "right-adornment" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }