@public-ui/hydrate 2.0.2 → 2.0.3

package/dist/index.js

@@ -8775,7 +8775,7 @@ function get() {
     },
     interpolation: {
       escapeValue: true,
-      format: (value, format, lng, options) => value,
+      format: value => value,
       prefix: '{{',
       suffix: '}}',
       formatSeparator: ',',
@@ -9568,7 +9568,7 @@ const initKoliBri = () => {
 	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
 	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
 	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.2
+	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.3
 		`, {
             forceLog: true,
         });
@@ -11444,19 +11444,13 @@ var locale_de = {
     'nav-maximize': 'Navigation maximieren',
     'nav-minimize': 'Navigation minimieren',
     'logo-description': 'Logo {{orgShort}}. Bundesadler mit Flaggenstab und Schriftzug {{orgLong}}',
-    'open-link-in-tab': 'Der Link wird in einem neuen Tab geöffnet.',
+    'open-link-in-tab': 'Öffnet in neuem Tab.',
     'kolibri-logo': 'Logo von KoliBri',
-    'sort-ascending': 'Die Spalte {{column}} ist aufsteigend{{multi}} sortiert.',
-    'sort-descending': 'Die Spalte {{column}} ist absteigend{{multi}} sortiert.',
-    'sort-then-ascending': ', dann die Spalte {{column}} aufsteigend',
-    'sort-then-descending': ', dann die Spalte {{column}} absteigend',
-    'sort-then-last-ascending': ' und dann die Spalte {{column}} aufsteigend',
-    'sort-then-last-descending': ' und dann die Spalte {{column}} absteigend',
-    'sort-none': 'Spalte {{column}} nicht sortiert',
-    'table-sort-none': 'Keine Spalte ist sortiert.',
     'table-pagination-label': 'Paginierung für die Tabelle {{label}}',
     'avatar-alt': 'Avatar von {{name}}',
     'toast-close-all': 'Alle schließen',
+    'error-list': 'Fehlerliste',
+    'error-list-message': 'Bitte korrigieren Sie folgende Fehler:',
 };
 
 var locale_en = {
@@ -11486,19 +11480,13 @@ var locale_en = {
     'nav-maximize': 'Maximize navigation',
     'nav-minimize': 'Minimize navigation',
     'logo-description': 'Logo {{orgShort}}. Federal eagle with flag staff and lettering {{orgLong}}',
-    'open-link-in-tab': 'The link will open in a new tab.',
+    'open-link-in-tab': 'Opens in new tab.',
     'kolibri-logo': 'KoliBri logo',
-    'sort-descending': 'Sorted column {{column}} descending{{multi}}',
-    'sort-ascending': 'Sorted column {{column}} ascending{{multi}}',
-    'sort-then-ascending': ', then column {{column}} acending',
-    'sort-then-descending': ', then column {{column}} descending',
-    'sort-then-last-ascending': ' and then column {{column}} acending',
-    'sort-then-last-descending': ' and then column {{column}} descending',
-    'sort-none': 'column {{column}} not sorted',
-    'table-sort-none': 'No column is sorted.',
     'table-pagination-label': 'Pagination for table {{label}}',
     'avatar-alt': 'Avatar of {{name}}',
     'toast-close-all': 'Close all',
+    'error-list': 'Error list',
+    'error-list-message': 'Please correct the following errors',
 };
 
 const mapLocaleKeys = (locale) => Object.keys(locale).reduce((a, c) => ((a[`${'kol'}-${c}`] = locale[c]), a), {});
@@ -13440,6 +13428,10 @@ class KolDetails {
     }; }
 }
 
+const validateErrorList = (component, value) => {
+    watchValidator(component, 'errorList', (value) => typeof value === 'object', new Set(['Object']), value);
+};
+
 class KolForm {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -13459,12 +13451,25 @@ 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._on = undefined;
         this._requiredText = true;
+        this._errorList = undefined;
         this.state = {};
     }
     render() {
-        return (hAsync("form", { method: "post", onSubmit: this.onSubmit, onReset: this.onReset, autoComplete: "off", noValidate: true }, this.state._requiredText === true ? (hAsync("p", null, hAsync("kol-indented-text", null, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync("kol-indented-text", null, this.state._requiredText))) : null, hAsync("slot", null)));
+        return (hAsync("form", { method: "post", onSubmit: this.onSubmit, onReset: this.onReset, autoComplete: "off", noValidate: true }, this._errorList && this._errorList.length > 0 && (hAsync("kol-alert", { _type: "error" }, translate('kol-error-list-message'), hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, this._errorList.map((error, index) => (hAsync("li", { key: index }, hAsync("kol-link", { _href: error.selector, _label: error.message, _on: { onClick: this.handleLinkClick } })))))))), this.state._requiredText === true ? (hAsync("p", null, hAsync("kol-indented-text", null, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync("kol-indented-text", null, this.state._requiredText))) : null, hAsync("slot", null)));
     }
     validateOn(value) {
         if (typeof value === 'object' && value !== null) {
@@ -13479,13 +13484,18 @@ class KolForm {
             watchString(this, '_requiredText', value);
         }
     }
+    validateErrorList(value) {
+        validateErrorList(this, value);
+    }
     componentWillLoad() {
         this.validateOn(this._on);
         this.validateRequiredText(this._requiredText);
+        this.validateErrorList(this._errorList);
     }
     static get watchers() { return {
         "_on": ["validateOn"],
-        "_requiredText": ["validateRequiredText"]
+        "_requiredText": ["validateRequiredText"],
+        "_errorList": ["validateErrorList"]
     }; }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -13493,6 +13503,7 @@ class KolForm {
         "$members$": {
             "_on": [16],
             "_requiredText": [8, "_required-text"],
+            "_errorList": [16],
             "state": [32]
         },
         "$listeners$": undefined,
@@ -16937,11 +16948,10 @@ class KolLink {
         this._role = undefined;
         this._tabIndex = undefined;
         this._target = undefined;
-        this._targetDescription = 'Der Link wird in einem neuen Tab geöffnet.';
         this._tooltipAlign = 'right';
     }
     render() {
-        return (hAsync(Host, null, hAsync("kol-link-wc", { ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _targetDescription: this._targetDescription, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
+        return (hAsync(Host, null, hAsync("kol-link-wc", { ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -16962,7 +16972,6 @@ class KolLink {
             "_role": [1],
             "_tabIndex": [2, "_tab-index"],
             "_target": [1],
-            "_targetDescription": [1, "_target-description"],
             "_tooltipAlign": [1, "_tooltip-align"]
         },
         "$listeners$": undefined,
@@ -16991,7 +17000,6 @@ class KolLinkButton {
         this._role = undefined;
         this._tabIndex = undefined;
         this._target = undefined;
-        this._targetDescription = translate('kol-open-link-in-tab');
         this._tooltipAlign = 'right';
         this._variant = 'normal';
     }
@@ -17000,7 +17008,7 @@ class KolLinkButton {
                 button: true,
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _targetDescription: this._targetDescription, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
+            }, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { name: "expert", slot: "expert" }))));
     }
     get host() { return getElement(this); }
     static get style() { return {
@@ -17022,7 +17030,6 @@ class KolLinkButton {
             "_role": [1],
             "_tabIndex": [2, "_tab-index"],
             "_target": [1],
-            "_targetDescription": [1, "_target-description"],
             "_tooltipAlign": [1, "_tooltip-align"],
             "_variant": [1]
         },
@@ -17200,7 +17207,7 @@ class KolLinkWc {
                 download: typeof this.state._download === 'string' ? this.state._download : undefined,
             };
             if (this.state._hideLabel === true && !this.state._label) {
-                devHint(`[KolLink] Es muss ein Aria-Label gesetzt werden _hide-label gesetzt ist.`);
+                devHint(`[KolLink] Es muss ein Aria-Label gesetzt werden, wenn _hide-label gesetzt ist.`);
             }
             return { isExternal, tagAttrs };
         };
@@ -17215,7 +17222,6 @@ class KolLinkWc {
         this._role = undefined;
         this._tabIndex = undefined;
         this._target = undefined;
-        this._targetDescription = translate('kol-open-link-in-tab');
         this._tooltipAlign = 'right';
         this.state = {
             _href: '…',
@@ -17226,10 +17232,12 @@ class KolLinkWc {
     render() {
         const { isExternal, tagAttrs } = this.getRenderValues();
         const hasExpertSlot = showExpertSlot(this.state._label);
-        return (hAsync(Host, null, hAsync("a", Object.assign({ ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, class: {
+        return (hAsync(Host, null, hAsync("a", Object.assign({ ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-label": isExternal && this.state._hideLabel && typeof this.state._label === 'string'
+                ? `${this.state._label} (${translate('kol-open-link-in-tab')})`
+                : undefined, class: {
                 'external-link': isExternal,
                 'hide-label': this.state._hideLabel === true,
-            } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex }), hAsync("kol-span-wc", { _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { name: "expert", slot: "expert" })), isExternal && hAsync("kol-icon", { class: "external-link-icon", _label: this.state._targetDescription, _icons: 'codicon codicon-link-external' })), hAsync("kol-tooltip-wc", { "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this.state._accessKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
+            } }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex }), hAsync("kol-span-wc", { _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { name: "expert", slot: "expert" })), isExternal && (hAsync("kol-icon", { class: "external-link-icon", _label: translate('kol-open-link-in-tab'), _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync("kol-tooltip-wc", { "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this.state._accessKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
     }
     validateAccessKey(value) {
         validateAccessKey(this, value);
@@ -17264,9 +17272,6 @@ class KolLinkWc {
     validateTarget(value) {
         validateLinkTarget(this, value);
     }
-    validateTargetDescription(value) {
-        watchString(this, '_targetDescription', value);
-    }
     validateTooltipAlign(value) {
         validateTooltipAlign(this, value);
     }
@@ -17282,7 +17287,6 @@ class KolLinkWc {
         this.validateRole(this._role);
         this.validateTabIndex(this._tabIndex);
         this.validateTarget(this._target);
-        this.validateTargetDescription(this._targetDescription);
         this.validateTooltipAlign(this._tooltipAlign);
         this.unsubscribeOnLocationChange = onLocationChange((location) => {
             this.state._ariaCurrent = location === this.state._href ? this.state._ariaCurrentValue : undefined;
@@ -17306,7 +17310,6 @@ class KolLinkWc {
         "_role": ["validateRole"],
         "_tabIndex": ["validateTabIndex"],
         "_target": ["validateTarget"],
-        "_targetDescription": ["validateTargetDescription"],
         "_tooltipAlign": ["validateTooltipAlign"]
     }; }
     static get cmpMeta() { return {
@@ -17324,7 +17327,6 @@ class KolLinkWc {
             "_role": [1],
             "_tabIndex": [2, "_tab-index"],
             "_target": [1],
-            "_targetDescription": [1, "_target-description"],
             "_tooltipAlign": [1, "_tooltip-align"],
             "state": [32]
         },
@@ -19729,7 +19731,7 @@ class KolProcess {
         };
     }
     render() {
-        return (hAsync(Host, null, createProgressSVG(this.state), hAsync("progress", { "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { "aria-live": "polite", "aria-relevant": "removals text", hidden: true }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
+        return (hAsync(Host, null, createProgressSVG(this.state), hAsync("progress", { "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
     }
     validateLabel(value) {
         validateLabel(this, value);
@@ -32755,7 +32757,7 @@ class KolSymbol {
     }; }
 }
 
-const defaultStyleCss$4 = "@layer kol-global {\n\t.sc-kol-table-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-table-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-table-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-table-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-table-default-h {\n\t\tdisplay: grid;\n\t}\n\n\t.sc-kol-table-default-h > div.table {\n\t\tmax-width: 100%;\n\t\torder: 1;\n\t\toverflow-x: auto;\n\t\toverflow-y: hidden;\n\t}\n\n\t.sc-kol-table-default-h > div.table table {\n\t\twidth: 100%;\n\t}\n\n\tth > div {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t\tplace-items: center;\n\t}\n\n\tdiv.pagination {\n\t\torder: 2;\n\t}\n\n\tdiv.pagination,\n\tdiv.pagination > div:last-child {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t@media (min-width: 1024px) {\n\t\tdiv.pagination,\n\t\tdiv.pagination > div:last-child {\n\t\t\tgrid-auto-flow: column;\n\t\t}\n\n\t\tdiv.pagination kol-pagination {\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}";
+const defaultStyleCss$4 = "@layer kol-global {\n\t.sc-kol-table-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-table-default {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n\n\t\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-table-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-table-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-table-default-h {\n\t\tdisplay: grid;\n\t}\n\n\t.sc-kol-table-default-h > div.table {\n\t\tmax-width: 100%;\n\t\torder: 1;\n\t\toverflow-x: auto;\n\t\toverflow-y: hidden;\n\t}\n\n\t.sc-kol-table-default-h > div.table table {\n\t\twidth: 100%;\n\t}\n\n\t.table-sort-button .button {\n\t\tcolor: inherit;\n\t}\n\n\tth.align-left {\n\t\ttext-align: left;\n\t\t& .table-sort-button .button-inner {\n\t\t\tjustify-items: start;\n\t\t}\n\t}\n\tth.align-center {\n\t\ttext-align: center;\n\t\t& .table-sort-button .button-inner {\n\t\t\tjustify-items: center;\n\t\t}\n\t}\n\tth.align-right {\n\t\ttext-align: right;\n\t\t& .table-sort-button .button-inner {\n\t\t\tjustify-items: end;\n\t\t}\n\t}\n\n\tdiv.pagination {\n\t\torder: 2;\n\t}\n\n\tdiv.pagination kol-pagination {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\tdiv.pagination,\n\tdiv.pagination > div:last-child {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t@media (max-width: 1024px) {\n\t\tdiv.pagination kol-pagination {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\tdiv.pagination,\n\t\tdiv.pagination > div:last-child {\n\t\t\tgrid-auto-flow: column;\n\t\t}\n\n\t\tdiv.pagination kol-pagination {\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}";
 
 const PAGINATION_OPTIONS = [10, 20, 50, 100];
 const CELL_REFS = new Map();
@@ -32770,7 +32772,6 @@ class KolTable {
         this.pageEndSlice = 10;
         this.disableSort = false;
         this.sortedColumnHead = { label: '', key: '', sortDirection: 'NOS' };
-        this.ariaLive = '';
         this.setSortDirection = (sort, direction) => {
             this.sortDirections.clear();
             this.sortDirections.set(sort, direction);
@@ -32822,47 +32823,23 @@ class KolTable {
                     }
                     return 0;
                 });
-                if (this.sortData.length === 1) {
-                    this.ariaLive = translate(`kol-sort-${this.sortData[0].direction === 'ASC' ? 'ascending' : 'descending'}`, {
-                        placeholders: { column: this.sortData[0].label, multi: '' },
-                    });
-                }
-                else {
-                    let sortText = '';
-                    for (let index = 1; index < this.sortData.length - 1; index++) {
-                        const data = this.sortData[index];
-                        sortText += translate(`kol-sort-then-${data.direction === 'ASC' ? 'ascending' : 'descending'}`, { placeholders: { column: data.label } });
-                    }
-                    sortText += translate(`kol-sort-then-last-${this.sortData[this.sortData.length - 1].direction === 'ASC' ? 'ascending' : 'descending'}`, {
-                        placeholders: { column: this.sortData[this.sortData.length - 1].label },
-                    });
-                    this.ariaLive = translate(`kol-sort-${this.sortData[0].direction === 'ASC' ? 'ascending' : 'descending'}`, {
-                        placeholders: { column: this.sortData[0].label, multi: sortText },
-                    });
-                }
             }
             else if (typeof this.sortFunction === 'function') {
                 switch (this.sortDirections.get(this.sortFunction)) {
                     case 'ASC':
                         sortedData = this.sortFunction([...this.state._data]);
-                        this.ariaLive = translate('kol-sort-ascending', { placeholders: { column: cell.label } });
                         this.sortedColumnHead = { label: cell.label, key: cell.key, sortDirection: 'ASC' };
                         break;
                     case 'DESC':
                         sortedData = this.sortFunction([...this.state._data]).reverse();
-                        this.ariaLive = translate('kol-sort-descending', { placeholders: { column: cell.label } });
                         this.sortedColumnHead = { label: cell.label, key: cell.key, sortDirection: 'DESC' };
                         break;
                     case 'NOS':
                     default:
                         sortedData = [...this.state._data];
                         this.sortedColumnHead = { label: '', key: '', sortDirection: 'NOS' };
-                        this.ariaLive = translate('kol-sort-none', { placeholders: { column: cell.label } });
                 }
             }
-            else {
-                this.ariaLive = translate('kol-table-sort-none');
-            }
             setState(this, '_sortedData', sortedData);
         };
         this.renderTableRow = (row, rowIndex) => {
@@ -33308,7 +33285,7 @@ class KolTable {
         var _a, _b;
         const displayedData = this.selectDisplayedData(this.state._sortedData, this.showPagination ? (_b = (_a = this.state._pagination) === null || _a === void 0 ? void 0 : _a._pageSize) !== null && _b !== void 0 ? _b : 10 : this.state._sortedData.length, this.state._pagination._page || 1);
         const dataField = this.createDataField(displayedData, this.state._headers);
-        return (hAsync(Host, null, hAsync("div", { style: { height: '0', width: '0', overflow: 'hidden' }, "aria-live": "assertive" }, this.ariaLive), this.pageEndSlice > 0 && this.showPagination && (hAsync("div", { class: "pagination" }, hAsync("span", null, "Eintr\u00E4ge ", this.pageEndSlice > 0 ? this.pageStartSlice + 1 : 0, " bis ", this.pageEndSlice, " von", ' ', this.state._pagination._max || (Array.isArray(this.state._data) ? this.state._data.length : 0), " angezeigt"), hAsync("div", null, hAsync("kol-pagination", { _boundaryCount: this.state._pagination._boundaryCount, _customClass: this.state._pagination._customClass, _on: this.handlePagination, _page: this.state._pagination._page, _pageSize: this.state._pagination._pageSize, _pageSizeOptions: this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS, _siblingCount: this.state._pagination._siblingCount, _tooltipAlign: "bottom", _max: this.state._pagination._max || this.state._pagination._max || this.state._data.length, _label: translate('kol-table-pagination-label', { placeholders: { label: this.state._label } }) })))), hAsync("div", { class: "table", tabindex: "0" }, hAsync("table", { style: {
+        return (hAsync(Host, null, this.pageEndSlice > 0 && this.showPagination && (hAsync("div", { class: "pagination" }, hAsync("span", null, "Eintr\u00E4ge ", this.pageEndSlice > 0 ? this.pageStartSlice + 1 : 0, " bis ", this.pageEndSlice, " von", ' ', this.state._pagination._max || (Array.isArray(this.state._data) ? this.state._data.length : 0), " angezeigt"), hAsync("div", null, hAsync("kol-pagination", { _boundaryCount: this.state._pagination._boundaryCount, _customClass: this.state._pagination._customClass, _on: this.handlePagination, _page: this.state._pagination._page, _pageSize: this.state._pagination._pageSize, _pageSizeOptions: this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS, _siblingCount: this.state._pagination._siblingCount, _tooltipAlign: "bottom", _max: this.state._pagination._max || this.state._pagination._max || this.state._data.length, _label: translate('kol-table-pagination-label', { placeholders: { label: this.state._label } }) })))), hAsync("div", { class: "table", tabindex: "0" }, hAsync("table", { style: {
                 minWidth: this.state._minWidth,
             } }, hAsync("caption", null, this.state._label), Array.isArray(this.state._headers.horizontal) && (hAsync("thead", null, this.state._headers.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, cols.map((col, colIndex) => {
             if (col.asTd === true) {
@@ -33357,17 +33334,11 @@ class KolTable {
                             break;
                     }
                 }
-                return (hAsync("th", { key: `thead-${rowIndex}-${colIndex}-${headerCell.label}`, scope: typeof headerCell.colSpan === 'number' && headerCell.colSpan > 1 ? 'colgroup' : 'col', colSpan: headerCell.colSpan, rowSpan: headerCell.rowSpan, style: {
-                        textAlign: col.textAlign,
+                return (hAsync("th", { class: col.textAlign ? `align-${col.textAlign}` : undefined, key: `thead-${rowIndex}-${colIndex}-${headerCell.label}`, scope: typeof headerCell.colSpan === 'number' && headerCell.colSpan > 1 ? 'colgroup' : 'col', colSpan: headerCell.colSpan, rowSpan: headerCell.rowSpan, style: {
                         width: col.width,
-                    }, "aria-sort": sortDirection, "data-sort": `sort-${shortSortDirection}` }, hAsync("div", { class: "w-full flex gap-1 items-center" }, hAsync("div", { class: {
-                        'w-full': true,
-                        [col.textAlign]: typeof col.textAlign === 'string' && col.textAlign.length > 0,
-                    }, style: {
-                        textAlign: col.textAlign,
-                    } }, col.label), !this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') && (hAsync("kol-button", { exportparts: "icon", _icons: sortButtonIcon, _hideLabel: true, _label: translate('kol-change-order', { placeholders: { colLabel: col.label } }), _on: {
+                    }, "aria-sort": sortDirection, "data-sort": `sort-${shortSortDirection}` }, !this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') ? (hAsync("kol-button-wc", { class: "table-sort-button", exportparts: "icon", _icons: { right: sortButtonIcon }, _label: col.label, _on: {
                         onClick: () => this.changeCellSort(headerCell),
-                    }, _variant: "ghost" })))));
+                    } })) : (col.label)));
             }
         })))))), hAsync("tbody", null, dataField.map(this.renderTableRow)), this.state._dataFoot.length > 0 ? this.renderFoot() : ''))));
     }
@@ -34060,7 +34031,7 @@ function hideOverlay(overlay) {
     }
 }
 
-const styleCss = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tkol-tooltip-wc {\n\t\tdisplay: contents;\n\t}\n\n\tkol-tooltip-wc .tooltip-floating {\n\t\tanimation-duration: 0.5s;\n\t\tanimation-iteration-count: 1;\n\t\tanimation-name: fadeInOpacity;\n\t\tanimation-timing-function: ease-in;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: fixed;\n\t\tvisibility: hidden;\n\t\t/* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tmax-width: 90vw;\n\t\tmax-height: 90vh;\n\t\twidth: var(--kol-tooltip-width); /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n\t}\n\n\t/* Shared between content and arrow */\n\tkol-tooltip-wc .tooltip-area {\n\t\tbackground-color: #fff;\n\t\tcolor: #000;\n\t}\n\n\tkol-tooltip-wc .tooltip-arrow {\n\t\theight: 10px;\n\t\tposition: fixed;\n\t\ttransform: rotate(45deg);\n\t\twidth: 10px;\n\t\tz-index: 999;\n\t}\n\n\tkol-tooltip-wc .tooltip-content {\n\t\tposition: relative;\n\t\tz-index: 1000;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n";
+const styleCss = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * No element should be used without a background and font color whose contrast ratio has\n\t\t * not been checked. By initially setting the background color to white and the font color\n\t\t * to black, the contrast ratio is ensured and explicit adjustment is forced.\n\t\t */\n\t\tbackground-color: white;\n\t\tcolor: black;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n\tclip: rect(0 0 0 0);\n\tclip-path: inset(50%);\n\theight: 1px;\n\toverflow: hidden;\n\tposition: absolute;\n\twhite-space: nowrap;\n\twidth: 1px;\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n\n\t/*\n\t * Ensure elements with hidden attribute to be actually not visible\n\t * @see https://meowni.ca/hidden.is.a.lie.html\n\t */\n\t[hidden] {\n\t\tdisplay: none !important;\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tkol-tooltip-wc {\n\t\tdisplay: contents;\n\t}\n\n\tkol-tooltip-wc .tooltip-floating {\n\t\tanimation-duration: 0.5s;\n\t\tanimation-iteration-count: 1;\n\t\tanimation-name: fadeInOpacity;\n\t\tanimation-timing-function: ease-in;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: fixed;\n\t\tvisibility: hidden;\n\t\t/* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tmax-width: 90vw;\n\t\tmax-height: 90vh;\n\t\twidth: var(--kol-tooltip-width); /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n\t}\n\n\t/* Shared between content and arrow */\n\tkol-tooltip-wc .tooltip-area {\n\t\tbackground-color: #fff;\n\t\tcolor: #000;\n\t}\n\n\tkol-tooltip-wc .tooltip-arrow {\n\t\theight: 10px;\n\t\tposition: absolute;\n\t\ttransform: rotate(45deg);\n\t\twidth: 10px;\n\t\tz-index: 999;\n\t}\n\n\tkol-tooltip-wc .tooltip-content {\n\t\tposition: relative;\n\t\tz-index: 1000;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n";
 
 class KolTooltip {
     constructor(hostRef) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/hydrate",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": "https://github.com/public-ui/kolibri",
@@ -42,11 +42,11 @@
     "hydrate"
   ],
   "devDependencies": {
-    "@public-ui/components": "2.0.2",
+    "@public-ui/components": "2.0.3",
     "rimraf": "3.0.2"
   },
   "peerDependencies": {
-    "@public-ui/components": "2.0.2"
+    "@public-ui/components": "2.0.3"
   },
   "sideEffects": false,
   "type": "commonjs",