@ukic/web-components 3.0.0-alpha.13 → 3.0.0-alpha.15

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

@@ -1 +1 @@
-{"version":3,"file":"ic-step.js","sourceRoot":"","sources":["../../../src/components/ic-step/ic-step.tsx"],"names":[],"mappings":"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","sourcesContent":["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 { IcStepVariants, IcStepStatuses, IcStepTypes } 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   * @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    // ARIA LABEL\n    let ariaLabel = \"\";\n\n    if (this.type === \"completed\") {\n      ariaLabel = \". Completed step\";\n    } else if (this.type === \"disabled\") {\n      ariaLabel = \". Non-required step\";\n    } else if (this.status === \"required\") {\n      ariaLabel = \". Required step\";\n    } else if (this.status === \"optional\") {\n      ariaLabel = \". Optional step\";\n    }\n\n    // STEP STATUS\n    let stepStatus;\n    if (this.status && isPropDefined(this.status)) {\n      stepStatus = this.status[0].toUpperCase() + this.status.slice(1);\n    }\n\n    // STEP TYPE\n    let stepType;\n    if (this.type === \"disabled\" || this.compactStepStyling === \"disabled\") {\n      stepType = \"Not required\";\n    } else if (this.compactStepStyling === \"completed\") {\n      stepType = \"Completed\";\n    }\n\n    // STATUS ICON FOR COMPACT STEP\n    let statusIcon;\n    if (this.type === \"completed\" || this.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 (\n      this.type === \"disabled\" ||\n      this.compactStepStyling === \"disabled\"\n    ) {\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\"]: !!this.current,\n          [`compact-step-${this.compactStepStyling}`]:\n            !!this.compactStepStyling,\n        }}\n      >\n        <ic-loading-indicator\n          class={{\n            \"compact-step-progress-indicator\": true,\n            \"not-required\":\n              this.type === \"disabled\" ||\n              this.compactStepStyling === \"disabled\",\n          }}\n          aria-hidden=\"true\"\n          size=\"small\"\n          inner-label={this.stepNum}\n          progress={this.progress}\n        ></ic-loading-indicator>\n        <div class=\"heading-area\">\n          <ic-typography variant=\"h4\" class=\"heading\">\n            {this.heading}\n          </ic-typography>\n          <div class=\"info-line\">\n            <ic-typography variant=\"caption\" class=\"step-num\">\n              {`${this.stepNum} of ${this.lastStepNum}`}\n              <span class=\"visually-hidden\"> steps</span>\n            </ic-typography>\n            {(this.subheading ||\n              this.type === \"completed\" ||\n              this.type === \"disabled\" ||\n              (this.variant === \"compact\" &&\n                !!this.compactStepStyling &&\n                this.compactStepStyling !== \"active\") ||\n              !!this.status) && (\n              <div class=\"step-status\">\n                {statusIcon !== undefined && statusIcon}\n                {(this.subheading || stepType) && (\n                  <ic-typography variant=\"caption\">\n                    {this.subheading !== null && isPropDefined(this.subheading)\n                      ? this.subheading\n                      : this.type === \"disabled\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"disabled\") ||\n                        this.type === \"completed\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"completed\")\n                      ? stepType\n                      : this.status && stepStatus}\n                  </ic-typography>\n                )}\n              </div>\n            )}\n          </div>\n          {this.lastStep ? (\n            <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n              Last step\n            </ic-typography>\n          ) : (\n            isPropDefined(this.nextStepHeading) && (\n              <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n                Next<span class=\"visually-hidden\"> step is</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 (this.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 = this.type === \"current\" && (\n      <div class=\"step-connect-inner\"></div>\n    );\n\n    const finalStep = !this.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          [`${this.type}`]: true,\n        }}\n      >\n        <div class=\"step-top\">\n          <div class=\"step-icon\">{icon}</div>\n          {finalStep}\n        </div>\n        {(this.heading || this.subheading || this.status) && (\n          <div class=\"heading-area\">\n            {this.heading && (\n              <ic-typography variant=\"subtitle-large\" class=\"heading\">\n                {this.heading}\n              </ic-typography>\n            )}\n            {this.heading && (this.subheading || this.status) && (\n              <ic-typography variant=\"caption\" class=\"subheading\">\n                {this.subheading !== null && isPropDefined(this.subheading)\n                  ? this.subheading\n                  : stepStatus}\n              </ic-typography>\n            )}\n          </div>\n        )}\n      </div>\n    );\n\n    return (\n      <Host\n        role=\"listitem\"\n        aria-label={`Step ${this.stepNum}${ariaLabel}`}\n        aria-current={(this.current || this.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-${this.variant}`]: true,\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n      >\n        {this.variant === \"compact\" ? compactStep : defaultStep}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-step.js","sourceRoot":"","sources":["../../../src/components/ic-step/ic-step.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,WAAW,MAAM,uCAAuC,CAAC;AAEhE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAQpD,MAAM,OAAO,IAAI;IALjB;QAaE;;WAEG;QACsB,YAAO,GAAa,KAAK,CAAC;QA0CnD;;WAEG;QACK,UAAK,GAAiB,SAAS,CAAC;QAOxC;;WAEG;QACK,SAAI,GAAiB,QAAQ,CAAC;KA+NvC;IA5NC,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAC1D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;IACH,CAAC;IAED,MAAM;;QACJ,aAAa;QACb,IAAI,SAAS,GAAG,EAAE,CAAC;QAEnB,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;YAC9B,SAAS,GAAG,kBAAkB,CAAC;QACjC,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YACpC,SAAS,GAAG,qBAAqB,CAAC;QACpC,CAAC;aAAM,IAAI,IAAI,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;YACtC,SAAS,GAAG,iBAAiB,CAAC;QAChC,CAAC;aAAM,IAAI,IAAI,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;YACtC,SAAS,GAAG,iBAAiB,CAAC;QAChC,CAAC;QAED,cAAc;QACd,IAAI,UAAU,CAAC;QACf,IAAI,IAAI,CAAC,MAAM,IAAI,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;YAC9C,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACnE,CAAC;QAED,YAAY;QACZ,IAAI,QAAQ,CAAC;QACb,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,kBAAkB,KAAK,UAAU,EAAE,CAAC;YACvE,QAAQ,GAAG,cAAc,CAAC;QAC5B,CAAC;aAAM,IAAI,IAAI,CAAC,kBAAkB,KAAK,WAAW,EAAE,CAAC;YACnD,QAAQ,GAAG,WAAW,CAAC;QACzB,CAAC;QAED,+BAA+B;QAC/B,IAAI,UAAU,CAAC;QACf,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,kBAAkB,KAAK,WAAW,EAAE,CAAC;YACzE,UAAU,GAAG,CACX,6DACE,KAAK,EAAC,sBAAsB,iBAChB,MAAM,EAClB,SAAS,EAAE,SAAS,GACd,CACT,CAAC;QACJ,CAAC;aAAM,IACL,IAAI,CAAC,IAAI,KAAK,UAAU;YACxB,IAAI,CAAC,kBAAkB,KAAK,UAAU,EACtC,CAAC;YACD,UAAU,GAAG,CACX,6DACE,KAAK,EAAC,wBAAwB,iBAClB,MAAM,EAClB,SAAS,EAAE,WAAW,GAChB,CACT,CAAC;QACJ,CAAC;QAED,yBAAyB;QACzB,MAAM,WAAW,GAAG,CAClB,4DACE,KAAK,EAAE;gBACL,CAAC,MAAM,CAAC,EAAE,IAAI;gBACd,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;gBAC3B,CAAC,gBAAgB,IAAI,CAAC,kBAAkB,EAAE,CAAC,EACzC,CAAC,CAAC,IAAI,CAAC,kBAAkB;gBAC3B,CAAC,UAAU,CAAC,EACV,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,kBAAkB,KAAK,UAAU;aACrE;YAED,6EACE,KAAK,EAAE;oBACL,iCAAiC,EAAE,IAAI;oBACvC,cAAc,EACZ,IAAI,CAAC,IAAI,KAAK,UAAU;wBACxB,IAAI,CAAC,kBAAkB,KAAK,UAAU;iBACzC,iBACW,MAAM,EAClB,IAAI,EAAC,OAAO,iBACC,IAAI,CAAC,OAAO,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACD;YACxB,4DAAK,KAAK,EAAC,cAAc;gBACvB,sEAAe,OAAO,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,IACxC,IAAI,CAAC,OAAO,CACC;gBAChB,4DAAK,KAAK,EAAC,WAAW;oBACpB,sEAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,UAAU;wBAC9C,GAAG,IAAI,CAAC,OAAO,OAAO,IAAI,CAAC,WAAW,EAAE;wBACzC,6DAAM,KAAK,EAAC,iBAAiB,aAAc,CAC7B;oBACf,CAAC,IAAI,CAAC,UAAU;wBACf,IAAI,CAAC,IAAI,KAAK,WAAW;wBACzB,IAAI,CAAC,IAAI,KAAK,UAAU;wBACxB,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS;4BACzB,CAAC,CAAC,IAAI,CAAC,kBAAkB;4BACzB,IAAI,CAAC,kBAAkB,KAAK,QAAQ,CAAC;wBACvC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAClB,4DAAK,KAAK,EAAC,aAAa;wBACrB,UAAU,KAAK,SAAS,IAAI,UAAU;wBACtC,CAAC,IAAI,CAAC,UAAU,IAAI,QAAQ,CAAC,IAAI,CAChC,sEAAe,OAAO,EAAC,SAAS,IAC7B,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC;4BACzD,CAAC,CAAC,IAAI,CAAC,UAAU;4BACjB,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,UAAU;gCACxB,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS;oCACzB,IAAI,CAAC,kBAAkB,KAAK,UAAU,CAAC;gCACzC,IAAI,CAAC,IAAI,KAAK,WAAW;gCACzB,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS;oCACzB,IAAI,CAAC,kBAAkB,KAAK,WAAW,CAAC;gCAC5C,CAAC,CAAC,QAAQ;gCACV,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,UAAU,CACf,CACjB,CACG,CACP,CACG;gBACL,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,WAAW,gBAEzC,CACjB,CAAC,CAAC,CAAC,CACF,aAAa,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CACrC,qBAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,WAAW;;oBACnD,YAAM,KAAK,EAAC,iBAAiB,eAAgB;;oBAAE,GAAG;oBACrD,IAAI,CAAC,eAAe,CACP,CACjB,CACF,CACG,CACF,CACP,CAAC;QAEF,wBAAwB;QACxB,IAAI,IAAI,CAAC;QACT,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;YAC9B,IAAI,GAAG,CACL,sEAAe,OAAO,EAAC,gBAAgB;gBACrC,6DAAM,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC7C,IAAI,CAAC,OAAO,CACR,CACO,CACjB,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,CACL,4DAAK,KAAK,EAAC,iBAAiB,iBAAa,MAAM;gBAC7C,6DAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,SAAS,GAAS,CAClD,CACP,CAAC;QACJ,CAAC;QAED,gCAAgC;QAChC,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC5C,4DAAK,KAAK,EAAC,oBAAoB,GAAO,CACvC,CAAC;QAEF,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,CAClC,4DACE,KAAK,EAAE;gBACL,CAAC,cAAc,CAAC,EAAE,IAAI;gBACtB,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC,CACxB,CAAA,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,0CAAE,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;oBAC/D,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,yBAAyB,CAAC,CACrE;aACF,IAEA,UAAU,CACP,CACP,CAAC;QAEF,yBAAyB;QACzB,MAAM,WAAW,GAAG,CAClB,4DACE,KAAK,EAAE;gBACL,CAAC,MAAM,CAAC,EAAE,IAAI;gBACd,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;aACvB;YAED,4DAAK,KAAK,EAAC,UAAU;gBACnB,4DAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAO;gBAClC,SAAS,CACN;YACL,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CACnD,4DAAK,KAAK,EAAC,cAAc;gBACtB,IAAI,CAAC,OAAO,IAAI,CACf,sEAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,SAAS,IACpD,IAAI,CAAC,OAAO,CACC,CACjB;gBACA,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CACnD,sEAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY,IAChD,IAAI,CAAC,UAAU,KAAK,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC;oBACzD,CAAC,CAAC,IAAI,CAAC,UAAU;oBACjB,CAAC,CAAC,UAAU,CACA,CACjB,CACG,CACP,CACG,CACP,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,gBACH,QAAQ,IAAI,CAAC,OAAO,GAAG,SAAS,EAAE,kBAChC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,MAAM,EACjE,KAAK,EAAE;gBACL,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC,CACxB,CAAA,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,0CAAE,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC;oBAC/D,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,yBAAyB,CAAC,CACrE;gBACD,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;gBACjC,CAAC,YAAY,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;aACrD,IAEA,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAClD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 { IcStepVariants, IcStepStatuses, IcStepTypes } 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   * @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    // ARIA LABEL\n    let ariaLabel = \"\";\n\n    if (this.type === \"completed\") {\n      ariaLabel = \". Completed step\";\n    } else if (this.type === \"disabled\") {\n      ariaLabel = \". Non-required step\";\n    } else if (this.status === \"required\") {\n      ariaLabel = \". Required step\";\n    } else if (this.status === \"optional\") {\n      ariaLabel = \". Optional step\";\n    }\n\n    // STEP STATUS\n    let stepStatus;\n    if (this.status && isPropDefined(this.status)) {\n      stepStatus = this.status[0].toUpperCase() + this.status.slice(1);\n    }\n\n    // STEP TYPE\n    let stepType;\n    if (this.type === \"disabled\" || this.compactStepStyling === \"disabled\") {\n      stepType = \"Not required\";\n    } else if (this.compactStepStyling === \"completed\") {\n      stepType = \"Completed\";\n    }\n\n    // STATUS ICON FOR COMPACT STEP\n    let statusIcon;\n    if (this.type === \"completed\" || this.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 (\n      this.type === \"disabled\" ||\n      this.compactStepStyling === \"disabled\"\n    ) {\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\"]: !!this.current,\n          [`compact-step-${this.compactStepStyling}`]:\n            !!this.compactStepStyling,\n          [\"disabled\"]:\n            this.type === \"disabled\" || this.compactStepStyling === \"disabled\",\n        }}\n      >\n        <ic-loading-indicator\n          class={{\n            \"compact-step-progress-indicator\": true,\n            \"not-required\":\n              this.type === \"disabled\" ||\n              this.compactStepStyling === \"disabled\",\n          }}\n          aria-hidden=\"true\"\n          size=\"small\"\n          inner-label={this.stepNum}\n          progress={this.progress}\n        ></ic-loading-indicator>\n        <div class=\"heading-area\">\n          <ic-typography variant=\"h4\" class=\"heading\">\n            {this.heading}\n          </ic-typography>\n          <div class=\"info-line\">\n            <ic-typography variant=\"caption\" class=\"step-num\">\n              {`${this.stepNum} of ${this.lastStepNum}`}\n              <span class=\"visually-hidden\"> steps</span>\n            </ic-typography>\n            {(this.subheading ||\n              this.type === \"completed\" ||\n              this.type === \"disabled\" ||\n              (this.variant === \"compact\" &&\n                !!this.compactStepStyling &&\n                this.compactStepStyling !== \"active\") ||\n              !!this.status) && (\n              <div class=\"step-status\">\n                {statusIcon !== undefined && statusIcon}\n                {(this.subheading || stepType) && (\n                  <ic-typography variant=\"caption\">\n                    {this.subheading !== null && isPropDefined(this.subheading)\n                      ? this.subheading\n                      : this.type === \"disabled\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"disabled\") ||\n                        this.type === \"completed\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"completed\")\n                      ? stepType\n                      : this.status && stepStatus}\n                  </ic-typography>\n                )}\n              </div>\n            )}\n          </div>\n          {this.lastStep ? (\n            <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n              Last step\n            </ic-typography>\n          ) : (\n            isPropDefined(this.nextStepHeading) && (\n              <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n                Next<span class=\"visually-hidden\"> step is</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 (this.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 = this.type === \"current\" && (\n      <div class=\"step-connect-inner\"></div>\n    );\n\n    const finalStep = !this.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          [`${this.type}`]: true,\n        }}\n      >\n        <div class=\"step-top\">\n          <div class=\"step-icon\">{icon}</div>\n          {finalStep}\n        </div>\n        {(this.heading || this.subheading || this.status) && (\n          <div class=\"heading-area\">\n            {this.heading && (\n              <ic-typography variant=\"subtitle-large\" class=\"heading\">\n                {this.heading}\n              </ic-typography>\n            )}\n            {this.heading && (this.subheading || this.status) && (\n              <ic-typography variant=\"caption\" class=\"subheading\">\n                {this.subheading !== null && isPropDefined(this.subheading)\n                  ? this.subheading\n                  : stepStatus}\n              </ic-typography>\n            )}\n          </div>\n        )}\n      </div>\n    );\n\n    return (\n      <Host\n        role=\"listitem\"\n        aria-label={`Step ${this.stepNum}${ariaLabel}`}\n        aria-current={(this.current || this.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-${this.variant}`]: true,\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n      >\n        {this.variant === \"compact\" ? compactStep : defaultStep}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -241,11 +241,11 @@ export class Stepper {
         checkResizeObserver(this.runResizeObserver);
     }
     render() {
-        return (h(Host, { key: 'a0b411b1a82a297557333526c50a6a41eb855f65', class: {
+        return (h(Host, { key: '6184a1c30e7030f1e364eda2e56f3ead3c8c5e8f', class: {
                 [`ic-stepper-${this.variant}`]: true,
                 ["ic-stepper-aligned-left"]: this.variant === "default" && this.aligned === "left",
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("ul", { key: 'a798647cf04f1c1d1111f90b4650b0b57f1268ce', class: "step-item-list" }, h("slot", { key: '861e89142ad76fd5eab82317d94284ba24ddf2be' }))));
+            } }, h("ul", { key: 'b0cb92330e78579947ec33066858ee53ae2c1adb', class: "step-item-list" }, h("slot", { key: 'd797bf78df3340efc566de5e1f62f3ecf8245d49' }))));
     }
     static get is() { return "ic-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-stepper/ic-stepper.stories.js

@@ -68,7 +68,11 @@ export const CustomStepper = {
         subheading="Optional subtitle that is long and should wrap"
         type="current"
       ></ic-step>
-      <ic-step heading="Third" type="disabled"></ic-step>
+      <ic-step
+        heading="Third"
+        subheading="Optional subtitle"
+        type="disabled"
+      ></ic-step>
       <ic-step
         heading="Fourth title that is long and should wrap"
         subheading="Optional Subtitle"

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

@@ -90,16 +90,16 @@ export class Switch {
         const { label, checkedState, size, disabled, name, value, hideLabel, helperText, inputId, theme, } = this;
         const isSmall = size === "small";
         renderHiddenInput(true, this.el, name, checkedState ? value : "", disabled);
-        return (h(Host, { key: 'c90330966be33431cd7487fe80b4c59e320ea3d4', class: {
+        return (h(Host, { key: '4654ef1f6473fdea79fd053879fa7bbf1699418d', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("label", { key: '21a29a36fc0ccc5c4b859eb7a0f0bb6e8dba9403', class: {
+            } }, h("label", { key: 'c6dca6f468eeb7c9e8151af1168fd8429c82d72b', class: {
                 "ic-switch-container": true,
                 "ic-switch-disabled": !!disabled,
                 "ic-switch-small": isSmall,
-            }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { key: 'f649d5e53635ad80eca02a73adfc149ca1272660', for: inputId, label: label, helperText: helperText, readonly: true, disabled: disabled, class: {
+            }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { key: '5622227e775f787aac275619841e65c34209102a', for: inputId, label: label, helperText: helperText, readonly: true, disabled: disabled, class: {
                 "ic-switch-label": true,
                 "ic-switch-label-small": isSmall,
-            } })), !hideLabel && h("span", { key: '0ec406fdad2f6c31f8ee8ba77f34116c7b451929', class: "ic-switch-line-break" }), h("input", { key: '2b8e0940cefb3affdcfe08050c90a5a873f1959f', checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": getInputDescribedByText(inputId, helperText !== "", false), role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { key: '02ee9bd811ee41b748114219c2c6677cf6ede77e', class: "ic-switch-toggle" }, h("svg", { key: 'd380d7ffe4f9244fe2ce0f081f9bf597ec9fbfbf', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { key: '5016993ed02e2bd5ce7d786f2b0137719c2433d6', class: "ic-switch-icon-line", x1: "9", y1: isSmall ? "2" : "1", x2: "9", y2: isSmall ? "8" : "9" })), h("svg", { key: '444d1eb42515ff0189c81413326dd7be5a0c1461', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '444696f8447b3ae211b61e4ec1cc7a5fa6c3c9e2', class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: isSmall ? "3.335" : "4.445" }))), h("slot", { key: '5f5e257885362d3a01958f50d7f57a1bdc873322', name: "right-adornment" }))));
+            } })), !hideLabel && h("span", { key: '74ec90ef32d23a02c7c6ceb7571e19d4c81091c8', class: "ic-switch-line-break" }), h("input", { key: 'f518a9a4db7eeb7ceafe5bb44c632ba6d3a9f64f', checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": getInputDescribedByText(inputId, helperText !== "", false), role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { key: '72c49eeeb4bf26416dba25a612757a172a896bf0', class: "ic-switch-toggle" }, h("svg", { key: '2b31b154fd70258f3386013e287d0e10e4e4e56c', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { key: '61f089501da929a5bec439c9b6c7bf3cd1233b6f', class: "ic-switch-icon-line", x1: "9", y1: isSmall ? "2" : "1", x2: "9", y2: isSmall ? "8" : "9" })), h("svg", { key: '1ed62e82659c4c1a0a6935eb3805aa65a3117353', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '54012f70a4ed7c1fba7a0679cab8bdc8c0179b80', class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: isSmall ? "3.335" : "4.445" }))), h("slot", { key: '89de0ba1f401d01ae0cf6cb9be70f802686577fd', name: "right-adornment" }))));
     }
     static get is() { return "ic-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -465,6 +465,10 @@ video {
   fill: var(--ic-tab-icon);
 }
 
+:host(.ic-tab-disabled) ::slotted([slot="icon"]) {
+  fill: var(--ic-tab-icon-disabled);
+}
+
 :host(:focus) {
   box-shadow: var(--focus-indicator);
   border-radius: var(--ic-border-radius);
@@ -492,19 +496,25 @@ video {
 }
 
 :host(.ic-tab-disabled) ic-typography {
-  color: var(--ic-architectural-300);
-
-  --ic-typography-color: var(--ic-architectural-300);
+  --ic-typography-color: var(--ic-tab-label-disabled);
 }
 
 :host(.ic-tab-monochrome) {
   color: var(--ic-tab-label-monochrome);
 }
 
+:host(.ic-tab-monochrome.ic-tab-disabled) ic-typography {
+  color: var(--ic-tab-label-monochrome-disabled);
+}
+
 :host(.ic-tab-monochrome) ::slotted([slot="icon"]) {
   fill: var(--ic-tab-icon-monochrome);
 }
 
+:host(.ic-tab-monochrome.ic-tab-disabled) ::slotted([slot="icon"]) {
+  fill: var(--ic-tab-icon-monochrome-disabled);
+}
+
 :host(.ic-tab-monochrome.ic-tab-selected) {
   border-bottom: var(--ic-space-xxs) solid var(--ic-tab-item-monochrome);
 }

package/dist/collection/components/ic-tab-context/ic-tab-context.js

@@ -220,7 +220,7 @@ export class TabContext {
         }
     }
     render() {
-        return h("slot", { key: '9a3bc1f2f3c3cfee3d5001e333c9c16cd8df323a' });
+        return h("slot", { key: '83e9c882369eebc5fd170b2ceabf423047cd14d6' });
     }
     static get is() { return "ic-tab-context"; }
     static get properties() {

package/dist/collection/components/ic-tab-group/ic-tab-group.js

@@ -16,11 +16,11 @@ export class TabGroup {
     }
     render() {
         const { inline, theme, label, monochrome } = this;
-        return (h(Host, { key: 'b0eea28186a58d99f94366067954dcc562366f9d', role: "tablist", "aria-label": label, class: {
+        return (h(Host, { key: 'f42b97ec6fa8e200fbb5b5d2114f3f98d4f6ad35', role: "tablist", "aria-label": label, class: {
                 ["ic-tab-group-inline"]: !!inline,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-tab-group-monochrome"]: !!monochrome,
-            } }, h("ic-horizontal-scroll", { key: '090c8a2391c282ba6aae53f6617160f2a58ac481', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: 'd3d5a2b2b61ba7353cb713cdc9e9c06ad579535b', class: "tabs-container" }, h("slot", { key: 'bf81f817067d514b487f92cb9ae88851777bdf2b' })))));
+            } }, h("ic-horizontal-scroll", { key: 'fdfe2de9cecf661c164dda34f523c73520f6bce6', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: '6523acdad07d4b4a48dab269da3cca2bf3003899', class: "tabs-container" }, h("slot", { key: '032517ca94833114e39faf4ad5da3126197e780a' })))));
     }
     static get is() { return "ic-tab-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-tab-panel/ic-tab-panel.js

@@ -17,10 +17,10 @@ export class TabPanel {
     }
     render() {
         const { active, theme } = this;
-        return (h(Host, { key: '7103bebb99dcf021ea957f40dce81738542f8031', class: {
+        return (h(Host, { key: '629c66ac51b529d443ad613d61f6875958e9d1a2', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-tab-panel-hidden": !active,
-            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: '8ffa4a6096fae286bda779e1387fa979f8ddb5da' }, h("slot", { key: 'e7f5eb5e6d63f50c1ef0db45cfc85d0260d195f9' }))));
+            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: '1f018abefa14feeaa6a1de08aa3c84c78788e8ea' }, h("slot", { key: '86343dd2934fa698c26dfe09b88a4b9004b62184' }))));
     }
     static get is() { return "ic-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-text-field/ic-text-field.css

@@ -544,6 +544,7 @@ textarea:disabled {
 input.readonly,
 textarea.readonly {
   color: var(--ic-text-field-read-only-input-text-internal);
+  background: transparent;
 }
 
 /* Chrome, Safari, Edge */

package/dist/collection/components/ic-text-field/ic-text-field.js

@@ -77,10 +77,28 @@ export class TextField {
          * The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)
          */
         this.maxCharacters = 0;
+        /**
+         * The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached.
+         */
+        // prettier-ignore
+        this.maxCharactersMessage = `Maximum input is ${this.maxCharacters} characters`;
+        /**
+         * The text to display as the error message when the maximum value (the `max` prop value) has been exceeded.
+         */
+        this.maxMessage = `Maximum value of ${this.max} exceeded`;
         /**
          * The minimum number of characters that can be entered in the field.
          */
         this.minCharacters = 0;
+        /**
+         * The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met.
+         */
+        // prettier-ignore
+        this.minCharactersMessage = `Minimum input is ${this.minCharacters} characters`;
+        /**
+         * The text to display as the error message when the minimum value (the `min` prop value) has not been met.
+         */
+        this.minMessage = `Minimum value of ${this.min} not met`;
         /**
          * The name of the control, which is submitted with the form data.
          */
@@ -134,7 +152,7 @@ export class TextField {
          */
         this.validationStatus = "";
         /**
-         * The validation state - e.g. 'error' | 'warning' | 'success'.
+         * The text to display as the validation message.
          */
         this.validationText = "";
         /**
@@ -294,7 +312,7 @@ export class TextField {
         (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        const { inputId, name, label, required, size, placeholder, helperText, hideCharCount, rows, resize, disabled, value, min, max, numChars, readonly, maxCharacters, maxCharactersWarning, maxCharactersReached, minCharacters, minCharactersUnattained, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, theme, } = this;
+        const { inputId, name, label, required, size, placeholder, helperText, hideCharCount, rows, resize, disabled, value, min, max, numChars, readonly, maxCharacters, maxCharactersMessage, maxCharactersWarning, maxCharactersReached, maxMessage, minCharacters, minCharactersMessage, minCharactersUnattained, minMessage, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, theme, } = this;
         const el = this.el;
         const disabledMode = readonly || disabled;
         const currentStatus = maxValueExceeded ||
@@ -306,13 +324,13 @@ export class TextField {
                 : IcInformationStatus.Error
             : validationStatus;
         const currentValidationText = maxCharactersWarning
-            ? `Maximum input is ${maxCharacters} characters`
+            ? maxCharactersMessage
             : maxValueExceeded
-                ? `Maximum value of ${max} exceeded`
+                ? maxMessage
                 : minValueUnattained
-                    ? `Minimum value of ${min} not met`
+                    ? minMessage
                     : minCharactersUnattained
-                        ? `Minimum input is ${minCharacters} characters`
+                        ? minCharactersMessage
                         : validationText;
         const maxNumChars = readonly ? 0 : maxCharacters;
         const messageAriaLive = maxCharactersWarning ||
@@ -335,14 +353,14 @@ export class TextField {
         hiddenInput
             ? renderHiddenInput(true, this.el, name, value, disabledMode)
             : removeHiddenInput(this.el);
-        return (h(Host, { key: '9175054afc7f5ab0f44c2c02d73a209676690f26', class: {
+        return (h(Host, { key: '86521a8f619d3f6d09b60fc5251ac153e7f3238d', class: {
                 "ic-text-field-full-width": !!fullWidth,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-text-field-disabled": !!disabledMode,
-            } }, h("ic-input-container", { key: '2cf32636f95f8ec80f25424483fcdf2afe262534', readonly: readonly, disabled: disabledMode }, !this.hideLabel && (h("ic-input-label", { key: '3ee4d01a7e1705d1bdd1e88dc734a16f990c35c9', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), h("ic-input-component-container", { key: 'd6300116fc334d565681cedb6c2e4b637dd8fe5f', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: '2dae55d8265539a3c1b1975ebb63015fb2b66ceb', class: {
+            } }, h("ic-input-container", { key: '2096846a987f396e8786d916f6eca14b277dd6a3', readonly: readonly, disabled: disabledMode }, !this.hideLabel && (h("ic-input-label", { key: '1bb84c2156b0d8af5bba67a06a8680b8cd44b7d0', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), h("ic-input-component-container", { key: 'a1eb781a88dbfbed7a7b084344fd0ca685e35b99', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: '96639821c5f5ab88716be7b01a66462ae92ab358', class: {
                 readonly: !!readonly,
                 "has-value": this.getNumberOfCharacters(value) > 0,
-            }, slot: "left-icon" }, h("slot", { key: 'c363bc9c876a3be7db91dd1afd8eac8013f176a2', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: this.type, min: min, max: max, value: value, class: {
+            }, slot: "left-icon" }, h("slot", { key: 'b3381ff815a38032d600619bc8245c01d8aa1dd7', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: this.type, min: min, max: max, value: value, class: {
                 "no-left-pad": !showLeftIcon && !!readonly,
                 readonly: !!readonly,
                 "truncate-value": !!truncateValue,
@@ -350,19 +368,19 @@ export class TextField {
                 "no-resize": resize === false || !!readonly,
                 "no-left-pad": !showLeftIcon && !!readonly,
                 readonly: !!readonly,
-            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder ? placeholder : "", readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, this.inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: 'f08406702167a6155246e26df7fe64ef06b82976', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: '58c8ed7ed396953f0d4dff0aba462b10e58bd78b', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: '15496f93b502c8b0d55b0a2da6622e8ab425ef49', name: "menu" }), (!isEmptyString(validationStatus) ||
+            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder ? placeholder : "", readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, this.inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: '5e5bdb069b688fa77e1c5c91f38e82a4e3dd40bc', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: '2c0304de79f15bb6a42c96541a7ac51b65b4a5ec', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: 'c1d7d1239091fcc56e807b4dabcd1310a87e098e', name: "menu" }), (!isEmptyString(validationStatus) ||
             !isEmptyString(validationText) ||
             maxNumChars > 0 ||
             maxValueExceeded ||
             maxCharactersWarning ||
             minCharactersUnattained ||
             minValueUnattained) &&
-            !validationInlineInternal && (h("ic-input-validation", { key: '675805dbde2426192861938a009728af5d0ea56f', status: this.hasStatus(currentStatus) === false ||
+            !validationInlineInternal && (h("ic-input-validation", { key: 'a7e01f7f27d62f34168bc3646fa6b7b4045eac3c', status: this.hasStatus(currentStatus) === false ||
                 (currentStatus === IcInformationStatus.Success &&
                     validationInline) ||
                 validationInlineInternal
                 ? ""
-                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { key: '92b805a2b9b4d87347f767c750c7d9ce8be6c909', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: '2a24743dc253ab95c360c2ae78e559c0437202dc', variant: "caption", class: "char-count-text" }, h("span", { key: 'a71f41c5313d828123d275a41ae694ec2c0b2f5e', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: '9c6d7a87b3d4a0f2baf9b1f732f0940d5e0fbe7b', class: "remaining-char-count-desc", "aria-live": "polite" }, hiddenRemainingCharCountDesc), h("span", { key: '3aba077c149ce80fa5732245829e6e02c4bf52c8', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters."))))))));
+                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { key: '083cc90a38f57ee6b4ec82536e8dc432fed387b6', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: 'ca3571863c4e9c47fb1a8e06eb5ebf700e640fd6', variant: "caption", class: "char-count-text" }, h("span", { key: 'f9435768788239f7f7e8ef46a80406ba5da9b525', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: 'd0f9fef8adb1d92d6d5479995fe3f3b28202dbe1', class: "remaining-char-count-desc", "aria-live": "polite" }, hiddenRemainingCharCountDesc), h("span", { key: '892a02dca5b1deeecfc774ee56ca74830644b18a', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters."))))))));
     }
     static get is() { return "ic-text-field"; }
     static get encapsulation() { return "shadow"; }
@@ -792,6 +810,46 @@ export class TextField {
                 "reflect": false,
                 "defaultValue": "0"
             },
+            "maxCharactersMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-characters-message",
+                "reflect": false,
+                "defaultValue": "`Maximum input is ${this.maxCharacters} characters`"
+            },
+            "maxMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display as the error message when the maximum value (the `max` prop value) has been exceeded."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-message",
+                "reflect": false,
+                "defaultValue": "`Maximum value of ${this.max} exceeded`"
+            },
             "min": {
                 "type": "any",
                 "mutable": false,
@@ -831,6 +889,46 @@ export class TextField {
                 "reflect": false,
                 "defaultValue": "0"
             },
+            "minCharactersMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-characters-message",
+                "reflect": false,
+                "defaultValue": "`Minimum input is ${this.minCharacters} characters`"
+            },
+            "minMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display as the error message when the minimum value (the `min` prop value) has not been met."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-message",
+                "reflect": false,
+                "defaultValue": "`Minimum value of ${this.min} not met`"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -1174,7 +1272,7 @@ export class TextField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The validation state - e.g. 'error' | 'warning' | 'success'."
+                    "text": "The text to display as the validation message."
                 },
                 "getter": false,
                 "setter": false,