xv-webcomponents 1.19.2 → 1.20.1-staging.0

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js

@@ -1,61 +1,291 @@
 import { h, Host } from "@stencil/core";
+import { createPopper } from "@popperjs/core";
 import { SIZE_VAR } from "../../types/enum";
+import { OverflowMenuItemSelector } from "./_vars";
+let overflowMenuUid = 0;
 export class XvOverflowMenu {
     constructor() {
         this.open = false;
         this.disabled = false;
         this.position = 'left';
         this.size = SIZE_VAR.MD;
-        this.handleClose = () => {
-            if (this.open)
-                this.open = false;
-        };
+        this.anchorEl = null;
+        this.menuId = `xv-overflow-menu-${overflowMenuUid++}`;
+        this.activeItem = null;
+        this.optIdSeq = 0;
+        /** Whether the current open was triggered by the keyboard — only then do we pre-highlight an item. */
+        this.openViaKeyboard = false;
+        this.openEdge = 'first';
         this.removeListeners = () => {
             this.el.removeEventListener('itemClick', this.handleSelectItem);
-            document.body.removeEventListener('click', this.handleClick);
+            document.removeEventListener('click', this.handleClickOutside, { capture: true });
         };
-        this.handleClick = (ev) => {
-            if (!this.open || this.el.contains(ev.target))
+        this.handleClickOutside = (ev) => {
+            var _a, _b, _c;
+            if (!this.open)
                 return;
-            ev.stopPropagation();
-            ev.preventDefault();
-            this.handleClose();
+            // A shadow-DOM click retargets ev.target to the host in the browser (covered by el.contains).
+            // Also check the shadow trigger/list directly so it works when there is no retargeting (jsdom).
+            const target = ev.target;
+            if (this.el.contains(target))
+                return;
+            if ((_a = this.triggerButtonEl) === null || _a === void 0 ? void 0 : _a.contains(target))
+                return;
+            if ((_b = this.listEl) === null || _b === void 0 ? void 0 : _b.contains(target))
+                return;
+            // A click on the anchor is handled by its own listener (toggle) — don't treat it as "outside".
+            if ((_c = this.anchorEl) === null || _c === void 0 ? void 0 : _c.contains(target))
+                return;
+            this.open = false;
         };
         this.onOpenToggle = () => {
+            this.openViaKeyboard = false; // mouse open: don't pre-highlight the first item
             this.open = !this.open;
         };
         this.handleSelectItem = ({ detail }) => {
             this.selectItem.emit(detail);
-            this.handleClose();
+            this.open = false;
         };
-    }
-    handleKeyDown(ev) {
-        if (ev.key === 'Escape') {
-            ev.stopPropagation();
+        this.anchorClickHandler = (ev) => {
+            if (this.disabled)
+                return;
             ev.preventDefault();
-            this.handleClose();
-        }
+            this.openViaKeyboard = false; // mouse open: don't pre-highlight the first item
+            this.open = !this.open;
+        };
+        this.getNavigableItems = () => Array.from(this.el.querySelectorAll(OverflowMenuItemSelector))
+            .filter((el) => !el.hasAttribute('disabled') && !el.hasAttribute('hidden') && el.getAttribute('variant') !== 'ghost');
+        this.moveActive = (delta) => {
+            const items = this.getNavigableItems();
+            if (!items.length)
+                return;
+            const current = this.activeItem ? items.indexOf(this.activeItem) : -1;
+            let next = current + delta;
+            if (next < 0)
+                next = items.length - 1;
+            else if (next >= items.length)
+                next = 0;
+            this.setActiveItem(items[next]);
+        };
+        this.setActiveByEdge = (edge) => {
+            const items = this.getNavigableItems();
+            if (!items.length)
+                return;
+            this.setActiveItem(edge === 'first' ? items[0] : items[items.length - 1]);
+        };
+        this.setActiveItem = (item, scroll = true) => {
+            var _a;
+            if (this.activeItem === item)
+                return;
+            (_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.removeAttribute('active');
+            this.activeItem = item;
+            if (!item) {
+                this.activeId = undefined;
+                return;
+            }
+            if (!item.id)
+                item.id = `${this.menuId}-opt-${this.optIdSeq++}`;
+            item.setAttribute('active', '');
+            this.activeId = item.id;
+            if (scroll)
+                item.scrollIntoView({ block: 'nearest' });
+        };
+        /** Runs once per open, after the panel is in the DOM: highlight the first item and place focus. */
+        this.initOpenState = () => {
+            var _a;
+            if (!this.open)
+                return;
+            if (this.openViaKeyboard) {
+                const items = this.getNavigableItems();
+                this.setActiveItem((this.openEdge === 'last' ? items[items.length - 1] : items[0]) || null, false);
+            }
+            else {
+                this.setActiveItem(null);
+            }
+            this.openViaKeyboard = false;
+            (_a = this.listEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    get isAnchorMode() {
+        return this.anchor !== undefined && this.anchor !== null && this.anchor !== '';
+    }
+    get effectivePosition() {
+        if (this.alignment === 'start')
+            return 'left';
+        if (this.alignment === 'end')
+            return 'right';
+        return this.position;
     }
     openChangeHandle() {
-        if (this.disabled)
+        this.syncOpenState();
+        this.openChange.emit(!!this.open);
+    }
+    anchorChangeHandle() {
+        this.teardownAnchor();
+        this.setupAnchor();
+    }
+    /* region public API */
+    async openMenu() {
+        if (!this.disabled)
+            this.open = true;
+    }
+    async closeMenu() {
+        this.open = false;
+    }
+    async toggleMenu() {
+        if (!this.disabled)
+            this.open = !this.open;
+    }
+    /* endregion public API */
+    syncOpenState() {
+        var _a;
+        if (this.disabled) {
+            if (this.open)
+                this.open = false;
             return;
+        }
         if (this.open) {
             this.el.addEventListener('itemClick', this.handleSelectItem);
-            document.body.addEventListener('click', this.handleClick);
+            document.addEventListener('click', this.handleClickOutside, { capture: true });
+            requestAnimationFrame(() => {
+                if (this.isAnchorMode)
+                    this.createPopper();
+                this.initOpenState();
+            });
         }
         else {
             this.removeListeners();
+            this.destroyPopper();
+            this.setActiveItem(null);
+        }
+        (_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    }
+    /* region anchor mode */
+    resolveAnchor() {
+        if (!this.isAnchorMode)
+            return null;
+        if (typeof this.anchor === 'string')
+            return document.querySelector(this.anchor);
+        return this.anchor;
+    }
+    setupAnchor() {
+        if (!this.isAnchorMode)
+            return;
+        this.anchorEl = this.resolveAnchor();
+        if (this.anchorEl) {
+            this.anchorEl.addEventListener('click', this.anchorClickHandler);
+            this.anchorEl.setAttribute('aria-haspopup', 'menu');
+        }
+    }
+    teardownAnchor() {
+        if (this.anchorEl) {
+            this.anchorEl.removeEventListener('click', this.anchorClickHandler);
+            this.anchorEl.removeAttribute('aria-haspopup');
+            this.anchorEl.removeAttribute('aria-expanded');
+            this.anchorEl = null;
+        }
+    }
+    popperPlacement() {
+        switch (this.effectivePosition) {
+            case 'right': return 'bottom-end';
+            case 'center': return 'bottom';
+            default: return 'bottom-start';
+        }
+    }
+    createPopper() {
+        const anchorEl = this.resolveAnchor();
+        if (!anchorEl || !this.listEl)
+            return;
+        this.destroyPopper();
+        this.popperInstance = createPopper(anchorEl, this.listEl, {
+            strategy: 'fixed',
+            placement: this.popperPlacement(),
+            modifiers: [
+                { name: 'offset', options: { offset: [0, 4] } },
+                { name: 'flip', options: { fallbackPlacements: ['top-start', 'top-end', 'top'] } },
+                { name: 'preventOverflow', options: { boundary: 'viewport', padding: 8 } },
+            ],
+        });
+    }
+    destroyPopper() {
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+            this.popperInstance = undefined;
+        }
+    }
+    /* endregion anchor mode */
+    /* region keyboard navigation */
+    handleKeyDown(ev) {
+        var _a;
+        if (this.disabled)
+            return;
+        if (!this.open) {
+            if (['ArrowDown', 'ArrowUp', 'Enter', ' ', 'Spacebar'].includes(ev.key)) {
+                ev.preventDefault();
+                this.openViaKeyboard = true;
+                this.openEdge = ev.key === 'ArrowUp' ? 'last' : 'first';
+                this.open = true;
+            }
+            return;
+        }
+        switch (ev.key) {
+            case 'ArrowDown':
+                ev.preventDefault();
+                this.moveActive(1);
+                break;
+            case 'ArrowUp':
+                ev.preventDefault();
+                this.moveActive(-1);
+                break;
+            case 'Home':
+                ev.preventDefault();
+                this.setActiveByEdge('first');
+                break;
+            case 'End':
+                ev.preventDefault();
+                this.setActiveByEdge('last');
+                break;
+            case 'Enter':
+            case ' ':
+            case 'Spacebar':
+                ev.preventDefault();
+                (_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.click(); // reuse the mouse-click selection path (also fires routerLink/href)
+                break;
+            case 'Escape':
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.open = false;
+                this.restoreFocus();
+                break;
+            case 'Tab':
+                this.open = false; // let focus leave naturally
+                break;
         }
     }
+    restoreFocus() {
+        var _a, _b;
+        if (this.isAnchorMode)
+            (_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.focus();
+        else
+            (_b = this.triggerButtonEl) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+    /* endregion keyboard navigation */
     render() {
-        const button = (h("button", { key: '212acc0ce0429ca38c356c6b82a3c9ce2aa85d32', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, h("slot", { key: '55b08167bb730258e19a5e85d57975671da90b2b', name: "trigger" }, h("svg", { key: '17d4d2111b429409ed7df07eda8490f00db47677', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, h("path", { key: 'ceb59b9eea9440f4491d781719d1034e0a9da485', d: "M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z" })))));
-        return (h(Host, { key: '99b1ab8d53a6392467b943bb9f7ed881f9cb0412', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, this.tooltip ? h("xv-tooltip-v2", { message: this.tooltip }, button) : button, h("div", { key: 'ee1d50d8f50fe5071861521f05764f80c3b83376', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, h("slot", { key: 'c01045f52c3ac7ffadca96395cc929c6dbbf8ac2' }))));
+        const list = (h("div", { class: { list: true, open: this.open, [`position-${this.effectivePosition}`]: !this.isAnchorMode }, role: "menu", tabindex: -1, "aria-orientation": "vertical", "aria-activedescendant": this.activeId, ref: (el) => (this.listEl = el) }, h("slot", null)));
+        if (this.isAnchorMode) {
+            return (h(Host, { class: { 'xv-overflow-menu': true, anchored: true }, size: this.size }, list));
+        }
+        const button = (h("button", { class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": this.open ? 'true' : 'false', ref: (el) => (this.triggerButtonEl = el) }, h("slot", { name: "trigger" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, h("path", { d: "M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z" })))));
+        return (h(Host, { class: "xv-overflow-menu", size: this.size }, this.tooltip ? h("xv-tooltip-v2", { message: this.tooltip }, button) : button, list));
     }
     componentDidLoad() {
-        this.openChangeHandle();
+        this.setupAnchor();
+        this.syncOpenState();
     }
     disconnectedCallback() {
         this.removeListeners();
+        this.destroyPopper();
+        this.teardownAnchor();
     }
     static get is() { return "xv-overflow-menu-v2"; }
     static get encapsulation() { return "shadow"; }
@@ -131,6 +361,25 @@ export class XvOverflowMenu {
                 "attribute": "position",
                 "defaultValue": "'left'"
             },
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Alias for `position` following the design-system wording. `start` \u2192 left, `end` \u2192 right."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alignment"
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
@@ -175,9 +424,38 @@ export class XvOverflowMenu {
                 "setter": false,
                 "reflect": false,
                 "attribute": "tooltip"
+            },
+            "anchor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | HTMLElement",
+                    "resolved": "HTMLElement | string",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Open the menu from an arbitrary element instead of the built-in trigger button.\nAccepts an element or a CSS selector; a click on it toggles the menu, which is then\npositioned against that element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "anchor"
             }
         };
     }
+    static get states() {
+        return {
+            "activeId": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "selectItem",
@@ -200,13 +478,86 @@ export class XvOverflowMenu {
                         }
                     }
                 }
+            }, {
+                "method": "openChange",
+                "name": "openChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
             }];
     }
+    static get methods() {
+        return {
+            "openMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "closeMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "toggleMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "open",
                 "methodName": "openChangeHandle"
+            }, {
+                "propName": "anchor",
+                "methodName": "anchorChangeHandle"
             }];
     }
     static get listeners() {

package/dist/collection/components/xv-pagination/xv-pagination.js

@@ -89,7 +89,7 @@ export class XvPagination {
             this.observer.disconnect();
     }
     render() {
-        return (h(Host, { key: '210ea26a1c7b5e6f918ffa409c510f42adea955a', class: { block: this.block, [this.currentVariant]: true, [this.size]: !!this.size } }, this.currentVariant === 'full' && (h("div", { key: 'a21c82c679fc7712e19c87e129aa754df3cbe563', class: "block" }, h("select", { key: '6adb81a9df98ff2739c709f30f06f6b605c48cfb', class: "options-select", name: "options", onChange: this.handleItemsPerPageChange }, this.itemsPerPageOptions.map((v) => h("option", { value: v }, v))))), this.currentVariant === 'full' && (h("span", { key: '3186923b5dc8dbf37b95f63ebff4376fe1af21cf', class: "block block_full" }, `${(this.page - 1) * this.itemsPerPage + 1} – ${Math.min(this.page * this.itemsPerPage, this.totalItems)} von ${this.totalItems} Einträgen`)), this.currentVariant === 'full' && (h("div", { key: '0b7b91b64d03c2de54398d29596b75b489651c3d', class: "block" }, h("select", { key: '8534960f2926fc2bdc436a1b61490bb3b5c97f53', class: "options-select", name: "pages", onChange: this.handlePageSelectChange }, Array.from({ length: this.total }, (_, i) => (h("option", { selected: this.page === i + 1, value: i + 1 }, i + 1)))), h("span", { key: 'bf0bf2394a14871e6ab26859fdc121d567a4ef99' }, "von ", this.total, " Seiten"))), this.currentVariant === 'compact' && h("span", { key: '433b98c39e914807ca40971387f06352a7f30b9e', class: "block" }, "Seite ", this.page), h("xv-button-v2", { key: '1dfe5751c70a4fa7ecb8b95c3f0b3903c2482dd4', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page - 1), disabled: this.page <= 1 }, h("span", { key: '8ee832bb9e54a8c6cbd1dd18042a9b9cbfcb901c', slot: "icon-left", class: "icon icon_prev" })), this.currentVariant === 'regular' && (h("ul", { key: 'c9c71a002290fc0e5ad13bbc5959ada62f9f4b73', class: "list" }, this.visiblePagesWithDots.map((page) => (h("li", { class: { active: this.page === page } }, page === 'dots-start' ? (h("div", { class: "list_dots" }, h("xv-button-v2", { variant: "ghost", size: this.size, tabindex: -1 }, h("span", { slot: "icon-left", class: "list_dots__icon" }, "...")), h("select", { name: "start", onChange: this.handlePageSelectChange }, Array.from({ length: this.page - 3 }, (_, i) => (h("option", { value: i + 2 }, i + 2)))))) : page === 'dots-end' ? (h("div", { class: "list_dots" }, h("xv-button-v2", { variant: "ghost", size: this.size, tabindex: -1 }, h("span", { slot: "icon-left", class: "list_dots__icon" }, "...")), h("select", { name: "end", onChange: this.handlePageSelectChange }, Array.from({ length: this.total - (this.page + 2) }, (_, i) => (h("option", { value: i + this.page + 2 }, i + this.page + 2)))))) : (h("xv-button-v2", { variant: "ghost", size: this.size, disabled: this.page === page, onClick: () => this.handlePageChange(page) }, h("span", { class: "list_page", slot: "icon-left" }, page)))))))), h("xv-button-v2", { key: 'f4f995312525551b7be50a677bae9e5781fb3aea', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page + 1), disabled: this.page >= this.total }, h("span", { key: '8fa7602b0c320f038e615ccad47bef7f76b16e9e', slot: "icon-left", class: "icon icon_next" }))));
+        return (h(Host, { key: '7c5589c5954a364956c471c8b214f7e5c6e2d217', class: { block: this.block, [this.currentVariant]: true, [this.size]: !!this.size } }, this.currentVariant === 'full' && (h("div", { key: '72a9851f3c53fca042f3a5cbefc87e2a4beddd8d', class: "block" }, h("select", { key: '31c16503e23de7c5e6b03b80db3df72a7bf68edb', class: "options-select", name: "options", onChange: this.handleItemsPerPageChange }, this.itemsPerPageOptions.map((v) => h("option", { value: v }, v))))), this.currentVariant === 'full' && (h("span", { key: 'e5d45975abec39806344a36b518129d327a589d5', class: "block block_full" }, `${(this.page - 1) * this.itemsPerPage + 1} – ${Math.min(this.page * this.itemsPerPage, this.totalItems)} von ${this.totalItems} Einträgen`)), this.currentVariant === 'full' && (h("div", { key: '0a97d5ec8e6163ec5f2acd1f613469be984ad829', class: "block" }, h("select", { key: 'f9e2ee52b8243e738e899a32578412853bf0dae3', class: "options-select", name: "pages", onChange: this.handlePageSelectChange }, Array.from({ length: this.total }, (_, i) => (h("option", { selected: this.page === i + 1, value: i + 1 }, i + 1)))), h("span", { key: '95b453e07438aac43c85cf0260415c4781517c24' }, "von ", this.total, " Seiten"))), this.currentVariant === 'compact' && h("span", { key: '591dc8b9ef95f0a94604937a6c3fd23ea5624850', class: "block" }, "Seite ", this.page), h("xv-button-v2", { key: 'd06344e19ef7a0cfc1cf3136c98ed579542a86f2', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page - 1), disabled: this.page <= 1 }, h("span", { key: '1e4dbe879f5fabfcc2ca4af2859124e99491ebae', slot: "icon-left", class: "icon icon_prev" })), this.currentVariant === 'regular' && (h("ul", { key: '8deafa7283a58edc710c5298821878c7de89d5bd', class: "list" }, this.visiblePagesWithDots.map((page) => (h("li", { class: { active: this.page === page } }, page === 'dots-start' ? (h("div", { class: "list_dots" }, h("xv-button-v2", { variant: "ghost", size: this.size, tabindex: -1 }, h("span", { slot: "icon-left", class: "list_dots__icon" }, "...")), h("select", { name: "start", onChange: this.handlePageSelectChange }, Array.from({ length: this.page - 3 }, (_, i) => (h("option", { value: i + 2 }, i + 2)))))) : page === 'dots-end' ? (h("div", { class: "list_dots" }, h("xv-button-v2", { variant: "ghost", size: this.size, tabindex: -1 }, h("span", { slot: "icon-left", class: "list_dots__icon" }, "...")), h("select", { name: "end", onChange: this.handlePageSelectChange }, Array.from({ length: this.total - (this.page + 2) }, (_, i) => (h("option", { value: i + this.page + 2 }, i + this.page + 2)))))) : (h("xv-button-v2", { variant: "ghost", size: this.size, disabled: this.page === page, onClick: () => this.handlePageChange(page) }, h("span", { class: "list_page", slot: "icon-left" }, page)))))))), h("xv-button-v2", { key: '14054db39c36ea71b040fbd40d22b109e46ecb27', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page + 1), disabled: this.page >= this.total }, h("span", { key: 'a42a8b4bd9f297d99b973ea016b98250f3498130', slot: "icon-left", class: "icon icon_next" }))));
     }
     static get is() { return "xv-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.js

@@ -5,7 +5,7 @@ export class XvProgressIndicatorItem {
         this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
     }
     render() {
-        return (h(Host, { key: '6d7f6e40bbed6d60731afb883f716cf911593925', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: 'e12633afebc77d85ffd39351c0abc4c619cb3ad1', class: "line" }), h("span", { key: 'e822fb95db2630949388193537ccd1f656f9878c', class: "icon" }, h("svg", { key: '4c64d4ed53899217f24cb7d765ba8b93dc237ec4', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: 'a68876b14e85a91d59cacf6f7f35bbc705e81194', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), h("p", { key: '1a021d4c96e5835c79a378e67474c7fcc4b501a7', class: "label" }, h("slot", { key: '5cbe1f8e41050f339df125f969f495d559198214' }))));
+        return (h(Host, { key: '33ae32003398c17a6b31ea573f05d6cd33b164c1', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: '560ce3943bf693aa586a9e6df458910b66dad315', class: "line" }), h("span", { key: 'fab068e39c9e79c78b08fc145978d0e266c52ef0', class: "icon" }, h("svg", { key: '9c23f9e6e1b746b73771eb70bea8b2e5d02ec3d0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: '852ef6777fb171fdde85a82fd18b2ec8bc4be96f', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), h("p", { key: 'b873572c5b27c14a182e5adad80c6d07f45d84f2', class: "label" }, h("slot", { key: '480bb80167ad0e136577083b99a411ce080aa88e' }))));
     }
     static get is() { return "xv-progress-indicator-v2-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js

@@ -55,7 +55,7 @@ export class XvProgressIndicator {
         this.updateChildItems();
     }
     render() {
-        return (h(Host, { key: 'ebd0a63a5152f0ad74670b0543bca1e6d9abcbd7', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: '7082a16388f12c76f5dc45f0de81c3aaffab4e03' })));
+        return (h(Host, { key: '3fcba0ade362eac7bde5ed929617608425e7e386', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: '297b19bda35040fd8d51457b16cce7a09af8fb84' })));
     }
     static get is() { return "xv-progress-indicator-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-radio/xv-radio.js

@@ -23,12 +23,12 @@ export class XvRadio {
         }
     }
     render() {
-        return (h("div", { key: '9e4404e53c7ddad6d043d89852f5637dfa8d9332', class: {
+        return (h("div", { key: '9847de4eae9fd57ad9292e5796232f7ec3c3e0c7', class: {
                 'xv-radio': true,
                 'xv-radio--reverse': this.reverse,
                 'xv-radio--block': this.block,
                 [`xv-radio--size-${this.size}`]: !!this.size,
-            } }, this.label && h("p", { key: '5eef3abe5242c2f2d2fcafa099fd9318335d8931', class: "xv-radio_label" }, this.label), h("label", { key: 'f42c19f04af68872a2735d1c59557a927d89fc6d', class: { 'xv-radio_container': true, disabled: this.disabled } }, h("div", { key: '6691149a0d00ae2a2cacc598bdfbe4a640249adb', class: { 'xv-radio_input': true, 'xv-radio_input--error': !!this.error || this.error === '' } }, h("input", { key: '01adc0687b015fbaef1700026e053f0153528786', ref: el => (this.inputEl = el), type: "radio", name: this.name, value: this.value, checked: this.checked, readonly: this.readonly, disabled: this.disabled }), h("span", { key: 'ca7528bb5652ab0ead8522b7453d8ac3d3eb5c51', class: "xv-radio_input__mark" })), h("span", { key: '4677a9db2e9eea4008210cbeba997ebf6427e2df', class: "xv-radio_container__label" }, h("slot", { key: '0fa0141c2f4cb8339cb357e47c47683be717927d' }))), this.error && typeof this.error === 'string' && (h("span", { key: '8f2938e66f84ae38a4c42216d7258f74fc833f2d', class: "xv-radio_msg xv-radio_msg--error" }, h("span", { key: '7e074de049d10724c0b15e35275d3b61e6ea8f6c', class: "xv-radio_msg__status", "aria-hidden": "true" }, "!"), this.error)), this.warning && typeof this.warning === 'string' && (h("span", { key: 'bb9be776cd0ff00bb5a53bf39d4a38c163cca3cd', class: "xv-radio_msg xv-radio_msg--warning" }, h("span", { key: '51c0bd16a2e58587e996b2a1b6d79fd241588b14', class: "xv-radio_msg__status", "aria-hidden": "true" }, "\u26A0"), this.warning)), h("slot", { key: '3830382c6da7bf627bdbe2e0f0e594a1ae97ca2c', name: "info" })));
+            } }, this.label && h("p", { key: '85abe464f3c4810bb2809aa256d7a8e42c074e1c', class: "xv-radio_label" }, this.label), h("label", { key: '088ab7d61d11b0ca5fc40bdc4ab7f4db07821309', class: { 'xv-radio_container': true, disabled: this.disabled } }, h("div", { key: '4eae897aaed7152d15d4f2fc5919f2c743041d85', class: { 'xv-radio_input': true, 'xv-radio_input--error': !!this.error || this.error === '' } }, h("input", { key: '9f78ff31e667f9c12b86da027db29735d09b7532', ref: el => (this.inputEl = el), type: "radio", name: this.name, value: this.value, checked: this.checked, readonly: this.readonly, disabled: this.disabled }), h("span", { key: 'dcecc4aec28c50d13ccd1c45b18b106b8f99ef93', class: "xv-radio_input__mark" })), h("span", { key: '52e51eb01131ecdecb5047f1990ed120aa3c12d7', class: "xv-radio_container__label" }, h("slot", { key: 'cb9bbb0d79f29a268828204f482a27a49d9bd798' }))), this.error && typeof this.error === 'string' && (h("span", { key: 'c085f9c2b913cb4c27c4f9fe88b8941877eb00c4', class: "xv-radio_msg xv-radio_msg--error" }, h("span", { key: '16d52c226306e20272b08a7dbdeda4ff8ebb4688', class: "xv-radio_msg__status", "aria-hidden": "true" }, "!"), this.error)), this.warning && typeof this.warning === 'string' && (h("span", { key: '7f67291cc785e20762960a1e183245927e96797c', class: "xv-radio_msg xv-radio_msg--warning" }, h("span", { key: '9546dfa2c8faf77d4ec949cba0c16a74bd5e8595', class: "xv-radio_msg__status", "aria-hidden": "true" }, "\u26A0"), this.warning)), h("slot", { key: '59a998219c4e88dfb7fce33fa19a4bced0146b8d', name: "info" })));
     }
     connectedCallback() {
         var _a;

package/dist/collection/components/xv-slider/xv-slider.js

@@ -38,7 +38,7 @@ export class XvSlider {
             this.setValue(this.min);
     }
     render() {
-        return (h(Host, { key: '8b322666d452c6a121197af24bfe9cb5b93c49ed', class: { disabled: this.disabled, readonly: this.readonly } }, this.label && h("label", { key: '8bad8aca9a606e9a7b1a8738f54997d1a2ab6126', class: "label" }, this.label), h("div", { key: 'f09dd0b6186144ec0d60a4d3984f60e73217f41b', class: "control" }, h("span", { key: '33009cbd0d363af54a7ad2e6feac0d1ebafe6bb1', class: "control_label" }, this.min), h("input", { key: 'cefa05026013b2fcc15ab7916eba5ce3575babac', type: "range", disabled: this.disabled || this.readonly, readonly: this.readonly, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, style: { backgroundSize: `${((this.value - this.min) * 100) / (this.max - this.min)}% 100%` } }), h("span", { key: '9dad1b9ae99c15238c90c4fa717bcc0cb075ea15', class: "control_label" }, this.max), !this.notEditable && (h("input", { key: 'e1ce3acf3facbb3464e22d44e3ac867e40e3e3b5', type: "number", disabled: this.disabled, readonly: this.readonly, name: `${this.name}-number-input`, step: this.step, min: this.min, max: this.max, value: this.value, onInput: this.handleNumberInput, onBlur: this.handleNumberBlur })))));
+        return (h(Host, { key: '65f76b767cc84856069973e15e0382a960e95d86', class: { disabled: this.disabled, readonly: this.readonly } }, this.label && h("label", { key: '72090f7ebd313d9c0787bfe4c52c7f100605fea6', class: "label" }, this.label), h("div", { key: '21e5907cdf8d0fc5eb8c1a715e0c19c0f43ca03a', class: "control" }, h("span", { key: '5b2714841a384961abeeadb714f869ce975a047f', class: "control_label" }, this.min), h("input", { key: '314b30eaa27c94b85d746bdb1b08650e65189653', type: "range", disabled: this.disabled || this.readonly, readonly: this.readonly, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, style: { backgroundSize: `${((this.value - this.min) * 100) / (this.max - this.min)}% 100%` } }), h("span", { key: '1fd6ebcf2d08c1b86dcddd0cba504c874821d122', class: "control_label" }, this.max), !this.notEditable && (h("input", { key: 'bd6d3809e9e09dddd067eedd927279700016ff49', type: "number", disabled: this.disabled, readonly: this.readonly, name: `${this.name}-number-input`, step: this.step, min: this.min, max: this.max, value: this.value, onInput: this.handleNumberInput, onBlur: this.handleNumberBlur })))));
     }
     static get is() { return "xv-slider-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.js

@@ -22,7 +22,7 @@ export class XvTableCell {
     }
     ;
     render() {
-        return (h(Host, { key: '61dd47a88ca67ed66807044fc1ad6c9affe13a5d' }, h("slot", { key: 'c7f2d9149f9f511fab2e2b58dc797513ca22686e' })));
+        return (h(Host, { key: '6869366153dd26000e2440df9109daa9df77e777' }, h("slot", { key: '33baf3aa330babd0e3ee07a6455d83ddf9d3638b' })));
     }
     static get is() { return "xv-table-v2-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.js

@@ -10,7 +10,7 @@ export class XvTableExpand {
         };
     }
     render() {
-        return (h(Host, { key: '18e3c240044738ea523308e1456a31fde740bc53' }, h("button", { key: '71b0e10898b4c5f7783038b1b80c5c5bba228f57', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: '84daaed9e0d914c59ef17f5a6772f44f03b7360e', name: XV_EXPANDABLE_KEY }), h("div", { key: '5a7986f3df5509bca78aeb1210f0f5bdb1269c29', class: { expandableContent: true, open: this.open } }, h("slot", { key: '98402f8d72e82032cb5d4a82d19752071c10f73c' }))));
+        return (h(Host, { key: 'ccc90f12cd72b5be45d10764413fbf289a3f0811' }, h("button", { key: '01b2a423cfd638c2791e643ba23e7204d6537d43', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: '805d0c9f40a2649d69876f3b2d277e16a9283dc6', name: XV_EXPANDABLE_KEY }), h("div", { key: 'cb98360d80b2bef84c6c1917caca61b44f7837e8', class: { expandableContent: true, open: this.open } }, h("slot", { key: '82b80292c259a05f9c493be080c8006f154b6efb' }))));
     }
     componentDidLoad() {
         setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);

package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js

@@ -42,7 +42,7 @@ export class XvTableRow {
         }
     }
     render() {
-        return (h(Host, { key: '718559c442dba13b80325517022c409ecadf2eb6' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '9b3f731e0736633a442b740fecc028970f8c7724', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: '87c1313181781c0064e20d6f49b4230b725250e1', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: '2129bdb4b59933945f354eab41a687aee314c193', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '78076201fd11d65f3fc4204f03ec495aebd39358' })));
+        return (h(Host, { key: '84abfd18de14b5e6988b99fad17f46dcef62900a' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '901ec86f5753adf2f41f6fae88c816bf462ffd45', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: 'f00b54d81da7148b35b93e60711d7b3b35096af6', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: '8363e1d39f4280841618c4ff50d75638af674879', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '6a8073f779bf9644d757a620253d29167b458ffb' })));
     }
     componentWillLoad() {
         this.setInitialAttrs();

package/dist/collection/components/xv-table/xv-table.js

@@ -32,7 +32,7 @@ export class XvTable {
             .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
     }
     render() {
-        return (h(Host, { key: '3378f93964286016aead896cf9ddeb8441fc5cf1', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: '03200d295f8e39378533529e5a4fb1d8e2887ee8', name: "title" }, !!this.el.title && h("h2", { key: '7121289ae3921e43723e94e4d99767000b687139', class: "xv-table-title" }, this.el.title)), h("slot", { key: 'ca77ad256b3f4f92e883530bc95b4d7bd94c21ae', name: "toolbar" }), h("div", { key: 'd58ea2535869bf5cda6f8f9b6bf4177082a36a5f', class: "xv-table" }, h("div", { key: '33847f258beded610a2fc3c73507701f1e7e478e', class: "batch-actions" }, h(Fragment, { key: '07d9960b1bba4e66d84f888075dcf6aa5db4f291' }, h("div", { key: 'f12a52d421438cd568518939b70216f4301f086b', class: "batch-actions_content" }, h("slot", { key: '080804c92ad1499e470cf2cf4cbb9b6af4e13374', name: "batch" })), h("p", { key: 'd9b3d215bc14ba806e08bfe007348e20ab33a47b', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("div", { key: '321c75950513f8fe09230c5d5bfcfe39b65811d2', class: "xv-table_wrapper" }, h("slot", { key: '42b1cbf019c96bd7b54ae4384ec23b47ff974e12' }), h("slot", { key: '5f8aa00056ad68d7273bc9450c394ed844f73b31', name: "footer" })), !!this.loading && (h("div", { key: '93014f426b2f0cdf60b741bf0736844fce7d5bdf', class: "xv-table_loading" }, h("xv-loader-v2", { key: '997eba60cddc9ffecc983d2f6b6a30574bbd67d0', size: SIZE_VAR.LG }))))));
+        return (h(Host, { key: '3ba40f0c65621b3d748e21ef79d64f7fcaff7241', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: '157beb3344e8c5ecd87e54eaf8b08448fe6bd573', name: "title" }, !!this.el.title && h("h2", { key: '95b0ee401a1168c696da0d457d89194c886743f2', class: "xv-table-title" }, this.el.title)), h("slot", { key: '654a069ce7f51bb9d073ea503b6cf7137b80cf2b', name: "toolbar" }), h("div", { key: 'bf4fdac5b559f406d9d907252ef8acfbeb397441', class: "xv-table" }, h("div", { key: '714eca6ae436694503b6af2eb580868d3788b191', class: "batch-actions" }, h(Fragment, { key: '8ac8c13cf22de4b14507d0176cf85522abb1c8b5' }, h("div", { key: '768759186883cec8dbd6ba52dba2e49d94949936', class: "batch-actions_content" }, h("slot", { key: 'bf6b50edd02317f5cedeb06a95930ef251f5fd2c', name: "batch" })), h("p", { key: 'b71c2c31bf17acc4c9582aa23f909d9991311f00', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("div", { key: '7b53ba114ec7c9ae56c10e5f85eee416c29428ed', class: "xv-table_wrapper" }, h("slot", { key: '2e9a401645d0b0a650f7df8d276b5dc8e6b264cc' }), h("slot", { key: '2d3cd237aea826b672da473ada6e028b37f22a03', name: "footer" })), !!this.loading && (h("div", { key: '61918a11ff660deac23575a04a3bf44c253ace41', class: "xv-table_loading" }, h("xv-loader-v2", { key: 'bc3108a52d5f21ba690a25568fe6b8f2b9ea33ac', size: SIZE_VAR.LG }))))));
     }
     componentWillLoad() {
         this.setColsSizeTemplate();

package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js

@@ -6,7 +6,7 @@ export class XvTab {
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: '3eef9824ccca51378d048f64e001aa649684b55e', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
+        return (h(Host, { key: '7b49de1203b60a0a7b1b25552907eb8339f001ec', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
     }
     static get is() { return "xv-tab-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-tag/xv-tag.js

@@ -13,7 +13,7 @@ export class XvTag {
         this.closeClick.emit(e);
     }
     render() {
-        return (h(Host, { key: 'a38b9c4edca72c2bc9540e113ad18a7c129d0eb5', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: 'a691bc698b9abfd62988a83f1105fe352713bdaa', class: "xv-tag_content", part: "details-content" }, h("slot", { key: '0b52ffe899a57a3dcb3cf38fde2eec851db60566' })), this.closeable && (h("button", { key: '0c1c396fde3b9ccae2bb549e1f17923cb1bfa9b9', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
+        return (h(Host, { key: '6b2f00a5acec63848ec53f4c23d5444cfd9d9c65', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '7fd4e3e61903755c50668d0c9923afc7915afb5a', class: "xv-tag_content", part: "details-content" }, h("slot", { key: '26a6b95e5c3dd33b8bcb5b81fa2399338c72fb22' })), this.closeable && (h("button", { key: 'd14081f320bd61f23c09a99bbafa1abac5f11517', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
     }
     static get is() { return "xv-tag-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-tag-combobox/xv-tag-combobox.css

@@ -181,6 +181,13 @@
   gap: 6px;
   width: 100%;
 }
+:host .control-loader {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  margin-left: var(--spacing-03);
+  pointer-events: none;
+}
 :host .control-input {
   flex: 1;
   min-width: 120px;