npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.14 → 3.0.0-alpha.15 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (500) hide show

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

	@@ -1 +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: -625rem;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\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}\n\n:host(.ic-step-default) .step-icon {\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.ic-step-light) .current,\n:host(.ic-step-default.ic-step-light) .current .heading-area {\n color: var(--ic-status-info-contrast);\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-light) .heading-area {\n color: var(--ic-architectural-200);\n}\n\n:host(.ic-step-compact.ic-step-light) .heading-area {\n color: var(--ic-architectural-white);\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:host(.ic-step-default.ic-step-light) .completed,\n:host(.ic-step-default.ic-step-light) .completed .heading-area {\n color: var(--ic-status-success-contrast);\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:host(.ic-step-light) .active .step-icon-inner {\n color: var(--ic-architectural-white);\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-architectural-200);\n}\n\n:host(.ic-step-default.ic-step-light) .disabled,\n:host(.ic-step-default.ic-step-light) .disabled .heading-area {\n color: var(--ic-architectural-400);\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 { 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"],"version":3}
1	+ {"file":"ic-step.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,8pLAA8pL,CAAC;AACjrL,qBAAe,SAAS;;MCWX,IAAI;IALjB;;;;;QAgB2B,YAAO,GAAa,KAAK,CAAC;;;;QA6C3C,UAAK,GAAiB,SAAS,CAAC;;;;QAUhC,SAAI,GAAiB,QAAQ,CAAC;KA+NvC;IA5NC,iBAAiB;QACf,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;YACzD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;SACrB;aAAM;YACL,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,MAAM;;;QAEJ,IAAI,SAAS,GAAG,EAAE,CAAC;QAEnB,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,EAAE;YAC7B,SAAS,GAAG,kBAAkB,CAAC;SAChC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;YACnC,SAAS,GAAG,qBAAqB,CAAC;SACnC;aAAM,IAAI,IAAI,CAAC,MAAM,KAAK,UAAU,EAAE;YACrC,SAAS,GAAG,iBAAiB,CAAC;SAC/B;aAAM,IAAI,IAAI,CAAC,MAAM,KAAK,UAAU,EAAE;YACrC,SAAS,GAAG,iBAAiB,CAAC;SAC/B;;QAGD,IAAI,UAAU,CAAC;QACf,IAAI,IAAI,CAAC,MAAM,IAAIA,qBAAa,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAC7C,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;SAClE;;QAGD,IAAI,QAAQ,CAAC;QACb,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,kBAAkB,KAAK,UAAU,EAAE;YACtE,QAAQ,GAAG,cAAc,CAAC;SAC3B;aAAM,IAAI,IAAI,CAAC,kBAAkB,KAAK,WAAW,EAAE;YAClD,QAAQ,GAAG,WAAW,CAAC;SACxB;;QAGD,IAAI,UAAU,CAAC;QACf,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,CAAC,kBAAkB,KAAK,WAAW,EAAE;YACxE,UAAU,IACRC,mEACE,KAAK,EAAC,sBAAsB,iBAChB,MAAM,EAClB,SAAS,EAAEC,eAAS,GACd,CACT,CAAC;SACH;aAAM,IACL,IAAI,CAAC,IAAI,KAAK,UAAU;YACxB,IAAI,CAAC,kBAAkB,KAAK,UAAU,EACtC;YACA,UAAU,IACRD,mEACE,KAAK,EAAC,wBAAwB,iBAClB,MAAM,EAClB,SAAS,EAAE,WAAW,GAChB,CACT,CAAC;SACH;;QAGD,MAAM,WAAW,IACfA,kEACE,KAAK,EAAE;gBACL,CAAC,MAAM,GAAG,IAAI;gBACd,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;gBAC3B,CAAC,gBAAgB,IAAI,CAAC,kBAAkB,EAAE,GACxC,CAAC,CAAC,IAAI,CAAC,kBAAkB;gBAC3B,CAAC,UAAU,GACT,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,kBAAkB,KAAK,UAAU;aACrE,IAEDA,mFACE,KAAK,EAAE;gBACL,iCAAiC,EAAE,IAAI;gBACvC,cAAc,EACZ,IAAI,CAAC,IAAI,KAAK,UAAU;oBACxB,IAAI,CAAC,kBAAkB,KAAK,UAAU;aACzC,iBACW,MAAM,EAClB,IAAI,EAAC,OAAO,iBACC,IAAI,CAAC,OAAO,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACD,EACxBA,kEAAK,KAAK,EAAC,cAAc,IACvBA,4EAAe,OAAO,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,IACxC,IAAI,CAAC,OAAO,CACC,EAChBA,kEAAK,KAAK,EAAC,WAAW,IACpBA,4EAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,UAAU,IAC9C,GAAG,IAAI,CAAC,OAAO,OAAO,IAAI,CAAC,WAAW,EAAE,EACzCA,mEAAM,KAAK,EAAC,iBAAiB,aAAc,CAC7B,EACf,CAAC,IAAI,CAAC,UAAU;YACf,IAAI,CAAC,IAAI,KAAK,WAAW;YACzB,IAAI,CAAC,IAAI,KAAK,UAAU;aACvB,IAAI,CAAC,OAAO,KAAK,SAAS;gBACzB,CAAC,CAAC,IAAI,CAAC,kBAAkB;gBACzB,IAAI,CAAC,kBAAkB,KAAK,QAAQ,CAAC;YACvC,CAAC,CAAC,IAAI,CAAC,MAAM,MACbA,kEAAK,KAAK,EAAC,aAAa,IACrB,UAAU,KAAK,SAAS,IAAI,UAAU,EACtC,CAAC,IAAI,CAAC,UAAU,IAAI,QAAQ,MAC3BA,4EAAe,OAAO,EAAC,SAAS,IAC7B,IAAI,CAAC,UAAU,KAAK,IAAI,IAAID,qBAAa,CAAC,IAAI,CAAC,UAAU,CAAC;cACvD,IAAI,CAAC,UAAU;cACf,IAAI,CAAC,IAAI,KAAK,UAAU;iBACvB,IAAI,CAAC,OAAO,KAAK,SAAS;oBACzB,IAAI,CAAC,kBAAkB,KAAK,UAAU,CAAC;gBACzC,IAAI,CAAC,IAAI,KAAK,WAAW;iBACxB,IAAI,CAAC,OAAO,KAAK,SAAS;oBACzB,IAAI,CAAC,kBAAkB,KAAK,WAAW,CAAC;kBAC1C,QAAQ;kBACR,IAAI,CAAC,MAAM,IAAI,UAAU,CACf,CACjB,CACG,CACP,CACG,EACL,IAAI,CAAC,QAAQ,IACZC,2BAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,WAAW,gBAEzC,KAEhBD,qBAAa,CAAC,IAAI,CAAC,eAAe,CAAC,KACjCC,2BAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,WAAW,YACnDA,kBAAM,KAAK,EAAC,iBAAiB,eAAgB,OAAE,GAAG,EACrD,IAAI,CAAC,eAAe,CACP,CACjB,CACF,CACG,CACF,CACP,CAAC;;QAGF,IAAI,IAAI,CAAC;QACT,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,EAAE;YAC7B,IAAI,IACFA,4EAAe,OAAO,EAAC,gBAAgB,IACrCA,mEAAM,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC7C,IAAI,CAAC,OAAO,CACR,CACO,CACjB,CAAC;SACH;aAAM;YACL,IAAI,IACFA,kEAAK,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC7CA,mEAAM,KAAK,EAAC,YAAY,EAAC,SAAS,EAAEC,eAAS,GAAS,CAClD,CACP,CAAC;SACH;;QAGD,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,KACxCD,kEAAK,KAAK,EAAC,oBAAoB,GAAO,CACvC,CAAC;QAEF,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,QAAQ,KAC9BA,kEACE,KAAK,EAAE;gBACL,CAAC,cAAc,GAAG,IAAI;gBACtB,CAAC,oBAAoB,GAAG,CAAC,EACvB,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;;QAGF,MAAM,WAAW,IACfA,kEACE,KAAK,EAAE;gBACL,CAAC,MAAM,GAAG,IAAI;gBACd,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;aACvB,IAEDA,kEAAK,KAAK,EAAC,UAAU,IACnBA,kEAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAO,EAClC,SAAS,CACN,EACL,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,MAC9CA,kEAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,OAAO,KACXA,4EAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,SAAS,IACpD,IAAI,CAAC,OAAO,CACC,CACjB,EACA,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,CAAC,KAC/CA,4EAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY,IAChD,IAAI,CAAC,UAAU,KAAK,IAAI,IAAID,qBAAa,CAAC,IAAI,CAAC,UAAU,CAAC;cACvD,IAAI,CAAC,UAAU;cACf,UAAU,CACA,CACjB,CACG,CACP,CACG,CACP,CAAC;QAEF,QACEC,QAACE,UAAI,qDACH,IAAI,EAAC,UAAU,gBACH,QAAQ,IAAI,CAAC,OAAO,GAAG,SAAS,EAAE,kBAChC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,KAAK,MAAM,EACjE,KAAK,EAAE;gBACL,CAAC,oBAAoB,GAAG,CAAC,EACvB,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,GAAG,IAAI;gBACjC,CAAC,YAAY,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS;aACrD,IAEA,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,WAAW,GAAG,WAAW,CAClD,EACP;KACH;;;;;;;;;;","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}\n\n:host(.ic-step-default) .step-icon {\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 { 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"],"version":3}

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-08a9ec1c.js');
+const index = require('./index-0236cc4b.js');
+const helpers = require('./helpers-7a599012.js');
 const icStepperCss = ":host{display:flex;width:100%}.step-item-list{display:flex;margin:0;padding:0}:host(.ic-stepper-default:not(.ic-stepper-aligned-left)) .step-item-list{flex:auto}:host(.ic-stepper-compact) ul ::slotted(ic-step){display:none}:host(.ic-stepper-compact) ul ::slotted(ic-step.show){display:flex}:host(.ic-stepper-compact) ul ::slotted(ic-step.hide){display:none;opacity:0;visibility:hidden}";
 const IcStepperStyle0 = icStepperCss;
@@ -250,11 +250,11 @@ const Stepper = class {
         helpers.checkResizeObserver(this.runResizeObserver);
     }
     render() {
-        return (index.h(index.Host, { key: 'a0b411b1a82a297557333526c50a6a41eb855f65', class: {
+        return (index.h(index.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",
-            } }, index.h("ul", { key: 'a798647cf04f1c1d1111f90b4650b0b57f1268ce', class: "step-item-list" }, index.h("slot", { key: '861e89142ad76fd5eab82317d94284ba24ddf2be' }))));
+            } }, index.h("ul", { key: 'b0cb92330e78579947ec33066858ee53ae2c1adb', class: "step-item-list" }, index.h("slot", { key: 'd797bf78df3340efc566de5e1f62f3ecf8245d49' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-08a9ec1c.js');
+const index = require('./index-0236cc4b.js');
+const helpers = require('./helpers-7a599012.js');
 const icSwitchCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block;--ic-input-label-text-color:var(--ic-switch-label);--ic-input-label-helper-text-color:var(--ic-switch-help-text)}input{overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.ic-switch-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ic-space-xxs);cursor:pointer}.ic-switch-label{margin-left:var(--ic-space-xxs);margin-bottom:var(--ic-space-sm)}.ic-switch-label-small{margin-bottom:0.625rem}.ic-switch-toggle{display:flex;align-items:center;justify-content:space-around;width:4rem;height:var(--ic-space-xl);position:relative;border-radius:100vw;background-color:var(--ic-switch-unchecked-bg);border:var(--ic-border-width) solid var(--ic-switch-unchecked);box-sizing:border-box;transition:var(--ic-transition-duration-fast)}.ic-switch-line-break{flex:1 0 100%}.ic-switch-toggle::before{content:\"\";width:1.333rem;height:1.333rem;border-radius:50%;position:absolute;z-index:2;top:50%;left:0.333rem;transform:translate(0, -50%);background-color:var(--ic-switch-unchecked);transition:var(--ic-transition-duration-slow)}.ic-switch-icon{display:inline-block;vertical-align:middle;width:0.625rem;height:0.625rem}.ic-switch-icon-circle,.ic-switch-icon-line{stroke-width:1}.ic-switch-icon-circle{stroke:var(--ic-switch-indicator-off)}.ic-switch-icon-line{stroke:var(--ic-switch-indicator-on)}@media (prefers-reduced-motion: reduce){.ic-switch-toggle::before{transition-duration:0ms}}.ic-switch-input:checked+.ic-switch-toggle{background-color:var(--ic-switch-checked-bg);border:none}.ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-xl), -50%);background-color:var(--ic-switch-checked)}.ic-switch-input:not([disabled])+.ic-switch-toggle:hover::before{box-shadow:0 0 0 0.75rem var(--ic-switch-unchecked-bg-hover)}.ic-switch-input:not([disabled])+.ic-switch-toggle:active::before{box-shadow:0 0 0 0.75rem var(--ic-switch-unchecked-bg-pressed)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:hover::before{box-shadow:0 0 0 0.75rem var(--ic-switch-checked-bg-hover)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:active::before{box-shadow:0 0 0 0.75rem var(--ic-switch-checked-bg-pressed)}.ic-switch-input:focus:not([disabled])+.ic-switch-toggle,.ic-switch-input:focus-visible:not([disabled])+.ic-switch-toggle{box-shadow:var(--ic-border-focus)}.ic-switch-disabled{cursor:default}.ic-switch-disabled .ic-switch-icon-circle{stroke:var(--ic-switch-indicator-off-disabled)}.ic-switch-disabled .ic-switch-icon-line{stroke:var(--ic-switch-indicator-on-disabled)}.ic-switch-input:disabled+.ic-switch-toggle{background-color:var(--ic-switch-unchecked-bg-disabled);border:var(--ic-space-1px) dashed var(--ic-switch-unchecked-outline-disabled)}.ic-switch-input:disabled+.ic-switch-toggle::before{background-color:var(--ic-switch-unchecked-disabled)}.ic-switch-input:disabled:checked+.ic-switch-toggle{background-color:var(--ic-switch-checked-bg-disabled);border:var(--ic-border-width) dashed\n    var(--ic-switch-checked-outline-disabled)}.ic-switch-input:disabled:checked+.ic-switch-toggle::before{background-color:var(--ic-switch-checked)}.ic-switch-small{gap:var(--ic-space-xxxs)}.ic-switch-small .ic-switch-toggle{width:var(--ic-space-xxl);height:var(--ic-space-lg)}.ic-switch-small .ic-switch-toggle::before{width:var(--ic-space-md);height:var(--ic-space-md);left:var(--ic-space-xxs)}.ic-switch-small .ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-lg), -50%)}::slotted(*){margin-left:var(--ic-space-sm)}::slotted(svg){fill:var(--ic-switch-icon)}@media (forced-colors: active){.ic-switch-toggle::before,.ic-switch-input:checked+.ic-switch-toggle{border:var(--ic-border-hc)}.ic-switch-input:focus+.ic-switch-toggle{border-color:highlight;outline:var(--ic-space-xxxs) solid highlight}.ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(calc(var(--ic-space-xl) - 0.125rem), -50%)}.ic-switch-input:disabled+.ic-switch-toggle,.ic-switch-input:disabled:checked+.ic-switch-toggle,.ic-switch-input:disabled+.ic-switch-toggle::before{border-color:GrayText}.ic-switch-disabled .ic-switch-icon-circle,.ic-switch-disabled .ic-switch-icon-line{stroke:GrayText}}";
 const IcSwitchStyle0 = icSwitchCss;
@@ -99,16 +99,16 @@ const Switch = class {
         const { label, checkedState, size, disabled, name, value, hideLabel, helperText, inputId, theme, } = this;
         const isSmall = size === "small";
         helpers.renderHiddenInput(true, this.el, name, checkedState ? value : "", disabled);
-        return (index.h(index.Host, { key: 'c90330966be33431cd7487fe80b4c59e320ea3d4', class: {
+        return (index.h(index.Host, { key: '4654ef1f6473fdea79fd053879fa7bbf1699418d', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, index.h("label", { key: '21a29a36fc0ccc5c4b859eb7a0f0bb6e8dba9403', class: {
+            } }, index.h("label", { key: 'c6dca6f468eeb7c9e8151af1168fd8429c82d72b', class: {
                 "ic-switch-container": true,
                 "ic-switch-disabled": !!disabled,
                 "ic-switch-small": isSmall,
-            }, htmlFor: inputId }, !hideLabel && (index.h("ic-input-label", { key: 'f649d5e53635ad80eca02a73adfc149ca1272660', for: inputId, label: label, helperText: helperText, readonly: true, disabled: disabled, class: {
+            }, htmlFor: inputId }, !hideLabel && (index.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 && index.h("span", { key: '0ec406fdad2f6c31f8ee8ba77f34116c7b451929', class: "ic-switch-line-break" }), index.h("input", { key: '2b8e0940cefb3affdcfe08050c90a5a873f1959f', checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": helpers.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 }), index.h("span", { key: '02ee9bd811ee41b748114219c2c6677cf6ede77e', class: "ic-switch-toggle" }, index.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" }, index.h("line", { key: '5016993ed02e2bd5ce7d786f2b0137719c2433d6', class: "ic-switch-icon-line", x1: "9", y1: isSmall ? "2" : "1", x2: "9", y2: isSmall ? "8" : "9" })), index.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" }, index.h("circle", { key: '444696f8447b3ae211b61e4ec1cc7a5fa6c3c9e2', class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: isSmall ? "3.335" : "4.445" }))), index.h("slot", { key: '5f5e257885362d3a01958f50d7f57a1bdc873322', name: "right-adornment" }))));
+            } })), !hideLabel && index.h("span", { key: '74ec90ef32d23a02c7c6ceb7571e19d4c81091c8', class: "ic-switch-line-break" }), index.h("input", { key: 'f518a9a4db7eeb7ceafe5bb44c632ba6d3a9f64f', checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": helpers.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 }), index.h("span", { key: '72c49eeeb4bf26416dba25a612757a172a896bf0', class: "ic-switch-toggle" }, index.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" }, index.h("line", { key: '61f089501da929a5bec439c9b6c7bf3cd1233b6f', class: "ic-switch-icon-line", x1: "9", y1: isSmall ? "2" : "1", x2: "9", y2: isSmall ? "8" : "9" })), index.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" }, index.h("circle", { key: '54012f70a4ed7c1fba7a0679cab8bdc8c0179b80', class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: isSmall ? "3.335" : "4.445" }))), index.h("slot", { key: '89de0ba1f401d01ae0cf6cb9be70f802686577fd', name: "right-adornment" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ic-tab-context.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d337cd8a.js');
+const index = require('./index-0236cc4b.js');
 const CONTEXT_ID_ATTR = "context-id";
 const TabContext = class {
@@ -227,7 +227,7 @@ const TabContext = class {
         }
     }
     render() {
-        return index.h("slot", { key: '9a3bc1f2f3c3cfee3d5001e333c9c16cd8df323a' });
+        return index.h("slot", { key: '83e9c882369eebc5fd170b2ceabf423047cd14d6' });
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ic-tab-group.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-08a9ec1c.js');
+const index = require('./index-0236cc4b.js');
+const helpers = require('./helpers-7a599012.js');
 const icTabGroupCss = ":host{display:block;margin-bottom:var(--ic-space-md);border-bottom:var(--ic-space-1px) solid var(--ic-tab-bottom-border)}:host(.ic-tab-group-monochrome){border-bottom:var(--ic-space-1px) solid\n    var(--ic-tab-bottom-border-monochrome)}:host(.ic-tab-group-inline){margin-bottom:0;border-bottom:none}.tabs-container{display:flex;flex-direction:row}.tabs-container::-webkit-scrollbar{display:none}:host ic-horizontal-scroll{--splitter-color:var(--ic-tab-divider)}:host(.ic-tab-group-monochrome) ic-horizontal-scroll{--splitter-color:var(--ic-tab-divider-monochrome)}";
 const IcTabGroupStyle0 = icTabGroupCss;
@@ -25,11 +25,11 @@ const TabGroup = class {
     }
     render() {
         const { inline, theme, label, monochrome } = this;
-        return (index.h(index.Host, { key: 'b0eea28186a58d99f94366067954dcc562366f9d', role: "tablist", "aria-label": label, class: {
+        return (index.h(index.Host, { key: 'f42b97ec6fa8e200fbb5b5d2114f3f98d4f6ad35', role: "tablist", "aria-label": label, class: {
                 ["ic-tab-group-inline"]: !!inline,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-tab-group-monochrome"]: !!monochrome,
-            } }, index.h("ic-horizontal-scroll", { key: '090c8a2391c282ba6aae53f6617160f2a58ac481', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, index.h("div", { key: 'd3d5a2b2b61ba7353cb713cdc9e9c06ad579535b', class: "tabs-container" }, index.h("slot", { key: 'bf81f817067d514b487f92cb9ae88851777bdf2b' })))));
+            } }, index.h("ic-horizontal-scroll", { key: 'fdfe2de9cecf661c164dda34f523c73520f6bce6', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, index.h("div", { key: '6523acdad07d4b4a48dab269da3cca2bf3003899', class: "tabs-container" }, index.h("slot", { key: '032517ca94833114e39faf4ad5da3126197e780a' })))));
     }
     static get delegatesFocus() { return true; }
 };

package/dist/cjs/ic-tab-panel.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d337cd8a.js');
+const index = require('./index-0236cc4b.js');
 const icTabPanelCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-tab-panel-hidden){display:none}:host(:not(.ic-tab-panel-hidden)){display:block}:host{color:var(--ic-color-text-primary)}";
 const IcTabPanelStyle0 = icTabPanelCss;
@@ -28,10 +28,10 @@ const TabPanel = class {
     }
     render() {
         const { active, theme } = this;
-        return (index.h(index.Host, { key: '7103bebb99dcf021ea957f40dce81738542f8031', class: {
+        return (index.h(index.Host, { key: '629c66ac51b529d443ad613d61f6875958e9d1a2', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-tab-panel-hidden": !active,
-            }, role: "tabpanel", "aria-hidden": `${!active}` }, index.h("div", { key: '8ffa4a6096fae286bda779e1387fa979f8ddb5da' }, index.h("slot", { key: 'e7f5eb5e6d63f50c1ef0db45cfc85d0260d195f9' }))));
+            }, role: "tabpanel", "aria-hidden": `${!active}` }, index.h("div", { key: '1f018abefa14feeaa6a1de08aa3c84c78788e8ea' }, index.h("slot", { key: '86343dd2934fa698c26dfe09b88a4b9004b62184' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ic-tab.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-08a9ec1c.js');
+const index = require('./index-0236cc4b.js');
+const helpers = require('./helpers-7a599012.js');
-const icTabCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--indicator-initial-color:rgba(23 89 188 / 0%);--focus-indicator:var(--ic-border-focus);display:flex;align-items:center;border-radius:0;color:var(--ic-tab-label);--ic-typography-color:var(--ic-tab-label);height:2.5rem;padding:0 var(--ic-space-md);cursor:pointer;position:relative;border-bottom:var(--ic-space-xxs) solid var(--indicator-initial-color);gap:var(--ic-space-xs);transition:all var(--ic-easing-transition-fast)}::slotted([slot=\"icon\"]){fill:var(--ic-tab-icon)}:host(:focus){box-shadow:var(--focus-indicator);border-radius:var(--ic-border-radius)}:host(:focus-visible){outline:var(--ic-hc-focus-outline)}:host(:hover){background-color:var(--ic-tab-item-hover)}:host(:active){background-color:var(--ic-tab-item-pressed)}:host(.ic-tab-selected){border-bottom:var(--ic-space-xxs) solid var(--ic-tab-item)}:host(.ic-tab-disabled){pointer-events:none;color:var(--ic-architectural-300)}:host(.ic-tab-disabled) ic-typography{color:var(--ic-architectural-300);--ic-typography-color:var(--ic-architectural-300)}:host(.ic-tab-monochrome){color:var(--ic-tab-label-monochrome)}:host(.ic-tab-monochrome) ::slotted([slot=\"icon\"]){fill:var(--ic-tab-icon-monochrome)}:host(.ic-tab-monochrome.ic-tab-selected){border-bottom:var(--ic-space-xxs) solid var(--ic-tab-item-monochrome)}:host(.ic-tab-monochrome:hover){background-color:var(--ic-tab-item-hover-monochrome)}:host(.ic-tab-monochrome:active){background-color:var(--ic-tab-item-pressed-monochrome)}@media (prefers-reduced-motion: no-preference){:host(.ic-tab-selected.with-transition){transition:all var(--ic-easing-transition-slow),\n      border-color var(--ic-transition-duration-slow)}}.ic-tab-label{pointer-events:none;text-wrap:nowrap}::slotted(svg){fill:currentcolor}@media (forced-colors: active){:host{border-bottom:var(--ic-space-xxs) solid canvas}:host(.ic-tab-disabled){color:GrayText}:host(.ic-tab-disabled) ic-typography{color:GrayText;--ic-typography-color:GrayText}}";
+const icTabCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--indicator-initial-color:rgba(23 89 188 / 0%);--focus-indicator:var(--ic-border-focus);display:flex;align-items:center;border-radius:0;color:var(--ic-tab-label);--ic-typography-color:var(--ic-tab-label);height:2.5rem;padding:0 var(--ic-space-md);cursor:pointer;position:relative;border-bottom:var(--ic-space-xxs) solid var(--indicator-initial-color);gap:var(--ic-space-xs);transition:all var(--ic-easing-transition-fast)}::slotted([slot=\"icon\"]){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)}:host(:focus-visible){outline:var(--ic-hc-focus-outline)}:host(:hover){background-color:var(--ic-tab-item-hover)}:host(:active){background-color:var(--ic-tab-item-pressed)}:host(.ic-tab-selected){border-bottom:var(--ic-space-xxs) solid var(--ic-tab-item)}:host(.ic-tab-disabled){pointer-events:none;color:var(--ic-architectural-300)}:host(.ic-tab-disabled) ic-typography{--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)}:host(.ic-tab-monochrome:hover){background-color:var(--ic-tab-item-hover-monochrome)}:host(.ic-tab-monochrome:active){background-color:var(--ic-tab-item-pressed-monochrome)}@media (prefers-reduced-motion: no-preference){:host(.ic-tab-selected.with-transition){transition:all var(--ic-easing-transition-slow),\n      border-color var(--ic-transition-duration-slow)}}.ic-tab-label{pointer-events:none;text-wrap:nowrap}::slotted(svg){fill:currentcolor}@media (forced-colors: active){:host{border-bottom:var(--ic-space-xxs) solid canvas}:host(.ic-tab-disabled){color:GrayText}:host(.ic-tab-disabled) ic-typography{color:GrayText;--ic-typography-color:GrayText}}";
 const IcTabStyle0 = icTabCss;
 const Tab = class {

package/dist/cjs/ic-tab.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-tab.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,qxIAAqxI,CAAC;AACvyI,oBAAe,QAAQ;;MCwBV,GAAG;IALhB;;;;;;;QAMU,mBAAc,GAAY,KAAK,CAAC;QAEhC,oBAAe,GAAY,IAAI,CAAC;;QAKf,cAAS,GAAY,SAAS,CAAC;;;;QAKhD,aAAQ,GAAa,KAAK,CAAC;;QAO3B,eAAU,GAAa,KAAK,CAAC;;QAGZ,aAAQ,GAAa,KAAK,CAAC;;QAS5C,UAAK,GAAiB,SAAS,CAAC;QA8DhC,gBAAW,GAAG;YACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,SAAS,EAAE,IAAI,CAAC,SAAU;gBAC1B,QAAQ,EAAE,IAAI,CAAC,WAAW;aAC3B,CAAC,CAAC;YACH,IAAI,IAAI,CAAC,cAAc,EAAE;gBACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;oBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,SAAS,EAAE,IAAI,CAAC,SAAU;oBAC1B,QAAQ,EAAE,IAAI,CAAC,WAAW;iBAC3B,CAAC,CAAC;gBACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;QAEM,gBAAW,GAAG;YACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;gBACxB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;gBAE7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;oBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,SAAS,EAAE,IAAI,CAAC,SAAU;oBAC1B,QAAQ,EAAE,IAAI,CAAC,WAAW;iBAC3B,CAAC,CAAC;aACJ;SACF,CAAC;QAEM,oBAAe,GAAG;;;;YAIxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B,CAAC;KAuCH;IAvJC,oBAAoB;QAClBA,2BAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAkBD,oBAAoB;QAClB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB;IA2BD,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC/B;IAED,oBAAoB;;QAClB,MAAA,QAAQ;aACL,aAAa,CACZ,6BAA6B,IAAI,CAAC,SAAS,GAAG,CAC/C,0CACC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC1C;IAED,iBAAiB;QACfA,2BAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAED,kBAAkB;QAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;KAC9B;;;;IAMD,MAAM,QAAQ;QACZ,IAAI,IAAI,CAAC,EAAE,EAAE;YACX,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;SACjB;KACF;IAqCD,MAAM;QACJ,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,UAAU,EACV,WAAW,EACX,WAAW,EACX,eAAe,GAChB,GAAG,IAAI,CAAC;QACT,QACEC,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,eAAe;gBAC1C,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;gBAC/B,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;gBAC/B,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;gBAC1C,CAAC,mBAAmB,GAAG,CAAC,CAAC,UAAU;aACpC,EACD,IAAI,EAAC,KAAK,mBACK,GAAG,QAAQ,EAAE,EAC5B,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,eAAe,mBACb,GAAG,QAAQ,EAAE,EAC5B,QAAQ,EAAE,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,IAE1BC,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAIF,mEAAM,IAAI,EAAC,MAAM,GAAQ,EACzDA,4EAAe,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,OAAO,IACjDA,qEACEA,oEAAa,CACR,CACO,EACfE,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAIF,mEAAM,IAAI,EAAC,OAAO,GAAQ,CACtD,EACP;KACH;;;;;;;;;;","names":["removeDisabledFalse","h","Host","isSlotUsed"],"sources":["src/components/ic-tab/ic-tab.css?tag=ic-tab&encapsulation=shadow","src/components/ic-tab/ic-tab.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n --indicator-initial-color: rgba(23 89 188 / 0%);\n --focus-indicator: var(--ic-border-focus);\n\n display: flex;\n align-items: center;\n border-radius: 0;\n color: var(--ic-tab-label);\n\n --ic-typography-color: var(--ic-tab-label);\n\n height: 2.5rem;\n padding: 0 var(--ic-space-md);\n cursor: pointer;\n position: relative;\n border-bottom: var(--ic-space-xxs) solid var(--indicator-initial-color);\n gap: var(--ic-space-xs);\n transition: all var(--ic-easing-transition-fast);\n}\n\n::slotted([slot=\"icon\"]) {\n fill: var(--ic-tab-icon);\n}\n\n:host(:focus) {\n box-shadow: var(--focus-indicator);\n border-radius: var(--ic-border-radius);\n}\n\n:host(:focus-visible) {\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(:hover) {\n background-color: var(--ic-tab-item-hover);\n}\n\n:host(:active) {\n background-color: var(--ic-tab-item-pressed);\n}\n\n:host(.ic-tab-selected) {\n border-bottom: var(--ic-space-xxs) solid var(--ic-tab-item);\n}\n\n:host(.ic-tab-disabled) {\n pointer-events: none;\n color: var(--ic-architectural-300);\n}\n\n:host(.ic-tab-disabled) ic-typography {\n color: var(--ic-architectural-300);\n\n --ic-typography-color: var(--ic-architectural-300);\n}\n\n:host(.ic-tab-monochrome) {\n color: var(--ic-tab-label-monochrome);\n}\n\n:host(.ic-tab-monochrome) ::slotted([slot=\"icon\"]) {\n fill: var(--ic-tab-icon-monochrome);\n}\n\n:host(.ic-tab-monochrome.ic-tab-selected) {\n border-bottom: var(--ic-space-xxs) solid var(--ic-tab-item-monochrome);\n}\n\n:host(.ic-tab-monochrome:hover) {\n background-color: var(--ic-tab-item-hover-monochrome);\n}\n\n:host(.ic-tab-monochrome:active) {\n background-color: var(--ic-tab-item-pressed-monochrome);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n :host(.ic-tab-selected.with-transition) {\n transition: all var(--ic-easing-transition-slow),\n border-color var(--ic-transition-duration-slow);\n }\n}\n\n.ic-tab-label {\n pointer-events: none;\n text-wrap: nowrap;\n}\n\n::slotted(svg) {\n fill: currentcolor;\n}\n\n@media (forced-colors: active) {\n :host {\n border-bottom: var(--ic-space-xxs) solid canvas;\n }\n\n :host(.ic-tab-disabled) {\n color: GrayText;\n }\n\n :host(.ic-tab-disabled) ic-typography {\n color: GrayText;\n\n --ic-typography-color: GrayText;\n }\n}\n\n/* Add back in after storybook has the `color-scheme: light dark` code /\n\n/ @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n :host(ic-tab) .ic-tab-label {\n color: var(--ic-architectural-white);\n }\n :host(ic-tab.ic-tab-disabled) .ic-tab-label {\n color: inherit;\n }\n} /\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n Method,\n Watch,\n} from \"@stencil/core\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { isSlotUsed, removeDisabledFalse } from \"../../utils/helpers\";\n\n/\n @slot icon - Content will be rendered next to the tab label.\n * @slot badge - Badge component displayed inline with the tab.\n /\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n private focusFromClick: boolean = false;\n private focusTabId: string;\n private isInitialRender: boolean = true;\n\n @Element() el: HTMLIcTabElement;\n\n /* @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /* @internal Determines whether black variant of the tabs should be displayed. /\n @Prop() monochrome?: boolean = false;\n\n /* @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. /\n @Prop({ reflect: true }) selected?: boolean = false;\n\n /* @internal The shared ID between panel and tab. /\n @Prop({ reflect: true }) tabId!: string;\n\n /* @internal The position of the tab inside the tabs array in context. /\n @Prop() tabPosition!: number;\n\n /* @internal Determines whether the light or dark variant of the tabs should be displayed. /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n @Watch(\"disabled\")\n disabledWatchHandler(): void {\n this.tabEnabled.emit();\n }\n\n /\n @internal Emitted when a tab is selected.\n /\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Emitted when a tab is dynamically created.\n /\n @Event() tabCreated: EventEmitter<HTMLIcTabElement>;\n\n /\n @internal Emitted when a tab's disabled prop changes\n /\n @Event() tabEnabled: EventEmitter<void>;\n\n /\n @internal Emitted when a tab is focussed.\n /\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Emitted when a tab is unmounted.\n /\n @Event() tabRemoved: EventEmitter<void>;\n\n connectedCallback(): void {\n this.tabCreated.emit(this.el);\n }\n\n disconnectedCallback(): void {\n document\n .querySelector<HTMLIcTabContextElement>(\n `ic-tab-context[context-id=${this.contextId}]`\n )\n ?.tabRemovedHandler(!!this.focusTabId);\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n /\n Sets focus on the tab.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el) {\n this.el.focus();\n }\n }\n\n private handleClick = () => {\n this.tabClick.emit({\n tabId: this.tabId,\n contextId: this.contextId!,\n position: this.tabPosition,\n });\n if (this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId!,\n position: this.tabPosition,\n });\n this.focusFromClick = false;\n }\n };\n\n private handleFocus = () => {\n if (!this.focusFromClick) {\n this.focusTabId = this.tabId;\n\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId!,\n position: this.tabPosition,\n });\n }\n };\n\n private handleMouseDown = () => {\n //set flag so that focus gets handled after click\n //there is a timing issue where a long click only causes focus to happen & not the click\n //the focus does need to be a separate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n render() {\n const {\n disabled,\n selected,\n theme,\n monochrome,\n handleClick,\n handleFocus,\n handleMouseDown,\n } = this;\n return (\n <Host\n class={{\n [\"with-transition\"]: !this.isInitialRender,\n [\"ic-tab-selected\"]: !!selected,\n [\"ic-tab-disabled\"]: !!disabled,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [\"ic-tab-monochrome\"]: !!monochrome,\n }}\n role=\"tab\"\n aria-selected={`${selected}`}\n onClick={handleClick}\n onFocus={handleFocus}\n onMouseDown={handleMouseDown}\n aria-disabled={`${disabled}`}\n tabindex={selected ? 0 : -1}\n >\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n <ic-typography class=\"ic-tab-label\" variant=\"label\">\n <span>\n <slot></slot>\n </span>\n </ic-typography>\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-tab.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","h","Host","isSlotUsed"],"sources":["src/components/ic-tab/ic-tab.css?tag=ic-tab&encapsulation=shadow","src/components/ic-tab/ic-tab.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n --indicator-initial-color: rgba(23 89 188 / 0%);\n --focus-indicator: var(--ic-border-focus);\n\n display: flex;\n align-items: center;\n border-radius: 0;\n color: var(--ic-tab-label);\n\n --ic-typography-color: var(--ic-tab-label);\n\n height: 2.5rem;\n padding: 0 var(--ic-space-md);\n cursor: pointer;\n position: relative;\n border-bottom: var(--ic-space-xxs) solid var(--indicator-initial-color);\n gap: var(--ic-space-xs);\n transition: all var(--ic-easing-transition-fast);\n}\n\n::slotted([slot=\"icon\"]) {\n fill: var(--ic-tab-icon);\n}\n\n:host(.ic-tab-disabled) ::slotted([slot=\"icon\"]) {\n fill: var(--ic-tab-icon-disabled);\n}\n\n:host(:focus) {\n box-shadow: var(--focus-indicator);\n border-radius: var(--ic-border-radius);\n}\n\n:host(:focus-visible) {\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(:hover) {\n background-color: var(--ic-tab-item-hover);\n}\n\n:host(:active) {\n background-color: var(--ic-tab-item-pressed);\n}\n\n:host(.ic-tab-selected) {\n border-bottom: var(--ic-space-xxs) solid var(--ic-tab-item);\n}\n\n:host(.ic-tab-disabled) {\n pointer-events: none;\n color: var(--ic-architectural-300);\n}\n\n:host(.ic-tab-disabled) ic-typography {\n --ic-typography-color: var(--ic-tab-label-disabled);\n}\n\n:host(.ic-tab-monochrome) {\n color: var(--ic-tab-label-monochrome);\n}\n\n:host(.ic-tab-monochrome.ic-tab-disabled) ic-typography {\n color: var(--ic-tab-label-monochrome-disabled);\n}\n\n:host(.ic-tab-monochrome) ::slotted([slot=\"icon\"]) {\n fill: var(--ic-tab-icon-monochrome);\n}\n\n:host(.ic-tab-monochrome.ic-tab-disabled) ::slotted([slot=\"icon\"]) {\n fill: var(--ic-tab-icon-monochrome-disabled);\n}\n\n:host(.ic-tab-monochrome.ic-tab-selected) {\n border-bottom: var(--ic-space-xxs) solid var(--ic-tab-item-monochrome);\n}\n\n:host(.ic-tab-monochrome:hover) {\n background-color: var(--ic-tab-item-hover-monochrome);\n}\n\n:host(.ic-tab-monochrome:active) {\n background-color: var(--ic-tab-item-pressed-monochrome);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n :host(.ic-tab-selected.with-transition) {\n transition: all var(--ic-easing-transition-slow),\n border-color var(--ic-transition-duration-slow);\n }\n}\n\n.ic-tab-label {\n pointer-events: none;\n text-wrap: nowrap;\n}\n\n::slotted(svg) {\n fill: currentcolor;\n}\n\n@media (forced-colors: active) {\n :host {\n border-bottom: var(--ic-space-xxs) solid canvas;\n }\n\n :host(.ic-tab-disabled) {\n color: GrayText;\n }\n\n :host(.ic-tab-disabled) ic-typography {\n color: GrayText;\n\n --ic-typography-color: GrayText;\n }\n}\n\n/* Add back in after storybook has the `color-scheme: light dark` code /\n\n/ @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n :host(ic-tab) .ic-tab-label {\n color: var(--ic-architectural-white);\n }\n :host(ic-tab.ic-tab-disabled) .ic-tab-label {\n color: inherit;\n }\n} /\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n Method,\n Watch,\n} from \"@stencil/core\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { isSlotUsed, removeDisabledFalse } from \"../../utils/helpers\";\n\n/\n @slot icon - Content will be rendered next to the tab label.\n * @slot badge - Badge component displayed inline with the tab.\n /\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n private focusFromClick: boolean = false;\n private focusTabId: string;\n private isInitialRender: boolean = true;\n\n @Element() el: HTMLIcTabElement;\n\n /* @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /* @internal Determines whether black variant of the tabs should be displayed. /\n @Prop() monochrome?: boolean = false;\n\n /* @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. /\n @Prop({ reflect: true }) selected?: boolean = false;\n\n /* @internal The shared ID between panel and tab. /\n @Prop({ reflect: true }) tabId!: string;\n\n /* @internal The position of the tab inside the tabs array in context. /\n @Prop() tabPosition!: number;\n\n /* @internal Determines whether the light or dark variant of the tabs should be displayed. /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n @Watch(\"disabled\")\n disabledWatchHandler(): void {\n this.tabEnabled.emit();\n }\n\n /\n @internal Emitted when a tab is selected.\n /\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Emitted when a tab is dynamically created.\n /\n @Event() tabCreated: EventEmitter<HTMLIcTabElement>;\n\n /\n @internal Emitted when a tab's disabled prop changes\n /\n @Event() tabEnabled: EventEmitter<void>;\n\n /\n @internal Emitted when a tab is focussed.\n /\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Emitted when a tab is unmounted.\n /\n @Event() tabRemoved: EventEmitter<void>;\n\n connectedCallback(): void {\n this.tabCreated.emit(this.el);\n }\n\n disconnectedCallback(): void {\n document\n .querySelector<HTMLIcTabContextElement>(\n `ic-tab-context[context-id=${this.contextId}]`\n )\n ?.tabRemovedHandler(!!this.focusTabId);\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n /\n Sets focus on the tab.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el) {\n this.el.focus();\n }\n }\n\n private handleClick = () => {\n this.tabClick.emit({\n tabId: this.tabId,\n contextId: this.contextId!,\n position: this.tabPosition,\n });\n if (this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId!,\n position: this.tabPosition,\n });\n this.focusFromClick = false;\n }\n };\n\n private handleFocus = () => {\n if (!this.focusFromClick) {\n this.focusTabId = this.tabId;\n\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId!,\n position: this.tabPosition,\n });\n }\n };\n\n private handleMouseDown = () => {\n //set flag so that focus gets handled after click\n //there is a timing issue where a long click only causes focus to happen & not the click\n //the focus does need to be a separate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n render() {\n const {\n disabled,\n selected,\n theme,\n monochrome,\n handleClick,\n handleFocus,\n handleMouseDown,\n } = this;\n return (\n <Host\n class={{\n [\"with-transition\"]: !this.isInitialRender,\n [\"ic-tab-selected\"]: !!selected,\n [\"ic-tab-disabled\"]: !!disabled,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [\"ic-tab-monochrome\"]: !!monochrome,\n }}\n role=\"tab\"\n aria-selected={`${selected}`}\n onClick={handleClick}\n onFocus={handleFocus}\n onMouseDown={handleMouseDown}\n aria-disabled={`${disabled}`}\n tabindex={selected ? 0 : -1}\n >\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n <ic-typography class=\"ic-tab-label\" variant=\"label\">\n <span>\n <slot></slot>\n </span>\n </ic-typography>\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ic-text-field.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-08a9ec1c.js');
+const index = require('./index-0236cc4b.js');
+const helpers = require('./helpers-7a599012.js');
-const icTextFieldCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--ic-input-label-helpertext-padding:var(--ic-space-xxs);--border-color:var(--ic-text-field-border-neutral);--border-color-hover:var(--ic-text-field-border-neutral-hover);--border-color-pressed:var(--ic-text-field-border-neutral-pressed);--border-color-disabled:var(--ic-text-field-border-disabled);--border-color-error:var(--ic-text-field-border-error);--border-color-error-hover:var(--ic-text-field-border-error-hover);--border-color-error-pressed:var(--ic-text-field-border-error-pressed);--border-color-success:var(--ic-text-field-border-success);--border-color-success-hover:var(--ic-text-field-border-success-hover);--border-color-success-pressed:var(--ic-text-field-border-success-pressed);--border-color-warning:var(--ic-text-field-border-warning);--border-color-warning-hover:var(--ic-text-field-border-warning-hover);--border-color-warning-pressed:var(--ic-text-field-border-warning-pressed);--ic-input-label-text-color:var(--ic-text-field-label);--ic-input-label-helper-text-color:var(--ic-text-field-subtitle);--ic-input-validation-status-text-color:var(--ic-text-field-state-text);--ic-input-validation-error:var(--ic-text-field-state-icon-error);--ic-input-validation-warning-icon-color:var(\n    --ic-text-field-state-icon-warning\n  );--ic-input-validation-success-icon-color:var(\n    --ic-text-field-state-icon-success\n  );--ic-input-component-container-success-icon-inline-color:var(\n    --ic-text-field-state-icon-success\n  )}:host(.ic-text-field-disabled){--ic-input-label-text-color:var(--ic-text-field-label-disabled);--ic-input-label-helper-text-color:var(--ic-text-field-subtitle-disabled);--text-field-placeholder-color:var(\n    --ic-text-field-text-area-placeholder-text-disabled\n  )}:host(.ic-text-field-full-width){width:100%}::-moz-placeholder{color:var(\n    --text-field-placeholder-color,\n    var(--ic-text-field-placeholder-text)\n  );opacity:1}::placeholder{color:var(\n    --text-field-placeholder-color,\n    var(--ic-text-field-placeholder-text)\n  );opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);color:var(--text-field-text-color, var(--ic-text-field-text));background-color:var(--input-bg-color, var(--ic-text-field-background));line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs);caret-color:var(\n    --text-field-typing-cursor,\n    var(--ic-text-field-typing-cursor)\n  )}textarea{min-height:var(--ic-space-lg);resize:vertical;padding-top:0.375rem}input:focus,textarea:focus{border:0;outline:0}input:disabled,textarea:disabled{color:var(\n    --text-field-disabled-text-color,\n    var(--ic-text-field-text-disabled)\n  )}input.readonly,textarea.readonly{color:var(--ic-text-field-read-only-input-text-internal)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=\"number\"]{-moz-appearance:textfield}textarea.no-resize{resize:none}.char-count-text{--ic-typography-color:var(--ic-text-field-character-limit);padding-right:var(--ic-space-xxxs)}:host(.ic-text-field-disabled) .char-count-text{--ic-typography-color:var(--ic-text-field-character-limit-disabled)}.no-left-pad{padding-left:0}::slotted([slot=\"icon\"]){fill:var(--ic-text-field-text-disabled)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-text-field-input-internal-icon)}.char-count{margin-right:calc(-1 * var(--ic-space-xxxs))}.remaining-char-count-desc{position:absolute;left:-9999px}input[type=\"search\"]::-webkit-search-cancel-button,input[type=\"search\"]::-webkit-search-decoration,input[type=\"search\"]::-webkit-search-results-button,input[type=\"search\"]::-webkit-search-results-decoration{display:none}input[type=\"search\"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (forced-colors: active){input.readonly,textarea.readonly{color:canvastext}.has-value ::slotted([slot=\"icon\"]){fill:currentcolor}}";
+const icTextFieldCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--ic-input-label-helpertext-padding:var(--ic-space-xxs);--border-color:var(--ic-text-field-border-neutral);--border-color-hover:var(--ic-text-field-border-neutral-hover);--border-color-pressed:var(--ic-text-field-border-neutral-pressed);--border-color-disabled:var(--ic-text-field-border-disabled);--border-color-error:var(--ic-text-field-border-error);--border-color-error-hover:var(--ic-text-field-border-error-hover);--border-color-error-pressed:var(--ic-text-field-border-error-pressed);--border-color-success:var(--ic-text-field-border-success);--border-color-success-hover:var(--ic-text-field-border-success-hover);--border-color-success-pressed:var(--ic-text-field-border-success-pressed);--border-color-warning:var(--ic-text-field-border-warning);--border-color-warning-hover:var(--ic-text-field-border-warning-hover);--border-color-warning-pressed:var(--ic-text-field-border-warning-pressed);--ic-input-label-text-color:var(--ic-text-field-label);--ic-input-label-helper-text-color:var(--ic-text-field-subtitle);--ic-input-validation-status-text-color:var(--ic-text-field-state-text);--ic-input-validation-error:var(--ic-text-field-state-icon-error);--ic-input-validation-warning-icon-color:var(\n    --ic-text-field-state-icon-warning\n  );--ic-input-validation-success-icon-color:var(\n    --ic-text-field-state-icon-success\n  );--ic-input-component-container-success-icon-inline-color:var(\n    --ic-text-field-state-icon-success\n  )}:host(.ic-text-field-disabled){--ic-input-label-text-color:var(--ic-text-field-label-disabled);--ic-input-label-helper-text-color:var(--ic-text-field-subtitle-disabled);--text-field-placeholder-color:var(\n    --ic-text-field-text-area-placeholder-text-disabled\n  )}:host(.ic-text-field-full-width){width:100%}::-moz-placeholder{color:var(\n    --text-field-placeholder-color,\n    var(--ic-text-field-placeholder-text)\n  );opacity:1}::placeholder{color:var(\n    --text-field-placeholder-color,\n    var(--ic-text-field-placeholder-text)\n  );opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);color:var(--text-field-text-color, var(--ic-text-field-text));background-color:var(--input-bg-color, var(--ic-text-field-background));line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs);caret-color:var(\n    --text-field-typing-cursor,\n    var(--ic-text-field-typing-cursor)\n  )}textarea{min-height:var(--ic-space-lg);resize:vertical;padding-top:0.375rem}input:focus,textarea:focus{border:0;outline:0}input:disabled,textarea:disabled{color:var(\n    --text-field-disabled-text-color,\n    var(--ic-text-field-text-disabled)\n  )}input.readonly,textarea.readonly{color:var(--ic-text-field-read-only-input-text-internal);background:transparent}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=\"number\"]{-moz-appearance:textfield}textarea.no-resize{resize:none}.char-count-text{--ic-typography-color:var(--ic-text-field-character-limit);padding-right:var(--ic-space-xxxs)}:host(.ic-text-field-disabled) .char-count-text{--ic-typography-color:var(--ic-text-field-character-limit-disabled)}.no-left-pad{padding-left:0}::slotted([slot=\"icon\"]){fill:var(--ic-text-field-text-disabled)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-text-field-input-internal-icon)}.char-count{margin-right:calc(-1 * var(--ic-space-xxxs))}.remaining-char-count-desc{position:absolute;left:-9999px}input[type=\"search\"]::-webkit-search-cancel-button,input[type=\"search\"]::-webkit-search-decoration,input[type=\"search\"]::-webkit-search-results-button,input[type=\"search\"]::-webkit-search-results-decoration{display:none}input[type=\"search\"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (forced-colors: active){input.readonly,textarea.readonly{color:canvastext}.has-value ::slotted([slot=\"icon\"]){fill:currentcolor}}";
 const IcTextFieldStyle0 = icTextFieldCss;
 let inputIds = 0;
@@ -87,10 +87,28 @@ const TextField = class {
          * 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.
          */
@@ -144,7 +162,7 @@ const TextField = class {
          */
         this.validationStatus = "";
         /**
-         * The validation state - e.g. 'error' | 'warning' | 'success'.
+         * The text to display as the validation message.
          */
         this.validationText = "";
         /**
@@ -304,7 +322,7 @@ const TextField = class {
         (_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 ||
@@ -316,13 +334,13 @@ const TextField = class {
                 : helpers.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 ||
@@ -345,14 +363,14 @@ const TextField = class {
         hiddenInput
             ? helpers.renderHiddenInput(true, this.el, name, value, disabledMode)
             : helpers.removeHiddenInput(this.el);
-        return (index.h(index.Host, { key: '9175054afc7f5ab0f44c2c02d73a209676690f26', class: {
+        return (index.h(index.Host, { key: '86521a8f619d3f6d09b60fc5251ac153e7f3238d', class: {
                 "ic-text-field-full-width": !!fullWidth,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-text-field-disabled": !!disabledMode,
-            } }, index.h("ic-input-container", { key: '2cf32636f95f8ec80f25424483fcdf2afe262534', readonly: readonly, disabled: disabledMode }, !this.hideLabel && (index.h("ic-input-label", { key: '3ee4d01a7e1705d1bdd1e88dc734a16f990c35c9', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), index.h("ic-input-component-container", { key: 'd6300116fc334d565681cedb6c2e4b637dd8fe5f', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (index.h("span", { key: '2dae55d8265539a3c1b1975ebb63015fb2b66ceb', class: {
+            } }, index.h("ic-input-container", { key: '2096846a987f396e8786d916f6eca14b277dd6a3', readonly: readonly, disabled: disabledMode }, !this.hideLabel && (index.h("ic-input-label", { key: '1bb84c2156b0d8af5bba67a06a8680b8cd44b7d0', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), index.h("ic-input-component-container", { key: 'a1eb781a88dbfbed7a7b084344fd0ca685e35b99', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (index.h("span", { key: '96639821c5f5ab88716be7b01a66462ae92ab358', class: {
                 readonly: !!readonly,
                 "has-value": this.getNumberOfCharacters(value) > 0,
-            }, slot: "left-icon" }, index.h("slot", { key: 'c363bc9c876a3be7db91dd1afd8eac8013f176a2', name: "icon" }))), !multiline ? (index.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" }, index.h("slot", { key: 'b3381ff815a38032d600619bc8245c01d8aa1dd7', name: "icon" }))), !multiline ? (index.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,
@@ -360,19 +378,19 @@ const TextField = class {
                 "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))), helpers.isSlotUsed(el, "clear-button") && (index.h("slot", { key: 'f08406702167a6155246e26df7fe64ef06b82976', name: "clear-button" })), helpers.isSlotUsed(el, "search-submit-button") && (index.h("slot", { key: '58c8ed7ed396953f0d4dff0aba462b10e58bd78b', name: "search-submit-button" }))), helpers.isSlotUsed(el, "menu") && index.h("slot", { key: '15496f93b502c8b0d55b0a2da6622e8ab425ef49', name: "menu" }), (!helpers.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))), helpers.isSlotUsed(el, "clear-button") && (index.h("slot", { key: '5e5bdb069b688fa77e1c5c91f38e82a4e3dd40bc', name: "clear-button" })), helpers.isSlotUsed(el, "search-submit-button") && (index.h("slot", { key: '2c0304de79f15bb6a42c96541a7ac51b65b4a5ec', name: "search-submit-button" }))), helpers.isSlotUsed(el, "menu") && index.h("slot", { key: 'c1d7d1239091fcc56e807b4dabcd1310a87e098e', name: "menu" }), (!helpers.isEmptyString(validationStatus) ||
             !helpers.isEmptyString(validationText) ||
             maxNumChars > 0 ||
             maxValueExceeded ||
             maxCharactersWarning ||
             minCharactersUnattained ||
             minValueUnattained) &&
-            !validationInlineInternal && (index.h("ic-input-validation", { key: '675805dbde2426192861938a009728af5d0ea56f', status: this.hasStatus(currentStatus) === false ||
+            !validationInlineInternal && (index.h("ic-input-validation", { key: 'a7e01f7f27d62f34168bc3646fa6b7b4045eac3c', status: this.hasStatus(currentStatus) === false ||
                 (currentStatus === helpers.IcInformationStatus.Success &&
                     validationInline) ||
                 validationInlineInternal
                 ? ""
-                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (index.h("div", { key: '92b805a2b9b4d87347f767c750c7d9ce8be6c909', slot: "validation-message-adornment" }, !hideCharCount && (index.h("ic-typography", { key: '2a24743dc253ab95c360c2ae78e559c0437202dc', variant: "caption", class: "char-count-text" }, index.h("span", { key: 'a71f41c5313d828123d275a41ae694ec2c0b2f5e', class: "char-count" }, numChars, "/", maxNumChars))), index.h("span", { key: '9c6d7a87b3d4a0f2baf9b1f732f0940d5e0fbe7b', class: "remaining-char-count-desc", "aria-live": "polite" }, hiddenRemainingCharCountDesc), index.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 && (index.h("div", { key: '083cc90a38f57ee6b4ec82536e8dc432fed387b6', slot: "validation-message-adornment" }, !hideCharCount && (index.h("ic-typography", { key: 'ca3571863c4e9c47fb1a8e06eb5ebf700e640fd6', variant: "caption", class: "char-count-text" }, index.h("span", { key: 'f9435768788239f7f7e8ef46a80406ba5da9b525', class: "char-count" }, numChars, "/", maxNumChars))), index.h("span", { key: 'd0f9fef8adb1d92d6d5479995fe3f3b28202dbe1', class: "remaining-char-count-desc", "aria-live": "polite" }, hiddenRemainingCharCountDesc), index.h("span", { key: '892a02dca5b1deeecfc774ee56ca74830644b18a', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters."))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {