@public-ui/hydrate 2.2.1-daf78eefb286eb2b5af07293e65a52004723eadc.0 → 2.2.1

package/dist/index.mjs

@@ -2654,9 +2654,9 @@ var loglevel = {exports: {}};
 }));
 }(loglevel));
 
-var l = loglevel.exports;
+var m = loglevel.exports;
 
-const Y=new Map,I=[],O=new Map,o$1={A11yUi:{CSS_STYLE_CACHE:Y,HYDRATED_HISTORY:I,STYLING_TASK_QUEUE:O,Themes:{}}};let A=!1;const $=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,k=e=>typeof e=="string"&&$.test(e),S=e=>{if(k(e)===!1)throw new Error(`[Theming] The theme identifier "${typeof e=="string"?e:""}" (Type: ${typeof e}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`)},P$1=(e,t,s,a)=>p(e,t,s,a),p=(e,t,s,a)=>{a=a??{},a.append=a.append??!1,S(e),A===!1&&(A=!0,l.warn(`[Theming] The theme process is locked. This means that the theme "${e}" should not be patched.
+const H=new Map,M=[],Y=new Map,o$1={A11yUi:{CSS_STYLE_CACHE:H,HYDRATED_HISTORY:M,STYLING_TASK_QUEUE:Y,Themes:{}}};let g=!1;const I=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,O=e=>typeof e=="string"&&I.test(e),p=e=>{if(O(e)===!1)throw new Error(`[Theming] The theme identifier "${typeof e=="string"?e:""}" (Type: ${typeof e}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`)},$=(e,t,s,n)=>T(e,t,s,n),T=(e,t,s,n)=>{n=n??{},n.append=n.append??!1,p(e),g===!1&&(g=!0,m.warn(`[Theming] The theme process is locked. This means that the theme "${e}" should not be patched.
 
 	import { register } from 'adopted-style-sheets';
 	import { defineCustomElements } from '...';
@@ -2666,7 +2666,7 @@ const Y=new Map,I=[],O=new Map,o$1={A11yUi:{CSS_STYLE_CACHE:Y,HYDRATED_HISTORY:I
 	.then(() => {
 		// run your app or website
 	})
-	.catch(console.warn);`)),(typeof o$1.A11yUi.Themes[e]!="object"||o$1.A11yUi.Themes[e]===null)&&(o$1.A11yUi.Themes[e]={});const n=t.toUpperCase();a.append&&typeof o$1.A11yUi.Themes[e][n]=="string"?o$1.A11yUi.Themes[e][n]+=s:o$1.A11yUi.Themes[e][n]=s;},D=(e,t,s)=>u$1(e,t,s),u$1=(e,t,s)=>(S(e),typeof t=="object"&&t!==null&&Object.getOwnPropertyNames(t).forEach(a=>{const n=t[a];typeof n=="string"&&n.length>0&&p(e,a,n,s);}),e);const L=new Set,J=/--[^;]+/g,V=/:/,W=(e,t)=>{let s=t.match(J);if(Array.isArray(s)){s=s.filter(n=>V.test(n));const a=document.createElement("style");a.innerHTML=`.${e} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}L.add(e);},m=(e,t)=>typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null&&typeof o$1.A11yUi.Themes=="object"&&o$1.A11yUi.Themes!==null&&typeof o$1.A11yUi.Themes[e]=="object"&&o$1.A11yUi.Themes[e]!==null&&typeof o$1.A11yUi.Themes[e][t]=="string"?o$1.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",X=e=>{for(const t of Array.from(e.childNodes))if(t instanceof HTMLStyleElement&&t.tagName==="STYLE"&&t.dataset.themingFallback===void 0)e.removeChild(t);else break},Z$1=(e,t)=>{try{if(o$1.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=[];t.forEach(a=>{const n=new CSSStyleSheet;n.replaceSync(a),s.push(n);}),e.adoptedStyleSheets=s;}catch{[...t].reverse().forEach((s,a)=>{if(typeof s!="string"||s.length===0)return;const n=document.createElement("style");switch(n.dataset.themingFallback="",a){case 4:n.dataset.themingBaseA11y="";break;case 3:n.dataset.themingBaseGlobal="";break;case 2:n.dataset.themingBaseComponent="";break;case 1:n.dataset.themingCustomGlobal="";break;case 0:n.dataset.themingCustomComponent="";break;default:n.dataset.themingUnknown="";break}n.innerHTML=s,e.insertBefore(n,e.firstChild);});}},ee=(e,t,s)=>{if(s!==!1){const a=[...Array.from(e.childNodes).filter(r=>r instanceof HTMLStyleElement&&r.tagName==="STYLE")];let n;try{n=[...Array.from(e.adoptedStyleSheets)];}catch{n=[];}s?.mode==="before"?(a.reverse().forEach(r=>t.unshift(r.innerHTML)),n.reverse().forEach(r=>t.unshift(Array.from(r.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(a.forEach(r=>t.push(r.innerHTML)),n.forEach(r=>t.push(Array.from(r.cssRules).map(i=>i.cssText).join(""))));}},_=(e,t,s)=>{const a=t.name||"default";let n;try{if(e.shadowRoot===null)throw new Error("ShadowRoot is null");n=e.shadowRoot;}catch{n=e;}if(o$1.A11yUi.CSS_STYLE_CACHE.get(a)?.has(e.tagName))v(e,n,o$1.A11yUi.CSS_STYLE_CACHE.get(a)?.get(e.tagName),s);else {const r=m(a,"PROPERTIES"),i=m(a,"GLOBAL"),f=m(a,e.tagName);L.has(a)===!1&&W(a,i);const h=[r,i,f];ee(n,h,t.encroachCss),t.loglevel==="debug"&&console.log(e.tagName,h),t.cache===!0&&(o$1.A11yUi.CSS_STYLE_CACHE.has(a)===!1&&o$1.A11yUi.CSS_STYLE_CACHE.set(a,new Map),o$1.A11yUi.CSS_STYLE_CACHE.get(a)?.set(e.tagName,h)),v(e,n,h,s);}},v=(e,t,s,a)=>{X(t),Z$1(t,s),e.style.display=a;},j=e=>{e.loglevel==="debug"&&o$1.A11yUi.HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:o$1.A11yUi.STYLING_TASK_QUEUE.size});},oe=e=>{o$1.A11yUi.STYLING_TASK_QUEUE.delete(e);},N=(e,t)=>{oe(e),j(t);},ae=e=>{for(const t of e)if(o$1.A11yUi.STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:s,themeDetails:a}=o$1.A11yUi.STYLING_TASK_QUEUE.get(t.target);_(t.target,a,s),N(t.target,a);}};try{new MutationObserver(ae);}catch{}
+	.catch(console.warn);`)),(typeof o$1.A11yUi.Themes[e]!="object"||o$1.A11yUi.Themes[e]===null)&&(o$1.A11yUi.Themes[e]={}),n.append&&typeof o$1.A11yUi.Themes[e][t]=="string"?o$1.A11yUi.Themes[e][t]+=s:o$1.A11yUi.Themes[e][t]=s;},k=(e,t,s,n)=>d(e,t,s,n),d=(e,t,s,n)=>(p(e),typeof t=="object"&&t!==null&&Object.getOwnPropertyNames(t).forEach(a=>{const r=t[a],i=a.toLowerCase(),c=typeof n?.transformTagName=="function"&&!["GLOBAL","PROPERTIES"].includes(a)?n.transformTagName(i):a;typeof r=="string"&&r.length>0&&T(e,c.toUpperCase(),r,s);}),e);const C=new Set,F=/--[^;]+/g,q=/:/,J=(e,t)=>{let s=t.match(F);if(Array.isArray(s)){s=s.filter(a=>q.test(a));const n=document.createElement("style");n.innerHTML=`.${e} {${s.join(";")}}`,document.querySelector("head")?.appendChild(n);}C.add(e);},l=(e,t)=>typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null&&typeof o$1.A11yUi.Themes=="object"&&o$1.A11yUi.Themes!==null&&typeof o$1.A11yUi.Themes[e]=="object"&&o$1.A11yUi.Themes[e]!==null&&typeof o$1.A11yUi.Themes[e][t]=="string"?o$1.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",V=e=>{for(const t of Array.from(e.childNodes))if(t instanceof HTMLStyleElement&&t.tagName==="STYLE"&&t.dataset.themingFallback===void 0)e.removeChild(t);else break},W=(e,t)=>{try{if(o$1.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=[];t.forEach(n=>{const a=new CSSStyleSheet;a.replaceSync(n),s.push(a);}),e.adoptedStyleSheets=s;}catch{[...t].reverse().forEach((s,n)=>{if(typeof s!="string"||s.length===0)return;const a=document.createElement("style");switch(a.dataset.themingFallback="",n){case 4:a.dataset.themingBaseA11y="";break;case 3:a.dataset.themingBaseGlobal="";break;case 2:a.dataset.themingBaseComponent="";break;case 1:a.dataset.themingCustomGlobal="";break;case 0:a.dataset.themingCustomComponent="";break;default:a.dataset.themingUnknown="";break}a.innerHTML=s,e.insertBefore(a,e.firstChild);});}},X=(e,t,s)=>{if(s!==!1){const n=[...Array.from(e.childNodes).filter(r=>r instanceof HTMLStyleElement&&r.tagName==="STYLE")];let a;try{a=[...Array.from(e.adoptedStyleSheets)];}catch{a=[];}s?.mode==="before"?(n.reverse().forEach(r=>t.unshift(r.innerHTML)),a.reverse().forEach(r=>t.unshift(Array.from(r.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(n.forEach(r=>t.push(r.innerHTML)),a.forEach(r=>t.push(Array.from(r.cssRules).map(i=>i.cssText).join(""))));}},w=(e,t)=>{const s=t.name||"default";let n;try{if(e.shadowRoot===null)throw new Error("ShadowRoot is null");n=e.shadowRoot;}catch{n=e;}if(o$1.A11yUi.CSS_STYLE_CACHE.get(s)?.has(e.tagName))L(n,o$1.A11yUi.CSS_STYLE_CACHE.get(s)?.get(e.tagName));else {const a=l(s,"PROPERTIES"),r=l(s,"GLOBAL"),i=l(s,e.tagName);C.has(s)===!1&&J(s,r);const c=[a,r,i];X(n,c,t.encroachCss),t.loglevel==="debug"&&console.log(e.tagName,c),t.cache===!0&&(o$1.A11yUi.CSS_STYLE_CACHE.has(s)===!1&&o$1.A11yUi.CSS_STYLE_CACHE.set(s,new Map),o$1.A11yUi.CSS_STYLE_CACHE.get(s)?.set(e.tagName,c)),L(n,c);}},L=(e,t)=>{V(e),W(e,t);},_=e=>{e.loglevel==="debug"&&o$1.A11yUi.HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:o$1.A11yUi.STYLING_TASK_QUEUE.size});},te=e=>{o$1.A11yUi.STYLING_TASK_QUEUE.delete(e);},v=(e,t)=>{te(e),_(t);},se=e=>{for(const t of e)if(o$1.A11yUi.STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{themeDetails:s}=o$1.A11yUi.STYLING_TASK_QUEUE.get(t.target);w(t.target,s),v(t.target,s);}};try{new MutationObserver(se);}catch{}
 
 const alertTypeOptions = ['default', 'info', 'success', 'warning', 'error'];
 const alertVariantOptions = ['card', 'msg'];
@@ -3741,9 +3741,9 @@ const koliBriQuerySelector = (selector, node) => querySelector(selector, node ||
 const koliBriQuerySelectorAll = (selector, node) => querySelectorAll(selector, node || getDocument());
 class KoliBriDevHelper {
 }
-KoliBriDevHelper.getCssStyle = m;
-KoliBriDevHelper.patchTheme = D;
-KoliBriDevHelper.patchThemeTag = P$1;
+KoliBriDevHelper.getCssStyle = l;
+KoliBriDevHelper.patchTheme = k;
+KoliBriDevHelper.patchThemeTag = $;
 KoliBriDevHelper.querySelector = koliBriQuerySelector;
 KoliBriDevHelper.querySelectorAll = koliBriQuerySelectorAll;
 KoliBriDevHelper.stringifyJson = stringifyJson;
@@ -4235,7 +4235,12 @@ const validateMsg = (component, value) => {
         }
         catch (e) {
         }
-        watchValidator(component, `_msg`, (value) => typeof value === 'object', new Set(['Object']), value);
+        watchValidator(component, `_msg`, (value) => isObject$1(value) && typeof (value === null || value === void 0 ? void 0 : value._description) === 'string', new Set(['MsgPropType']), value, {
+            defaultValue: {
+                _description: '',
+                _type: 'error',
+            },
+        });
     });
 };
 
@@ -4289,6 +4294,12 @@ const validateShow = (component, value, hooks) => {
     watchBoolean(component, '_show', value, hooks);
 };
 
+const validateSpellCheck = (component, value) => {
+    watchBoolean(component, '_spellCheck', value, {
+        defaultValue: undefined,
+    });
+};
+
 const validateSuggestions = (component, value) => {
     watchJsonArrayString(component, '_suggestions', (item) => typeof item === 'string' || typeof item === 'number', value, undefined, {
         hooks: {
@@ -6133,11 +6144,15 @@ class InputController extends ControlledInputController {
         validateTooltipAlign(this.component, value);
     }
     validateError(value) {
-        const message = {
-            _description: value || '',
-            _type: 'error',
-        };
-        this.validateMsg(message);
+        if (typeof value === 'string' && value.length > 0) {
+            this.validateMsg({
+                _description: value,
+                _type: 'error',
+            });
+        }
+        else {
+            this.validateMsg(undefined);
+        }
     }
     validateHideError(value) {
         validateHideError(this.component, value, {
@@ -6205,7 +6220,9 @@ class InputController extends ControlledInputController {
         this.validateAccessKey(this.component._accessKey);
         this.validateAdjustHeight(this.component._adjustHeight);
         this.validateError(this.component._error);
-        this.validateMsg(this.component._msg);
+        if (this.component._msg) {
+            this.validateMsg(this.component._msg);
+        }
         this.validateDisabled(this.component._disabled);
         this.validateHideError(this.component._hideError);
         this.validateHideLabel(this.component._hideLabel);
@@ -6445,18 +6462,18 @@ class KolCombobox {
     render() {
         const hasExpertSlot = showExpertSlot(this.state._label);
         const { ariaDescribedBy } = getRenderStates(this.state);
-        return (hAsync(Host, { key: 'c3278c2069dbca97941ec443ad0facc36db203d8', class: "kol-combobox" }, hAsync("div", { key: '248c0d3e8d08db48834a704a3c5cf2178a92730d', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: '5d8af20e02c638b8f631bb9ebef6bbefcd035f45', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'bdb1fc5448a1b2c2b728fe52e3044507fb12720e', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '7bf99311858263462241bee3bf5d024ba194f5e9', slot: "input" }, hAsync("div", { key: '9d3b73ddbfed9e8326c6b99d141acaf27dbba58f', class: "combobox__group" }, hAsync("input", Object.assign({ key: 'f23f31a47827439daf984617e1facaf046683f5d', ref: this.catchRef, class: "combobox__input", type: "text", role: "combobox", "aria-autocomplete": "both", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-controls": "listbox", value: this.state._value, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-labelledby": this.state._id, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required, spellcheck: "false" }, this.controller.onFacade, { onFocus: (event) => {
+        return (hAsync(Host, { key: 'c3278c2069dbca97941ec443ad0facc36db203d8', class: "kol-combobox" }, hAsync("div", { key: '248c0d3e8d08db48834a704a3c5cf2178a92730d', class: clsx('combobox', this.state._disabled && 'combobox--disabled') }, hAsync(KolInputTag, { key: '5d8af20e02c638b8f631bb9ebef6bbefcd035f45', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'bdb1fc5448a1b2c2b728fe52e3044507fb12720e', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '7bf99311858263462241bee3bf5d024ba194f5e9', slot: "input" }, hAsync("div", { key: '9d3b73ddbfed9e8326c6b99d141acaf27dbba58f', class: "combobox__group" }, hAsync("input", Object.assign({ key: 'a1d739b73b806459f28b9b44c795d383545d23c9', ref: this.catchRef, class: "combobox__input", type: "text", role: "combobox", "aria-autocomplete": "both", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-controls": "listbox", value: this.state._value, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-labelledby": this.state._id, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
-            }, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '437c9f3101a91d3d7ed8eb19847cb0e44e0a3e98', tabindex: "-1", class: "combobox__icon", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '7e11e19cafa1ab9fd5fb33a2a501b331f1a4374c', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'eca9dfe60ac33caa7d6757a6f72e0dd59785f551', role: "listbox", class: clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
+            }, onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder })), hAsync("button", { key: '8a224c4f264cae4581cc66adec944460feaf89c6', tabindex: "-1", class: "combobox__icon", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '622583975eb2d9a0f3dbb4d72d3eb1f421a3d5a1', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '8e7e8cd1f3e1cbcd99faf4b0060b108c85faefcc', role: "listbox", class: clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
             this._filteredSuggestions.length > 0 &&
             this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
                     if (el)
                         this.refSuggestions[index] = el;
-                }, "data-index": index, tabIndex: -1, role: "option", "aria-selected": this.state._value === option, onClick: (e) => {
+                }, "data-index": index, tabIndex: -1, role: "option", "aria-selected": this.state._value === option ? 'true' : undefined, onClick: (e) => {
                     this.selectOption(e, option);
                     this.toggleListbox();
                 }, onMouseOver: () => {
@@ -7836,7 +7853,7 @@ class KolInputColor {
         return (hAsync(Host, { key: '267d32979240084675613c62100026e9c887ec99', class: "kol-input-color" }, hAsync(KolInputTag, { key: '9b0bb20397e411dca2d205beef02ce115a60977f', class: {
                 color: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _shortKey: this.state._shortKey, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '7f0501edad65f345d2c3a6641093db2cdf5c0e63', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'f1318bbdd622361e3b819bb90921079dbfc0575a', slot: "input" }, hAsync("input", Object.assign({ key: '22e45d5ee65a7946398c42ebd34b078fb7c6c64a', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, name: this.state._name, slot: "input", spellcheck: "false", type: "color", value: this.state._value }, this.controller.onFacade, { onFocus: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _shortKey: this.state._shortKey, _suggestions: this.state._suggestions, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '7f0501edad65f345d2c3a6641093db2cdf5c0e63', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'f1318bbdd622361e3b819bb90921079dbfc0575a', slot: "input" }, hAsync("input", Object.assign({ key: 'fcf10809a84c0d1c7e276480d6ccf38f85b8e261', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, name: this.state._name, slot: "input", type: "color", value: this.state._value }, this.controller.onFacade, { onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -8212,7 +8229,7 @@ class KolInputDate {
         return (hAsync(Host, { key: '023c36b654230fa048f8a42c481af8d66d719ff2', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '8c62e80c2fb1d5d7556abf81c096973cb689c431', class: {
                 [this.state._type]: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '5ddac8288007ae72d9a2c9d4232454fcf8ced485', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '93501ba3e4b31203b9eaa8710e00052a4a44b4f8', slot: "input" }, hAsync("input", Object.assign({ key: 'fdf8904ce956943492b9da3e57650f9fc49195dd', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, step: this.state._step, spellcheck: "false", type: this.state._type, value: this.state._value || undefined }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onBlur: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '5ddac8288007ae72d9a2c9d4232454fcf8ced485', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '93501ba3e4b31203b9eaa8710e00052a4a44b4f8', slot: "input" }, hAsync("input", Object.assign({ key: '975399701d3067bfaf1b273d0758dd2035730561', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, step: this.state._step, type: this.state._type, value: this.state._value || undefined }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
             }, onFocus: (event) => {
@@ -8553,13 +8570,16 @@ class InputTextController extends InputTextEmailController {
         this.hasError = false;
         this.component = component;
     }
+    validateSpellCheck(value) {
+        validateSpellCheck(this.component, value);
+    }
     validateType(value) {
         watchValidator(this.component, '_type', (value) => typeof value === 'string' && inputTextTypeOptions.includes(value), new Set([`String {${inputTextTypeOptions.join(', ')}`]), value);
     }
     componentWillLoad() {
         super.componentWillLoad();
+        this.validateSpellCheck(this.component._spellCheck);
         this.validateType(this.component._type);
-        this.validateHasCounter(this.component._hasCounter);
     }
 }
 
@@ -8599,7 +8619,7 @@ class KolInputEmail {
         return (hAsync(Host, { key: '0a6dae92f7eceb1477c24f41f975e5554cf88ea9', class: {
                 'kol-input-email': true,
                 'has-value': this.state._hasValue,
-            } }, hAsync(KolInputTag, { key: '0924c898848ac3aef5f738761bd3b62a681548eb', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'd64b8718e6f2e5bd518601ecee7617249e063dbe', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '636e58b8611da6aaf134e94ead11934406bc44b4', slot: "input" }, hAsync("input", Object.assign({ key: '5784202d96a94da4fa546424bc3e8915331298fa', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput, onFocus: (event) => {
+            } }, hAsync(KolInputTag, { key: '0924c898848ac3aef5f738761bd3b62a681548eb', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'd64b8718e6f2e5bd518601ecee7617249e063dbe', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '636e58b8611da6aaf134e94ead11934406bc44b4', slot: "input" }, hAsync("input", Object.assign({ key: '395b8ac51cb57f363548891fa6e0d49de33cbc17', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, type: "email", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -8889,7 +8909,7 @@ class KolInputFile {
         return (hAsync(Host, { key: 'e5a5bf2cb09d060fa8558b234e03a8a3772ab394', class: "kol-input-file" }, hAsync(KolInputTag, { key: '306dd041fd374663109d6e0e1354d3e334dd3652', class: {
                 file: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '943463859848736c8d2c43a3a02de8e99c660904', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'f0aa210f2d890e689994256cd87321f484162179', slot: "input" }, hAsync("input", Object.assign({ key: '80294413f09a03c57357e85c9415b2a5e22d4ad6', ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, spellcheck: "false", type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onFocus: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '943463859848736c8d2c43a3a02de8e99c660904', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'f0aa210f2d890e689994256cd87321f484162179', slot: "input" }, hAsync("input", Object.assign({ key: 'ae3ed46e21125c7c77335e8248882c0d6b84be79', ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -9197,7 +9217,7 @@ class KolInputNumber {
             } }, hAsync(KolInputTag, { key: 'cca3c8727c315de0af6d0bfb46476b0ece3a590c', class: {
                 number: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '77e22ae9678676a8f3db1a4c31ccf445af311d75', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '6b717a3b135d57ffaccee69534077169ef8ba3f6', slot: "input" }, hAsync("input", Object.assign({ key: '4cc472dd47f2914fc03c82677875bc926ab4999b', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, placeholder: this.state._placeholder, step: this.state._step, spellcheck: "false", type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onFocus: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '77e22ae9678676a8f3db1a4c31ccf445af311d75', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '6b717a3b135d57ffaccee69534077169ef8ba3f6', slot: "input" }, hAsync("input", Object.assign({ key: 'ec0c34b9fd6bb3da27f94541903201599d841ff5', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, placeholder: this.state._placeholder, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -9448,7 +9468,6 @@ class KolInputPassword {
         (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        var _a;
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
         return (hAsync(Host, { key: 'e4bbac1ce3dd4e5d3f22168588a8932403474775', class: {
@@ -9457,17 +9476,17 @@ class KolInputPassword {
             } }, hAsync(KolInputTag, { key: 'ea8e123c738e56d384e323e8896bae2d46fb39df', class: {
                 'hide-label': !!this.state._hideLabel,
                 password: true,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '8b3ea92e78b33d8e2d715cd175db73d783f9dc29', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a531257549c04c2787ce78511af4cb50e3d4013e', slot: "input" }, hAsync("input", Object.assign({ key: '3c59bc735a5e9b7ec50b2f0d5636563c853a02e4', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: this._passwordVisible ? 'text' : 'password', value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput, onFocus: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '8b3ea92e78b33d8e2d715cd175db73d783f9dc29', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a531257549c04c2787ce78511af4cb50e3d4013e', slot: "input" }, hAsync("input", Object.assign({ key: '84bf423a5e3ee87cdf094124b064869f020b17a3', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, type: this._passwordVisible ? 'text' : 'password', value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
-            } })), this._variant === 'visibility-toggle' && this.inputRef && ((_a = this.inputRef.value) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (hAsync(KolButtonWcTag, { class: "password-toggle-button", _label: this._passwordVisible ? translate('kol-hide-password') : translate('kol-show-password'), _variant: "ghost", _on: {
+            } })), this._variant === 'visibility-toggle' ? (hAsync(KolButtonWcTag, { class: "password-toggle-button", _label: this._passwordVisible ? translate('kol-hide-password') : translate('kol-show-password'), _variant: "ghost", _disabled: this._disabled, _on: {
                 onClick: () => {
                     this._passwordVisible = !this._passwordVisible;
                 },
-            }, _hideLabel: true, _icons: this._passwordVisible ? 'codicon codicon-eye-closed' : 'codicon codicon-eye-watch' })) : ('')))));
+            }, _hideLabel: true, _icons: this._passwordVisible ? 'codicon codicon-eye-closed' : 'codicon codicon-eye-watch' })) : null))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -10041,20 +10060,20 @@ class KolInputRange {
                 'hide-label': !!this.state._hideLabel,
             }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '5ff97f4eadb9d0268a86336bb1ec3c33220e9448', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '9caa68963d809d85651a3711d6e00750c02012cf', slot: "input" }, hAsync("div", { key: '707405cdaa4fa35c2202af6566c00b5b18176a4a', class: "inputs-wrapper", style: {
                 '--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',
-            } }, hAsync("input", Object.assign({ key: 'a583664255ac6707facf18ca608dd2219c21917d', ref: this.catchInputRangeRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-hidden": "true", autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-range` : undefined, spellcheck: "false", step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onFocus: (event) => {
+            } }, hAsync("input", Object.assign({ key: '086f4e66a08820af1d83e352ace068d00f6b77c3', ref: this.catchInputRangeRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-hidden": "true", autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-range` : undefined, step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
-            } })), hAsync("input", Object.assign({ key: 'e01a941549e5a12b63b830ff7797f46d35e756f1', ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-number` : undefined, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onChange: this.onChange, onFocus: (event) => {
+            } })), hAsync("input", Object.assign({ key: '044b5512f8a5f38ff8042408a1e40a7e042a93a9', ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-number` : undefined, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onChange: this.onChange, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
             } }))), hasSuggestions && [
-            hAsync("datalist", { key: 'fddd3e65079abc15ddd4a9bbf0ea5db73878b423', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
+            hAsync("datalist", { key: '9ac1ec64cf00ea72f0df8562b5951693c77953f1', id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
         ]))));
     }
     constructor(hostRef) {
@@ -10292,13 +10311,13 @@ class KolInputText {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: '6f5750a5911ba0a9131e98c086361b88fdff6e44', class: {
+        return (hAsync(Host, { key: 'dfff639f5219d9a6b70417050414ae1114c3e426', class: {
                 'has-value': this.state._hasValue,
                 'kol-input-text': true,
-            } }, hAsync(KolInputTag, { key: 'b877f65b290bb2a3f75211c2d00a8908b22e3065', class: {
+            } }, hAsync(KolInputTag, { key: 'b0b460bd253ce8e6b7b0c64167cf7b04914aa7ce', class: {
                 [this.state._type]: true,
                 'hide-label': !!this.state._hideLabel,
-            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'b20dd260b0869a2d398ef249076699112f36a9b3', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '757f2924e80cc62765e0d56c1b061c52dbc9f08f', slot: "input" }, hAsync("input", Object.assign({ key: '2a3aa54ac86aa786074a2ce39366fa5a3bc582a0', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown, onFocus: (event) => {
+            }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '9fa94f23db0961dd372863f6c4f32ad1a63c5152', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey, this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey, this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'a7d63ed3ba033b473eb7b7e22a24eabce9b6e8c2', slot: "input" }, hAsync("input", Object.assign({ key: 'dfc93edf65abe84c68878643827eca0ab0f505ba', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: this.state._spellCheck, type: this.state._type, value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -10351,6 +10370,7 @@ class KolInputText {
         this._readOnly = false;
         this._required = false;
         this._shortKey = undefined;
+        this._spellCheck = undefined;
         this._suggestions = undefined;
         this._smartButton = undefined;
         this._syncValueBySelector = undefined;
@@ -10441,6 +10461,9 @@ class KolInputText {
     validateShortKey(value) {
         this.controller.validateShortKey(value);
     }
+    validateSpellCheck(value) {
+        this.controller.validateSpellCheck(value);
+    }
     validateSuggestions(value) {
         this.controller.validateSuggestions(value);
     }
@@ -10494,6 +10517,7 @@ class KolInputText {
         "_readOnly": ["validateReadOnly"],
         "_required": ["validateRequired"],
         "_shortKey": ["validateShortKey"],
+        "_spellCheck": ["validateSpellCheck"],
         "_suggestions": ["validateSuggestions"],
         "_smartButton": ["validateSmartButton"],
         "_syncValueBySelector": ["validateSyncValueBySelector"],
@@ -10530,6 +10554,7 @@ class KolInputText {
             "_readOnly": [4, "_read-only"],
             "_required": [4],
             "_shortKey": [1, "_short-key"],
+            "_spellCheck": [4, "_spell-check"],
             "_suggestions": [1],
             "_smartButton": [1, "_smart-button"],
             "_syncValueBySelector": [1, "_sync-value-by-selector"],
@@ -10588,28 +10613,27 @@ class KolInputWc {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        const isMessageValidError = Boolean(((_a = this._msg) === null || _a === void 0 ? void 0 : _a._type) === 'error' && this._msg._description && ((_b = this._msg._description) === null || _b === void 0 ? void 0 : _b.length) > 0);
-        const hasError = !this._readOnly && isMessageValidError && this._touched === true;
-        const showFormFieldMsg = Boolean(hasError || (((_c = this._msg) === null || _c === void 0 ? void 0 : _c._type) !== 'error' && ((_d = this._msg) === null || _d === void 0 ? void 0 : _d._description)));
+        const hasValidMsg = typeof this._msg === 'object' && this._msg !== null && typeof ((_a = this._msg) === null || _a === void 0 ? void 0 : _a._description) === 'string' && ((_b = this._msg) === null || _b === void 0 ? void 0 : _b._description.length) > 0;
+        const showMsg = hasValidMsg && (this._touched === true || ((_c = this._msg) === null || _c === void 0 ? void 0 : _c._type) !== 'error');
         const hasExpertSlot = showExpertSlot(this._label);
         const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
         const useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;
-        return (hAsync(Host, { key: '8cdf8d6dde998550bced4da791d8c9c5ea31ab2e', class: clsx('kol-input', this.getModifierClassNameByMsgType(), {
+        return (hAsync(Host, { key: 'f387b8c961abba887df0af3acdc992fdc780bf67', class: clsx('kol-input', this.getModifierClassNameByMsgType(showMsg), {
                 disabled: this._disabled === true,
-                error: hasError === true,
+                [((_d = this._msg) === null || _d === void 0 ? void 0 : _d._type) || 'error']: showMsg === true,
                 'read-only': this._readOnly === true,
                 required: this._required === true,
                 touched: this._touched === true,
                 'hidden-error': this._hideError === true,
-            }) }, hAsync("label", { key: 'ace5b68eef432c2a34db70ac234b4488297702b2', class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: 'cf0cb4d88144b324cb61134ffd26bc3f7da64c46', class: "input-label-span" }, hAsync("slot", { key: 'adce45da91af4963c7b5b00b4471ab29e4cf857b', name: "label" }))), hasHint && (hAsync("span", { key: 'a6fe31328a8ae31bcd132d13e527c27afc52f95c', class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: 'c25ad4e10b70d33a9f3be5e06bcefbacb3046d93', class: {
+            }) }, hAsync("label", { key: '46d5a787dc011c63d78b23f5041d3bddd4bf35b9', class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: 'd704939fe7f625fa71fcced90cfc57ad88f9d3f5', class: "input-label-span" }, hAsync("slot", { key: '717a440a4755fa1cc878ccc697a2339a236cc2ca', name: "label" }))), hasHint && (hAsync("span", { key: 'cf2a32a4850aa36c47640044ee8131cd039437f3', class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: '908ad6c86b9f897a203babfa6a647482fd963ee7', class: {
                 input: true,
                 'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
                 'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
-            } }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: '1ebc24cdf54e0af6924e53ebd89530b7dce7b390', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: 'a51050e6ee364e70ec8c0a2008c5696469ef0dcc', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: '9be371d3929093972c667445c272a08340e0d90e', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: '6150b39bb7458fc0064a161eab5a0be1c6fad549', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '96ecebd94a2d45e96d169af27d96f8beb67402dd', "aria-hidden": "true", class: "input-tooltip", _badgeText: this._accessKey || this._shortKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showFormFieldMsg && hAsync(KolFormFieldMsgFc, { key: '92d8c187a118275f2fa4dea8557c7a0c5b937b8a', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '1c4c1811fd84d6f08f4dee22f783b91fdff2894a', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { key: '1823a1dc667ec6f72019b29beba1bbb6fe1f827c', class: "counter", "aria-atomic": "true", "aria-live": "polite", "data-testid": "input-counter" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { key: 'fcc12beb596bdf86c0ecc507899685218c697775', "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", { key: 'eaaf2c17470681dc799b74f5eaebbe2496564c0e' }, translate('kol-characters'))))));
+            } }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { key: '8d34322e538ef59f93ea0d91c18865c09acdc806', _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: '63e0601882b3b4708004514ee16eea9d10eaa79e', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { key: '90e62c7fd3205e54abeaf277ff6cb84cc9f808e2', _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { key: '78820371cd0eea944bba2249fa206dfa1f7ea9a8', _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { key: '23f8131f06b0ade72a2ac6de4bc45d87c537ecf8', "aria-hidden": "true", class: "input-tooltip", _badgeText: this._accessKey || this._shortKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showMsg && hAsync(KolFormFieldMsgFc, { key: 'd7913257b81e5b0ad00da22c589cf22e31ba809f', _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { key: '3d900634935d030abd1d25b62bce6872989488b6', id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { key: '72ffb636b35c38cae343fda5e00ad2726d23009c', class: "counter", "aria-atomic": "true", "aria-live": "polite", "data-testid": "input-counter" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { key: '5316e7ddca828a22191faabf95d762261cd3e7e0', "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", { key: '2ec4c8bb02a35daffbea7a9d58d15a5e487b9652' }, translate('kol-characters'))))));
     }
-    getModifierClassNameByMsgType() {
+    getModifierClassNameByMsgType(showMsg) {
         var _a, _b;
-        if ((_a = this._msg) === null || _a === void 0 ? void 0 : _a._type) {
+        if (showMsg && ((_a = this._msg) === null || _a === void 0 ? void 0 : _a._type)) {
             return {
                 default: 'msg-type-default',
                 info: 'msg-type-info',
@@ -13522,6 +13546,31 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   });
 }
 
+// If <html> has a CSS width greater than the viewport, then this will be
+// incorrect for RTL.
+function getWindowScrollBarX(element, rect) {
+  const leftScroll = getNodeScroll(element).scrollLeft;
+  if (!rect) {
+    return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+  }
+  return rect.left + leftScroll;
+}
+
+function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
+  if (ignoreScrollbarX === void 0) {
+    ignoreScrollbarX = false;
+  }
+  const htmlRect = documentElement.getBoundingClientRect();
+  const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 :
+  // RTL <body> scrollbar.
+  getWindowScrollBarX(documentElement, htmlRect));
+  const y = htmlRect.top + scroll.scrollTop;
+  return {
+    x,
+    y
+  };
+}
+
 function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   let {
     elements,
@@ -13553,11 +13602,12 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
       offsets.y = offsetRect.y + offsetParent.clientTop;
     }
   }
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
   return {
     width: rect.width * scale.x,
     height: rect.height * scale.y,
-    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
-    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
+    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
+    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
   };
 }
 
@@ -13565,16 +13615,6 @@ function getClientRects(element) {
   return Array.from(element.getClientRects());
 }
 
-// If <html> has a CSS width greater than the viewport, then this will be
-// incorrect for RTL.
-function getWindowScrollBarX(element, rect) {
-  const leftScroll = getNodeScroll(element).scrollLeft;
-  if (!rect) {
-    return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
-  }
-  return rect.left + leftScroll;
-}
-
 // Gets the entire size of the scrollable document area, even extending outside
 // of the `<html>` and `<body>` rect bounds if horizontally scrollable.
 function getDocumentRect(element) {
@@ -13649,9 +13689,10 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
   } else {
     const visualOffsets = getVisualOffsets(element);
     rect = {
-      ...clippingAncestor,
       x: clippingAncestor.x - visualOffsets.x,
-      y: clippingAncestor.y - visualOffsets.y
+      y: clippingAncestor.y - visualOffsets.y,
+      width: clippingAncestor.width,
+      height: clippingAncestor.height
     };
   }
   return rectToClientRect(rect);
@@ -13761,17 +13802,9 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
       offsets.x = getWindowScrollBarX(documentElement);
     }
   }
-  let htmlX = 0;
-  let htmlY = 0;
-  if (documentElement && !isOffsetParentAnElement && !isFixed) {
-    const htmlRect = documentElement.getBoundingClientRect();
-    htmlY = htmlRect.top + scroll.scrollTop;
-    htmlX = htmlRect.left + scroll.scrollLeft -
-    // RTL <body> scrollbar.
-    getWindowScrollBarX(documentElement, htmlRect);
-  }
-  const x = rect.left + scroll.scrollLeft - offsets.x - htmlX;
-  const y = rect.top + scroll.scrollTop - offsets.y - htmlY;
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+  const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
+  const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
   return {
     x,
     y,
@@ -14554,7 +14587,7 @@ class KolSelect {
                     form: this.host,
                     ref: this.selectRef,
                 });
-            } }, hAsync("input", { key: '146ff341cfd1297a88aa014c307ba776807d1afd', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: 'a40f55cf7c2fbf57da1d78a98865f6eda85d85fd', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onFocus: (event) => {
+            } }, hAsync("input", { key: '146ff341cfd1297a88aa014c307ba776807d1afd', type: "submit", hidden: true }), hAsync("select", Object.assign({ key: '666ff4c9635d4779f06df8f1ab0bae0163fa449f', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -14909,20 +14942,20 @@ class KolSingleSelect {
     render() {
         const hasExpertSlot = showExpertSlot(this.state._label);
         const { ariaDescribedBy } = getRenderStates(this.state);
-        return (hAsync(Host, { key: 'ec78d6ba606de5a637558504d9b8d389991bd5d1', class: "kol-single-select" }, hAsync("div", { key: 'ba04220b3ac54ff6b8497948854df6d884ec152c', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: 'c5ba4a1ee8facce73b47cdece06df4623b718be8', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: '103578ebf9a841970388a5c3969218f981897e6c', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '191bf5b70972f84dc1359082b6538617986a0383', slot: "input" }, hAsync("div", { key: '50d8b9e371af7679ae853d2001b95c9bb8383398', class: "single-select__group" }, hAsync("input", Object.assign({ key: '609164107d55ccf23a0f792f26da70aa7d697e69', ref: this.catchRef, class: "single-select__input", type: "text", "aria-autocomplete": "both", "aria-controls": "listbox", value: this._inputValue, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, name: this.state._name, required: this.state._required, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onClick: this.toggleListbox.bind(this), onFocus: (event) => {
+        return (hAsync(Host, { key: 'ec78d6ba606de5a637558504d9b8d389991bd5d1', class: "kol-single-select" }, hAsync("div", { key: 'ba04220b3ac54ff6b8497948854df6d884ec152c', class: `single-select ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputTag, { key: 'c5ba4a1ee8facce73b47cdece06df4623b718be8', _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, role: `presentation` }, hAsync("span", { key: '103578ebf9a841970388a5c3969218f981897e6c', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '191bf5b70972f84dc1359082b6538617986a0383', slot: "input" }, hAsync("div", { key: '50d8b9e371af7679ae853d2001b95c9bb8383398', class: "single-select__group" }, hAsync("input", Object.assign({ key: '46d194911f251412811fc2f41989aa8a48f98c36', ref: this.catchRef, class: "single-select__input", type: "text", "aria-autocomplete": "both", "aria-controls": "listbox", value: this._inputValue, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, name: this.state._name, required: this.state._required }, this.controller.onFacade, { onInput: this.onInput.bind(this), onChange: this.onChange.bind(this), onClick: this.toggleListbox.bind(this), onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
                 this.controller.onFacade.onBlur(event);
                 this.inputHasFocus = false;
-            }, placeholder: this.state._placeholder })), this._inputValue && (hAsync(KolIconTag, { key: 'b47857a2f8a9bfb91f3ad2ca5c7bb6d74fd74dbd', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
+            }, placeholder: this.state._placeholder })), this._inputValue && (hAsync(KolIconTag, { key: '8cff7aaaa6727a1cface8ba6ff14b2f46c4f379d', _icons: "codicon codicon-close", _label: translate('kol-delete-selection'), onClick: () => {
                 var _a;
                 this.clearSelection();
                 (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
-            }, class: "single-select__delete" })), hAsync("button", { key: '163283befaaa3f90cc9892303df68900c8eece60', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: '442bc6da5b9a7319e3943499919f2726f5326d93', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: 'c43949ddf6373349bf2260c666d17b318ecd3a36', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
+            }, class: "single-select__delete" })), hAsync("button", { key: '6f04499addadb0afb347c4c9f59d9f96b5e949fd', tabindex: "-1", class: "single-select__button", onClick: this.toggleListbox.bind(this), disabled: this.state._disabled }, hAsync(KolIconTag, { key: 'b90af9338c0039ecd8802aba4e0b9a5a1b43437e', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown') }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '2625d07e9fabd15eb99ab6bd3321259d9f9f3720', role: "listbox", class: clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden'), onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
                 if (el)
                     this.refOptions[index] = el;
-            }, tabIndex: -1, role: "option", "aria-selected": this.state._value === option.value, onClick: (event) => {
+            }, tabIndex: -1, role: "option", "aria-selected": this.state._value === option.value ? 'true' : undefined, onClick: (event) => {
                 var _a;
                 this.selectOption(event, option);
                 (_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
@@ -24603,7 +24636,7 @@ class KolTableStateless {
         let max = 0;
         horizontalHeaders.forEach((row) => {
             let count = 0;
-            row.forEach((col) => { var _a; return (count += (_a = col.colSpan) !== null && _a !== void 0 ? _a : 1); });
+            Array.isArray(row) && row.forEach((col) => { var _a; return (count += (_a = col.colSpan) !== null && _a !== void 0 ? _a : 1); });
             if (max < count) {
                 max = count;
             }
@@ -24618,7 +24651,7 @@ class KolTableStateless {
         let max = 0;
         verticalHeaders.forEach((col) => {
             let count = 0;
-            col.forEach((row) => { var _a; return (count += (_a = row.rowSpan) !== null && _a !== void 0 ? _a : 1); });
+            Array.isArray(col) && col.forEach((row) => { var _a; return (count += (_a = row.rowSpan) !== null && _a !== void 0 ? _a : 1); });
             if (max < count) {
                 max = count;
             }
@@ -24631,34 +24664,34 @@ class KolTableStateless {
         }
         return max;
     }
-    filterHeaderKeys(headers) {
-        const primaryHeader = [];
+    getThePrimaryHeadersWithKeysIfExists(headers) {
+        const primaryHeadersWithKeys = [];
         headers.forEach((cells) => {
             cells.forEach((cell) => {
                 if (typeof cell.key === 'string') {
-                    primaryHeader.push(cell);
+                    primaryHeadersWithKeys.push(cell);
                 }
             });
         });
-        return primaryHeader;
+        return primaryHeadersWithKeys;
     }
-    getPrimaryHeader(headers) {
+    getPrimaryHeaders(headers) {
         var _a, _b;
-        let primaryHeader = this.filterHeaderKeys((_a = headers.horizontal) !== null && _a !== void 0 ? _a : []);
+        let primaryHeadersWithKeys = this.getThePrimaryHeadersWithKeysIfExists((_a = headers.horizontal) !== null && _a !== void 0 ? _a : []);
         this.horizontal = true;
-        if (primaryHeader.length === 0) {
-            primaryHeader = this.filterHeaderKeys((_b = headers.vertical) !== null && _b !== void 0 ? _b : []);
-            if (primaryHeader.length > 0) {
+        if (primaryHeadersWithKeys.length === 0) {
+            primaryHeadersWithKeys = this.getThePrimaryHeadersWithKeysIfExists((_b = headers.vertical) !== null && _b !== void 0 ? _b : []);
+            if (primaryHeadersWithKeys.length > 0) {
                 this.horizontal = false;
             }
         }
-        return primaryHeader;
+        return primaryHeadersWithKeys;
     }
     createDataField(data, headers, isFoot) {
         var _a;
         headers.horizontal = Array.isArray(headers === null || headers === void 0 ? void 0 : headers.horizontal) ? headers.horizontal : [];
         headers.vertical = Array.isArray(headers === null || headers === void 0 ? void 0 : headers.vertical) ? headers.vertical : [];
-        const primaryHeader = this.getPrimaryHeader(headers);
+        const primaryHeader = this.getPrimaryHeaders(headers);
         const maxCols = this.getNumberOfCols(headers.horizontal, data);
         let maxRows = this.getNumberOfRows(headers.vertical, data);
         let startRow = 0;
@@ -24820,6 +24853,13 @@ class KolTableStateless {
                 }
             } })), hAsync(KolTooltipWcTag, { "aria-hidden": "true", class: "input-tooltip", _align: "right", _id: `${translationKey}-label`, _label: label }))));
     }
+    renderHeaderTdCell() {
+        return (hAsync(Fragment, null, Array.isArray(this.state._headerCells.horizontal) &&
+            this.state._headerCells.horizontal.length > 0 &&
+            Array.isArray(this.state._headerCells.vertical) &&
+            this.state._headerCells.vertical.length > 0 &&
+            Array.isArray(this.state._headerCells.horizontal) && (hAsync("td", { "aria-hidden": "true", colSpan: this.state._headerCells.vertical.length, rowSpan: this.state._headerCells.horizontal.length }))));
+    }
     renderHeadingCell(cell, rowIndex, colIndex, isVertical) {
         let ariaSort = undefined;
         let sortButtonIcon = 'codicon codicon-fold';
@@ -24851,9 +24891,11 @@ class KolTableStateless {
             } })) : (cell.label)));
     }
     renderSpacer(variant, cellDefs) {
-        var _a;
-        const colspan = (_a = cellDefs === null || cellDefs === void 0 ? void 0 : cellDefs[0]) === null || _a === void 0 ? void 0 : _a.reduce((acc, row) => acc + (row.colSpan || 1), 0);
-        return (hAsync("tr", { class: `${variant}-spacer`, "aria-hidden": "true" }, hAsync("td", { colSpan: colspan })));
+        var _a, _b;
+        const verticalHeaderColpan = ((_a = this.state._headerCells.vertical) === null || _a === void 0 ? void 0 : _a.length) || 0;
+        const colspan = (_b = cellDefs === null || cellDefs === void 0 ? void 0 : cellDefs[0]) === null || _b === void 0 ? void 0 : _b.reduce((acc, row) => acc + (row.colSpan || 1), 0);
+        const selectionCell = this.state._selection ? 1 : 0;
+        return (hAsync("tr", { "aria-hidden": "true", class: `${variant}-spacer` }, hAsync("td", { colSpan: verticalHeaderColpan + colspan + selectionCell })));
     }
     renderFoot() {
         if (!this.state._dataFoot || this.state._dataFoot.length === 0) {
@@ -24868,28 +24910,29 @@ class KolTableStateless {
     render() {
         const dataField = this.createDataField(this.state._data, this.state._headerCells);
         this.checkboxRefs = [];
-        return (hAsync(Host, { key: '215026e1368f66194ebd3269337f796c061fc374', class: "kol-table-stateless-wc" }, hAsync("div", { key: '1a63ff928babc2d906287f2e8fbaca897c0a043a', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '6e5e32b75489ef481ba3ea47c548bf2ca7533423', style: {
+        return (hAsync(Host, { key: '482e452bd3bd6dd800bd0bd277618d543b932511', class: "kol-table-stateless-wc" }, hAsync("div", { key: 'd237bc287eb2dbb4c423857807f4ce2aa079f4d4', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: 'a4f3435eb7f8ebb7bea738fded143d2fd5ee1261', style: {
                 minWidth: this.state._minWidth,
-            } }, hAsync("div", { key: '578f5e88ece3b1e966c4de611203d5498df3b88a', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: '6ee0f0ad7781a77cf9a82ebe8375c088c100888a', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: '4dc023f72802e7fa3c1662fbf7b8a2e31879c4dd' }, [
-            this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), cols.map((cell, colIndex) => {
-                if (cell.asTd === true) {
-                    return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${cell.label}`, class: {
-                            [cell.textAlign]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,
-                        }, colSpan: cell.colSpan, rowSpan: cell.rowSpan, style: {
-                            textAlign: cell.textAlign,
-                            width: cell.width,
-                        }, ref: typeof cell.render === 'function'
-                            ? (el) => {
-                                this.cellRender(cell, el);
-                            }
-                            : undefined }, typeof cell.render !== 'function' ? cell.label : ''));
-                }
-                else {
-                    return this.renderHeadingCell(cell, rowIndex, colIndex, false);
-                }
-            })))),
+            } }, hAsync("div", { key: 'ad3995862452de82107201bca3cc1b0aadd0cf36', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: 'c18a326a251676d7abea34f20c47187461d91748', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: '770b33b2bfd99cfb6693700cc77a919675101eb9' }, [
+            this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) &&
+                cols.map((cell, colIndex) => {
+                    if (cell.asTd === true) {
+                        return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${cell.label}`, class: {
+                                [cell.textAlign]: typeof cell.textAlign === 'string' && cell.textAlign.length > 0,
+                            }, colSpan: cell.colSpan, rowSpan: cell.rowSpan, style: {
+                                textAlign: cell.textAlign,
+                                width: cell.width,
+                            }, ref: typeof cell.render === 'function'
+                                ? (el) => {
+                                    this.cellRender(cell, el);
+                                }
+                                : undefined }, typeof cell.render !== 'function' ? cell.label : ''));
+                    }
+                    else {
+                        return this.renderHeadingCell(cell, rowIndex, colIndex, false);
+                    }
+                })))),
             this.renderSpacer('head', this.state._headerCells.horizontal),
-        ])), hAsync("tbody", { key: 'eda54c00f2e690d59a3883f6d470b225d8bdd99a' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
+        ])), hAsync("tbody", { key: 'f0de4de3fd33fced22b3c29062357795409589be' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -25285,6 +25328,9 @@ class TextareaController extends InputIconController {
     validateRows(value) {
         validateRows(this.component, value);
     }
+    validateSpellCheck(value) {
+        validateSpellCheck(this.component, value);
+    }
     validateValue(value) {
         watchString(this.component, '_value', value, {
             hooks: {
@@ -25302,6 +25348,7 @@ class TextareaController extends InputIconController {
         this.validateResize(this.component._resize);
         this.validateRequired(this.component._required);
         this.validateRows(this.component._rows);
+        this.validateSpellCheck(this.component._spellCheck);
         this.validateValue(this.component._value);
     }
 }
@@ -25333,7 +25380,7 @@ class KolTextarea {
     render() {
         const { ariaDescribedBy } = getRenderStates(this.state);
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, { key: 'beda70f93be9d5c2026295e7a7977753464f5cf7', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'a9e2d11ce5a143e8a8acdbfe3bbaa8179d71ed58', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '8b341f3119b180295d53bf05c88b5c313c673702', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'ed2ff6fea8c88e7ab7bc4583c68bd92eae45be54', slot: "input" }, hAsync("textarea", Object.assign({ key: '21d45b6e999db7a0e90d62a5276df4a946395bb0', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput, onFocus: (event) => {
+        return (hAsync(Host, { key: '9770edffb4be5cea8a71c9a4bd75f24b5102c5bf', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: '33005094032fe05acb36aa4fb6265400ebf94c92', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.showAsAlert(), _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _shortKey: this.state._shortKey, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.textareaRef) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'e061a13f3b3d7b111feb2a252f91f9a5a2696bd5', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedBadgeText, { badgeText: buildBadgeTextString(this.state._accessKey || this.state._shortKey), label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, buildBadgeTextString(this.state._accessKey || this.state._shortKey)))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '2b9c5e0fff5a6d27f044b5521277cb23ca0797b9', slot: "input" }, hAsync("textarea", Object.assign({ key: 'c03589fa5a0f9f26d71e8bc3d7c2af0990388968', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: this.state._spellCheck }, this.controller.onFacade, { onInput: this.onInput, onFocus: (event) => {
                 this.controller.onFacade.onFocus(event);
                 this.inputHasFocus = true;
             }, onBlur: (event) => {
@@ -25379,6 +25426,7 @@ class KolTextarea {
         this._required = false;
         this._rows = undefined;
         this._shortKey = undefined;
+        this._spellCheck = undefined;
         this._syncValueBySelector = undefined;
         this._tabIndex = undefined;
         this._tooltipAlign = 'top';
@@ -25471,6 +25519,9 @@ class KolTextarea {
     validateShortKey(value) {
         this.controller.validateShortKey(value);
     }
+    validateSpellCheck(value) {
+        this.controller.validateSpellCheck(value);
+    }
     validateSyncValueBySelector(value) {
         this.controller.validateSyncValueBySelector(value);
     }
@@ -25526,6 +25577,7 @@ class KolTextarea {
         "_required": ["validateRequired"],
         "_rows": ["validateRows"],
         "_shortKey": ["validateShortKey"],
+        "_spellCheck": ["validateSpellCheck"],
         "_syncValueBySelector": ["validateSyncValueBySelector"],
         "_tabIndex": ["validateTabIndex"],
         "_touched": ["validateTouched"],
@@ -25560,6 +25612,7 @@ class KolTextarea {
             "_required": [4],
             "_rows": [1026],
             "_shortKey": [1, "_short-key"],
+            "_spellCheck": [4, "_spell-check"],
             "_syncValueBySelector": [1, "_sync-value-by-selector"],
             "_tabIndex": [2, "_tab-index"],
             "_tooltipAlign": [1, "_tooltip-align"],