@public-ui/hydrate 2.2.4 → 2.2.5-rc.1

package/dist/index.js

@@ -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 {
@@ -4364,6 +4360,7 @@ const validateTableDataFoot = (component, value, setStateHooks) => {
     });
 };
 
+const HEADER_CELL_WIDTH_VALIDATOR = /^\d+(\.\d+)?([a-z]+)?$/;
 const validateTableHeaderCells = (component, value) => {
     emptyStringByArrayHandler(value, () => {
         objectObjectHandler(value, () => {
@@ -4372,7 +4369,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 && HEADER_CELL_WIDTH_VALIDATOR.test(headerCell.width)) {
+                                    widths.push(headerCell.width);
+                                }
+                            });
+                        });
+                        if (widths.length > 0) {
+                            state._minWidth = `calc(${widths.join(' + ')})`;
+                        }
+                    },
+                },
+            });
         });
     });
 };
@@ -6939,14 +6959,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 +6978,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 +6988,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 +7030,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 +7082,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 +7095,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 +7109,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 +9382,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 +13363,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 +13922,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 +13945,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 +13984,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 +14071,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;
@@ -23987,7 +24015,7 @@ class KolTable {
         this._on = undefined;
     }
     render() {
-        return (hAsync(KolTableStatefulTag, { key: '78e54fb25d9d1f36e5360a6c8bb8e9cbc21912f2', _allowMultiSort: this._allowMultiSort, _data: this._data, _dataFoot: this._dataFoot, _headers: this._headers, _label: this._label, _minWidth: this._minWidth, _pagination: this._pagination, _paginationPosition: this._paginationPosition, _selection: this._selection, _on: this._on }));
+        return (hAsync(KolTableStatefulTag, { key: 'f4794620879a9bec878a3a1178e96c005f8150f9', _allowMultiSort: this._allowMultiSort, _data: this._data, _dataFoot: this._dataFoot, _headers: this._headers, _label: this._label, _minWidth: this._minWidth, _pagination: this._pagination, _paginationPosition: this._paginationPosition, _selection: this._selection, _on: this._on }));
     }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -24412,7 +24440,7 @@ class KolTableStateful {
             horizontal: (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
             vertical: (_d = this.state._headers.vertical) === null || _d === void 0 ? void 0 : _d.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
         };
-        return (hAsync(Host, { key: 'b1d2e0679c35089d9d648174ac72de0f2a6349f8', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: 'bd022abcb18d07cc26bebb98ccfcd7e96fb90da7', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
+        return (hAsync(Host, { key: '2d471104de44ada86910ebd7d31f73577085b449', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '36aed71807ef42ce071ea35964eed001139e5ee0', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
                 onSort: (_, payload) => {
                     this.handleSort(payload);
                 },
@@ -24475,7 +24503,7 @@ class KolTableStateless$1 {
         this._selection = undefined;
     }
     render() {
-        return (hAsync(Host, { key: 'b2811bdfce1d51f659bbcb931639ba1fc3f65bb1', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: 'a6affae87b6b8768b566ed611976a998b74fef5c', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));
+        return (hAsync(Host, { key: 'd24602f9b15c5b8b6a53ab9ee353de48fa3fe809', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: '4e502f9a6d479ec885207865cf3ba53490d8b2dd', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));
     }
     static get style() { return {
         default: KolTableStatelessDefaultStyle0
@@ -24571,7 +24599,7 @@ class KolTableStateless {
         });
     }
     validateMinWidth(value) {
-        watchString(this, '_minWidth', value, {
+        watchString(this, '_deprecatedMinWidth', value, {
             defaultValue: undefined,
         });
     }
@@ -24924,9 +24952,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 +24974,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 +26063,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 +26111,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 +26265,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

@@ -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 {
@@ -4360,6 +4356,7 @@ const validateTableDataFoot = (component, value, setStateHooks) => {
     });
 };
 
+const HEADER_CELL_WIDTH_VALIDATOR = /^\d+(\.\d+)?([a-z]+)?$/;
 const validateTableHeaderCells = (component, value) => {
     emptyStringByArrayHandler(value, () => {
         objectObjectHandler(value, () => {
@@ -4368,7 +4365,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 && HEADER_CELL_WIDTH_VALIDATOR.test(headerCell.width)) {
+                                    widths.push(headerCell.width);
+                                }
+                            });
+                        });
+                        if (widths.length > 0) {
+                            state._minWidth = `calc(${widths.join(' + ')})`;
+                        }
+                    },
+                },
+            });
         });
     });
 };
@@ -6935,14 +6955,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 +6974,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 +6984,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 +7026,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 +7078,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 +7091,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 +7105,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 +9378,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 +13359,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 +13918,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 +13941,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 +13980,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 +14067,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;
@@ -23983,7 +24011,7 @@ class KolTable {
         this._on = undefined;
     }
     render() {
-        return (hAsync(KolTableStatefulTag, { key: '78e54fb25d9d1f36e5360a6c8bb8e9cbc21912f2', _allowMultiSort: this._allowMultiSort, _data: this._data, _dataFoot: this._dataFoot, _headers: this._headers, _label: this._label, _minWidth: this._minWidth, _pagination: this._pagination, _paginationPosition: this._paginationPosition, _selection: this._selection, _on: this._on }));
+        return (hAsync(KolTableStatefulTag, { key: 'f4794620879a9bec878a3a1178e96c005f8150f9', _allowMultiSort: this._allowMultiSort, _data: this._data, _dataFoot: this._dataFoot, _headers: this._headers, _label: this._label, _minWidth: this._minWidth, _pagination: this._pagination, _paginationPosition: this._paginationPosition, _selection: this._selection, _on: this._on }));
     }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -24408,7 +24436,7 @@ class KolTableStateful {
             horizontal: (_c = this.state._headers.horizontal) === null || _c === void 0 ? void 0 : _c.map((row) => row.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
             vertical: (_d = this.state._headers.vertical) === null || _d === void 0 ? void 0 : _d.map((column) => column.map((cell) => (Object.assign(Object.assign({}, cell), { sortDirection: this.getHeaderCellSortState(cell) })))),
         };
-        return (hAsync(Host, { key: 'b1d2e0679c35089d9d648174ac72de0f2a6349f8', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: 'bd022abcb18d07cc26bebb98ccfcd7e96fb90da7', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
+        return (hAsync(Host, { key: '2d471104de44ada86910ebd7d31f73577085b449', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync(KolTableStatelessWcTag, { key: '36aed71807ef42ce071ea35964eed001139e5ee0', ref: this.catchRef, _data: displayedData, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _minWidth: this.state._minWidth, _on: {
                 onSort: (_, payload) => {
                     this.handleSort(payload);
                 },
@@ -24471,7 +24499,7 @@ class KolTableStateless$1 {
         this._selection = undefined;
     }
     render() {
-        return (hAsync(Host, { key: 'b2811bdfce1d51f659bbcb931639ba1fc3f65bb1', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: 'a6affae87b6b8768b566ed611976a998b74fef5c', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));
+        return (hAsync(Host, { key: 'd24602f9b15c5b8b6a53ab9ee353de48fa3fe809', class: "kol-table-stateless" }, hAsync(KolTableStatelessWcTag, { key: '4e502f9a6d479ec885207865cf3ba53490d8b2dd', _data: this._data, _dataFoot: this._dataFoot, _headerCells: this._headerCells, _label: this._label, _minWidth: this._minWidth, _on: this._on, _selection: this._selection })));
     }
     static get style() { return {
         default: KolTableStatelessDefaultStyle0
@@ -24567,7 +24595,7 @@ class KolTableStateless {
         });
     }
     validateMinWidth(value) {
-        watchString(this, '_minWidth', value, {
+        watchString(this, '_deprecatedMinWidth', value, {
             defaultValue: undefined,
         });
     }
@@ -24920,9 +24948,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 +24970,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 +26059,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 +26107,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 +26261,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/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@public-ui/components/hydrate",
+  "description": "kolibri component hydration app.",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "2.2.4",
+  "version": "2.2.5-rc.1",
   "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.4"
+    "@public-ui/components": "2.2.5-rc.1"
   },
   "peerDependencies": {
-    "@public-ui/components": "2.2.4"
+    "@public-ui/components": "2.2.5-rc.1"
   },
   "sideEffects": false,
   "type": "commonjs",