@public-ui/hydrate 2.2.3 → 2.2.5-rc.0

package/dist/index.js

@@ -2658,9 +2658,9 @@ var loglevel = {exports: {}};
 }));
 }(loglevel));
 
-var m = loglevel.exports;
+var l = loglevel.exports;
 
-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.
+const $=new Map,M=[],Y=new Map,a$1={A11yUi:{CSS_STYLE_CACHE:$,HYDRATED_HISTORY:M,STYLING_TASK_QUEUE:Y,Themes:{}}};let y=!1;const I=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,O=e=>typeof e=="string"&&I.test(e),A=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]+)?$/`)},k=(e,t,s,o)=>p(e,t,s,o),p=(e,t,s,o)=>{o=o??{},o.append=o.append??!1,A(e),y===!1&&(y=!0,l.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 '...';
@@ -2670,7 +2670,7 @@ const H=new Map,M=[],Y=new Map,o$1={A11yUi:{CSS_STYLE_CACHE:H,HYDRATED_HISTORY:M
 	.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]={}),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{}
+	.catch(console.warn);`)),(typeof a$1.A11yUi.Themes[e]!="object"||a$1.A11yUi.Themes[e]===null)&&(a$1.A11yUi.Themes[e]={}),o.append&&typeof a$1.A11yUi.Themes[e][t]=="string"?a$1.A11yUi.Themes[e][t]+=s:a$1.A11yUi.Themes[e][t]=s;},P$1=(e,t,s,o)=>u$1(e,t,s,o),u$1=(e,t,s,o)=>(A(e),typeof t=="object"&&t!==null&&Object.getOwnPropertyNames(t).forEach(n=>{const r=t[n],i=n.toLowerCase(),m=typeof o?.transformTagName=="function"&&!["GLOBAL","PROPERTIES"].includes(n)?o.transformTagName(i):n;typeof r=="string"&&r.length>0&&p(e,m.toUpperCase(),r,s);}),e);const w=new Set,q=/--[^;]+/g,J=/:/,V=(e,t)=>{let s=t.match(q);if(Array.isArray(s)){s=s.filter(n=>J.test(n));const o=document.createElement("style");o.innerHTML=`.${e} {${s.join(";")}}`,document.querySelector("head")?.appendChild(o);}w.add(e);},f=(e,t)=>typeof a$1.A11yUi=="object"&&a$1.A11yUi!==null&&typeof a$1.A11yUi.Themes=="object"&&a$1.A11yUi.Themes!==null&&typeof a$1.A11yUi.Themes[e]=="object"&&a$1.A11yUi.Themes[e]!==null&&typeof a$1.A11yUi.Themes[e][t]=="string"?a$1.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",W=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},X=(e,t)=>{try{if(a$1.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=[];t.forEach(o=>{const n=new CSSStyleSheet;n.replaceSync(o),s.push(n);}),e.adoptedStyleSheets=s;}catch{[...t].reverse().forEach((s,o)=>{if(typeof s!="string"||s.length===0)return;const n=document.createElement("style");switch(n.dataset.themingFallback="",o){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);});}},Z$1=(e,t,s)=>{if(s!==!1){const o=[...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"?(o.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"&&(o.forEach(r=>t.push(r.innerHTML)),n.forEach(r=>t.push(Array.from(r.cssRules).map(i=>i.cssText).join(""))));}},L=(e,t,s)=>{const o=t.name||"default";let n;try{if(e.shadowRoot===null)throw new Error("ShadowRoot is null");n=e.shadowRoot;}catch{n=e;}if(a$1.A11yUi.CSS_STYLE_CACHE.get(o)?.has(e.tagName))_(e,n,a$1.A11yUi.CSS_STYLE_CACHE.get(o)?.get(e.tagName),s);else {const r=f(o,"PROPERTIES"),i=f(o,"GLOBAL"),m=f(o,e.tagName);w.has(o)===!1&&V(o,i);const h=[r,i,m];Z$1(n,h,t.encroachCss),t.loglevel==="debug"&&console.log(e.tagName,h),t.cache===!0&&(a$1.A11yUi.CSS_STYLE_CACHE.has(o)===!1&&a$1.A11yUi.CSS_STYLE_CACHE.set(o,new Map),a$1.A11yUi.CSS_STYLE_CACHE.get(o)?.set(e.tagName,h)),_(e,n,h,s);}},_=(e,t,s,o)=>{W(t),X(t,s),e.style.display=o;},N=e=>{e.loglevel==="debug"&&a$1.A11yUi.HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:a$1.A11yUi.STYLING_TASK_QUEUE.size});},se=e=>{a$1.A11yUi.STYLING_TASK_QUEUE.delete(e);},j=(e,t)=>{se(e),N(t);},oe=e=>{for(const t of e)if(a$1.A11yUi.STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:s,themeDetails:o}=a$1.A11yUi.STYLING_TASK_QUEUE.get(t.target);L(t.target,o,s),j(t.target,o);}};try{new MutationObserver(oe);}catch{}
 
 const alertTypeOptions = ['default', 'info', 'success', 'warning', 'error'];
 const alertVariantOptions = ['card', 'msg'];
@@ -3745,9 +3745,9 @@ const koliBriQuerySelector = (selector, node) => querySelector(selector, node ||
 const koliBriQuerySelectorAll = (selector, node) => querySelectorAll(selector, node || getDocument());
 class KoliBriDevHelper {
 }
-KoliBriDevHelper.getCssStyle = l;
-KoliBriDevHelper.patchTheme = k;
-KoliBriDevHelper.patchThemeTag = $;
+KoliBriDevHelper.getCssStyle = f;
+KoliBriDevHelper.patchTheme = P$1;
+KoliBriDevHelper.patchThemeTag = k;
 KoliBriDevHelper.querySelector = koliBriQuerySelector;
 KoliBriDevHelper.querySelectorAll = koliBriQuerySelectorAll;
 KoliBriDevHelper.stringifyJson = stringifyJson;
@@ -4044,7 +4044,7 @@ const validateDownload = (component, value) => {
 };
 
 const validateErrorList = (component, value) => {
-    watchValidator(component, 'errorList', (value) => typeof value === 'object', new Set(['Object']), value);
+    watchValidator(component, 'errorList', (value) => Array.isArray(value) && value.find((v) => !(typeof v === 'string' || typeof v === 'function')) === undefined, new Set(['string', 'function']), value);
 };
 
 const validateHasCloser = (component, value) => {
@@ -4228,10 +4228,6 @@ const validateMax = (component, value, options) => {
     watchNumber(component, '_max', value, options);
 };
 
-const validateModal = (component, value) => {
-    watchBoolean(component, '_modal', value);
-};
-
 const validateMsg = (component, value) => {
     objectObjectHandler(value, () => {
         try {
@@ -4372,7 +4368,30 @@ const validateTableHeaderCells = (component, value) => {
             }
             catch (e) {
             }
-            watchValidator(component, '_headerCells', (value) => typeof value === 'object' && value !== null, new Set(['TableHeaderCellsPropType']), value);
+            watchValidator(component, '_headerCells', (value) => typeof value === 'object' &&
+                value !== null &&
+                (value.horizontal === undefined ||
+                    (Array.isArray(value.horizontal) && value.horizontal.find((headerRow) => !Array.isArray(headerRow)) === undefined)) &&
+                (value.vertical === undefined || (Array.isArray(value.vertical) && value.vertical.find((headerCol) => !Array.isArray(headerCol)) === undefined)) &&
+                true, new Set(['TableHeaderCellsPropType']), value, {
+                hooks: {
+                    afterPatch: (value, state) => {
+                        var _a;
+                        const headerCells = value;
+                        const widths = [];
+                        (_a = headerCells.horizontal) === null || _a === void 0 ? void 0 : _a.forEach((headerRow) => {
+                            headerRow.forEach((headerCell) => {
+                                if (headerCell.width) {
+                                    widths.push(headerCell.width);
+                                }
+                            });
+                        });
+                        if (widths.length > 0) {
+                            state._minWidth = `calc(${widths.join(' + ')})`;
+                        }
+                    },
+                },
+            });
         });
     });
 };
@@ -6939,14 +6958,9 @@ class KolDrawer {
         };
     }
     async open() {
-        var _a, _b;
+        var _a;
         this.state = Object.assign(Object.assign({}, this.state), { _open: true });
-        if (this.state._modal) {
-            (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal();
-        }
-        else {
-            (_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.show();
-        }
+        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal();
     }
     async close() {
         this.state = Object.assign(Object.assign({}, this.state), { _open: false });
@@ -6963,8 +6977,7 @@ class KolDrawer {
         return (hAsync("div", { ref: this.getWrapperRef, class: `drawer__wrapper drawer__wrapper--${align} ${this.state._open ? 'drawer__wrapper--open' : 'is-closing'}`, "aria-label": this.state._label }, hAsync("div", { class: "drawer__content" }, hAsync("slot", null))));
     }
     render() {
-        const isModal = this.state._modal;
-        return (hAsync(Host, { key: '9c670b4923f78c3060bafe6f2e90c45a20b89fd7', class: `kol-drawer drawer ${isModal ? 'drawer--modal' : ''}`, ref: (el) => (this.hostElement = el) }, hAsync("dialog", { key: 'd94fade1430bfed4dac37660d07ae5265b994f4f', class: "drawer__dialog", ref: this.getRef }, this.renderDialogContent())));
+        return (hAsync(Host, { key: '18007fd3e3eb1d4794cafd1d18780b7f3a58fe4e', class: `kol-drawer drawer`, ref: (el) => (this.hostElement = el) }, hAsync("dialog", { key: '07cd87f6d086e51002c4fcea7402ca0910bc2c7a', class: "drawer__dialog", ref: this.getRef }, this.renderDialogContent())));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -6974,9 +6987,6 @@ class KolDrawer {
     validateAlign(value) {
         validateAlign(this, value);
     }
-    validateModal(value) {
-        validateModal(this, value);
-    }
     async validateOpen(value) {
         if (typeof value === 'boolean') {
             validateOpen(this, value);
@@ -7019,13 +7029,11 @@ class KolDrawer {
         this.validateLabel(this._label);
         await this.validateOpen(this._open);
         this.validateAlign(this._align);
-        this.validateModal(this._modal);
         this.validateOn(this._on);
     }
     static get watchers() { return {
         "_label": ["validateLabel"],
         "_align": ["validateAlign"],
-        "_modal": ["validateModal"],
         "_open": ["validateOpen"],
         "_on": ["validateOn"]
     }; }
@@ -7073,16 +7081,11 @@ class KolForm {
                 (_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onReset(event);
             }
         };
-        this.handleLinkClick = (event) => {
-            var _a;
-            const href = (_a = event.target) === null || _a === void 0 ? void 0 : _a.href;
-            if (href) {
-                const hrefUrl = new URL(href);
-                const targetElement = document.querySelector(hrefUrl.hash);
-                if (targetElement && typeof targetElement.focus === 'function') {
-                    targetElement.scrollIntoView({ behavior: 'smooth' });
-                    targetElement.focus();
-                }
+        this.handleLinkClick = (selector) => {
+            const targetElement = document.querySelector(selector);
+            if (targetElement && typeof targetElement.focus === 'function') {
+                targetElement.scrollIntoView({ behavior: 'smooth' });
+                targetElement.focus();
             }
         };
         this._on = undefined;
@@ -7091,9 +7094,13 @@ class KolForm {
         this.state = {};
     }
     renderErrorList(errorList) {
-        return (hAsync(KolAlertFc$1, { type: "error", variant: "card", label: translate('kol-error-list-message') }, hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkWcTag, { _href: error.selector, _label: error.message, _on: { onClick: this.handleLinkClick }, ref: (el) => {
-                if (index === 0)
-                    this.errorListElement = el;
+        return (hAsync(KolAlertFc$1, { ref: (el) => {
+                this.errorListBlock = el;
+            }, type: "error", variant: "card", label: translate('kol-error-list-message') }, hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkWcTag, { _href: "", _label: error.message, _on: { onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }, ref: (el) => {
+                if (index === 0) {
+                    this.errorListFirstLink = el;
+                    this.scrollToErrorList();
+                }
             } }))))))));
     }
     renderFormElement() {
@@ -7101,13 +7108,21 @@ class KolForm {
     }
     render() {
         const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
-        return (hAsync(Host, { key: '18ebb2102e9f63610614754d7981ea2b71585b13', class: "kol-form" }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
+        return (hAsync(Host, { key: '69dbcbe8a46d038040ba381cdf6ec67c8e39f0dc', class: "kol-form" }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
     }
-    async focusErrorList() {
+    scrollToErrorList() {
         var _a;
-        if (this._errorList && this._errorList.length > 0) {
-            (_a = this.errorListElement) === null || _a === void 0 ? void 0 : _a.focus();
-        }
+        (_a = this.errorListBlock) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+        });
+        setTimeout(() => {
+            var _a, _b;
+            (_b = (_a = this.errorListFirstLink) === null || _a === void 0 ? void 0 : _a.querySelector('a')) === null || _b === void 0 ? void 0 : _b.focus();
+        }, 250);
+    }
+    async focusErrorList() {
+        this.scrollToErrorList();
         return Promise.resolve();
     }
     validateOn(value) {
@@ -9366,11 +9381,7 @@ class KolInputNumber {
         this.controller.validateTouched(value);
     }
     validateValue(value) {
-        this.controller.validateValueEx(value, (v) => {
-            if (v === '' && this.inputRef) {
-                this.inputRef.value = '';
-            }
-        });
+        this.controller.validateValueEx(value);
     }
     componentWillLoad() {
         this._touched = this._touched === true;
@@ -13351,7 +13362,8 @@ function isContainingBlock(elementOrCss) {
   const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-  return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+  // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+  return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -13909,6 +13921,10 @@ const platform = {
   isRTL
 };
 
+function rectsAreEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+
 // https://samthor.au/2021/observing-dom/
 function observeMove(element, onMove) {
   let io = null;
@@ -13928,12 +13944,13 @@ function observeMove(element, onMove) {
       threshold = 1;
     }
     cleanup();
+    const elementRectForRootMargin = element.getBoundingClientRect();
     const {
       left,
       top,
       width,
       height
-    } = element.getBoundingClientRect();
+    } = elementRectForRootMargin;
     if (!skip) {
       onMove();
     }
@@ -13966,6 +13983,16 @@ function observeMove(element, onMove) {
           refresh(false, ratio);
         }
       }
+      if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+        // It's possible that even though the ratio is reported as 1, the
+        // element is not actually fully within the IntersectionObserver's root
+        // area anymore. This can happen under performance constraints. This may
+        // be a bug in the browser's IntersectionObserver implementation. To
+        // work around this, we compare the element's bounding rect now with
+        // what it was at the time we created the IntersectionObserver. If they
+        // are not equal then the element moved, so we refresh.
+        refresh();
+      }
       isFirstUpdate = false;
     }
 
@@ -14043,7 +14070,7 @@ function autoUpdate(reference, floating, update, options) {
   }
   function frameLoop() {
     const nextRefRect = getBoundingClientRect(reference);
-    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+    if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
       update();
     }
     prevRefRect = nextRefRect;
@@ -24571,7 +24598,7 @@ class KolTableStateless {
         });
     }
     validateMinWidth(value) {
-        watchString(this, '_minWidth', value, {
+        watchString(this, '_deprecatedMinWidth', value, {
             defaultValue: undefined,
         });
     }
@@ -24924,9 +24951,9 @@ class KolTableStateless {
     render() {
         const dataField = this.createDataField(this.state._data, this.state._headerCells);
         this.checkboxRefs = [];
-        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: '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' }, [
+        return (hAsync(Host, { key: '9518b44a4421b5843936ee7623532733b6134a2a', class: "kol-table-stateless-wc" }, hAsync("div", { key: '5bfd8c297dd3bed301c7e7e455b60278e270af24', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '6906eae36940a1a00a5eed7401526a218949e990', style: {
+                minWidth: this.state._deprecatedMinWidth || this.state._minWidth,
+            } }, hAsync("div", { key: 'ee461a67c036209a11cd55134023a85090c371d8', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: 'a8aa614eb1b4db063238a818022bf2139b269b09', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: '1c88c8dba9d88ef7163645b686d1d5007cc75f47' }, [
             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) {
@@ -24946,7 +24973,7 @@ class KolTableStateless {
                     }
                 })))),
             this.renderSpacer('head', this.state._headerCells.horizontal),
-        ])), hAsync("tbody", { key: 'f0de4de3fd33fced22b3c29062357795409589be' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
+        ])), hAsync("tbody", { key: 'd5983096363ef26b192a129bec8ab8e1df051056' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -26035,7 +26062,7 @@ class KolTree {
         this._label = undefined;
     }
     render() {
-        return (hAsync(Host, { key: 'd64beb3b2d19ed2925d8e865b900dd1b89d4b56c', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'e8cfc3c6cf8e2fb60bc8b8d57e463a92ffe769be', _label: this._label }, hAsync("slot", { key: 'f8836f6da44c352bf6f9cb8773cef2d7e46b97e4' }))));
+        return (hAsync(Host, { key: 'f264ff4f437f2d94209b5e1b408fc12bae1e3715', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: '074485479eab7e05309d0804a5d9afefac16a243', _label: this._label }, hAsync("slot", { key: '7b2f6a10e88584659e00d2cb9123ee9e8ed7b0ea' }))));
     }
     static get style() { return {
         default: KolTreeDefaultStyle0
@@ -26083,7 +26110,7 @@ class KolTreeItem {
         return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
     }
     render() {
-        return (hAsync(KolTreeItemWcTag, { key: '9c6f09e0be4ef2bd7dc33b03dd4b47e5c22b5476', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '70df361cfad82df0285e65142336d971d8124a8d' })));
+        return (hAsync(KolTreeItemWcTag, { key: 'fdaac019e361b8efe063a22a47f3b67fab18d1ba', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '73d1d194d03797ef974eab18f49c830148649110' })));
     }
     static get style() { return {
         default: KolTreeItemDefaultStyle0
@@ -26237,7 +26264,7 @@ class KolTreeWc {
         validateLabel(this, value);
     }
     render() {
-        return (hAsync(Host, { key: '21f44e081f45c082e7d864ac4168008f68bbc7ea', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: 'c59d96ab4d8f3e7a08593a5b817f4baae8f41b5a', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '77024767c34ade192b8413dac126bc583eae726a', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '03d7918839fe38036b1480976991a032e5aa4d5e' })))));
+        return (hAsync(Host, { key: 'fc79fee1595fed55d37dc2fb4f3509ff6c16686b', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: 'd8d4800627e61c9766150d1d9a440889cf122440', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '40b1ee8c5d89febb2975168f5630fdd01b6e4e97', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '86f66e7236df8aa03d942450c06a2f2f5930b987' })))));
     }
     static isTreeItem(element) {
         return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();

package/dist/index.mjs

@@ -2654,9 +2654,9 @@ var loglevel = {exports: {}};
 }));
 }(loglevel));
 
-var m = loglevel.exports;
+var l = loglevel.exports;
 
-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.
+const $=new Map,M=[],Y=new Map,a$1={A11yUi:{CSS_STYLE_CACHE:$,HYDRATED_HISTORY:M,STYLING_TASK_QUEUE:Y,Themes:{}}};let y=!1;const I=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,O=e=>typeof e=="string"&&I.test(e),A=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]+)?$/`)},k=(e,t,s,o)=>p(e,t,s,o),p=(e,t,s,o)=>{o=o??{},o.append=o.append??!1,A(e),y===!1&&(y=!0,l.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 H=new Map,M=[],Y=new Map,o$1={A11yUi:{CSS_STYLE_CACHE:H,HYDRATED_HISTORY:M
 	.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]={}),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{}
+	.catch(console.warn);`)),(typeof a$1.A11yUi.Themes[e]!="object"||a$1.A11yUi.Themes[e]===null)&&(a$1.A11yUi.Themes[e]={}),o.append&&typeof a$1.A11yUi.Themes[e][t]=="string"?a$1.A11yUi.Themes[e][t]+=s:a$1.A11yUi.Themes[e][t]=s;},P$1=(e,t,s,o)=>u$1(e,t,s,o),u$1=(e,t,s,o)=>(A(e),typeof t=="object"&&t!==null&&Object.getOwnPropertyNames(t).forEach(n=>{const r=t[n],i=n.toLowerCase(),m=typeof o?.transformTagName=="function"&&!["GLOBAL","PROPERTIES"].includes(n)?o.transformTagName(i):n;typeof r=="string"&&r.length>0&&p(e,m.toUpperCase(),r,s);}),e);const w=new Set,q=/--[^;]+/g,J=/:/,V=(e,t)=>{let s=t.match(q);if(Array.isArray(s)){s=s.filter(n=>J.test(n));const o=document.createElement("style");o.innerHTML=`.${e} {${s.join(";")}}`,document.querySelector("head")?.appendChild(o);}w.add(e);},f=(e,t)=>typeof a$1.A11yUi=="object"&&a$1.A11yUi!==null&&typeof a$1.A11yUi.Themes=="object"&&a$1.A11yUi.Themes!==null&&typeof a$1.A11yUi.Themes[e]=="object"&&a$1.A11yUi.Themes[e]!==null&&typeof a$1.A11yUi.Themes[e][t]=="string"?a$1.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",W=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},X=(e,t)=>{try{if(a$1.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=[];t.forEach(o=>{const n=new CSSStyleSheet;n.replaceSync(o),s.push(n);}),e.adoptedStyleSheets=s;}catch{[...t].reverse().forEach((s,o)=>{if(typeof s!="string"||s.length===0)return;const n=document.createElement("style");switch(n.dataset.themingFallback="",o){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);});}},Z$1=(e,t,s)=>{if(s!==!1){const o=[...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"?(o.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"&&(o.forEach(r=>t.push(r.innerHTML)),n.forEach(r=>t.push(Array.from(r.cssRules).map(i=>i.cssText).join(""))));}},L=(e,t,s)=>{const o=t.name||"default";let n;try{if(e.shadowRoot===null)throw new Error("ShadowRoot is null");n=e.shadowRoot;}catch{n=e;}if(a$1.A11yUi.CSS_STYLE_CACHE.get(o)?.has(e.tagName))_(e,n,a$1.A11yUi.CSS_STYLE_CACHE.get(o)?.get(e.tagName),s);else {const r=f(o,"PROPERTIES"),i=f(o,"GLOBAL"),m=f(o,e.tagName);w.has(o)===!1&&V(o,i);const h=[r,i,m];Z$1(n,h,t.encroachCss),t.loglevel==="debug"&&console.log(e.tagName,h),t.cache===!0&&(a$1.A11yUi.CSS_STYLE_CACHE.has(o)===!1&&a$1.A11yUi.CSS_STYLE_CACHE.set(o,new Map),a$1.A11yUi.CSS_STYLE_CACHE.get(o)?.set(e.tagName,h)),_(e,n,h,s);}},_=(e,t,s,o)=>{W(t),X(t,s),e.style.display=o;},N=e=>{e.loglevel==="debug"&&a$1.A11yUi.HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:a$1.A11yUi.STYLING_TASK_QUEUE.size});},se=e=>{a$1.A11yUi.STYLING_TASK_QUEUE.delete(e);},j=(e,t)=>{se(e),N(t);},oe=e=>{for(const t of e)if(a$1.A11yUi.STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:s,themeDetails:o}=a$1.A11yUi.STYLING_TASK_QUEUE.get(t.target);L(t.target,o,s),j(t.target,o);}};try{new MutationObserver(oe);}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 = l;
-KoliBriDevHelper.patchTheme = k;
-KoliBriDevHelper.patchThemeTag = $;
+KoliBriDevHelper.getCssStyle = f;
+KoliBriDevHelper.patchTheme = P$1;
+KoliBriDevHelper.patchThemeTag = k;
 KoliBriDevHelper.querySelector = koliBriQuerySelector;
 KoliBriDevHelper.querySelectorAll = koliBriQuerySelectorAll;
 KoliBriDevHelper.stringifyJson = stringifyJson;
@@ -4040,7 +4040,7 @@ const validateDownload = (component, value) => {
 };
 
 const validateErrorList = (component, value) => {
-    watchValidator(component, 'errorList', (value) => typeof value === 'object', new Set(['Object']), value);
+    watchValidator(component, 'errorList', (value) => Array.isArray(value) && value.find((v) => !(typeof v === 'string' || typeof v === 'function')) === undefined, new Set(['string', 'function']), value);
 };
 
 const validateHasCloser = (component, value) => {
@@ -4224,10 +4224,6 @@ const validateMax = (component, value, options) => {
     watchNumber(component, '_max', value, options);
 };
 
-const validateModal = (component, value) => {
-    watchBoolean(component, '_modal', value);
-};
-
 const validateMsg = (component, value) => {
     objectObjectHandler(value, () => {
         try {
@@ -4368,7 +4364,30 @@ const validateTableHeaderCells = (component, value) => {
             }
             catch (e) {
             }
-            watchValidator(component, '_headerCells', (value) => typeof value === 'object' && value !== null, new Set(['TableHeaderCellsPropType']), value);
+            watchValidator(component, '_headerCells', (value) => typeof value === 'object' &&
+                value !== null &&
+                (value.horizontal === undefined ||
+                    (Array.isArray(value.horizontal) && value.horizontal.find((headerRow) => !Array.isArray(headerRow)) === undefined)) &&
+                (value.vertical === undefined || (Array.isArray(value.vertical) && value.vertical.find((headerCol) => !Array.isArray(headerCol)) === undefined)) &&
+                true, new Set(['TableHeaderCellsPropType']), value, {
+                hooks: {
+                    afterPatch: (value, state) => {
+                        var _a;
+                        const headerCells = value;
+                        const widths = [];
+                        (_a = headerCells.horizontal) === null || _a === void 0 ? void 0 : _a.forEach((headerRow) => {
+                            headerRow.forEach((headerCell) => {
+                                if (headerCell.width) {
+                                    widths.push(headerCell.width);
+                                }
+                            });
+                        });
+                        if (widths.length > 0) {
+                            state._minWidth = `calc(${widths.join(' + ')})`;
+                        }
+                    },
+                },
+            });
         });
     });
 };
@@ -6935,14 +6954,9 @@ class KolDrawer {
         };
     }
     async open() {
-        var _a, _b;
+        var _a;
         this.state = Object.assign(Object.assign({}, this.state), { _open: true });
-        if (this.state._modal) {
-            (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal();
-        }
-        else {
-            (_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.show();
-        }
+        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal();
     }
     async close() {
         this.state = Object.assign(Object.assign({}, this.state), { _open: false });
@@ -6959,8 +6973,7 @@ class KolDrawer {
         return (hAsync("div", { ref: this.getWrapperRef, class: `drawer__wrapper drawer__wrapper--${align} ${this.state._open ? 'drawer__wrapper--open' : 'is-closing'}`, "aria-label": this.state._label }, hAsync("div", { class: "drawer__content" }, hAsync("slot", null))));
     }
     render() {
-        const isModal = this.state._modal;
-        return (hAsync(Host, { key: '9c670b4923f78c3060bafe6f2e90c45a20b89fd7', class: `kol-drawer drawer ${isModal ? 'drawer--modal' : ''}`, ref: (el) => (this.hostElement = el) }, hAsync("dialog", { key: 'd94fade1430bfed4dac37660d07ae5265b994f4f', class: "drawer__dialog", ref: this.getRef }, this.renderDialogContent())));
+        return (hAsync(Host, { key: '18007fd3e3eb1d4794cafd1d18780b7f3a58fe4e', class: `kol-drawer drawer`, ref: (el) => (this.hostElement = el) }, hAsync("dialog", { key: '07cd87f6d086e51002c4fcea7402ca0910bc2c7a', class: "drawer__dialog", ref: this.getRef }, this.renderDialogContent())));
     }
     validateLabel(value) {
         validateLabel(this, value, {
@@ -6970,9 +6983,6 @@ class KolDrawer {
     validateAlign(value) {
         validateAlign(this, value);
     }
-    validateModal(value) {
-        validateModal(this, value);
-    }
     async validateOpen(value) {
         if (typeof value === 'boolean') {
             validateOpen(this, value);
@@ -7015,13 +7025,11 @@ class KolDrawer {
         this.validateLabel(this._label);
         await this.validateOpen(this._open);
         this.validateAlign(this._align);
-        this.validateModal(this._modal);
         this.validateOn(this._on);
     }
     static get watchers() { return {
         "_label": ["validateLabel"],
         "_align": ["validateAlign"],
-        "_modal": ["validateModal"],
         "_open": ["validateOpen"],
         "_on": ["validateOn"]
     }; }
@@ -7069,16 +7077,11 @@ class KolForm {
                 (_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onReset(event);
             }
         };
-        this.handleLinkClick = (event) => {
-            var _a;
-            const href = (_a = event.target) === null || _a === void 0 ? void 0 : _a.href;
-            if (href) {
-                const hrefUrl = new URL(href);
-                const targetElement = document.querySelector(hrefUrl.hash);
-                if (targetElement && typeof targetElement.focus === 'function') {
-                    targetElement.scrollIntoView({ behavior: 'smooth' });
-                    targetElement.focus();
-                }
+        this.handleLinkClick = (selector) => {
+            const targetElement = document.querySelector(selector);
+            if (targetElement && typeof targetElement.focus === 'function') {
+                targetElement.scrollIntoView({ behavior: 'smooth' });
+                targetElement.focus();
             }
         };
         this._on = undefined;
@@ -7087,9 +7090,13 @@ class KolForm {
         this.state = {};
     }
     renderErrorList(errorList) {
-        return (hAsync(KolAlertFc$1, { type: "error", variant: "card", label: translate('kol-error-list-message') }, hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkWcTag, { _href: error.selector, _label: error.message, _on: { onClick: this.handleLinkClick }, ref: (el) => {
-                if (index === 0)
-                    this.errorListElement = el;
+        return (hAsync(KolAlertFc$1, { ref: (el) => {
+                this.errorListBlock = el;
+            }, type: "error", variant: "card", label: translate('kol-error-list-message') }, hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkWcTag, { _href: "", _label: error.message, _on: { onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }, ref: (el) => {
+                if (index === 0) {
+                    this.errorListFirstLink = el;
+                    this.scrollToErrorList();
+                }
             } }))))))));
     }
     renderFormElement() {
@@ -7097,13 +7104,21 @@ class KolForm {
     }
     render() {
         const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
-        return (hAsync(Host, { key: '18ebb2102e9f63610614754d7981ea2b71585b13', class: "kol-form" }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
+        return (hAsync(Host, { key: '69dbcbe8a46d038040ba381cdf6ec67c8e39f0dc', class: "kol-form" }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
     }
-    async focusErrorList() {
+    scrollToErrorList() {
         var _a;
-        if (this._errorList && this._errorList.length > 0) {
-            (_a = this.errorListElement) === null || _a === void 0 ? void 0 : _a.focus();
-        }
+        (_a = this.errorListBlock) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+        });
+        setTimeout(() => {
+            var _a, _b;
+            (_b = (_a = this.errorListFirstLink) === null || _a === void 0 ? void 0 : _a.querySelector('a')) === null || _b === void 0 ? void 0 : _b.focus();
+        }, 250);
+    }
+    async focusErrorList() {
+        this.scrollToErrorList();
         return Promise.resolve();
     }
     validateOn(value) {
@@ -9362,11 +9377,7 @@ class KolInputNumber {
         this.controller.validateTouched(value);
     }
     validateValue(value) {
-        this.controller.validateValueEx(value, (v) => {
-            if (v === '' && this.inputRef) {
-                this.inputRef.value = '';
-            }
-        });
+        this.controller.validateValueEx(value);
     }
     componentWillLoad() {
         this._touched = this._touched === true;
@@ -13347,7 +13358,8 @@ function isContainingBlock(elementOrCss) {
   const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-  return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+  // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+  return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -13905,6 +13917,10 @@ const platform = {
   isRTL
 };
 
+function rectsAreEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+
 // https://samthor.au/2021/observing-dom/
 function observeMove(element, onMove) {
   let io = null;
@@ -13924,12 +13940,13 @@ function observeMove(element, onMove) {
       threshold = 1;
     }
     cleanup();
+    const elementRectForRootMargin = element.getBoundingClientRect();
     const {
       left,
       top,
       width,
       height
-    } = element.getBoundingClientRect();
+    } = elementRectForRootMargin;
     if (!skip) {
       onMove();
     }
@@ -13962,6 +13979,16 @@ function observeMove(element, onMove) {
           refresh(false, ratio);
         }
       }
+      if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+        // It's possible that even though the ratio is reported as 1, the
+        // element is not actually fully within the IntersectionObserver's root
+        // area anymore. This can happen under performance constraints. This may
+        // be a bug in the browser's IntersectionObserver implementation. To
+        // work around this, we compare the element's bounding rect now with
+        // what it was at the time we created the IntersectionObserver. If they
+        // are not equal then the element moved, so we refresh.
+        refresh();
+      }
       isFirstUpdate = false;
     }
 
@@ -14039,7 +14066,7 @@ function autoUpdate(reference, floating, update, options) {
   }
   function frameLoop() {
     const nextRefRect = getBoundingClientRect(reference);
-    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+    if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
       update();
     }
     prevRefRect = nextRefRect;
@@ -24567,7 +24594,7 @@ class KolTableStateless {
         });
     }
     validateMinWidth(value) {
-        watchString(this, '_minWidth', value, {
+        watchString(this, '_deprecatedMinWidth', value, {
             defaultValue: undefined,
         });
     }
@@ -24920,9 +24947,9 @@ class KolTableStateless {
     render() {
         const dataField = this.createDataField(this.state._data, this.state._headerCells);
         this.checkboxRefs = [];
-        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: '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' }, [
+        return (hAsync(Host, { key: '9518b44a4421b5843936ee7623532733b6134a2a', class: "kol-table-stateless-wc" }, hAsync("div", { key: '5bfd8c297dd3bed301c7e7e455b60278e270af24', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '6906eae36940a1a00a5eed7401526a218949e990', style: {
+                minWidth: this.state._deprecatedMinWidth || this.state._minWidth,
+            } }, hAsync("div", { key: 'ee461a67c036209a11cd55134023a85090c371d8', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: 'a8aa614eb1b4db063238a818022bf2139b269b09', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: '1c88c8dba9d88ef7163645b686d1d5007cc75f47' }, [
             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) {
@@ -24942,7 +24969,7 @@ class KolTableStateless {
                     }
                 })))),
             this.renderSpacer('head', this.state._headerCells.horizontal),
-        ])), hAsync("tbody", { key: 'f0de4de3fd33fced22b3c29062357795409589be' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
+        ])), hAsync("tbody", { key: 'd5983096363ef26b192a129bec8ab8e1df051056' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -26031,7 +26058,7 @@ class KolTree {
         this._label = undefined;
     }
     render() {
-        return (hAsync(Host, { key: 'd64beb3b2d19ed2925d8e865b900dd1b89d4b56c', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'e8cfc3c6cf8e2fb60bc8b8d57e463a92ffe769be', _label: this._label }, hAsync("slot", { key: 'f8836f6da44c352bf6f9cb8773cef2d7e46b97e4' }))));
+        return (hAsync(Host, { key: 'f264ff4f437f2d94209b5e1b408fc12bae1e3715', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: '074485479eab7e05309d0804a5d9afefac16a243', _label: this._label }, hAsync("slot", { key: '7b2f6a10e88584659e00d2cb9123ee9e8ed7b0ea' }))));
     }
     static get style() { return {
         default: KolTreeDefaultStyle0
@@ -26079,7 +26106,7 @@ class KolTreeItem {
         return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
     }
     render() {
-        return (hAsync(KolTreeItemWcTag, { key: '9c6f09e0be4ef2bd7dc33b03dd4b47e5c22b5476', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '70df361cfad82df0285e65142336d971d8124a8d' })));
+        return (hAsync(KolTreeItemWcTag, { key: 'fdaac019e361b8efe063a22a47f3b67fab18d1ba', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '73d1d194d03797ef974eab18f49c830148649110' })));
     }
     static get style() { return {
         default: KolTreeItemDefaultStyle0
@@ -26233,7 +26260,7 @@ class KolTreeWc {
         validateLabel(this, value);
     }
     render() {
-        return (hAsync(Host, { key: '21f44e081f45c082e7d864ac4168008f68bbc7ea', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: 'c59d96ab4d8f3e7a08593a5b817f4baae8f41b5a', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '77024767c34ade192b8413dac126bc583eae726a', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '03d7918839fe38036b1480976991a032e5aa4d5e' })))));
+        return (hAsync(Host, { key: 'fc79fee1595fed55d37dc2fb4f3509ff6c16686b', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: 'd8d4800627e61c9766150d1d9a440889cf122440', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '40b1ee8c5d89febb2975168f5630fdd01b6e4e97', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '86f66e7236df8aa03d942450c06a2f2f5930b987' })))));
     }
     static isTreeItem(element) {
         return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "2.2.3",
+  "version": "2.2.5-rc.0",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -46,10 +46,10 @@
   ],
   "devDependencies": {
     "rimraf": "6.0.1",
-    "@public-ui/components": "2.2.3"
+    "@public-ui/components": "2.2.5-rc.0"
   },
   "peerDependencies": {
-    "@public-ui/components": "2.2.3"
+    "@public-ui/components": "2.2.5-rc.0"
   },
   "sideEffects": false,
   "type": "commonjs",