@ukic/canary-web-components 2.0.0-canary.23 → 2.0.0-canary.24

package/dist/esm/ic-pagination_4.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-93509377.js';
-import { k as removeDisabledFalse, a as onComponentRequiredPropUndefined, M as capitalize, c as checkSlotInChildMutations, E as getLabelFromValue, B as getFilteredMenuOptions, n as removeFormResetListener, x as inheritAttributes, m as addFormResetListener, p as renderHiddenInput, s as getInputDescribedByText, t as hasValidationStatus, N as isMobileOrTablet, y as IC_INHERITED_ARIA, O as debounceEvent, i as isSlotUsed, F as isEmptyString } from './helpers-0f5fe29b.js';
+import { k as removeDisabledFalse, a as onComponentRequiredPropUndefined, M as capitalize, j as checkSlotInChildMutations, E as getLabelFromValue, B as getFilteredMenuOptions, n as removeFormResetListener, x as inheritAttributes, m as addFormResetListener, p as renderHiddenInput, s as getInputDescribedByText, t as hasValidationStatus, N as isMobileOrTablet, y as IC_INHERITED_ARIA, O as debounceEvent, i as isSlotUsed, F as isEmptyString } from './helpers-886489d5.js';
 import { I as IcThemeForegroundEnum, a as IcInformationStatus } from './types-f605c21c.js';
 
 const paginationNextPrevious = `<svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -72,9 +72,9 @@ const Pagination = class {
         this.midItems = [];
         this.startEllipsis = false;
         this.startItems = [];
-        this.adjacentPageCount = 1;
+        this.adjacentCount = 1;
         this.appearance = "default";
-        this.boundaryPageCount = 1;
+        this.boundaryCount = 1;
         this.defaultPage = 1;
         this.disabled = false;
         this.hideCurrentPage = false;
@@ -84,14 +84,14 @@ const Pagination = class {
         this.type = "simple";
         this.currentPage = this.defaultPage;
     }
-    watchAdjacentPageCountHandler() {
-        if (this.adjacentPageCount > 2) {
-            this.adjacentPageCount = 2;
+    watchAdjacentCountHandler() {
+        if (this.adjacentCount > 2) {
+            this.adjacentCount = 2;
         }
     }
-    watchBoundaryPageCountHandler() {
-        if (this.boundaryPageCount > 2) {
-            this.boundaryPageCount = 2;
+    watchBoundaryCountHandler() {
+        if (this.boundaryCount > 2) {
+            this.boundaryCount = 2;
         }
     }
     watchNumberPagesHandler() {
@@ -118,8 +118,7 @@ const Pagination = class {
         let midEnd;
         let startEllipsis = false;
         let endEllipsis = false;
-        if (this.pages <=
-            this.boundaryPageCount * 2 + this.adjacentPageCount * 2 + 3) {
+        if (this.pages <= this.boundaryCount * 2 + this.adjacentCount * 2 + 3) {
             this.startEllipsis = false;
             this.endEllipsis = false;
             for (let i = 1; i <= this.pages; i++) {
@@ -128,17 +127,16 @@ const Pagination = class {
             this.startItems = startItems;
             return;
         }
-        startItemCount = this.boundaryPageCount === 0 ? 1 : this.boundaryPageCount;
+        startItemCount = this.boundaryCount === 0 ? 1 : this.boundaryCount;
         endStart =
-            this.boundaryPageCount === 0
+            this.boundaryCount === 0
                 ? this.pages
-                : this.pages - this.boundaryPageCount + 1;
-        if (this.currentPage <=
-            this.adjacentPageCount + this.boundaryPageCount + 2) {
+                : this.pages - this.boundaryCount + 1;
+        if (this.currentPage <= this.adjacentCount + this.boundaryCount + 2) {
             startEllipsis = false;
             endEllipsis = true;
-            let numItems = 2 * this.adjacentPageCount + 1;
-            if (this.boundaryPageCount === 0) {
+            let numItems = 2 * this.adjacentCount + 1;
+            if (this.boundaryCount === 0) {
                 numItems--;
             }
             midStart = startItemCount + 1;
@@ -147,33 +145,33 @@ const Pagination = class {
         else {
             startEllipsis = true;
             if (this.currentPage >
-                this.pages - (this.adjacentPageCount + this.boundaryPageCount + 2)) {
-                let numItems = 2 * this.adjacentPageCount + 1;
-                if (this.boundaryPageCount === 0) {
+                this.pages - (this.adjacentCount + this.boundaryCount + 2)) {
+                let numItems = 2 * this.adjacentCount + 1;
+                if (this.boundaryCount === 0) {
                     numItems--;
                 }
                 midEnd =
-                    this.boundaryPageCount === 0
+                    this.boundaryCount === 0
                         ? this.pages - 1
-                        : this.pages - this.boundaryPageCount;
+                        : this.pages - this.boundaryCount;
                 midStart = midEnd - numItems;
             }
             else {
                 endEllipsis = true;
-                midStart = this.currentPage - this.adjacentPageCount;
-                midEnd = this.currentPage + this.adjacentPageCount;
+                midStart = this.currentPage - this.adjacentCount;
+                midEnd = this.currentPage + this.adjacentCount;
             }
         }
         //create array of start items
-        if (this.boundaryPageCount > 0 ||
-            (this.boundaryPageCount === 0 && startEllipsis === false)) {
+        if (this.boundaryCount > 0 ||
+            (this.boundaryCount === 0 && startEllipsis === false)) {
             for (let i = 1; i <= startItemCount; i++) {
                 startItems.push(i);
             }
         }
         //create array of end items
-        if (this.boundaryPageCount > 0 ||
-            (this.boundaryPageCount === 0 && endEllipsis === false)) {
+        if (this.boundaryCount > 0 ||
+            (this.boundaryCount === 0 && endEllipsis === false)) {
             for (let i = endStart; i <= this.pages; i++) {
                 endItems.push(i);
             }
@@ -190,8 +188,8 @@ const Pagination = class {
     }
     componentWillLoad() {
         this.watchPageChangeHandler();
-        this.watchBoundaryPageCountHandler();
-        this.watchAdjacentPageCountHandler();
+        this.watchBoundaryCountHandler();
+        this.watchAdjacentCountHandler();
         removeDisabledFalse(this.disabled, this.el);
     }
     componentDidLoad() {
@@ -224,8 +222,8 @@ const Pagination = class {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "adjacentPageCount": ["watchAdjacentPageCountHandler"],
-        "boundaryPageCount": ["watchBoundaryPageCountHandler"],
+        "adjacentCount": ["watchAdjacentCountHandler"],
+        "boundaryCount": ["watchBoundaryCountHandler"],
         "pages": ["watchNumberPagesHandler"],
         "type": ["watchTypeHandler"],
         "currentPage": ["watchPageChangeHandler"]
@@ -297,7 +295,7 @@ const Clear = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www
 </svg>
 `;
 
-const icSelectCss = "/*! 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;position:relative}:host(.ic-select-full-width){width:100%}ic-input-component-container:hover{--border-color:var(--ic-action-dark-hover)}ic-input-component-container:active{--border-color:var(--ic-action-dark-active);color:var(--ic-action-dark-active)}ic-input-component-container.menu-open{--border-color:var(--ic-architectural-400);color:var(--ic-action-dark)}ic-input-validation .status-icon,ic-input-validation .statustext{visibility:visible}ic-input-validation.menu-open .status-icon,ic-input-validation.menu-open .statustext{visibility:hidden;transition:visibility 0s}ic-input-label{margin-bottom:var(--ic-space-xs) !important}select{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);line-height:1.5rem;letter-spacing:0.005rem;width:100%;height:100%;padding-left:0.375rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 0.375rem center;background-image:url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select option,.select-option-selected{color:var(--ic-color-primary-text)}select:disabled{color:var(--ic-architectural-200);background-image:url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select:focus{border:0;outline:0}select:not([disabled]){cursor:pointer}.select-container{width:100%;display:flex;align-items:center;position:relative}.select-input{width:100%;height:100%;padding:0 0.375rem;display:flex;cursor:pointer;align-items:center;justify-content:space-between;background:none;border:none}.select-input:focus{outline:var(--ic-hc-focus-outline)}:host(:not(.ic-select-disabled)) ic-input-component-container:hover .select-input{background-color:var(--ic-architectural-white)}.select-input[disabled]{pointer-events:none}:host(.ic-select-searchable) .select-input{cursor:auto}.searchable-select-container{align-items:center;display:flex;width:100%;position:relative}.expand-icon{height:var(--ic-space-lg);padding-left:var(--ic-space-xs);color:var(--ic-action-dark)}.expand-icon>svg{display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.ic-select-disabled) .expand-icon,:host(.ic-select-disabled) .expand-icon>svg>path{color:var(--ic-architectural-200)}:host(.ic-select-searchable) .expand-icon{padding-left:var(--ic-space-xxs);height:2.25rem}:host(.ic-select-searchable) .expand-icon>svg{height:2.25rem;padding:0 0.375rem}:host(.ic-select-searchable:not(.ic-select-disabled)) .expand-icon>svg{cursor:pointer}.expand-icon-open{color:var(--ic-action-dark)}.expand-icon-filled{color:var(--ic-action-dark)}.expand-icon-open,:host(.ic-select-searchable) .expand-icon-open{transform:rotateX(180deg)}:host(.ic-select-disabled) .value-text,.placeholder{color:var(--ic-color-tertiary-text)}.select-input-end{display:flex;align-items:center}.clear-button-container{display:flex;gap:var(--ic-space-xxs);padding-left:2.375rem;align-items:center}:host(.ic-select-small) .clear-button-container{padding-left:1.875rem}.divider{width:var(--ic-border-width);background-color:var(--ic-architectural-400);margin:var(--ic-space-xxs) 0;border-radius:var(--ic-space-1px);height:var(--ic-space-lg)}:host(.ic-select-small) .divider{height:var(--ic-space-md)}.clear-button{position:absolute;right:2.75rem;border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow);border-radius:0.25rem}.clear-button:focus *{fill:white}.searchable-select-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}::slotted([slot=\"icon\"]){fill:var(--ic-color-tertiary-text)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-color-primary-text)}.readonly ::slotted([slot=\"icon\"]){padding:0.375rem;margin-bottom:0.75rem}@media (forced-colors: active){.has-value ::slotted([slot=\"icon\"]){fill:currentcolor}}";
+const icSelectCss = "/*! 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;position:relative}:host(.full-width){width:100%}ic-input-component-container:hover{--border-color:var(--ic-action-dark-hover)}ic-input-component-container:active{--border-color:var(--ic-action-dark-active);color:var(--ic-action-dark-active)}ic-input-component-container.menu-open{--border-color:var(--ic-architectural-400);color:var(--ic-action-dark)}ic-input-validation .status-icon,ic-input-validation .statustext{visibility:visible}ic-input-validation.menu-open .status-icon,ic-input-validation.menu-open .statustext{visibility:hidden;transition:visibility 0s}ic-input-label{margin-bottom:var(--ic-space-xs) !important}select{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);color:var(--ic-color-primary-text);line-height:1.5rem;letter-spacing:0.005rem;width:100%;height:100%;padding-left:0.375rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 0.375rem center;background-image:url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select option,.select-option-selected{color:var(--ic-color-primary-text)}select:disabled{color:var(--ic-architectural-200);background-image:url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select:focus{border:0;outline:0}select:not([disabled]){cursor:pointer}.select-container{width:100%;display:flex;align-items:center;position:relative}.select-input{width:100%;height:100%;padding:0 0.375rem;display:flex;cursor:pointer;align-items:center;justify-content:space-between;background:none;border:none}.select-input:focus{outline:var(--ic-hc-focus-outline)}:host(:not(.disabled)) ic-input-component-container:hover .select-input{background-color:var(--ic-architectural-white)}.select-input[disabled]{pointer-events:none}:host(.searchable) .select-input{cursor:auto}.searchable-select-container{align-items:center;display:flex;width:100%;position:relative}.expand-icon{height:var(--ic-space-lg);padding-left:var(--ic-space-xs);color:var(--ic-action-dark)}.expand-icon>svg{display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.disabled) .expand-icon,:host(.disabled) .expand-icon>svg>path{color:var(--ic-architectural-200)}:host(.searchable) .expand-icon{padding-left:var(--ic-space-xxs);height:2.25rem}:host(.searchable) .expand-icon>svg{height:2.25rem;padding:0 0.375rem}:host(.searchable:not(.disabled)) .expand-icon>svg{cursor:pointer}.expand-icon-open{color:var(--ic-action-dark)}.expand-icon-filled{color:var(--ic-action-dark)}.expand-icon-open,:host(.searchable) .expand-icon-open{transform:rotateX(180deg)}:host(.disabled) .value-text,.placeholder{color:var(--ic-color-tertiary-text)}.select-input-end{display:flex;align-items:center}.clear-button-container{display:flex;gap:var(--ic-space-xxs);padding-left:2.375rem;align-items:center}:host(.small) .clear-button-container{padding-left:1.875rem}.divider{width:var(--ic-border-width);background-color:var(--ic-architectural-400);margin:var(--ic-space-xxs) 0;border-radius:var(--ic-space-1px);height:var(--ic-space-lg)}:host(.small) .divider{height:var(--ic-space-md)}.clear-button{position:absolute;right:2.75rem;border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow);border-radius:0.25rem}.clear-button:focus *{fill:white}.searchable-select-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}::slotted([slot=\"icon\"]){fill:var(--ic-color-tertiary-text)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-color-primary-text)}.readonly ::slotted([slot=\"icon\"]){padding:0.375rem;margin-bottom:0.75rem}@media (forced-colors: active){.has-value ::slotted([slot=\"icon\"]){fill:currentcolor}}";
 
 let inputIds$1 = 0;
 const MUTABLE_ATTRIBUTES$1 = [...IC_INHERITED_ARIA, "tabindex", "title"];
@@ -496,7 +494,7 @@ const Select = class {
                 event.preventDefault();
             }
         };
-        this.isExternalFiltering = () => this.searchable && this.disableAutoFiltering;
+        this.isExternalFiltering = () => this.searchable && this.disableFilter;
         this.handleClick = (event) => {
             var _a;
             if (!this.open) {
@@ -702,7 +700,7 @@ const Select = class {
             this.hiddenInputValue = this.searchableSelectInputValue;
             this.inputValueToFilter = this.searchableSelectInputValue;
             this.setMenuChange(true);
-            if (!this.disableAutoFiltering) {
+            if (!this.disableFilter) {
                 this.handleFilter();
                 this.debounceAriaLiveUpdate();
             }
@@ -771,10 +769,16 @@ const Select = class {
         this.open = false;
         this.pressedCharacters = "";
         this.searchableSelectInputValue = null;
+        this.charactersUntilSuggestions = 0;
         this.disabled = false;
-        this.disableAutoFiltering = false;
+        this.disableFilter = false;
         this.emptyOptionListText = "No results found";
         this.form = undefined;
+        this.formaction = undefined;
+        this.formenctype = undefined;
+        this.formmethod = undefined;
+        this.formnovalidate = undefined;
+        this.formtarget = undefined;
         this.fullWidth = false;
         this.helperText = "";
         this.hideLabel = false;
@@ -792,6 +796,7 @@ const Select = class {
         this.selectOnEnter = false;
         this.showClearButton = false;
         this.size = "default";
+        this.small = false;
         this.timeout = undefined;
         this.validationStatus = "";
         this.validationText = "";
@@ -932,7 +937,7 @@ const Select = class {
         }
     }
     render() {
-        const { size, disabled, fullWidth, helperText, hideLabel, label, menuId, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = this;
+        const { small, size, disabled, fullWidth, helperText, hideLabel, label, menuId, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = this;
         renderHiddenInput(true, this.el, name, this.searchable ? this.hiddenInputValue : currValue, disabled);
         const invalid = validationStatus === IcInformationStatus.Error ? "true" : "false";
         const describedBy = getInputDescribedByText(this.inputId, helperText !== "", hasValidationStatus(this.validationStatus, this.disabled)).trim();
@@ -941,11 +946,12 @@ const Select = class {
             showLeftIcon = false;
         }
         return (h(Host, { class: {
-                ["ic-select-disabled"]: disabled,
-                ["ic-select-searchable"]: searchable,
-                [`ic-select-${size}`]: size !== "default",
-                ["ic-select-full-width"]: fullWidth,
-            }, onBlur: this.onBlur }, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, showLeftIcon && (h("span", { slot: "left-icon", class: {
+                disabled: disabled,
+                searchable: searchable,
+                small: small,
+                [size]: size !== "default",
+                "full-width": fullWidth,
+            }, onBlur: this.onBlur }, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, small: small, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, showLeftIcon && (h("span", { slot: "left-icon", class: {
                 ["readonly"]: readonly,
                 ["has-value"]: !!this.value,
             } }, h("slot", { name: "icon" }))), readonly ? (h("ic-typography", null, h("p", null, this.getLabelFromValue(currValue)))) : isMobileOrTablet() ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: this.inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: this.form }, this.inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
@@ -955,7 +961,7 @@ const Select = class {
             else {
                 return (h("option", { value: option.value, disabled: option.disabled, selected: option.value === currValue }, option.label));
             }
-        }))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: "select-input", role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": this.open ? "true" : "false", "aria-invalid": invalid, "aria-required": required ? "true" : "false", "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: this.form }), this.searchableSelectInputValue &&
+        }))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: "select-input", role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": this.open ? "true" : "false", "aria-invalid": invalid, "aria-required": required ? "true" : "false", "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: this.form, formaction: this.formaction, formenctype: this.formenctype, formmethod: this.formmethod, formnovalidate: this.formnovalidate, formtarget: this.formtarget }), this.searchableSelectInputValue &&
             (showClearButton || searchable) && (h("div", { class: "clear-button-container" }, h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": this.searchableSelectInputValue && currValue === null
                 ? "Clear input"
                 : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", appearance: this.clearButtonFocused
@@ -981,7 +987,7 @@ const Select = class {
                         this.noOptions[0].label === this.emptyOptionListText),
             }, ref: (el) => (this.menu = el), inputEl: searchable
                 ? this.searchableSelectElement
-                : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : this.uniqueOptions, value: currValue, fullWidth: fullWidth, selectOnEnter: this.selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, onMenuValueChange: this.handleMenuValueChange, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable || this.selectOnEnter ? "manual" : "automatic" })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
+                : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, small: small, size: size, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : this.uniqueOptions, value: currValue, fullWidth: fullWidth, selectOnEnter: this.selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, onMenuValueChange: this.handleMenuValueChange, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable || this.selectOnEnter ? "manual" : "automatic" })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -995,7 +1001,7 @@ const Select = class {
 };
 Select.style = icSelectCss;
 
-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}:host(.ic-text-field-full-width){width:100%}::-moz-placeholder{color:var(--ic-color-tertiary-text);opacity:1}::placeholder{color:var(--ic-color-tertiary-text);opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs)}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(--ic-architectural-200)}input.readonly,textarea.readonly{color:var(--ic-color-primary-text)}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{color:var(--ic-color-secondary-text);padding-right:var(--ic-space-xxxs)}.no-left-pad{padding-left:0}::slotted([slot=\"icon\"]){fill:var(--ic-color-tertiary-text)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-color-primary-text)}.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}:host(.fullwidth){width:100%}::-moz-placeholder{color:var(--ic-color-tertiary-text);opacity:1}::placeholder{color:var(--ic-color-tertiary-text);opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs)}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(--ic-architectural-200)}input.readonly,textarea.readonly{color:var(--ic-color-primary-text)}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}.maxlengthtext{color:var(--ic-color-secondary-text);padding-right:var(--ic-space-xxxs)}.no-left-pad{padding-left:0}::slotted([slot=\"icon\"]){fill:var(--ic-color-tertiary-text)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-color-primary-text)}.charcount{margin-right:calc(-1 * var(--ic-space-xxxs))}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}}";
 
 let inputIds = 0;
 const MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, "title"];
@@ -1010,18 +1016,22 @@ const TextField = class {
         this.icKeydown = createEvent(this, "icKeydown", 7);
         this.inheritedAttributes = {};
         this.hostMutationObserver = null;
-        this.getMaxValueExceeded = (value) => {
+        this.getMaxLengthExceeded = (value) => {
+            this.numChars = value.length;
             if (this.type === "number") {
                 this.minValueUnattained = value && Number(value) < Number(this.min);
                 this.maxValueExceeded = Number(value) > Number(this.max);
             }
+            if (this.maxLength > 0) {
+                this.maxLengthExceeded = this.numChars > this.maxLength;
+            }
         };
         this.getMaxCharactersReached = (value) => {
             this.numChars = value.length;
             this.maxCharactersReached =
                 this.maxCharacters > 0 ? this.numChars >= this.maxCharacters : false;
-            if (this.maxCharactersWarning && !this.maxCharactersReached) {
-                this.maxCharactersWarning = false;
+            if (this.maxCharactersError && !this.maxCharactersReached) {
+                this.maxCharactersError = false;
             }
         };
         this.onInput = (ev) => {
@@ -1061,8 +1071,9 @@ const TextField = class {
         };
         this.numChars = 0;
         this.maxCharactersReached = false;
-        this.maxCharactersWarning = false;
+        this.maxCharactersError = false;
         this.minCharactersUnattained = false;
+        this.maxLengthExceeded = false;
         this.maxValueExceeded = false;
         this.minValueUnattained = false;
         this.ariaActiveDescendant = undefined;
@@ -1076,7 +1087,6 @@ const TextField = class {
         this.disabled = false;
         this.fullWidth = false;
         this.helperText = "";
-        this.hideCharCount = false;
         this.hideLabel = false;
         this.hiddenInput = true;
         this.inputId = `ic-text-field-input-${inputIds++}`;
@@ -1084,6 +1094,7 @@ const TextField = class {
         this.label = undefined;
         this.max = undefined;
         this.maxCharacters = 0;
+        this.maxLength = 0;
         this.min = undefined;
         this.minCharacters = 0;
         this.name = this.inputId;
@@ -1094,6 +1105,7 @@ const TextField = class {
         this.role = undefined;
         this.rows = 1;
         this.size = "default";
+        this.small = false;
         this.spellcheck = false;
         this.truncateValue = undefined;
         this.type = "text";
@@ -1109,20 +1121,12 @@ const TextField = class {
         this.icChange = debounceEvent(this.icChange, this.debounce);
     }
     watchValueHandler(newValue) {
-        let value;
-        if (this.maxCharacters > 0) {
-            value = newValue.substring(0, this.maxCharacters);
-            this.value = value;
-        }
-        else {
-            value = newValue;
-        }
-        if (this.inputEl && this.inputEl.value !== value) {
-            this.inputEl.value = value;
+        if (this.inputEl && this.inputEl.value !== newValue) {
+            this.inputEl.value = newValue;
         }
-        this.getMaxValueExceeded(value);
-        this.getMaxCharactersReached(value);
-        this.icChange.emit({ value });
+        this.getMaxLengthExceeded(newValue);
+        this.getMaxCharactersReached(newValue);
+        this.icChange.emit({ value: newValue });
     }
     connectedCallback() {
         this.debounceChanged();
@@ -1136,13 +1140,11 @@ const TextField = class {
         if (this.value !== this.initialValue) {
             this.watchValueHandler(this.value);
         }
-        else if (this.maxCharacters > 0) {
-            this.value = this.value.substring(0, this.maxCharacters);
-        }
-        this.getMaxValueExceeded(this.value);
+        this.getMaxLengthExceeded(this.value);
         this.getMaxCharactersReached(this.value);
         this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);
         if (this.readonly) {
+            this.maxLengthExceeded = false;
             this.maxValueExceeded = false;
             this.minValueUnattained = false;
         }
@@ -1162,7 +1164,7 @@ const TextField = class {
     }
     handleKeyDown(ev) {
         this.icKeydown.emit({ event: ev });
-        this.maxCharactersWarning = this.maxCharactersReached;
+        this.maxCharactersError = this.maxCharactersReached;
     }
     /**
      * Sets focus on the native `input`.
@@ -1172,39 +1174,41 @@ 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, } = this;
+        const { inputId, name, label, required, size, small, placeholder, helperText, rows, resize, disabled, value, min, max, maxLength, numChars, readonly, maxLengthExceeded, maxCharacters, maxCharactersError, maxCharactersReached, minCharacters, minCharactersUnattained, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, } = this;
         const disabledMode = readonly ? true : disabled;
-        const currentStatus = maxValueExceeded ||
+        const currentStatus = maxLengthExceeded ||
+            maxValueExceeded ||
             minValueUnattained ||
             minCharactersUnattained ||
-            maxCharactersWarning
-            ? maxCharactersWarning
+            maxCharactersError
+            ? maxCharactersError
                 ? IcInformationStatus.Warning
                 : IcInformationStatus.Error
             : validationStatus;
-        const currentValidationText = maxCharactersWarning
-            ? `Maximum input is ${maxCharacters} characters`
-            : maxValueExceeded
-                ? `Maximum value of ${max} exceeded`
-                : minValueUnattained
-                    ? `Minimum value of ${min} not met`
-                    : minCharactersUnattained
-                        ? `Minimum input is ${minCharacters} characters`
-                        : validationText;
-        const maxNumChars = readonly ? 0 : maxCharacters;
-        const messageAriaLive = maxCharactersWarning ||
+        const currentValidationText = maxLengthExceeded
+            ? "Maximum length exceeded"
+            : maxCharactersError
+                ? `Maximum input is ${maxCharacters} characters`
+                : maxValueExceeded
+                    ? `Maximum value of ${max} exceeded`
+                    : minValueUnattained
+                        ? `Minimum value of ${min} not met`
+                        : minCharactersUnattained
+                            ? `Minimum input is ${minCharacters} characters`
+                            : validationText;
+        const maxNumChars = readonly ? 0 : maxLength;
+        const messageAriaLive = maxLengthExceeded ||
+            maxCharactersError ||
             maxValueExceeded ||
             minValueUnattained ||
-            currentStatus === IcInformationStatus.Error
+            (maxLength === 0 && currentStatus === IcInformationStatus.Error)
             ? "assertive"
             : "polite";
         const showStatusText = this.hasStatus(currentStatus) &&
             !(currentStatus == IcInformationStatus.Success && validationInline) &&
             !validationInlineInternal;
         const multiline = rows > 1;
-        const charsRemaining = maxNumChars - numChars;
-        const hiddenRemainingCharCountDesc = `${charsRemaining} character${charsRemaining === 1 ? "" : "s"} remaining.`;
-        const hiddenCharCountDescId = maxCharacters > 0 ? `${inputId}-char-count-desc` : "";
+        const hiddenCharCountDescId = maxLength > 0 ? `${inputId}-charcount-desc` : "";
         const describedBy = `${hiddenCharCountDescId} ${getInputDescribedByText(inputId, helperText !== "", showStatusText)}`.trim();
         const disabledText = disabledMode && !readonly;
         const showLeftIcon = !!this.el.querySelector(`[slot="icon"]`) && !disabledText;
@@ -1212,7 +1216,7 @@ const TextField = class {
         if (hiddenInput) {
             renderHiddenInput(true, this.el, name, value, disabledMode);
         }
-        return (h(Host, { class: { ["ic-text-field-full-width"]: fullWidth } }, h("ic-input-container", { readonly: readonly, disabled: disabledMode }, !this.hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), h("ic-input-component-container", { size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { class: {
+        return (h(Host, { class: { ["fullwidth"]: fullWidth } }, h("ic-input-container", { readonly: readonly, disabled: disabledMode }, !this.hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), h("ic-input-component-container", { size: small ? "small" : size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { class: {
                 ["readonly"]: readonly,
                 ["has-value"]: value.length > 0,
             }, slot: "left-icon" }, h("slot", { 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: {
@@ -1227,7 +1231,7 @@ const TextField = class {
             !isEmptyString(validationText) ||
             maxNumChars > 0 ||
             maxValueExceeded ||
-            maxCharactersWarning ||
+            maxCharactersError ||
             minCharactersUnattained ||
             minValueUnattained) &&
             !validationInlineInternal && (h("ic-input-validation", { status: this.hasStatus(currentStatus) === false ||
@@ -1235,9 +1239,11 @@ const TextField = class {
                     validationInline) ||
                 validationInlineInternal
                 ? ""
-                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { variant: "caption", class: {
-                ["char-count-text"]: true,
-            } }, h("span", { class: "char-count" }, numChars, "/", maxNumChars))), h("span", { class: "remaining-char-count-desc", "aria-live": "polite" }, hiddenRemainingCharCountDesc), h("span", { 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", { slot: "validation-message-adornment" }, h("ic-typography", { variant: "caption", class: {
+                ["maxlengthtext"]: true,
+                ["error"]: maxLengthExceeded,
+                ["disabled"]: disabledText,
+            } }, h("span", { "aria-live": "polite", id: `${inputId}-charcount`, class: "charcount" }, numChars, "/", maxNumChars), h("span", { hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {