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

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

@@ -57,29 +57,29 @@ export class Step {
         // STATUS ICON FOR COMPACT STEP
         let statusIcon;
         if (this.type === "completed" || this.compactStepStyling === "completed") {
-            statusIcon = (h("span", { key: 'd194d450b8be634e0305a9d69148b8e01c0ad921', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
+            statusIcon = (h("span", { key: '037cdd093417bdeff6f9de2795a2c0a29e23db63', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
         }
         else if (this.type === "disabled" ||
             this.compactStepStyling === "disabled") {
-            statusIcon = (h("span", { key: '37abea1127139c235751e0e5fa159c0123e26045', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
+            statusIcon = (h("span", { key: '115e2d476464fb4b4c48516e6cfc108928e6ebdc', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
         }
         // COMPACT STEP COMPONENT
-        const compactStep = (h("div", { key: 'b085f35dc01eaca3182762eaa6b985fcdbcc36f6', class: {
+        const compactStep = (h("div", { key: 'ff799c9a5ac470cd917ecf47896c07d3e8ad6a55', class: {
                 ["step"]: true,
                 ["current"]: !!this.current,
                 [`compact-step-${this.compactStepStyling}`]: !!this.compactStepStyling,
                 ["disabled"]: this.type === "disabled" || this.compactStepStyling === "disabled",
-            } }, h("ic-loading-indicator", { key: '76d67bd6140d55727e79410263986a6a8b7e8f39', class: {
+            } }, h("ic-loading-indicator", { key: 'd96083b68c5bd6c34adb1062ab508adf2f3274c0', class: {
                 "compact-step-progress-indicator": true,
                 "not-required": this.type === "disabled" ||
                     this.compactStepStyling === "disabled",
-            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { key: 'e1a0ab7ef462c6f9db62d1d5cc21518230c31531', class: "heading-area" }, h("ic-typography", { key: 'cebf670137674ac37747fea2e320d36a465cac42', variant: "h4", class: "heading" }, this.heading), h("div", { key: 'c9a9a5ae0bef717bbdb1cd690596dac06b6a73e2', class: "info-line" }, h("ic-typography", { key: '311760b3af071f4d9864954fb727a9c9b1c7c00d', variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { key: '87135f130983c602f8909da57c12c2ae02d3655d', class: "visually-hidden" }, " steps")), (this.subheading ||
+            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { key: '1f6b95b5b99ab252f68e3501f6909b9b8240546b', class: "heading-area" }, h("ic-typography", { key: '8de4cab1512b2406d9d6e38a34026dd786727c56', variant: "h4", class: "heading" }, this.heading), h("div", { key: 'f0aac2d40c6d7c75dba1a8ea061fe70fde1684f8', class: "info-line" }, h("ic-typography", { key: 'd7802839d057c38f72319063302e0f556b4b8799', variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { key: 'b1f8716701f30af917c056dea0b77b23cbb86a09', class: "visually-hidden" }, " steps")), (this.subheading ||
             this.type === "completed" ||
             this.type === "disabled" ||
             (this.variant === "compact" &&
                 !!this.compactStepStyling &&
                 this.compactStepStyling !== "active") ||
-            !!this.status) && (h("div", { key: '0a5a230fd701a8a589dc774d7d5a11ab4a8f22ec', class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (h("ic-typography", { key: '60f32a581e356b2b86616c0a4d6895e2a765e661', variant: "caption" }, this.subheading !== null && isPropDefined(this.subheading)
+            !!this.status) && (h("div", { key: '230dc72e7a579193f8cf1a8552d1ef5749b1d04c', class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (h("ic-typography", { key: '4a089ec12dc7e4f77d3469e08e4ef77b3d3144a3', variant: "caption" }, this.subheading !== null && isPropDefined(this.subheading)
             ? this.subheading
             : this.type === "disabled" ||
                 (this.variant === "compact" &&
@@ -92,26 +92,26 @@ export class Step {
         // ICON FOR DEFAULT STEP
         let icon;
         if (this.type !== "completed") {
-            icon = (h("ic-typography", { key: '316ca02b237660b9ce7dfc2cfa7ee7a9a405850f', variant: "subtitle-small" }, h("span", { key: '28c285e0de19f766bde7540a84a7b6f92f2722f6', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+            icon = (h("ic-typography", { key: '74584e3b8e9d2d3554723b3b7f23ca9fd2637800', variant: "subtitle-small" }, h("span", { key: '60a00009b73f622ff0d040d09d9b569b28be9cde', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
         }
         else {
-            icon = (h("div", { key: '8a57441521368e3e48abda6607fa7ed834b76539', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '244a4c8979621768867cb1b876ad41c96368f048', class: "check-icon", innerHTML: checkIcon })));
+            icon = (h("div", { key: 'fae4dd9d0eab63264e9aed6e7b659da9d3ff511e', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '7f83174116e62e676940ca9ec23561250803d15f', class: "check-icon", innerHTML: checkIcon })));
         }
         // STEP CONNECT FOR DEFAULT STEP
-        const partialBar = this.type === "current" && (h("div", { key: 'e0e0134d5e347c12d2db12c7a7c1fd2f796e680a', class: "step-connect-inner" }));
-        const finalStep = !this.lastStep && (h("div", { key: '87b3f5541a9fa51784d054ab418ffd270aa5d131', class: {
+        const partialBar = this.type === "current" && (h("div", { key: 'eb8b63c2d0af8d883c09a56b8d3c47afac3e5f81', class: "step-connect-inner" }));
+        const finalStep = !this.lastStep && (h("div", { key: 'cc6e694712782a11aeccc78a0a4f06f39fec3819', class: {
                 ["step-connect"]: true,
                 ["aligned-full-width"]: !!(((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("ic-stepper-default")) &&
                     !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
             } }, partialBar));
         // DEFAULT STEP COMPONENT
-        const defaultStep = (h("div", { key: '942e50008de22ed3bf9cfc6f5878fe20780224d4', class: {
+        const defaultStep = (h("div", { key: '91c97641133852cc4a5f4d3b8d1cae4996789cc3', class: {
                 ["step"]: true,
                 [`${this.type}`]: true,
-            } }, h("div", { key: 'ea7466090610c4ca42426a95c5b5eea07c0a3e20', class: "step-top" }, h("div", { key: '8e7a36165cdb25aa4939e7dad24211b6f42deb9b', class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (h("div", { key: 'd6e7a5a41587217e8e29390f7fdccc06c2c772d8', class: "heading-area" }, this.heading && (h("ic-typography", { key: '235524fbe7fc0dd3991dfef222bdf29dfe80bedc', variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (h("ic-typography", { key: '2d29260629ca84280981ceedc7196fd0be347c3b', variant: "caption", class: "subheading" }, this.subheading !== null && isPropDefined(this.subheading)
+            } }, h("div", { key: '6ebf175f84536a4ab79e3a130e952b592ec9e965', class: "step-top" }, h("div", { key: '23f9b5a7cd4fb0908b7f65ea55c192ee3a2964de', class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (h("div", { key: '7be8f0257f73a29c0ff6f6bf31830a40cb3fe81f', class: "heading-area" }, this.heading && (h("ic-typography", { key: 'fd775a67501c4bd5db9498fc8fa57404f2a51163', variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (h("ic-typography", { key: '2a857f45ff18834e6199a56330e68d40b034afae', variant: "caption", class: "subheading" }, this.subheading !== null && isPropDefined(this.subheading)
             ? this.subheading
             : stepStatus))))));
-        return (h(Host, { key: 'c8b18833e54cb4cf0eac30b3f3b487a53ef9392f', role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.type === "current") && "step", class: {
+        return (h(Host, { key: 'ad0c3301d762c11a2a2c78c3a25b4581dca348e9', role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.type === "current") && "step", class: {
                 ["aligned-full-width"]: !!(((_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains("ic-stepper-default")) &&
                     !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
                 [`ic-step-${this.variant}`]: true,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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