xv-webcomponents 0.1.30 → 0.1.32

package/dist/esm/{xv-accordion-v2_28.entry.js → xv-accordion-v2_26.entry.js}

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-83ab73b7.js';
-import { u as uidGenerator, a as forEach, s as setAttr, d as debounce } from './utils-0d1c18d5.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-590eb7d2.js';
+import { u as uidGenerator, a as forEach, s as setAttr } from './utils-a9c71376.js';
 
 const xvAccordionCss = ":host{display:block}";
 const XvAccordionV2Style0 = xvAccordionCss;
@@ -111,7 +111,7 @@ const XvCard = class {
 };
 XvCard.style = XvCardV2Style0;
 
-const xvCheckboxCss = ":host{--checkbox-size:max(1rem, 16px);box-sizing:border-box;display:inline-flex;flex-direction:column}:host([error]) .xv-checkbox .checkmark{border-color:var(--text-error, #D62512)}.error,[name=info]{display:inline-flex;align-items:center;justify-content:flex-start;font-size:var(--fz-sm, 12px);font-family:var(--ff-body, Tahoma);line-height:133.333%;letter-spacing:0.32px}.error{margin-top:var(--gap-xs, 5px);color:var(--text-error, #D62512)}.error::before{margin-right:var(--gap-xs, 5px);content:\"!\";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:var(--fz-sm, 12px);font-weight:bold;color:white;background-color:var(--text-error, #D62512);border-radius:50%}.xv-checkbox{display:inline-flex;align-items:center;cursor:pointer;user-select:none}.xv-checkbox input[type=checkbox]{position:absolute;width:var(--checkbox-size);height:var(--checkbox-size);margin:0;padding:0;opacity:0;pointer-events:none;box-sizing:border-box}.xv-checkbox .checkmark{width:var(--checkbox-size);min-width:var(--checkbox-size);height:var(--checkbox-size);min-height:var(--checkbox-size);box-sizing:border-box;margin:0;padding:0;border:1.4px solid var(--icon-primary, #D1D1D1);border-radius:2px;background-color:var(--background, #FFF);transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center}.xv-checkbox input:checked+.checkmark{background-color:var(--background-brand, #97BF0D);border-color:var(--background-brand, #97BF0D)}.xv-checkbox input:checked+.checkmark:not(.checkmark-partial)::after{content:\"\";width:calc(var(--checkbox-size) / 4);height:calc(var(--checkbox-size) / 2.5);border:solid var(--background, #FFF);margin-bottom:calc(var(--checkbox-size) / 10);border-width:0 2px 2px 0;transform:rotate(45deg);display:block}.xv-checkbox input:checked+.checkmark.checkmark-partial::after{content:\"\";width:calc(var(--checkbox-size) / 3);height:calc(var(--checkbox-size) / 10);background-color:var(--background, #FFF)}.xv-checkbox input:focus+.checkmark{outline:1.4px solid var(--focus, #8B8B8B)}.xv-checkbox .label{margin-left:8px;color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:128.571%;letter-spacing:0.16px}.xv-checkbox.readonly{cursor:initial}.xv-checkbox.readonly input:checked+.checkmark{background-color:var(--background, #FFF);border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.readonly input:checked+.checkmark:after{border-color:var(--icon-primary, #131313)}.xv-checkbox.readonly input:checked+.checkmark-partial:after{background-color:var(--icon-primary, #131313)}.xv-checkbox.readonly .checkmark{border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.readonly .label{color:var(--text-primary, #333)}.xv-checkbox.disabled{cursor:not-allowed}.xv-checkbox.disabled .checkmark{border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.disabled .label{color:var(--text-disabled, rgba(19, 19, 19, 0.25))}";
+const xvCheckboxCss = ":host{--checkbox-size:max(1rem, 16px);box-sizing:border-box;display:inline-flex;flex-direction:column}:host([error]) .xv-checkbox .checkmark{border-color:var(--text-error, #D62512)}.error,[name=info]{display:inline-flex;align-items:center;justify-content:flex-start;font-size:var(--fz-sm, 12px);font-family:var(--ff-body, Tahoma);line-height:133.333%;letter-spacing:0.32px}.error{margin-top:var(--gap-xs, 5px);color:var(--text-error, #D62512)}.error::before{margin-right:var(--gap-xs, 5px);content:\"!\";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:var(--fz-sm, 12px);font-weight:bold;color:white;background-color:var(--text-error, #D62512);border-radius:50%}.xv-checkbox{display:inline-flex;align-items:center;cursor:pointer;user-select:none}.xv-checkbox input[type=checkbox]{position:absolute;width:var(--checkbox-size);height:var(--checkbox-size);margin:0;padding:0;opacity:0;pointer-events:none;box-sizing:border-box}.xv-checkbox .checkmark{width:var(--checkbox-size);min-width:var(--checkbox-size);height:var(--checkbox-size);min-height:var(--checkbox-size);box-sizing:border-box;margin:0;padding:0;border:1.4px solid var(--icon-primary, #D1D1D1);border-radius:2px;background-color:var(--background, #FFF);transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center}.xv-checkbox input:checked+.checkmark{background-color:var(--background-brand, #97BF0D);border-color:var(--background-brand, #97BF0D)}.xv-checkbox input:checked+.checkmark:not(.checkmark-partial)::after{content:\"\";width:calc(var(--checkbox-size) / 4);height:calc(var(--checkbox-size) / 2.5);border:solid var(--background, #FFF);margin-bottom:calc(var(--checkbox-size) / 10);border-width:0 2px 2px 0;transform:rotate(45deg);display:block}.xv-checkbox input:checked+.checkmark.checkmark-partial::after{content:\"\";width:calc(var(--checkbox-size) / 3);height:calc(var(--checkbox-size) / 10);background-color:var(--background, #FFF)}.xv-checkbox input:focus+.checkmark{outline:1.4px solid var(--focus, #8B8B8B)}.xv-checkbox .label{color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:128.571%;letter-spacing:0.16px}.xv-checkbox .label_str,.xv-checkbox .label ::slotted(*){margin-left:8px}.xv-checkbox.readonly{cursor:initial}.xv-checkbox.readonly input:checked+.checkmark{background-color:var(--background, #FFF);border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.readonly input:checked+.checkmark:after{border-color:var(--icon-primary, #131313)}.xv-checkbox.readonly input:checked+.checkmark-partial:after{background-color:var(--icon-primary, #131313)}.xv-checkbox.readonly .checkmark{border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.readonly .label{color:var(--text-primary, #333)}.xv-checkbox.disabled{cursor:not-allowed}.xv-checkbox.disabled .checkmark{border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.disabled .label{color:var(--text-disabled, rgba(19, 19, 19, 0.25))}";
 const XvCheckboxV2Style0 = xvCheckboxCss;
 
 const XvCheckbox = class {
@@ -186,7 +186,7 @@ const XvCheckbox = class {
         }
     }
     render() {
-        return (h(Host, { key: 'bcaedf1b88ff4b64cec1ca477a214dc8987c6ed0' }, h("label", { key: '85770d8c9326340f63e024893c5fd28bc79f85a7', class: { 'xv-checkbox': true, disabled: this.disabled, readonly: this.readonly } }, h("input", { key: '156869a713eed4506123e267dc8e4b0ed74e73bb', ref: el => (this.inputEl = el), type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, indeterminate: this.indeterminate, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), h("span", { key: '1b2a979ae6d31e48e03ab41a054236cd5dbaab26', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), h("div", { key: '5bb240548e68a3e44fd665a917ccc75d2bd423b1', class: "label" }, h("slot", { key: '7ac3876f675592624c2fd252d8dc9941ad823de9' }, this.label))), h("slot", { key: 'e5fd949bec961b2586eb25bc806964b517413872', name: "info" }), !!this.error && h("span", { key: '86c608eada3710b63d54cb6796d738aaff695c33', class: "error" }, this.error)));
+        return (h(Host, { key: 'bcaedf1b88ff4b64cec1ca477a214dc8987c6ed0' }, h("label", { key: '85770d8c9326340f63e024893c5fd28bc79f85a7', class: { 'xv-checkbox': true, disabled: this.disabled, readonly: this.readonly } }, h("input", { key: '156869a713eed4506123e267dc8e4b0ed74e73bb', ref: el => (this.inputEl = el), type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, indeterminate: this.indeterminate, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), h("span", { key: '1b2a979ae6d31e48e03ab41a054236cd5dbaab26', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), h("div", { key: '5bb240548e68a3e44fd665a917ccc75d2bd423b1', class: "label" }, h("slot", { key: '7ac3876f675592624c2fd252d8dc9941ad823de9' }, this.label && h("span", { key: '263f592cf8f71cfbb6d4a53180b67e71260f36da', class: "label_str" }, this.label)))), h("slot", { key: 'aaf1a57125f9561f0902e943991ba8c91b763534', name: "info" }), !!this.error && h("span", { key: 'a7e94090ad70cf9929b6112965ff6da3965de627', class: "error" }, this.error)));
     }
     componentDidLoad() {
         if (this.indeterminate) {
@@ -223,7 +223,7 @@ var SIZE_VAR;
 
 const DropdownItemSelector = '.xv-dropdown-item';
 
-const xvDropdownCss = ":host{--dropdown-padding-x:16px;--dropdown-padding-y:11px;--dropdown-max-width:300px;display:block;position:relative;text-align:left;max-width:min(var(--dropdown-max-width), 100%)}:host .label{color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:12px;font-style:normal;font-weight:700;line-height:16px;letter-spacing:0.32px}:host .label ::slotted([slot=label]){color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:12px;font-style:normal;font-weight:700;line-height:16px;letter-spacing:0.32px}:host .control{background-blend-mode:multiply;border-radius:3px;box-shadow:0 0 0 1px #8B8B8B inset;transition:0.2s ease-in-out background-color;cursor:pointer;margin:4px 0;box-sizing:border-box;font-family:inherit;font-size:100%;padding:0;border:0;appearance:none;background-color:var(--field-02, #FFF);text-align:start;inline-size:100%;position:relative;display:inline-flex;overflow:hidden;align-items:center;block-size:calc(100% + 1px);outline:none;padding-block:var(--dropdown-padding-y);padding-inline:var(--dropdown-padding-x);text-overflow:ellipsis;vertical-align:top;white-space:nowrap}:host .control_value,:host .control_placeholder{flex:1;margin:0;overflow:hidden;color:var(--text-primary, #333);user-select:none;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fz-body, Tahoma);font-size:14px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:0.16px;padding-inline:0 1rem}:host .control_placeholder{color:var(--text-placeholder, #ACACAC)}:host .control_icon{width:18px;height:18px}:host .control_icon.error{color:var(--support-error, #F1290E)}:host .control_icon.warning{color:var(--support-warning, #FF7F04)}:host .control_arrow{box-sizing:border-box;margin:0;font-size:100%;vertical-align:baseline;padding:0;border:0;appearance:none;background:none;text-align:start;display:flex;align-items:center;justify-content:center;block-size:1.5rem;inline-size:1.5rem;inset-inline-end:0.75rem;outline:none;transition:transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9)}:host .control:hover{background-color:var(--field-hover-02, #E9E9E9)}:host .control:active{background-color:var(--layer-selected-02, #E3E3E3)}:host .options{inset-block-start:100%;margin-block-start:1px;display:block;max-block-size:13.75rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.3);position:absolute;z-index:10;inline-size:100%;inset-inline:0;overflow-y:auto;transition:max-height 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);border-radius:3px;background-color:var(--field-02, #FFF);scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}:host .options ::slotted(.xv-dropdown-item){display:block;max-block-size:13.75rem;inset-inline:0;box-sizing:border-box;padding:var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + 16px) var(--dropdown-padding-y) var(--dropdown-padding-x);position:relative;cursor:pointer;overflow:hidden;color:var(--text-secondary, #515151);text-overflow:ellipsis;white-space:nowrap;font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:18px;letter-spacing:0.16px;transition:0.2s ease-in-out background-color;user-select:none}:host .options ::slotted(.xv-dropdown-item):after{content:\"\";position:absolute;bottom:0;height:1px;left:10px;width:calc(100% - 20px);background-color:var(--border-subtle-01)}:host .options ::slotted(.xv-dropdown-item:hover){background-color:var(--layer-hover-02, #F7F7F7)}:host .options ::slotted(.xv-dropdown-item:active){background-color:var(--layer-selected-hover-02, #DADADA)}:host .options ::slotted(.xv-dropdown-item[selected]){background-color:var(--layer-selected-02, #E3E3E3)}:host .options ::slotted(.xv-dropdown-item[selected]:hover){background-color:var(--layer-selected-hover-02, #DADADA)}:host .options ::slotted(.xv-dropdown-item[disabled]){background-color:transparent;opacity:0.4;cursor:not-allowed}:host .helper{color:var(--text-helper, #646464);font-family:var(--ff-heading, \"IBM Plex Sans\");font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;margin:0;padding:0}:host([open]) .control_arrow{transform:rotate(180deg)}:host([disabled]){opacity:0.4;cursor:not-allowed}:host([disabled]) .control{cursor:inherit}:host([disabled]) .control:hover,:host([disabled]) .control:active,:host([disabled]) .control:focus-within{background-color:transparent}:host([error]) .control{box-shadow:none;outline:2px solid var(--support-support-error, #F1290E)}:host([error]) .helper{color:var(--text-error, #D62512)}:host([size=xs]){--dropdown-padding-y:4px}:host([size=sm]){--dropdown-padding-y:7px}:host([size=md]){--dropdown-padding-y:11px}:host([size=lg]){--dropdown-padding-y:15px}:host([size=xl]){--dropdown-padding-y:16px}";
+const xvDropdownCss = ":host{--dropdown-padding-x:16px;--dropdown-padding-y:11px;--dropdown-max-width:300px;display:block;position:relative;text-align:left;max-width:min(var(--dropdown-max-width), 100%)}:host .label{color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:12px;font-style:normal;font-weight:700;line-height:16px;letter-spacing:0.32px}:host .label ::slotted([slot=label]){color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:12px;font-style:normal;font-weight:700;line-height:16px;letter-spacing:0.32px}:host .control{background-blend-mode:multiply;border-radius:3px;box-shadow:0 0 0 1px #8B8B8B inset;transition:0.2s ease-in-out background-color;cursor:pointer;margin:0;box-sizing:border-box;font-family:inherit;font-size:100%;padding:0;border:0;appearance:none;background-color:var(--field-02, #FFF);text-align:start;inline-size:100%;position:relative;display:inline-flex;overflow:hidden;align-items:center;block-size:calc(100% + 1px);outline:none;padding-block:var(--dropdown-padding-y);padding-inline:var(--dropdown-padding-x);text-overflow:ellipsis;vertical-align:top;white-space:nowrap}:host .control_value,:host .control_placeholder{flex:1;margin:0;overflow:hidden;color:var(--text-primary, #333);user-select:none;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fz-body, Tahoma);font-size:14px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:0.16px;padding-inline:0 1rem}:host .control_placeholder{color:var(--text-placeholder, #ACACAC)}:host .control_icon{width:18px;height:18px}:host .control_icon.error{color:var(--support-error, #F1290E)}:host .control_icon.warning{color:var(--support-warning, #FF7F04)}:host .control_arrow{box-sizing:border-box;margin:0;font-size:100%;vertical-align:baseline;padding:0;border:0;appearance:none;background:none;text-align:start;display:flex;align-items:center;justify-content:center;block-size:1.5rem;inline-size:1.5rem;inset-inline-end:0.75rem;outline:none;transition:transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9)}:host .control:hover{background-color:var(--field-hover-02, #E9E9E9)}:host .control:active{background-color:var(--layer-selected-02, #E3E3E3)}:host .options{inset-block-start:100%;margin-block-start:1px;display:block;max-block-size:13.75rem;box-shadow:0 2px 6px rgba(0, 0, 0, 0.3);position:absolute;z-index:10;inline-size:100%;inset-inline:0;overflow-y:auto;transition:max-height 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);border-radius:3px;background-color:var(--field-02, #FFF);scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}:host .options ::slotted(.xv-dropdown-item){display:block;max-block-size:13.75rem;inset-inline:0;box-sizing:border-box;padding:var(--dropdown-padding-y) calc(var(--dropdown-padding-x) + 16px) var(--dropdown-padding-y) var(--dropdown-padding-x);position:relative;cursor:pointer;overflow:hidden;color:var(--text-secondary, #515151);text-overflow:ellipsis;white-space:nowrap;font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:18px;letter-spacing:0.16px;transition:0.2s ease-in-out background-color;user-select:none}:host .options ::slotted(.xv-dropdown-item):after{content:\"\";position:absolute;bottom:0;height:1px;left:10px;width:calc(100% - 20px);background-color:var(--border-subtle-01)}:host .options ::slotted(.xv-dropdown-item:hover){background-color:var(--layer-hover-02, #F7F7F7)}:host .options ::slotted(.xv-dropdown-item:active){background-color:var(--layer-selected-hover-02, #DADADA)}:host .options ::slotted(.xv-dropdown-item[selected]){background-color:var(--layer-selected-02, #E3E3E3)}:host .options ::slotted(.xv-dropdown-item[selected]:hover){background-color:var(--layer-selected-hover-02, #DADADA)}:host .options ::slotted(.xv-dropdown-item[disabled]){background-color:transparent;opacity:0.4;cursor:not-allowed}:host .helper{color:var(--text-helper, #646464);font-family:var(--ff-heading, \"IBM Plex Sans\");font-size:12px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;margin:0;padding:0}:host([open]) .control_arrow{transform:rotate(180deg)}:host([disabled]){opacity:0.4;cursor:not-allowed}:host([disabled]) .control{cursor:inherit}:host([disabled]) .control:hover,:host([disabled]) .control:active,:host([disabled]) .control:focus-within{background-color:transparent}:host([error]) .control{box-shadow:none;outline:2px solid var(--support-support-error, #F1290E)}:host([error]) .helper{color:var(--text-error, #D62512)}:host([size=xs]){--dropdown-padding-y:4px}:host([size=sm]){--dropdown-padding-y:7px}:host([size=md]){--dropdown-padding-y:11px}:host([size=lg]){--dropdown-padding-y:15px}:host([size=xl]){--dropdown-padding-y:16px}";
 const XvDropdownV2Style0 = xvDropdownCss;
 
 const XvDropdown = class {
@@ -242,7 +242,7 @@ const XvDropdown = class {
             return values;
         };
         this.handleOpen = () => {
-            if (this.disabled || this.open)
+            if (this.disabled || this.open || this.loading)
                 return;
             this.open = true;
         };
@@ -271,7 +271,6 @@ const XvDropdown = class {
                         selected: `${this.defaultValue}` === option.getAttribute('value'),
                     };
                     if (dropdownItemData.selected) {
-                        console.log('dropdownItemData', dropdownItemData);
                         setAttr(option, 'selected', dropdownItemData.selected);
                         this.selectedMap.set(dropdownItemData.value, dropdownItemData);
                     }
@@ -321,7 +320,7 @@ const XvDropdown = class {
         this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));
     }
     render() {
-        return (h(Host, { key: '7c3f08a31359efeba9c35dabba6b9d1cfa66086d', size: this.size, class: "xv-dropdown", role: "combobox", tabindex: this.disabled ? -1 : false }, h("label", { key: '530293b5a2bd148576f41cb343d5ccaefb51cdd3', class: "label" }, h("slot", { key: 'fd66aff04936aedd63bcecf2decec0d4176f6174', name: "label" }, this.label)), h("div", { key: '72c4bd316a9104b0610d06cecdbc57de3b98df88', class: "xv-dropdown-control control", onClick: this.handleOpen }, this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this.error && (h("svg", { key: '26ebc2800b21e02d783e928abb7fb4ef0280cee4', class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { key: 'bfce50f7bd4972652941003a42e3205f8d4a014f', fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" }))), (!this.error && !!this.warning) && (h("svg", { key: '4fe8eccfb3322d1595a327face9ebb762dfa4c4f', class: "control_icon warning", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { key: 'fd0df7d4d2e439ac314fa227dc315c8edf6aff3d', fill: "currentColor", d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" }))), h("svg", { key: 'bb39e6b12ca1dbd20b3f299c3602045c26128c14', class: "control_arrow", focusable: "false", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { key: '37918f651612b529d8120cc230e09e768a0cda11', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && h("div", { key: '70b5add96ff43f0eff9074822ad767b5b78e0e92', class: "options" }, h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (h("p", { key: 'c5b425f7406751318f53f549584cff6892f8a173', class: "helper" }, this.error || this.warning || this.helper))));
+        return (h(Host, { key: 'c079d730375bac47e2990c414f78dbe5f0c819de', class: "xv-dropdown", role: "combobox", size: this.size, open: this.open, error: this.error, disabled: this.disabled, tabindex: this.disabled ? -1 : false }, h("label", { key: '89822575a8ba145cfbc54bd40ae50021069243ea', class: "label" }, h("slot", { key: 'd09fa78e0df2f911160b059a1254dd09b1c2edcf', name: "label" }, this.label)), h("div", { key: 'a4cb541ee3ccca7148b11ff2a5455d9efb75831e', class: "xv-dropdown-control control", onClick: this.handleOpen }, this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this.renderIcon(), h("svg", { key: '698d39331ed3e1e09ae48db98244d0f8e2cecc47', class: "control_arrow", focusable: "false", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16" }, h("path", { key: '4e78ab3ba78ff63b21f2766887440b5d638fc5e6', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && h("div", { key: 'd3493338d8e5acd48a0c825843da13ba631e7050', class: "options" }, h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (h("p", { key: 'b337cece3d8c4aeb4aedc10b0ef6669c19e27e30', class: "helper" }, this.error || this.warning || this.helper))));
     }
     componentWillLoad() {
         this.setDefaultValues();
@@ -332,6 +331,18 @@ const XvDropdown = class {
     disconnectedCallback() {
         this.removeListeners();
     }
+    renderIcon() {
+        if (this.loading) {
+            return h("xv-loader-v2", { class: "control_icon error", size: SIZE_VAR.XS });
+        }
+        if (this.error) {
+            return (h("svg", { class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" })));
+        }
+        if (!this.error && !!this.warning) {
+            return (h("svg", { class: "control_icon warning", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { fill: "currentColor", d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" })));
+        }
+        return undefined;
+    }
     get el() { return getElement(this); }
     static get watchers() { return {
         "open": ["openChangeHandle"]
@@ -360,7 +371,7 @@ const XvDropdownItem = class {
         });
     }
     render() {
-        return (h(Host, { key: '5f53db0c93d6268bdbcf67cac0fdb4f0e81348d8', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, h("slot", { key: 'b19170a4eae7ee4580d9b486fc271766c304148f' }), this.selected && h("span", { key: 'c3abf41a488cf964fbc854d80ee59b7a111b3147', class: "checkmark" })));
+        return (h(Host, { key: '50c0bf3d6da015580b84ba455cc5f5b02a836fbb', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, h("slot", { key: '3833346442861a6669a6fea827f7da3ef872861c' }), this.selected && h("span", { key: '139e1a037467cf98f363f172454a8a9122667955', class: "checkmark" })));
     }
     componentWillLoad() {
         if (!this.value)
@@ -389,7 +400,7 @@ const Xvfooter = class {
         }
     }
     render() {
-        return (h("footer", { key: '1d62a179df61f0f8ae16112d1877d47078c0f694' }, h("div", { key: 'ebe950dd52aa300f2f6000e3e240384e44c351f0', innerHTML: this.htmlContent })));
+        return (h("footer", { key: '0db6bc4ceab1da36181d8a106677ee2b4c871a5d' }, h("div", { key: '4ed868bc230e7dd45ebca9255827c1cfeb40e1f7', innerHTML: this.htmlContent })));
     }
     get el() { return getElement(this); }
 };
@@ -423,13 +434,13 @@ const XvHeader = class {
         }
     }
     render() {
-        return (h("div", { key: '17b758439ac9d36d231ea77c5b0a749755919671', id: "nav-container", class: "xv-header" }, h("nav", { key: '0c6f3ec230830c41a58f50f86ecafbe520d6757f', class: "navbar navbar-default navbar-fixed-top backend-force-relative" }, h("div", { key: 'bebdd889d198c62cf79a8ca02e789d8a0a3ed7f4', class: "container" }, h("div", { key: 'd4617727cffe7b4aada604394a056a27b3df8d89', class: "row" }, h("div", { key: 'e3c7ca51335b89a9032cdde950657d876d157bba', class: "col-sm-3 col-xs-3 col-xxs-4 no-padding-right" }, h("div", { key: 'c70a5de73859a1a19966b3b643a3b6ac1cab49fe', class: "navbar-header" }, h("button", { key: '054943c922178450585e1a801825cf6737e3448d', class: "btn btn-default navbar-toggle pull-left navbar-btn", "data-toggle": "collapse", "data-target": "#main-menu" }, h("i", { key: '50c000376822e1b39582c32ca36720b7e88011b3', class: "fa fa-bars fa-lg", "aria-hidden": "true" })), h("div", { key: '50763da33dea51d5e42fcca7f684c65194c1ac1c', class: "visible-xs-inline" }, h("a", { key: 'ace4253640362dc8bc086243d5d029be0aed717a', href: "https://www.crossvertise.com/", class: "navbar-brand" }, h("img", { key: '413fd9b3d9090abcc7697eb417b3f604652baafe', src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg", alt: "Crossvertise" }))), h("div", { key: '38abf1c9d06ce56ca3df77dcbc9f127724c4412b', class: "hidden-xs" }, h("a", { key: '2f413d15878c4fda13bb0742e618c194765d3410', href: "https://www.crossvertise.com/", class: "navbar-brand" }, h("img", { key: '169e7a4d95ecfdda6125c8968c9d5785bfb67c62', loading: "lazy", src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg", alt: "Crossvertise" }))))), h("div", { key: '54ffe049cfd4def82e54d32b9a995388a7b0a3ef', class: "col-sm-9 col-xs-9 col-xxs-8 no-padding-left" }, h("ul", { key: 'ebfa9382c68f49a58603623a8ad6dea3b6778480', class: "nav nav-pills nav-meta pull-right" }, h("li", { key: '04cdcecf7518face6a3ab8318b1bf8386df3509a' }, h("a", { key: 'eb01fb3eb7f48df8aaa1868b102884244dbf0b9e', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, h("i", { key: '6e6468006b1f8a3d434a73aef4bc4774846100b1', class: "fa fa-user" }), h("i", { key: '496a5bb8fd4ec003f83c7d93cfecbff821d9570f', class: "fa fa-exchange-alt" }))), h("li", { key: 'ee8114f5da71c02792631efa5db06ff1853e1d3d' }, h("a", { key: 'c564eb6479e59117138f598e0c488473880c4169', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, "Kontakt"), h("a", { key: '1ab3ee273d7f950d16fbbd082830cee0ad31338f', href: "https://www.crossvertise.com/contact", class: "btn btn-link navbar-btn hidden-xs", style: { display: 'none' } }, "Kontakt"), h("a", { key: 'cf6b91b54d242a5a450396feddb851b10c21dfe2', class: "btn btn-default btn-link navbar-btn visible-xs hidden-xxs", href: "#" }, h("i", { key: '5c57f304259725b56edffbfe89b4116bdfa03d01', class: "fa fa-phone" }))), h("li", { key: 'bff9df0a062ba73cdb7cfb62e52ec2c5cf7eb4b2', class: "dropdown", id: "my-xv-menu" }, h("a", { key: 'be582a5ff458559d311481c8e615e2c999a98b2c', href: "#", class: "dropdown-toggle btn btn-default navbar-btn btn-link", "data-toggle": "dropdown" }, h("i", { key: '61e2d3853664f239992177ebf1b7d24a8c4b3891', class: "fa fa-user fa-lg text-success", "aria-hidden": "true" }), "\u00A0", h("span", { key: '93f81a97f7b649ae34f61366a6d265a7c381b479', class: "hidden-xs" }, "Mein Bereich"), h("span", { key: 'c719beed11b9ca505b3935d1b080056972975bf5', class: "caret" })), h("ul", { key: 'f23370ef5ccf3c792e9a8f148ce18013db8ce25b', class: "dropdown-menu-left dropdown-menu navbar-myxv" }, h("li", { key: 'd5fa4543bc4cf88384888505e77d1ea692798abb' }, h("a", { key: 'e0093d0d32e091dd6ea8a65e7b5c3802b1d9066c', href: "#" }, h("i", { key: '294da165d6f1964044b8a86fba972c75f2307a40', class: "fa fa-tachometer-alt fa-fw" }), "\u00A0Cockpitfunktionen\u00A0", h("i", { key: '48d212dfc8ba3301fc5876c229534c37efec6095', class: "fa fa-caret-down" }))), h("li", { key: '76e744f5f005627702849299b30b661cc3186e75' }, h("a", { key: 'fd1946c49709fbe61a4277b6a0c7d1ff2d342709', href: "#" }, h("i", { key: '5b1a8006f15ddea5692d41551623a96c1c344426', class: "fa fa-cubes" }), "\u00A0Entit\u00E4ten\u00A0", h("i", { key: '3a52fdf953b0792cb3d287ac41f493659093af3b', class: "fa fa-caret-down" }))), h("li", { key: '3bdaecf8f4d795d44d075bdc9ae626aad64f1464', role: "separator", class: "divider" }), h("li", { key: 'd0fbe94290ba97a7547816476888a2463bc49f55' }, h("a", { key: 'e20b9db82ad5c8afa3749a4d222505e0aa07ae90', href: "#" }, h("i", { key: '5623596a0eae6399de421cf3536bc0e05ebff700', class: "fa fa-user" }), "\u00A0Mein Crossvertise\u00A0", h("span", { key: 'eda253c704f6b9c6f0d793c93fa6ff845be66a6a', class: "badge" }, "0"), h("i", { key: '9ff7c367b502aabedef6c131e627879b67c8a295', class: "fa fa-caret-down" }))), h("li", { key: '7ff050b3e0978025f18115fe33a982daf3f3ec56' }, h("a", { key: '7f6641a7354a9bff4774c71434d25e94186fb2ea', href: "https://www.crossvertise.com/de-de/mycrossvertise/account/logoff?returnUrl=https%3A%2F%2Fwww.crossvertise.com" }, h("i", { key: 'c3013e411aba74ba1a437889c0c8ee87f3fae5e0', class: "fa fa-sign-out-alt fa-fw", "aria-hidden": "true" }), "\u00A0Logout")))), h("li", { key: 'a88d592fcda782ab5d50916d8824d1992ac0bc6c', class: "visible-sm-block visible-xs-block hidden-xxs" }, h("a", { key: '8de83de25419b43154b1a12d278984acb0b1542e', class: "btn btn-default navbar-btn btn-link", "data-toggle": "collapse", "data-target": "#search-collapse" }, h("i", { key: '8bdb16e9dbd427bec443b4cc8d8f4baccf9b9190', class: "fa fa-search", "aria-hidden": "true" }))), h("li", { key: '65947d1fbd384ffdb3476fe775f860d100165311', class: "hidden-md hidden-lg" }, h("a", { key: 'b9618154b33860c709047e20a4768aab46e0f0e3', class: "btn btn-default navbar-btn btn-link", href: "https://market.crossvertise.com/de-de/mycrossvertise/account/logon?returnUrl=https%3A%2F%2Fwww.crossvertise.com%2F" }, h("i", { key: 'df10d0e0bcfc2574df51bbd772fc7ea2735fc26d', class: "fa fa-user fa-lg", "aria-hidden": "true" }), h("span", { key: 'e40d5fdc63fb8487982f80d7997ca7fbb2fd1822', class: "hidden-xs" }, "Login"))), h("li", { key: 'f0fbf675ea3df61d24d326ee83e10d8ad606d6f9', class: "hidden-xs hidden-sm" }, h("a", { key: '03f05ca6156be7d332003767a4ac2485170d4919', role: "button", class: "btn btn-default navbar-btn btn-link", "data-toggle": "modal", "data-target": "#login-modal" }, h("i", { key: 'b9279aae23e597472482b1d66233ef2df18ce4c1', class: "fa fa-user fa-lg", "aria-hidden": "true" }), h("span", { key: 'e4f8594718bbcbaf9f868c9269491df601c0c56b' }, "Login"))), h("li", { key: 'ffaa8b078a1f1da2d0bc8941be7a033e425af8b3', class: "hidden-xs" }, h("a", { key: '7de25b8e4af7110649577e9a0043ddcb0f6ec614', class: "btn btn-default navbar-btn btn-link", href: "https://market.crossvertise.com/de-de/mycrossvertise/account/register" }, h("span", { key: '36d0e4f425575a2925e51f22851c4d156f2c8a0e' }, "Registrieren"))), h("li", { key: '93f2374feb5f4285b8df4d7ecc2047055a644b6c', class: "navbar-divider hidden-xs" }), h("li", { key: '26599864dd47d74b8b4143fdf7bfac5d5a7a1991' }, h("a", { key: 'a263d5c0ef78cf4ed93ea3e788fabfb634116ee6', class: "btn btn-success navbar-btn", href: "https://market.crossvertise.com/de-de/mycrossvertise/shoppingcart/activecart" }, h("span", { key: '7f4c6d9d861b556dbfbca18ce5b2c5b34033c9dd', class: "xv-font-icon-warenkorb fa-lg fa-fw", "aria-hidden": "true" }), h("span", { key: '1b83d9a3258966f0b982436a954e852c83588ae0', class: "hidden-xs hidden-sm" }, "\u00A0Warenkorb\u00A0"), h("span", { key: 'a2e423edf3534e7367bdd8d41004a944c21e3eea', class: "badge badge-success" }, "0"))))))), h("div", { key: 'cfdd0d5a23384025d8ce1eab6e09cc88f21ef4aa', class: "collapse hidden-md hidden-lg", id: "search-collapse" }, h("div", { key: 'c6cd2346373fe563fa52b4045ac90f558c0abeaa', class: "container" }, h("form", { key: 'b1b3f3fc6c7eaccc6da72624786c747976aba21b', action: "https://market.crossvertise.com/de-de/media/search", class: "navbar-form", method: "get", role: "search" }, h("div", { key: 'ed1f817d2027760a32ce1612638eb10a99ef9338', class: "input-group" }, h("input", { key: '6953caece69247465868c0ac9b2cf72a08c6489f', class: "form-control", name: "Q", placeholder: "Suche", type: "text", autocomplete: "off" }), h("span", { key: 'fbff70f2115109b98fef9410fefcefe73c25460d', class: "input-group-btn force-full-width" }, h("button", { key: 'c7d246bda8ea174e0fd6a7888ac39b360090ab44', class: "btn btn-default search-addon", type: "submit" }, h("i", { key: 'b4256d72a2a05c08669619125bef1156d036511e', class: "fa fa-search", "aria-hidden": "true" })))))))), h("div", { key: '1aaa27ad68668cf906499a7aab97eeeb12c37834', innerHTML: this.htmlContent })));
+        return (h("div", { key: 'fb841d4abad14c4387fe46688c4f3af2307b886a', id: "nav-container", class: "xv-header" }, h("nav", { key: '58e74fe05d964a92caa4557b80507a38c4a98179', class: "navbar navbar-default navbar-fixed-top backend-force-relative" }, h("div", { key: '97ea3528c6e075c1d387ea24594f91104d7b8867', class: "container" }, h("div", { key: '8bdd52c37bcec11ea6b30d0174736f59788b53eb', class: "row" }, h("div", { key: 'e449f3feac1044f052ec6e2617c0d935064656c7', class: "col-sm-3 col-xs-3 col-xxs-4 no-padding-right" }, h("div", { key: '55a1d17cba703a6e40eb338c7543dc6976bf38a9', class: "navbar-header" }, h("button", { key: '4db1d1c007cce64e85d9c4bed564d2871ababcfc', class: "btn btn-default navbar-toggle pull-left navbar-btn", "data-toggle": "collapse", "data-target": "#main-menu" }, h("i", { key: '65e325b62f0438edd702620c4e17a53219967a0a', class: "fa fa-bars fa-lg", "aria-hidden": "true" })), h("div", { key: '441bfb68db2009ee3237b77d81fb95dc81aa481f', class: "visible-xs-inline" }, h("a", { key: 'addb8f9d2564bb51622d446709200f1f11ca5676', href: "https://www.crossvertise.com/", class: "navbar-brand" }, h("img", { key: 'e3397a1cce10f32d84b329d7e0f86a668b59f0ce', src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg", alt: "Crossvertise" }))), h("div", { key: '90f493fdfb861b43a6e15fd98f4b20b5c27393f1', class: "hidden-xs" }, h("a", { key: '91d6cc6a27a1a1345453b6e61bffc75dd8af8dac', href: "https://www.crossvertise.com/", class: "navbar-brand" }, h("img", { key: '3e865f04a2b4fd3518d9afdb6e14c1ff40fe316f', loading: "lazy", src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg", alt: "Crossvertise" }))))), h("div", { key: 'f93d3819bb445cdb9e5af3aef12b015a343d6310', class: "col-sm-9 col-xs-9 col-xxs-8 no-padding-left" }, h("ul", { key: 'f45ff2bde04e59dcf6b64843540aa3fd4e40f689', class: "nav nav-pills nav-meta pull-right" }, h("li", { key: 'ed84b8372b0d2bb667a8cafadb4ab563da5abfe0' }, h("a", { key: '13a62dee054906b573e6680101a3ca0b21b831a0', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, h("i", { key: '0baabbb18c07000acd90290323c9634be9c4fc7c', class: "fa fa-user" }), h("i", { key: 'd704cea8700026507e77c06ef9b9ed7debabe817', class: "fa fa-exchange-alt" }))), h("li", { key: '71071c96004f83a4aaf0c882139da925e42866a8' }, h("a", { key: 'e408f1d8d07134e922871ad2cf528f1593d0d1e0', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, "Kontakt"), h("a", { key: 'c646eb76e06b7dbdc38b2c2781271413d2fd15ea', href: "https://www.crossvertise.com/contact", class: "btn btn-link navbar-btn hidden-xs", style: { display: 'none' } }, "Kontakt"), h("a", { key: '0af75819d57f535803e52289ff96fac569c50300', class: "btn btn-default btn-link navbar-btn visible-xs hidden-xxs", href: "#" }, h("i", { key: '5bbb8f180b8e305b03b6fdfec3390582b0150d5d', class: "fa fa-phone" }))), h("li", { key: 'eccf3a963e94fbfd5d0bac632583bf1bb8ae75af', class: "dropdown", id: "my-xv-menu" }, h("a", { key: 'c08b078cf111d3b68521eae23b80ca6f179462ca', href: "#", class: "dropdown-toggle btn btn-default navbar-btn btn-link", "data-toggle": "dropdown" }, h("i", { key: '64624fbad4dfcf0249e8cfeb40bf6724d1546b06', class: "fa fa-user fa-lg text-success", "aria-hidden": "true" }), "\u00A0", h("span", { key: '7cb9c97ba9717c43d5ca6f590434dd925e523726', class: "hidden-xs" }, "Mein Bereich"), h("span", { key: '96609dcd1f21c1de3f6b5921bf8d0d21414e16ba', class: "caret" })), h("ul", { key: '89d95f1a1620aba9e971ea4f2b53d5e82634dcb7', class: "dropdown-menu-left dropdown-menu navbar-myxv" }, h("li", { key: 'f995fffeb04c8e71855e333d1bcb88fa96cf138b' }, h("a", { key: '4f4109b08bd7fb0e0beff296a5566f447febb72e', href: "#" }, h("i", { key: '4676a42f1d33aca1fa82c39c66ad852d4a46a90b', class: "fa fa-tachometer-alt fa-fw" }), "\u00A0Cockpitfunktionen\u00A0", h("i", { key: '8f786200fa2781591c930bf2f8c5bcaab9c26ee6', class: "fa fa-caret-down" }))), h("li", { key: 'cbbe6aea9589e291677d1d4a9545b6338c515f59' }, h("a", { key: '90d02c4e0ffd7c880d5a054bd93efad517c17cf1', href: "#" }, h("i", { key: 'a658d4354d00bc1b33bdbabdd67c2822c0bbadd7', class: "fa fa-cubes" }), "\u00A0Entit\u00E4ten\u00A0", h("i", { key: 'a2a4d953a2f7ab3becd94609a063bd41444f1d5e', class: "fa fa-caret-down" }))), h("li", { key: '45f2e6536719387d007c300569bd888ab73a368e', role: "separator", class: "divider" }), h("li", { key: 'c1b3c21287ad9c948994a7e66b5598f2d7b92cee' }, h("a", { key: '4577bb088ee70c827a6c73670ab333c1e7233ebb', href: "#" }, h("i", { key: '59190e441f77825b6faa7f1a6a126b55368424bd', class: "fa fa-user" }), "\u00A0Mein Crossvertise\u00A0", h("span", { key: '56c84bb9710788f708f66a29b8ed2560eddcdc9c', class: "badge" }, "0"), h("i", { key: '3a94b49a78254ff80c748031879499e0b1c3d6cd', class: "fa fa-caret-down" }))), h("li", { key: '56c19ee479dd30ef4b2a3ced111c5a2488b011be' }, h("a", { key: 'bf6795b1a369fd48144a5c3f2d6dde87329005d3', href: "https://www.crossvertise.com/de-de/mycrossvertise/account/logoff?returnUrl=https%3A%2F%2Fwww.crossvertise.com" }, h("i", { key: 'd74387b0a971ec31ef52f7275a4059135f7a2f2e', class: "fa fa-sign-out-alt fa-fw", "aria-hidden": "true" }), "\u00A0Logout")))), h("li", { key: '4cd39d21f39cf38b653fe354fcac95541ed3b5d4', class: "visible-sm-block visible-xs-block hidden-xxs" }, h("a", { key: 'ff7d151d063d17b4937c8adee7240928abf11ca1', class: "btn btn-default navbar-btn btn-link", "data-toggle": "collapse", "data-target": "#search-collapse" }, h("i", { key: 'e921298a0e809efa116a19445211146af7ff478c', class: "fa fa-search", "aria-hidden": "true" }))), h("li", { key: 'daa6740a57a697e93099a9acf0f290103e38885e', class: "hidden-md hidden-lg" }, h("a", { key: '6b1d587f4fde5f26adcec987a13d837db9b3d4b9', class: "btn btn-default navbar-btn btn-link", href: "https://market.crossvertise.com/de-de/mycrossvertise/account/logon?returnUrl=https%3A%2F%2Fwww.crossvertise.com%2F" }, h("i", { key: '29eaea9f9d7c099b0666aa80c0baa47f0194eca8', class: "fa fa-user fa-lg", "aria-hidden": "true" }), h("span", { key: '2e32a44fff79ce051c6478911dff06ab014fcb03', class: "hidden-xs" }, "Login"))), h("li", { key: '70aad34ed65c79187309b6d43c2d60a4c50c10f7', class: "hidden-xs hidden-sm" }, h("a", { key: '0700efbabecfcc3c23703d5ef51d455cc37a7c76', role: "button", class: "btn btn-default navbar-btn btn-link", "data-toggle": "modal", "data-target": "#login-modal" }, h("i", { key: 'dacc64c5ec7a805a82c04786942045d34f9f5505', class: "fa fa-user fa-lg", "aria-hidden": "true" }), h("span", { key: '6862516762bb49b3268ab5439616e5d84eeee33a' }, "Login"))), h("li", { key: '1465c89bc216b466eb9b502503c4e071522b949e', class: "hidden-xs" }, h("a", { key: '4fb628fc7e3713032c8cc6291bea0364549ec486', class: "btn btn-default navbar-btn btn-link", href: "https://market.crossvertise.com/de-de/mycrossvertise/account/register" }, h("span", { key: 'bd27d18587f03bb6579a68ec0f67e401e9a2f4aa' }, "Registrieren"))), h("li", { key: 'b58c8bdfcba9fbcc4fc9abcc7a532552a6bf4d59', class: "navbar-divider hidden-xs" }), h("li", { key: '9c184e2e5ce45a573f227427b21511efb77a7367' }, h("a", { key: '4e1e2905fa27feef5ee4d7e8d08cf8f365460aa9', class: "btn btn-success navbar-btn", href: "https://market.crossvertise.com/de-de/mycrossvertise/shoppingcart/activecart" }, h("span", { key: 'bc461fb3883487c5a9bab6171e0395d896871dae', class: "xv-font-icon-warenkorb fa-lg fa-fw", "aria-hidden": "true" }), h("span", { key: '798befbada9c958f75aa71534223bfc3053e2d8a', class: "hidden-xs hidden-sm" }, "\u00A0Warenkorb\u00A0"), h("span", { key: '466810cee52d04c975304e2644a19b0fed8acb52', class: "badge badge-success" }, "0"))))))), h("div", { key: 'df2e0fdf3ee050571555b538a13b81255a5ed6d6', class: "collapse hidden-md hidden-lg", id: "search-collapse" }, h("div", { key: 'aa8e481da43b4d19fef2ebe5f18c3f698188109a', class: "container" }, h("form", { key: '1f74f4c3728f1dbc53ee160316cfc503a05d1809', action: "https://market.crossvertise.com/de-de/media/search", class: "navbar-form", method: "get", role: "search" }, h("div", { key: '3b0a8b8e0422baeabf49bc2acbd416ce3d0d0f4d', class: "input-group" }, h("input", { key: '81b1da2dc533688f68238fde64d2b0137143bfa0', class: "form-control", name: "Q", placeholder: "Suche", type: "text", autocomplete: "off" }), h("span", { key: '1bd05fa901a518fbfe48044a73d6b134699c1aeb', class: "input-group-btn force-full-width" }, h("button", { key: '825112ca880ad4ca36e449def155c87f1b134168', class: "btn btn-default search-addon", type: "submit" }, h("i", { key: '2812b8d6e635a3c8d971982340e70c1aa1d72072', class: "fa fa-search", "aria-hidden": "true" })))))))), h("div", { key: '33abf8e8dbe83d92a154f9487ba37826e0c3befe', innerHTML: this.htmlContent })));
     }
     get el() { return getElement(this); }
 };
 XvHeader.style = XvHeaderStyle0;
 
-const xvLinkCss = ":host{font-family:var(--ff-body, inherit)}:host(.xv-link_inline){display:inline-block}:host(.xv-link_inline) .xv-link{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}:host(.xv-link_standalone){display:block}:host(.xv-link_standalone) .xv-link{display:block;text-decoration-line:none}.xv-link{display:inline-flex;gap:8px;align-items:center;color:var(--link-primary);font-family:var(--ff-body);font-style:normal;font-weight:400;transition:color 200ms ease-in-out}.xv-link:active{color:var(--text-primary)}.xv-link:visited{color:var(--link-visted)}.xv-link:hover{color:var(--link-primary-hover);cursor:pointer}.xv-link:disabled,.xv-link_disabled,.xv-link::part(disabled){color:var(--text-disabled);pointer-events:none;cursor:initial}.xv-link.sm{font-size:var(--fz-sm);line-height:137.5%}.xv-link.md{font-size:var(--fz-md);line-height:128.571%}.xv-link.lg{font-size:var(--fz-lg);line-height:133.333%}";
+const xvLinkCss = ":host{font-family:var(--ff-body, inherit)}:host(.xv-link_inline){display:inline-block}:host(.xv-link_inline) .xv-link{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}:host(.xv-link_standalone){display:block}:host(.xv-link_standalone) .xv-link{display:block;text-decoration-line:none}:host(.xv-link_ghost) .xv-link{color:inherit;text-decoration:none}.xv-link{display:inline-flex;gap:8px;align-items:center;color:var(--link-primary);font-family:var(--ff-body);font-style:normal;font-weight:400;transition:color 200ms ease-in-out}.xv-link:active{color:var(--text-primary)}.xv-link:visited{color:var(--link-visted)}.xv-link:hover{color:var(--link-primary-hover);cursor:pointer}.xv-link:disabled,.xv-link_disabled,.xv-link::part(disabled){color:var(--text-disabled);pointer-events:none;cursor:initial}.xv-link.sm{font-size:var(--fz-sm);line-height:137.5%}.xv-link.md{font-size:var(--fz-md);line-height:128.571%}.xv-link.lg{font-size:var(--fz-lg);line-height:133.333%}";
 const XvLinkV2Style0 = xvLinkCss;
 
 const XvLink = class {
@@ -446,7 +457,7 @@ const XvLink = class {
         e.stopPropagation();
     }
     render() {
-        return (h(Host, { key: '9be5ba37fee1e5ec5679dfc2a633aa79585d2cc7', class: `xv-link_${this.variant}` }, h("a", { key: '3ef8125ad7602cc1a30c29bab90cafafe5e07573', href: this.href, onClick: this.preventLinkHandler.bind(this), class: `xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`, target: this.target }, h("slot", { key: 'e15d10152f80d8adab43b4a8679070e57e5ec876', name: "icon-left" }), h("slot", { key: 'b8f7e7ed9c0ee2cc650c7363dde0d33b85b5566d' }), h("slot", { key: '6e8d71e3e484edee74688bf5acaed759798761a8', name: "icon-right" }))));
+        return (h(Host, { key: 'de2c35e526a84d4f0ea3d309e9b338951cebf205', class: `xv-link_${this.variant}` }, h("a", { key: 'fb838688638462ab7e160377420b785584581b46', href: this.href, onClick: this.preventLinkHandler.bind(this), class: `xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`, target: this.target }, h("slot", { key: 'f921c3064a1372e1855fa41cd65f5dda53a98913', name: "icon-left" }), h("slot", { key: '6250191343e6676a7db35ff087e31ddc4f2a6f66' }), h("slot", { key: 'fc091c32addf4a4f1d2616b24f121325921f5954', name: "icon-right" }))));
     }
 };
 XvLink.style = XvLinkV2Style0;
@@ -478,13 +489,13 @@ const XvLoader = class {
 };
 XvLoader.style = XvLoaderV2Style0;
 
-const xvModalCss = ":host{display:inline-block}:host .backdrop{position:fixed;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;pointer-events:none;transition:opacity 0.3s ease;z-index:1000;display:flex;align-items:center;justify-content:center}:host .modal{display:flex;flex-direction:column;max-height:60vh;max-width:960px;position:relative;animation:fadeIn 0.25s ease;padding:var(--gap-md, 16px);background:var(--layer-02, #FFF);box-shadow:0 6px 10px 4px rgba(39, 52, 53, 0.15), 0 2px 3px 0 rgba(39, 52, 53, 0.3)}:host .modal_header{position:relative}:host .modal_header__title{color:var(--text-text-primary, #333);font-family:var(--ff-heading, \"Gill Sans\");font-size:var(--fz-xl, 21px);line-height:133.333%;margin:0 20px 0 0}:host .modal_content{margin-top:var(--gap-md, 16px);margin-bottom:var(--gap-md, 16px);overflow:auto}:host .modal_footer{position:relative}:host .modal_close{z-index:1;cursor:pointer;border:none;outline:none;font-size:28px;background-color:transparent;position:absolute;right:10px;top:10px;transition:350ms ease-in-out opacity}:host .modal_close:hover{opacity:0.6}:host .modal_close:active{opacity:0.3}:host([open]) .backdrop{opacity:1;pointer-events:all}:host([size=xs]) .modal{max-width:min(300px, 90vw)}:host([size=sm]) .modal{max-width:min(480px, 90vw)}:host([size=md]) .modal{max-width:min(600px, 90vw)}:host([size=lg]) .modal{max-width:min(960px, 90vw)}:host([size=xl]) .modal{max-width:min(1200px, 80vw)}@keyframes fadeIn{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}";
+const xvModalCss = ":host{display:inline-flex}:host .backdrop{position:fixed;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;pointer-events:none;transition:opacity 0.3s ease;z-index:1000;display:flex;align-items:center;justify-content:center}:host .modal{display:flex;flex-direction:column;max-height:60vh;max-width:960px;position:relative;animation:fadeIn 0.25s ease;padding-block:var(--gap-md, 16px);background:var(--layer-02, #FFF);box-shadow:0 6px 10px 4px rgba(39, 52, 53, 0.15), 0 2px 3px 0 rgba(39, 52, 53, 0.3)}:host .modal_header{position:relative;padding-inline:var(--gap-md, 16px)}:host .modal_header__title{color:var(--text-text-primary, #333);font-family:var(--ff-heading, \"Gill Sans\");font-size:var(--fz-xl, 21px);line-height:133.333%;margin:0 20px 0 0}:host .modal_content{padding:var(--gap-md, 16px);overflow:visible}:host .modal_content.overflow{overflow:auto}:host .modal_footer{position:relative;padding-inline:var(--gap-md, 16px)}:host .modal_close{z-index:1;cursor:pointer;border:none;outline:none;font-size:28px;background-color:transparent;position:absolute;right:10px;top:10px;transition:350ms ease-in-out opacity}:host .modal_close:hover{opacity:0.6}:host .modal_close:active{opacity:0.3}:host([open]) .backdrop{opacity:1;pointer-events:all}:host([size=xs]) .modal{max-width:min(300px, 90vw)}:host([size=sm]) .modal{max-width:min(480px, 90vw)}:host([size=md]) .modal{max-width:min(600px, 90vw)}:host([size=lg]) .modal{max-width:min(960px, 90vw)}:host([size=xl]) .modal{max-width:min(1200px, 80vw)}@keyframes fadeIn{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}";
 const XvModalV2Style0 = xvModalCss;
 
 const XvModal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.changeOpen = createEvent(this, "changeOpen", 7);
+        this.openChange = createEvent(this, "openChange", 7);
         /**
          * Is modal opened
          */
@@ -497,6 +508,10 @@ const XvModal = class {
          * Size of modal. But max size is 90% view width
          */
         this.size = SIZE_VAR.MD;
+        /**
+         * When need scroll modal content
+         */
+        this.overflow = true;
         this.triggerEl = null;
         this.onBackdropClick = async (e) => {
             if (this.permanent)
@@ -525,19 +540,19 @@ const XvModal = class {
     async openModal() {
         var _a;
         this.open = true;
-        (_a = this.changeOpen) === null || _a === void 0 ? void 0 : _a.emit(this.open);
+        (_a = this.openChange) === null || _a === void 0 ? void 0 : _a.emit(this.open);
         return this.open;
     }
     ;
     async closeModal() {
         var _a;
         this.open = false;
-        (_a = this.changeOpen) === null || _a === void 0 ? void 0 : _a.emit(this.open);
+        (_a = this.openChange) === null || _a === void 0 ? void 0 : _a.emit(this.open);
         return this.open;
     }
     render() {
         var _a;
-        return (h(Host, { key: '6402def40d1bd383381fc2d696daaed05ef2589e', role: "dialog", size: this.size, id: this.el.id }, h("slot", { key: '1552ccbc352a3d6544681576114ba4eed1787f99', name: "trigger", onSlotchange: this.setupTrigger }), h("div", { key: '5e7e1cd0a0abdd923d563fadaa9bcc54802a8e98', class: { backdrop: true }, onClick: this.onBackdropClick }, h("div", { key: '985c3257ce78509d1a749a32f0e4d9df2ffdf728', class: "modal" }, h("button", { key: '6b2073798e6911ef8fc79d9772f7bf59395e01d3', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), h("div", { key: '0e84498948e35e92d0a35717fe50d77e32884e73', class: "modal_header" }, h("slot", { key: '31aedf3610813334c0abc4f9a25017289acc7224', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && h("h5", { key: 'a38797b67a494fffc28c6126a6f47640b522bba3', class: "modal_header__title" }, this.el.title))), h("div", { key: '919757268480698659e7f524eb63bc06f73466e6', class: "modal_content" }, h("slot", { key: '5c310e5285f3dd0fb013a4cb92f969bb697b03d1' })), h("div", { key: '0ecf04b9c83ee114decfaea71792df727c6642f5', class: "modal_footer" }, h("slot", { key: 'd72b63333e9a6287d0d2d27189bf3bf16d12e297', name: "footer" }))))));
+        return (h(Host, { key: '2366289d47548d714bbdd49948f792f351f28f08', role: "dialog", size: this.size, id: this.el.id }, h("slot", { key: '5315e7fff2a42c9cacff80f8123198b3b478afb9', name: "trigger", onSlotchange: this.setupTrigger }), h("div", { key: 'de7fd67203a1728be67f86a2ea40279d93faa17c', class: { backdrop: true }, onClick: this.onBackdropClick }, h("div", { key: '088329b5f8624893d0e6a70de8e5320b555ca917', class: "modal" }, h("button", { key: '930e3e2f153a8b29ad072d3293ceff42d4f29467', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), h("div", { key: '454958176af3ffe3a3ce05fcd4676498ba64ed7d', class: "modal_header" }, h("slot", { key: 'c36847fd99974fe853eedebaab7d35b14895fc62', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && h("h5", { key: '967825b4cf637c6fde19330fda5b88fc63aee479', class: "modal_header__title" }, this.el.title))), h("div", { key: '6ea2df2fa221a02655c9d981565132879901bbe7', class: { 'modal_content': true, overflow: this.overflow } }, h("slot", { key: '2636c2c24cfc4faf7561f2c4d5a380f23ce904e8' })), h("div", { key: 'cb4d838daf7bc1e8fb4c029318250ec2f3e7a37a', class: "modal_footer" }, h("slot", { key: '79b371cb00c2152a1131be31202f7c8061a4b61b', name: "footer" }))))));
     }
     disconnectedCallback() {
         this.removeTriggerListener();
@@ -584,14 +599,14 @@ const XvNotification = class {
         };
     }
     render() {
-        return (h(Host, { key: '9a0744259a817b6a28a5e6bf0841b28c67c38c4d', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), h("div", { key: 'e7602dc421de6d9c81893df0938a8f8a752d50ac', class: "content" }, h("div", { key: '7dee10b112988942cd31301bdac111ea335ef471', class: "content_wrapper" }, this.el.title && h("h5", { key: '020c0d0eca5349549b5100701406756cc2871ffa', class: "content_title" }, this.el.title), h("slot", { key: '8b8e6f865d10b14f38b5d622fb7cd8b23c139eb2' })), h("slot", { key: 'cad5e543aabcba222ced7e26331bbb71239451fe', name: "footer" })), this.dismissible && h("button", { key: 'd5d67c83075389832315cbec1fe3852b72552d73', class: "close", onClick: this.closeHandle })));
+        return (h(Host, { key: '910f05cb3632aee19f893969b3f2225890586cfb', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), h("div", { key: '575f30f393d7bf69f7ac4b7c14cc08742ea37a02', class: "content" }, h("div", { key: '9df87a020f9b0eeaa37b4162e930e3d73db4eba5', class: "content_wrapper" }, this.el.title && h("h5", { key: '6aceb1370abd0511d94def7830c203f8e51ad84b', class: "content_title" }, this.el.title), h("slot", { key: 'c053806cacc705dc3cfbba53c36dc761ca995e87' })), h("slot", { key: '7967d656c6541a9f21cb2a2cd87376915c21f0c3', name: "footer" })), this.dismissible && h("button", { key: '0cb3d1e44bb0f84f8a72f1ac7875364911fb4fa7', class: "close", onClick: this.closeHandle })));
     }
     static get assetsDirs() { return ["xv-notification/icons"]; }
     get el() { return getElement(this); }
 };
 XvNotification.style = XvNotificationV2Style0;
 
-const xvOverflowMenuCss = ":host{--overflow-menu-size:40px;--overflow-menu-item-padding:11px 16px;display:inline-flex;flex-direction:column;position:relative}:host .btn{display:inline-flex;align-items:center;justify-content:center;width:var(--overflow-menu-size);height:var(--overflow-menu-size);background-color:transparent;border:1px solid transparent;transition:300ms ease-in-out color, 300ms ease-in-out background-color, 200ms ease box-shadow;font-size:calc(var(--overflow-menu-size) / 2);color:var(--icon-primary);border-radius:5%;margin:0;padding:0}:host .btn:hover{cursor:pointer;color:var(--link-primary-hover);background-color:var(--background-hover)}:host .btn:active{background-color:var(--background-active);color:var(--icon-disabled)}:host .btn:disabled{background-color:transparent;opacity:0.5;cursor:not-allowed}:host .list{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background-color:var(--layer-01);position:absolute;top:100%;left:0;max-height:0;overflow:hidden;border-radius:3px;transition:200ms ease-in-out max-height, 100ms ease box-shadow;min-width:128px;max-width:50vw;width:max-content}:host .list ::slotted(xv-overflow-menu-v2-item){padding:var(--overflow-menu-item-padding)}:host .list.position-right{left:initial;right:0;border-top-right-radius:0}:host .list.position-left{border-top-left-radius:0}:host([size=xs]){--overflow-menu-item-padding:4px 16px;--overflow-menu-size:24px}:host([size=sm]){--overflow-menu-size:32px;--overflow-menu-item-padding:7px 16px}:host([size=md]){--overflow-menu-size:40px;--overflow-menu-item-padding:11px 16px}:host([size=lg]){--overflow-menu-size:48px;--overflow-menu-item-padding:16px}:host([size=xl]){--overflow-menu-size:56px;--overflow-menu-item-padding:16px}:host([open]) .btn{border-bottom-left-radius:0;border-bottom-right-radius:0;background-color:var(--layer-01);box-shadow:-2px 2px 2px 0 rgba(0, 0, 0, 0.1);z-index:1}:host([open]) .list{max-height:500px;z-index:2;box-shadow:-2px 2px 2px 0 rgba(0, 0, 0, 0.1)}";
+const xvOverflowMenuCss = ":host{--overflow-menu-size:40px;--overflow-menu-item-padding:11px 16px;display:inline-flex;flex-direction:column;position:relative}:host .btn{display:inline-flex;align-items:center;justify-content:center;width:var(--overflow-menu-size);height:var(--overflow-menu-size);background-color:transparent;border:1px solid transparent;transition:300ms ease-in-out color, 300ms ease-in-out background-color, 200ms ease box-shadow;font-size:calc(var(--overflow-menu-size) / 2);color:var(--icon-primary);border-radius:5%;margin:0;padding:0}:host .btn:hover{cursor:pointer;color:var(--link-primary-hover);background-color:var(--background-hover)}:host .btn:active{background-color:var(--background-active);color:var(--icon-disabled)}:host .btn:disabled{background-color:transparent;opacity:0.5;cursor:not-allowed}:host .list{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background-color:var(--layer-01);position:absolute;top:100%;left:0;max-height:0;overflow:hidden;border-radius:3px;transition:200ms ease-in-out max-height, 100ms ease box-shadow;min-width:128px;max-width:50vw;width:max-content}:host .list.open{overflow:visible}:host .list ::slotted(xv-overflow-menu-v2-item){padding:var(--overflow-menu-item-padding)}:host .list.position-right{left:initial;right:0;border-top-right-radius:0}:host .list.position-left{border-top-left-radius:0}:host([size=xs]){--overflow-menu-item-padding:4px 16px;--overflow-menu-size:24px}:host([size=sm]){--overflow-menu-size:32px;--overflow-menu-item-padding:7px 16px}:host([size=md]){--overflow-menu-size:40px;--overflow-menu-item-padding:11px 16px}:host([size=lg]){--overflow-menu-size:48px;--overflow-menu-item-padding:16px}:host([size=xl]){--overflow-menu-size:56px;--overflow-menu-item-padding:16px}:host([open]) .btn{border-bottom-left-radius:0;border-bottom-right-radius:0;background-color:var(--layer-01);box-shadow:-2px 2px 2px 0 rgba(0, 0, 0, 0.1);z-index:1}:host([open]) .list{max-height:500px;z-index:2;box-shadow:-2px 2px 2px 0 rgba(0, 0, 0, 0.1)}";
 const XvOverflowMenuV2Style0 = xvOverflowMenuCss;
 
 const XvOverflowMenu = class {
@@ -644,7 +659,7 @@ const XvOverflowMenu = class {
         }
     }
     render() {
-        return (h(Host, { key: '38ab189c178b27de9de8cbd0174bc96b0beea5e6', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, h("button", { key: '62a4ca90c866339ae4efeeb9579c5077ffed4f64', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, h("svg", { key: 'b46f8ca4e1073a1cca0c4c22c6e4d29f6f45b24c', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, h("path", { key: '8a9f8d9b2e717a997d07ad3fb77c2ff9afbf2ac6', 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" }))), h("div", { key: 'cee611c895bb7386fe154b033c3c0da53e1ee493', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, h("slot", { key: '9caf0adb12c16e7937df82c6bac4385be883ea22' }))));
+        return (h(Host, { key: '4a9f6f2c8a5a4f3c4d1b8c666930b51ccab80228', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, h("button", { key: 'd55471ea38b1f3bf3d04054ff310f616d3c1cd4d', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, h("svg", { key: '70d5c2fd85655ecc48060d31a3ac3e2d822b33ce', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, h("path", { key: '68847d692a27943e1e39368da3f448b4162cecb2', 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" }))), h("div", { key: '0c57895d318dc03c502f28a1b175aee7cc14c573', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, h("slot", { key: 'd5645b5bce743e4cc8eae0c271379d212926c3b2' }))));
     }
     componentDidLoad() {
         this.openChangeHandle();
@@ -681,7 +696,7 @@ const XvOverflowMenuItem = class {
         this.itemClick.emit({ event, value: this.value });
     }
     render() {
-        return (h(Host, { key: '8abe8cdfa428125612c4c8f399be07b101d7faff', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, h("slot", { key: '08c7c14f181c7980bc9ff4fc8dd511753b4b6c9e' })));
+        return (h(Host, { key: '8dc660c2d77b3885eb0b164633874047ca89058c', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, h("slot", { key: '557ee1f91a59d867bae782b7352688f091c3228b' })));
     }
 };
 XvOverflowMenuItem.style = XvOverflowMenuV2ItemStyle0;
@@ -756,7 +771,7 @@ const XvProgressIndicator = class {
         this.updateChildItems();
     }
     render() {
-        return (h(Host, { key: 'be4d8e9691b1421a5e6c50f9737b0f0e72182bdc', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: '59631a2651175f2ccd94c2120df900160812b2fb' })));
+        return (h(Host, { key: '00ad521136d02deaedb3984ff711d23ff0853062', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: '054dbfebd8387688975665058d9bba3903a768fc' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -774,422 +789,191 @@ const XvProgressIndicatorItem = class {
         this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
     }
     render() {
-        return (h(Host, { key: 'b1ab45057fee17bc449648e1c127239ada00f9c5', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: 'b933ea361bf3f97c4d50a08e15c6bb57c7ef1aaf', class: "line" }), h("span", { key: '267e7a12e4536b7b8ac9a102ebbbf4f072cb6302', class: "icon" }, h("svg", { key: '21694dc47b94fbbbbe3f6f864d8c500b6e9b0310', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: '03e39da95382ddc05bbd41d9768f30cdf0d3de6e', 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: '12399f0c9a664804e014db0e7be6b3c117a560ef', class: "label" }, h("slot", { key: 'b2fc1af75b062c83063530923de8621dd38a4572' }))));
+        return (h(Host, { key: '79acb016d3774423ebc4b4fca110a2ac450358ff', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: 'da650032b1e038635c5bbbbdabcf8de3d510c162', class: "line" }), h("span", { key: 'b3cfcdca102ea9d180b711a90a3a735b1faf0296', class: "icon" }, h("svg", { key: 'ad92853715e40b74c291867a158759cfd13ff9af', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: '955f05d5ffcebd9dee12fd89ae34cdf94d68f668', 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: '9c47e82f96314c2e0868c6c67ff9c0b4b66eec4f', class: "label" }, h("slot", { key: '5730d018f363e84fb299877ee854360eb42b06ce' }))));
     }
     get el() { return getElement(this); }
 };
 XvProgressIndicatorItem.style = XvProgressIndicatorV2ItemStyle0;
 
-const xvTabCss = ":host{display:block}";
+const xvTabCss = ":host{display:block}:host([loading]){display:flex;align-items:center;justify-content:center;min-height:200px}";
 const XvTabV2Style0 = xvTabCss;
 
 const XvTab = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.disabled = false;
+        this.loading = false;
     }
     render() {
-        return h(Host, { key: 'b3991bf63fb73f2c39670477652dfa5b40630126', disabled: this.disabled }, h("slot", { key: 'a5dd5a983a13e97be7d925de669461226dc296c0' }));
+        return (h(Host, { key: '82d797fe902cd4dab29cf094485aad742835e6b4', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
     }
 };
 XvTab.style = XvTabV2Style0;
 
-var TABLE_COLOR_SCHEMA;
-(function (TABLE_COLOR_SCHEMA) {
-    TABLE_COLOR_SCHEMA["DEF"] = "";
-    TABLE_COLOR_SCHEMA["ZEBRA"] = "zebra";
-})(TABLE_COLOR_SCHEMA || (TABLE_COLOR_SCHEMA = {}));
-var TABLE_SIZE;
-(function (TABLE_SIZE) {
-    TABLE_SIZE["EXTRA_SMALL"] = "xs";
-    TABLE_SIZE["SMALL"] = "sm";
-    TABLE_SIZE["MEDIUM"] = "md";
-    TABLE_SIZE["LARGE"] = "lg";
-    TABLE_SIZE["EXTRA_LARGE"] = "xl";
-})(TABLE_SIZE || (TABLE_SIZE = {}));
-var TABLE_TAG;
-(function (TABLE_TAG) {
-    TABLE_TAG["TABLE"] = "XV-TABLE-V2";
-    TABLE_TAG["EXPAND"] = "XV-TABLE-V2-EXPAND";
-    TABLE_TAG["ROW"] = "XV-TABLE-V2-ROW";
-    TABLE_TAG["HEADER"] = "XV-TABLE-V2-HEADER-ROW";
-    TABLE_TAG["TOOLBAR"] = "XV-TABLE-V2-TOOLBAR";
-})(TABLE_TAG || (TABLE_TAG = {}));
-var SORT_DIR;
-(function (SORT_DIR) {
-    SORT_DIR["ASC"] = "asc";
-    SORT_DIR["DESC"] = "desc";
-    SORT_DIR["NONE"] = "none";
-})(SORT_DIR || (SORT_DIR = {}));
-
-const xvTableCss = ":host{position:relative;--xv-table-row-bg-color:var(--layer-02, #FFF);--xv-table-first-col-size:0px;--xv-table-padding:16px}:host ::slotted(xv-table-v2-header-row[cols=\"1\"]),:host ::slotted(xv-table-v2-row[cols=\"1\"]),:host ::slotted(xv-table-v2-expand[cols=\"1\"]){--xv-table-cols:1}:host ::slotted(xv-table-v2-header-row[cols=\"2\"]),:host ::slotted(xv-table-v2-row[cols=\"2\"]),:host ::slotted(xv-table-v2-expand[cols=\"2\"]){--xv-table-cols:2}:host ::slotted(xv-table-v2-header-row[cols=\"3\"]),:host ::slotted(xv-table-v2-row[cols=\"3\"]),:host ::slotted(xv-table-v2-expand[cols=\"3\"]){--xv-table-cols:3}:host ::slotted(xv-table-v2-header-row[cols=\"4\"]),:host ::slotted(xv-table-v2-row[cols=\"4\"]),:host ::slotted(xv-table-v2-expand[cols=\"4\"]){--xv-table-cols:4}:host ::slotted(xv-table-v2-header-row[cols=\"5\"]),:host ::slotted(xv-table-v2-row[cols=\"5\"]),:host ::slotted(xv-table-v2-expand[cols=\"5\"]){--xv-table-cols:5}:host ::slotted(xv-table-v2-header-row[cols=\"6\"]),:host ::slotted(xv-table-v2-row[cols=\"6\"]),:host ::slotted(xv-table-v2-expand[cols=\"6\"]){--xv-table-cols:6}:host ::slotted(xv-table-v2-header-row[cols=\"7\"]),:host ::slotted(xv-table-v2-row[cols=\"7\"]),:host ::slotted(xv-table-v2-expand[cols=\"7\"]){--xv-table-cols:7}:host ::slotted(xv-table-v2-header-row[cols=\"8\"]),:host ::slotted(xv-table-v2-row[cols=\"8\"]),:host ::slotted(xv-table-v2-expand[cols=\"8\"]){--xv-table-cols:8}:host ::slotted(xv-table-v2-header-row[cols=\"9\"]),:host ::slotted(xv-table-v2-row[cols=\"9\"]),:host ::slotted(xv-table-v2-expand[cols=\"9\"]){--xv-table-cols:9}:host ::slotted(xv-table-v2-header-row[cols=\"10\"]),:host ::slotted(xv-table-v2-row[cols=\"10\"]),:host ::slotted(xv-table-v2-expand[cols=\"10\"]){--xv-table-cols:10}:host ::slotted(xv-table-v2-header-row[cols=\"11\"]),:host ::slotted(xv-table-v2-row[cols=\"11\"]),:host ::slotted(xv-table-v2-expand[cols=\"11\"]){--xv-table-cols:11}:host ::slotted(xv-table-v2-header-row[cols=\"12\"]),:host ::slotted(xv-table-v2-row[cols=\"12\"]),:host ::slotted(xv-table-v2-expand[cols=\"12\"]){--xv-table-cols:12}:host ::slotted(xv-table-v2-header-row[cols=\"13\"]),:host ::slotted(xv-table-v2-row[cols=\"13\"]),:host ::slotted(xv-table-v2-expand[cols=\"13\"]){--xv-table-cols:13}:host ::slotted(xv-table-v2-header-row[cols=\"14\"]),:host ::slotted(xv-table-v2-row[cols=\"14\"]),:host ::slotted(xv-table-v2-expand[cols=\"14\"]){--xv-table-cols:14}:host ::slotted(xv-table-v2-header-row[cols=\"15\"]),:host ::slotted(xv-table-v2-row[cols=\"15\"]),:host ::slotted(xv-table-v2-expand[cols=\"15\"]){--xv-table-cols:15}:host ::slotted(xv-table-v2-header-row[cols=\"16\"]),:host ::slotted(xv-table-v2-row[cols=\"16\"]),:host ::slotted(xv-table-v2-expand[cols=\"16\"]){--xv-table-cols:16}:host ::slotted(xv-table-v2-header-row[cols=\"17\"]),:host ::slotted(xv-table-v2-row[cols=\"17\"]),:host ::slotted(xv-table-v2-expand[cols=\"17\"]){--xv-table-cols:17}:host ::slotted(xv-table-v2-header-row[cols=\"18\"]),:host ::slotted(xv-table-v2-row[cols=\"18\"]),:host ::slotted(xv-table-v2-expand[cols=\"18\"]){--xv-table-cols:18}:host ::slotted(xv-table-v2-header-row[cols=\"19\"]),:host ::slotted(xv-table-v2-row[cols=\"19\"]),:host ::slotted(xv-table-v2-expand[cols=\"19\"]){--xv-table-cols:19}:host ::slotted(xv-table-v2-header-row[cols=\"20\"]),:host ::slotted(xv-table-v2-row[cols=\"20\"]),:host ::slotted(xv-table-v2-expand[cols=\"20\"]){--xv-table-cols:20}:host .caption{padding:16px 16px 18px}:host .caption_title,:host .caption_description{color:var(--text-primary, #333);margin:0}:host .caption_title{font-family:var(--ff-heading, \"Gill Sans\");font-size:21px}:host .caption_description{font-family:var(--ff-body, Tahoma);font-size:14px;line-height:128.571%;letter-spacing:0.16px}:host([expandable]){--xv-table-first-col-size:48px}:host([selectable]){--xv-table-first-col-size:50px}:host([expandable][selectable]){--xv-table-first-col-size:98px}:host([size=xs]){--xv-table-padding:2px}:host([size=sm]){--xv-table-padding:8px}:host([size=md]){--xv-table-padding:16px}:host([size=lg]){--xv-table-padding:18px}:host([size=xl]){--xv-table-padding:20px}:host([hoverable]) ::slotted(xv-table-v2-row:hover),:host([hoverable]) ::slotted(xv-table-v2-expand:hover){--xv-table-row-bg-color:var(--layer-hover-01, #E3E3E3)}:host(xv-table-v2) ::slotted(xv-table-v2-row[odd]),:host(xv-table-v2) ::slotted(xv-table-v2-expand[odd]){--xv-table-row-bg-color:var(--layer-selected-01, #E3E3E3)}";
+const xvTableCss = ":host{--xv-table-min-height:51.11px;--xv-table-padding-x:16px;--xv-table-padding-y:15px;--xv-table-cols-template:repeat(auto-fit, minmax(0, 1fr));display:block}:host .batch-actions{user-select:none;pointer-events:none;position:absolute;left:0;bottom:100%;width:0;min-height:48px;overflow:hidden;border-radius:3px 3px 0 0;background-color:var(--interactive-01, #273435);display:flex;align-items:center;justify-content:space-between;column-gap:var(--spacing-04);flex-wrap:nowrap;box-sizing:border-box;transition:250ms ease-in-out height, 250ms ease-in-out width, 250ms ease-in-out padding-inline;color:var(--text-on-color, #fff)}:host .batch-actions_content{display:block;overflow:hidden;white-space:nowrap}:host .batch-actions_count{margin:0;white-space:nowrap;font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:var(--fz-lg, 18px);letter-spacing:0.16px}:host .xv-table{display:flex;flex-direction:column;position:relative}:host .xv-table ::slotted([checked]){background-color:var(--layer-selected-01, #E3E3E3)}:host .xv-table ::slotted([checked]:not([header]):hover){background-color:var(--layer-selected-hover-01, #DADADA)}:host .xv-table ::slotted(xv-table-v2-row[disabled]){opacity:0.4;cursor:not-allowed;user-select:none}:host .xv-table ::slotted([slot=footer]:hover),:host .xv-table ::slotted([slot=footer]){background-color:var(--layer-accent-02, #E3E3E3)}:host .xv-table_loading{z-index:10;display:flex;align-items:center;justify-content:center;min-height:var(--xv-table-min-height, 51.11px);position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8)}:host .xv-table-title,:host ::slotted([slot=title]){color:var(--text-primary, #333) !important;font-size:var(--fz-xl, 21px) !important;margin-top:var(--spacing-05, 16px) !important;margin-bottom:var(--spacing-06, 24px) !important;font-family:var(--ff-heading, \"Gill Sans\");font-style:normal;font-weight:400;line-height:normal}:host([hover]) .xv-table ::slotted(:hover:not([header])){background-color:var(--layer-hover-01, #E9E9E9)}:host(.batchVisible) .batch-actions{pointer-events:initial;user-select:initial;width:100%;padding-inline:var(--xv-table-padding-x)}:host([expandable]) ::slotted(xv-table-v2-row){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px)}:host([variant-checkbox]) ::slotted([slot=footer]:not([variant])){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 57.97px)}:host([size=xs]){--xv-table-padding-y:7px;--xv-table-min-height:35.1px}:host([size=sm]){--xv-table-padding-y:10px;--xv-table-min-height:41.11px}:host([size=lg]){--xv-table-padding-y:21px;--xv-table-min-height:63.09px}:host([size=xl]){--xv-table-padding-y:31px;--xv-table-min-height:78.77px}";
 const XvTableV2Style0 = xvTableCss;
 
 const XvTable = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.changeSelection = createEvent(this, "changeSelection", 7);
-        /**
-         * Set current color schema type of enum TABLE_COLOR_SCHEMA
-         * Possible options 'zebra'
-         */
-        this.colorSchema = TABLE_COLOR_SCHEMA.DEF;
-        /**
-         * If table is expandable fields
-         */
-        this.expandable = false;
-        /**
-         * Table size
-         * enum TABLE_SIZE
-         */
-        this.size = TABLE_SIZE.MEDIUM;
-        /**
-         * Add checkbox selection to the table
-         */
-        this.selectable = false;
-        this.selectedRows = new Map();
-        this.debouncedChangeSelection = debounce(async () => {
-            var _a;
-            const results = Array.from(this.selectedRows.values());
-            const toolbar = this.el.querySelector(TABLE_TAG.TOOLBAR);
-            await ((_a = toolbar === null || toolbar === void 0 ? void 0 : toolbar.setSelectedItems) === null || _a === void 0 ? void 0 : _a.call(toolbar, this.selectedRows));
-            const header = this.el.querySelector(TABLE_TAG.HEADER);
-            let partial = false;
-            forEach(this.el.querySelectorAll(TABLE_TAG.ROW), (row) => {
-                if (!row.hasAttribute('checked'))
-                    partial = true;
-            });
-            setAttr(header, 'checked', !!this.selectedRows.size);
-            setAttr(header, 'partial', partial);
-            this.changeSelection.emit(results);
-        }, 150);
-        this.handleCheckedChange = async (e) => {
-            const { name, checked } = e.detail;
-            if (checked) {
-                this.selectedRows.set(name, e.detail);
-            }
-            else {
-                this.selectedRows.delete(name);
-            }
-            this.debouncedChangeSelection();
-        };
-        this.setRowProps = () => {
-            const rows = Array
-                .from(this.el.childNodes)
-                .filter((node) => node.nodeType === Node.ELEMENT_NODE && ((node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-ROW` ||
-                (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW` ||
-                (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-EXPAND`));
-            let visualIndex = 0;
-            rows.forEach((node, i) => {
-                const row = node;
-                const isHeaderRow = (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`;
-                if (isHeaderRow)
-                    return;
-                switch (this.colorSchema) {
-                    case TABLE_COLOR_SCHEMA.ZEBRA:
-                        const stripe = visualIndex % 2 === 0 ? 'even' : 'odd';
-                        if (row.hasAttribute('expandable') && rows[i + 1]) {
-                            row.setAttribute(stripe, '');
-                        }
-                        else {
-                            visualIndex++;
-                            row.setAttribute(stripe, '');
-                        }
-                        break;
-                    default:
-                        row.removeAttribute('odd');
-                        row.removeAttribute('even');
-                }
-            });
-        };
+        this.selected = new Map();
+        this.selectedCount = 0;
     }
-    handleSetColorSchema() {
-        this.setRowProps();
-    }
-    listenSelectableHandle() {
-        if (this.selectable) {
-            this.el.addEventListener('checkedChange', this.handleCheckedChange);
+    handleCheckedChange({ detail }) {
+        if (detail.header || detail.expandable)
+            return;
+        if (detail.checked) {
+            this.selected.set(detail.name, detail);
         }
         else {
-            this.el.removeEventListener('checkedChange', this.handleCheckedChange);
+            this.selected.delete(detail.name);
         }
-        const rows = Array
-            .from(this.el.querySelectorAll(`${TABLE_TAG.ROW}, ${TABLE_TAG.HEADER}`))
-            .filter((node) => node.nodeType === Node.ELEMENT_NODE && ((node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-ROW` ||
-            (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`));
-        rows.forEach((row, i) => {
-            const isExists = row.hasAttribute('selection-name');
-            if (this.selectable && row.tagName === TABLE_TAG.HEADER && !isExists) {
-                return row.setAttribute('selection-name', 'header');
-            }
-            if (!this.selectable && isExists) {
-                return row.removeAttribute('selection-name');
-            }
-            if (this.selectable && !isExists) {
-                row.setAttribute('selection-name', row.getAttribute('name') || `${i}`);
-            }
-        });
+        this.selectedCount = this.selected.size;
+    }
+    setColsSizeTemplate() {
+        var _a;
+        if (!this.colsSize || !((_a = this.colsSize) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        this.el.style.setProperty('--xv-table-cols-template', this.colsSize
+            .map((v) => {
+            if (!v)
+                return 'minmax(0, 1fr)';
+            if (v === 'auto')
+                return 'minmax(0, auto)';
+            return `calc(${v} - ${50 / this.colsSize.length}px)`;
+        })
+            .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
     }
     render() {
-        return (h(Host, { key: '9ffbb8ebef0ef99b71bbc76fce633be86d17f9e8', role: "table", size: this.size, selectable: this.selectable }, (this.el.title || this.description) && (h("div", { key: '96ffe17490215156040b472910f04f36c96d7808', class: "caption" }, this.el.title && h("h5", { key: '2760ff5ac6073315238736dbe9b55f0546b0886a', class: "caption_title" }, this.el.title), this.description && h("p", { key: '7e335e60883615bbe5af66394686944673644f4f', class: "caption_description" }, this.description))), h("slot", { key: 'b28fe0ffe51ea20464b8114830127023e1ccca47', name: "header" }), h("slot", { key: 'd8dcbbe05dadda66b20b4c56adcbb08dfbe7c0db' })));
+        return (h(Host, { key: 'd661040bcec38c039dd3ae7516fa40bfb0274da7', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: 'a341cf9b6bf250dbf0dbee0bf17da8a734be7a31', name: "title" }, !!this.el.title && h("h2", { key: 'bf33335fe741ebae458f3dcc02d1d65ac4c75ddd', class: "xv-table-title" }, this.el.title)), h("slot", { key: 'b7504f0b48d538ce6d4c1fb7706e1ab8bce8bd8c', name: "toolbar" }), h("div", { key: '54b51b51171726650858ce3484c1d510dd88796c', class: "xv-table" }, h("div", { key: '22f7f3638901e4f80acee21696ee4ae8d7e01ad4', class: "batch-actions" }, h(Fragment, { key: '922d574d34d7ff5632a9b5489bbf4b205f64f3bd' }, h("div", { key: 'eb7a82cda62bb1084715d446da1ca082c7ff6f37', class: "batch-actions_content" }, h("slot", { key: 'eb95cf88821c541e71b1620ce0d79bbe196a16e8', name: "batch" })), h("p", { key: '050dbbefa2fc8adfffbbb12652964279bd5b69d4', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("slot", { key: '8dcfa43420bad4a128b15f1095556eeac062939c' }), h("slot", { key: '588776181bded66364751e3e2e5fd9713084aee7', name: "footer" }), !!this.loading && (h("div", { key: '1478a55759576d012c5dbb3a630309fe42bc527f', class: "xv-table_loading" }, h("xv-loader-v2", { key: '822799790a03089ff83a99a49fa0f8fb4b9f36b0', size: SIZE_VAR.LG }))))));
     }
     componentWillLoad() {
-        this.setRowProps();
-        this.listenSelectableHandle();
-    }
-    disconnectedCallback() {
-        this.el.removeEventListener('checkedChange', this.handleCheckedChange);
+        this.setColsSizeTemplate();
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "colorSchema": ["handleSetColorSchema"],
-        "selectable": ["listenSelectableHandle"]
+        "colsSize": ["setColsSizeTemplate"]
     }; }
 };
 XvTable.style = XvTableV2Style0;
 
-const xvTableColCss = ":host{color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:14px;padding-left:var(--xv-table-padding, 16px);padding-right:var(--xv-table-padding, 16px);letter-spacing:0.16px;text-overflow:ellipsis;align-content:center;max-height:32px;height:32px;overflow:hidden}";
-const XvTableV2ColStyle0 = xvTableColCss;
+var XV_SORT_DIR;
+(function (XV_SORT_DIR) {
+    XV_SORT_DIR["ASC"] = "asc";
+    XV_SORT_DIR["DESC"] = "desc";
+    XV_SORT_DIR["NONE"] = "none";
+})(XV_SORT_DIR || (XV_SORT_DIR = {}));
+const XV_EXPANDABLE_KEY = 'expandable';
+const XV_TABLE_TAG = 'xv-table-v2';
+
+const xvTableCellCss = "@charset \"UTF-8\";:host{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:var(--xv-table-padding-y) var(--xv-table-padding-x);color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:14px;font-style:normal;font-weight:400;line-height:1.2;letter-spacing:0.16px;transition:0.25s ease-in-out background-color}:host([multiline]){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:initial;padding-bottom:1px;padding-top:0;line-height:1.2}:host([align=left]){text-align:left}:host([align=right]){text-align:right}:host([align=center]){text-align:center}:host([sort]){position:relative;cursor:pointer;user-select:none}:host([sort]):before,:host([sort]):after{font-size:12px;line-height:10px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;right:8px;pointer-events:none;transition:350ms ease-in-out opacity;opacity:0}:host([sort]):before{content:\"▲\";top:50%;transform:translateY(calc(-50% - 5px))}:host([sort])::after{content:\"▼\";top:50%;transform:translateY(calc(-50% + 5px))}:host([sort]:hover){background-color:var(--layer-accent-hover-01, #E3E3E3)}:host([sort]:hover)::before,:host([sort]:hover)::after{opacity:1}:host([sort=asc]){background-color:var(--layer-accent-active-01, #D1D1D1)}:host([sort=asc])::before{opacity:1}:host([sort=asc])::after{display:none}:host([sort=desc]){background-color:var(--layer-accent-active-01, #D1D1D1)}:host([sort=desc])::before{display:none}:host([sort=desc])::after{opacity:1}";
+const XvTableV2CellStyle0 = xvTableCellCss;
 
-const XvTableCol = class {
+const XvTableCell = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.sortColChange = createEvent(this, "sortColChange", 7);
+        this.sortChange = createEvent(this, "sortChange", 7);
     }
-    handleClick() {
+    handleSort() {
         if (this.sort === undefined)
             return;
+        let sort = this.sort;
         if (this.sort === '')
-            this.sort = SORT_DIR.NONE;
-        this.sort = this.sort === SORT_DIR.NONE ?
-            SORT_DIR.ASC : this.sort === SORT_DIR.ASC ?
-            SORT_DIR.DESC : SORT_DIR.NONE;
-        this.sortColChange.emit({ dir: this.sort, name: this.sortName });
+            sort = XV_SORT_DIR.NONE;
+        this.sort = sort === XV_SORT_DIR.NONE ?
+            XV_SORT_DIR.ASC : sort === XV_SORT_DIR.ASC ?
+            XV_SORT_DIR.DESC : XV_SORT_DIR.NONE;
+        forEach(this.el.parentElement.children, (cell) => {
+            if (cell !== this.el && cell.hasAttribute('sort')) {
+                cell.setAttribute('sort', 'none');
+            }
+        });
+        if (!this.name)
+            this.name = uidGenerator();
+        this.sortChange.emit({ name: this.name, value: this.sort });
     }
+    ;
     render() {
-        return (h(Host, { key: '9b1f74330fbdf33ee631f897b2bec11972ef6323', role: "cell", class: "xv-table-col", sort: this.sort }, h("slot", { key: '80960f0602ed615dceb0aa1f484319bfffc00887' })));
+        return (h(Host, { key: 'a2b8e397dcc44ae5a4e018f655586ef4e4900564' }, h("slot", { key: '9b2f63ba4c33f03cb55030d87b4da14a2745ecc3' })));
     }
+    get el() { return getElement(this); }
 };
-XvTableCol.style = XvTableV2ColStyle0;
+XvTableCell.style = XvTableV2CellStyle0;
 
-const xvTableExpandCss = ":host ::slotted(xv-table-v2-header-row[cols=\"1\"]),:host ::slotted(xv-table-v2-row[cols=\"1\"]),:host ::slotted(xv-table-v2-expand[cols=\"1\"]){--xv-table-cols:1}:host ::slotted(xv-table-v2-header-row[cols=\"2\"]),:host ::slotted(xv-table-v2-row[cols=\"2\"]),:host ::slotted(xv-table-v2-expand[cols=\"2\"]){--xv-table-cols:2}:host ::slotted(xv-table-v2-header-row[cols=\"3\"]),:host ::slotted(xv-table-v2-row[cols=\"3\"]),:host ::slotted(xv-table-v2-expand[cols=\"3\"]){--xv-table-cols:3}:host ::slotted(xv-table-v2-header-row[cols=\"4\"]),:host ::slotted(xv-table-v2-row[cols=\"4\"]),:host ::slotted(xv-table-v2-expand[cols=\"4\"]){--xv-table-cols:4}:host ::slotted(xv-table-v2-header-row[cols=\"5\"]),:host ::slotted(xv-table-v2-row[cols=\"5\"]),:host ::slotted(xv-table-v2-expand[cols=\"5\"]){--xv-table-cols:5}:host ::slotted(xv-table-v2-header-row[cols=\"6\"]),:host ::slotted(xv-table-v2-row[cols=\"6\"]),:host ::slotted(xv-table-v2-expand[cols=\"6\"]){--xv-table-cols:6}:host ::slotted(xv-table-v2-header-row[cols=\"7\"]),:host ::slotted(xv-table-v2-row[cols=\"7\"]),:host ::slotted(xv-table-v2-expand[cols=\"7\"]){--xv-table-cols:7}:host ::slotted(xv-table-v2-header-row[cols=\"8\"]),:host ::slotted(xv-table-v2-row[cols=\"8\"]),:host ::slotted(xv-table-v2-expand[cols=\"8\"]){--xv-table-cols:8}:host ::slotted(xv-table-v2-header-row[cols=\"9\"]),:host ::slotted(xv-table-v2-row[cols=\"9\"]),:host ::slotted(xv-table-v2-expand[cols=\"9\"]){--xv-table-cols:9}:host ::slotted(xv-table-v2-header-row[cols=\"10\"]),:host ::slotted(xv-table-v2-row[cols=\"10\"]),:host ::slotted(xv-table-v2-expand[cols=\"10\"]){--xv-table-cols:10}:host ::slotted(xv-table-v2-header-row[cols=\"11\"]),:host ::slotted(xv-table-v2-row[cols=\"11\"]),:host ::slotted(xv-table-v2-expand[cols=\"11\"]){--xv-table-cols:11}:host ::slotted(xv-table-v2-header-row[cols=\"12\"]),:host ::slotted(xv-table-v2-row[cols=\"12\"]),:host ::slotted(xv-table-v2-expand[cols=\"12\"]){--xv-table-cols:12}:host ::slotted(xv-table-v2-header-row[cols=\"13\"]),:host ::slotted(xv-table-v2-row[cols=\"13\"]),:host ::slotted(xv-table-v2-expand[cols=\"13\"]){--xv-table-cols:13}:host ::slotted(xv-table-v2-header-row[cols=\"14\"]),:host ::slotted(xv-table-v2-row[cols=\"14\"]),:host ::slotted(xv-table-v2-expand[cols=\"14\"]){--xv-table-cols:14}:host ::slotted(xv-table-v2-header-row[cols=\"15\"]),:host ::slotted(xv-table-v2-row[cols=\"15\"]),:host ::slotted(xv-table-v2-expand[cols=\"15\"]){--xv-table-cols:15}:host ::slotted(xv-table-v2-header-row[cols=\"16\"]),:host ::slotted(xv-table-v2-row[cols=\"16\"]),:host ::slotted(xv-table-v2-expand[cols=\"16\"]){--xv-table-cols:16}:host ::slotted(xv-table-v2-header-row[cols=\"17\"]),:host ::slotted(xv-table-v2-row[cols=\"17\"]),:host ::slotted(xv-table-v2-expand[cols=\"17\"]){--xv-table-cols:17}:host ::slotted(xv-table-v2-header-row[cols=\"18\"]),:host ::slotted(xv-table-v2-row[cols=\"18\"]),:host ::slotted(xv-table-v2-expand[cols=\"18\"]){--xv-table-cols:18}:host ::slotted(xv-table-v2-header-row[cols=\"19\"]),:host ::slotted(xv-table-v2-row[cols=\"19\"]),:host ::slotted(xv-table-v2-expand[cols=\"19\"]){--xv-table-cols:19}:host ::slotted(xv-table-v2-header-row[cols=\"20\"]),:host ::slotted(xv-table-v2-row[cols=\"20\"]),:host ::slotted(xv-table-v2-expand[cols=\"20\"]){--xv-table-cols:20}:host(xv-table-v2-expand) ::slotted(xv-table-v2-row){block-size:auto;overflow:hidden;grid-template-columns:var(--xv-table-first-col-size, 0) repeat(var(--xv-table-cols, 1), 1fr)}:host(xv-table-v2-expand:not([expanded])) ::slotted(xv-table-v2-row:not(:first-of-type)){padding-top:0;padding-bottom:0;block-size:0}:host(xv-table-v2-expand[expanded]) ::slotted(xv-table-v2-row:not(:first-of-type)){block-size:auto}";
+const xvTableExpandCss = ":host{display:block;position:relative;transition:0.25s ease-in-out background-color}:host .expand-btn{z-index:9;position:absolute;left:max(10px, var(--xv-table-padding-x));top:max(2px, var(--xv-table-padding-y) + 2px);background-color:transparent;cursor:pointer;outline:none;margin:0;padding:0;box-sizing:border-box;display:block;width:8.5px;height:8.5px;border-top:none;border-left:none;border-right:2px solid var(--icon-primary, #333);border-bottom:2px solid var(--icon-primary, #333);transform:rotate(45deg);transform-origin:center center;transition:0.2s ease-in-out transform}:host .expand-btn:disabled{cursor:not-allowed;opacity:0.5}:host .expand-btn.open{transform:rotate(-135deg)}:host .expandableContent{overflow:hidden;margin:0;padding:0;max-height:0;transition:250ms ease max-height}:host .expandableContent.open{max-height:600px}:host ::slotted([slot=expandable]){display:grid;align-items:center}:host ::slotted(xv-table-v2-row),:host ::slotted([slot=expandable]){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px)}:host ::slotted([disabled]){opacity:0.4;cursor:not-allowed;user-select:none}";
 const XvTableV2ExpandStyle0 = xvTableExpandCss;
 
 const XvTableExpand = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.checkedChange = createEvent(this, "checkedChange", 7);
-        this.expanded = false;
-        this.cols = 1;
-        this.hovered = false;
-        this.checkedGroup = new Map();
-        this.selectedRows = new Set();
-        // Expand group ID
-        this.groupId = uidGenerator();
-        this.setExpandAttrs = (expanded) => {
-            forEach(this.el.children, (row, i) => {
-                // set group id
-                this.setAttr(row, 'group-id', this.groupId);
-                // If it's Main selection row
-                if (!i) {
-                    this.setAttr(row, 'expandable', true);
-                    this.setAttr(row, 'expanded', expanded);
-                    return;
-                }
-            });
-        };
-        this.onSlotChange = () => {
-            this.cols = this.el.firstElementChild.childElementCount;
-            this.setExpandAttrs(this.expanded);
-        };
-        this.emitChangeSelectionEvent = debounce(() => {
-            var _a, _b;
-            return this.checkedChange.emit(Object.assign(Object.assign({ name: ((_a = this.mainRowData) === null || _a === void 0 ? void 0 : _a.name) || this.el.firstElementChild.getAttribute('selection-name') }, (this.mainRowData || {})), { checked: !!this.selectedRows.size, group: Object.assign(Object.assign({ id: this.groupId }, (((_b = this.mainRowData) === null || _b === void 0 ? void 0 : _b.group) || {})), { data: Array.from(this.selectedRows.values()) }) }));
-        }, 100);
-        this.handleCheckedChange = (e) => {
-            const { group, checked, name } = e.detail;
-            if ((group === null || group === void 0 ? void 0 : group.id) !== this.groupId)
-                return;
-            if (group === null || group === void 0 ? void 0 : group.isMainRow) {
-                this.mainRowData = e.detail;
-                // clear group selection
-                if (!checked)
-                    this.selectedRows.clear();
-                // Change all group except first row
-                forEach(this.el.children, (row, i) => {
-                    if (!i || row.hasAttribute('disabled'))
-                        return;
-                    this.setAttr(row, 'checked', checked);
-                });
-            }
-            else {
-                if (checked) {
-                    this.selectedRows.add(e.detail);
-                }
-                else {
-                    this.selectedRows
-                        .forEach(item => item.name === name && this.selectedRows.delete(item));
-                }
-            }
-            const isNoSelected = !this.selectedRows.size;
-            const isAllSelected = this.selectedRows.size == this.el.childElementCount - 1;
-            const isPartialSelected = !isNoSelected && (this.selectedRows.size < this.el.childElementCount - 1);
-            if (isAllSelected) {
-                this.setAttr(this.el.firstElementChild, 'checked', true);
-            }
-            else if (isNoSelected) {
-                this.setAttr(this.el.firstElementChild, 'checked', false);
-            }
-            this.setAttr(this.el.firstElementChild, 'partial', isPartialSelected);
-            this.emitChangeSelectionEvent();
+        this.open = false;
+        this.disabled = false;
+        this.handleExpand = () => {
+            this.open = !this.open;
         };
     }
-    async toggleExpand(expanded) {
-        this.expanded = !!expanded;
-    }
-    setAttr(node, name, value) {
-        if (typeof value === 'string') {
-            !node.hasAttribute(name) && node.setAttribute(name, value);
-            return;
-        }
-        if (value) {
-            !node.hasAttribute(name) && node.setAttribute(name, '');
-        }
-        else {
-            node.hasAttribute(name) && node.removeAttribute(name);
-        }
-    }
-    setInitialExpandStatus() {
-        const table = this.el.parentElement;
-        if (table.tagName === TABLE_TAG.TABLE)
-            this.setAttr(table, 'expandable', true);
-    }
     render() {
-        return (h(Host, { key: '3e6cfb2feacf723e53db6b256ae0adf1e2a93032', role: "rowgroup", cols: this.cols, expanded: this.expanded, hovered: this.hovered }, h("slot", { key: '56082d65ca6f46eb064383b203b51265ae699b8c', onSlotchange: this.onSlotChange })));
-    }
-    componentWillLoad() {
-        this.setInitialExpandStatus();
-    }
-    connectedCallback() {
-        this.el.childNodes.forEach(row => row.addEventListener('checkedGroupChange', this.handleCheckedChange));
+        return (h(Host, { key: 'f7aca6da5b9345c3c1b5777577f22cfa6f203050' }, h("button", { key: '5c503f211c763cbfa0fb9b8327146e92bb803eef', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: 'f55a433ebf374f2a03381035846b3c180b5e8852', name: XV_EXPANDABLE_KEY }), h("div", { key: '9b6f5e487e156a6f3e14a0aa7a10065410de0cca', class: { expandableContent: true, open: this.open } }, h("slot", { key: 'ac9992699f28465a63346ebdf3f638b8fd53ec15' }))));
     }
-    disconnectedCallback() {
-        this.el.childNodes.forEach(row => row.removeEventListener('checkedGroupChange', this.handleCheckedChange));
+    componentDidLoad() {
+        setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
     }
     get el() { return getElement(this); }
 };
 XvTableExpand.style = XvTableV2ExpandStyle0;
 
-const xvTableHeaderRowCss = "@charset \"UTF-8\";:host{display:grid;align-items:center;background-color:var(--layer-accent-01, #F7F7F7);transition:height 0.15s cubic-bezier(0.2, 0, 0.38, 0.9), padding 0.15s ease-in-out, background-color 0.2ms ease-in-out;color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:14px;font-weight:700;line-height:128.571%;letter-spacing:0.16px;grid-template-columns:var(--xv-table-first-col-size, 0) repeat(var(--xv-table-cols, 1), 1fr)}:host .left-container{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 16px}:host ::slotted(xv-table-v2-col){padding:var(--xv-table-padding, 16px);box-sizing:content-box !important}:host([sortable]) ::slotted(xv-table-v2-col[sort]){cursor:pointer;position:relative}:host([sortable]) ::slotted(xv-table-v2-col[sort]):before,:host([sortable]) ::slotted(xv-table-v2-col[sort]):after{font-size:12px;line-height:10px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;right:8px;pointer-events:none;transition:350ms ease-in-out opacity;opacity:0}:host([sortable]) ::slotted(xv-table-v2-col[sort]):before{content:\"▲\";top:50%;transform:translateY(calc(-50% - 5px))}:host([sortable]) ::slotted(xv-table-v2-col[sort])::after{content:\"▼\";top:50%;transform:translateY(calc(-50% + 5px))}:host([sortable]) ::slotted(xv-table-v2-col[sort]:hover),:host([sortable]) ::slotted(xv-table-v2-col[sort]:focus-within),:host([sortable]) ::slotted(xv-table-v2-col[sort=asc]),:host([sortable]) ::slotted(xv-table-v2-col[sort=desc]){background-color:var(--layer-accent-hover-01, #E3E3E3)}:host([sortable]) ::slotted(xv-table-v2-col[sort]:hover)::before,:host([sortable]) ::slotted(xv-table-v2-col[sort]:focus-within)::before{opacity:1}:host([sortable]) ::slotted(xv-table-v2-col[sort]:hover)::after,:host([sortable]) ::slotted(xv-table-v2-col[sort]:focus-within)::after{opacity:1}:host([sortable]) ::slotted(xv-table-v2-col[sort=asc])::before{opacity:1}:host([sortable]) ::slotted(xv-table-v2-col[sort=asc])::after{display:none}:host([sortable]) ::slotted(xv-table-v2-col[sort=desc])::before{display:none}:host([sortable]) ::slotted(xv-table-v2-col[sort=desc])::after{opacity:1}";
-const XvTableV2HeaderRowStyle0 = xvTableHeaderRowCss;
-
-const XvTableHeaderRow = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.sortChange = createEvent(this, "sortChange", 7);
-        /**
-         * Checkbox row selected partially
-         */
-        this.partial = false;
-        /**
-         * Checkbox row checked
-         */
-        this.checked = false;
-        this.cols = 1;
-        this.sortChangeHandle = ({ detail, target }) => {
-            // Reset prev selected sort
-            forEach(this.el.children, (col) => {
-                if (col !== target && col.hasAttribute('sort')) {
-                    col.setAttribute('sort', 'none');
-                }
-            });
-            this.sortChange.emit(detail);
-        };
-        this.slotChangeHandle = () => {
-            this.cols = this.el.childElementCount;
-            if (this.sortable) {
-                this.el.removeEventListener('sortColChange', this.sortChangeHandle.bind(this));
-                this.el.addEventListener('sortColChange', this.sortChangeHandle.bind(this));
-            }
-        };
-        this.checkboxChange = (e) => {
-            this.checked = e.detail;
-            this.partial = false;
-            forEach(this.el.parentElement.querySelectorAll(TABLE_TAG.ROW), (row) => {
-                if (!row.hasAttribute('disabled')) {
-                    setAttr(row, 'checked', this.checked);
-                }
-            });
-        };
-    }
-    render() {
-        return (h(Host, { key: 'caee6dd4e34bd546e779da904c2ade00aca65541', role: "row", cols: this.cols }, h("div", { key: '780da58526356bb241e1af14aee3be693076f8c9', class: "left-container" }, this.selectionName !== undefined && (h("xv-checkbox-v2", { key: 'a91c0b981008fb4808af1dda2d6adf6a6aa9fb53', partial: this.partial, name: this.selectionName, checked: this.checked, onEventChange: this.checkboxChange }))), h("slot", { key: '8e49ed42174d8a393624b8393485a951910713df', onSlotchange: this.slotChangeHandle })));
-    }
-    disconnectedCallback() {
-        this.el.removeEventListener('sortColChange', this.sortChangeHandle.bind(this));
-    }
-    get el() { return getElement(this); }
-};
-XvTableHeaderRow.style = XvTableV2HeaderRowStyle0;
-
-const xvTableRowCss = ":host(xv-table-v2-row){display:grid;align-items:center;transition:height 0.15s cubic-bezier(0.2, 0, 0.38, 0.9), padding 0.15s ease-in-out, background-color 0.2ms ease-in-out;background-color:var(--xv-table-row-bg-color);box-shadow:0 0 0 1px #E3E3E3 inset;padding-top:var(--xv-table-padding, 16px);padding-bottom:var(--xv-table-padding, 16px);grid-template-columns:var(--xv-table-first-col-size, 0) repeat(var(--xv-table-cols, 1), 1fr)}:host(xv-table-v2-row) .left-container{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 16px}:host(xv-table-v2-row) .expand-btn{outline:none;background-color:transparent;display:block;margin:0 auto;border:solid var(--icon-primary, #131313);border-width:0 1px 1px 0;padding:3px;transform:rotate(45deg);cursor:pointer;transition:opacity 300ms ease-in-out, transform 200ms ease-in-out}:host(xv-table-v2-row) .expand-btn:active{opacity:0.5}:host(xv-table-v2-row) .expand-btn.expanded{margin-top:4px;transform:rotate(225deg)}:host([disabled]){opacity:0.4;pointer-events:none;cursor:not-allowed}:host([disabled]) ::slotted(xv-table-v2-col){cursor:not-allowed}";
+const xvTableRowCss = ":host{display:grid;grid-template-columns:var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));border-bottom:1px solid #E3E3E3;border-right:1px solid #E3E3E3;border-left:1px solid #E3E3E3;min-height:var(--xv-table-min-height);align-items:center;align-content:center;transition:0.25s ease-in-out background-color}:host .cell-control{min-height:20px;display:flex;align-items:center;justify-content:center}:host([variant]){grid-template-columns:minmax(47.97px, min-content) var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)))}:host([hover]:not([header]):hover){background-color:var(--layer-hover-01, #E9E9E9)}:host([checked]){background-color:var(--layer-selected-01, #E3E3E3)}:host([checked]:hover){background-color:var(--layer-selected-hover-01, #DADADA)}:host([header]){background-color:var(--layer-accent-01, #F7F7F7);box-shadow:0 0 0 1px #E3E3E3 inset;border-bottom:none}";
 const XvTableV2RowStyle0 = xvTableRowCss;
 
 const XvTableRow = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.checkedChange = createEvent(this, "checkedChange", 7);
-        this.checkedGroupChange = createEvent(this, "checkedGroupChange", 7);
-        /**
-         * Is row will be expandable
-         * If it's true then the next row will be collapsed
-         */
-        this.expandable = false;
-        /**
-         * Default state of expandable
-         */
-        this.expanded = false;
-        /**
-         * Disabled status
-         */
-        this.disabled = false;
-        this.cols = 1;
-        this.hovered = false;
-        this.checkboxChange = (e) => {
-            this.checked = e.detail;
-        };
-        this.onExpandHandle = async () => {
-            this.expanded = !this.expanded;
-            const parent = this.el.parentElement;
-            if (parent.tagName === TABLE_TAG.EXPAND) {
-                await (parent === null || parent === void 0 ? void 0 : parent.toggleExpand(this.expanded));
-            }
+        this.selectRow = createEvent(this, "selectRow", 7);
+        this.checkHandle = ({ detail: checked }) => {
+            this.checked = checked;
+            if (!checked && this.partial)
+                this.partial = checked;
+            if (!this.name)
+                this.name = uidGenerator();
+            this.selectRow.emit({
+                name: this.name,
+                value: this.value,
+                checked: this.checked,
+                partial: this.partial,
+                header: this.header,
+                expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
+            });
         };
     }
     checkedChangeHandle() {
-        const changeData = {
-            name: this.selectionName,
+        if (!this.name)
+            this.name = uidGenerator();
+        this.checkedChange.emit({
+            name: this.name,
             value: this.value,
             checked: this.checked,
-        };
-        if (this.expandable || this.groupId) {
-            changeData.group = { id: this.groupId, isMainRow: !!this.expandable };
-        }
-        if (changeData.group) {
-            this.checkedGroupChange.emit(changeData);
-        }
-        else {
-            this.checkedChange.emit(changeData);
-        }
+            partial: this.partial,
+            header: this.header,
+            expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
+        });
     }
-    async componentWillLoad() {
-        this.id = this.el.id;
-        this.cols = this.el.childElementCount;
-        // TODO: with initial checked values
-        this.checked && this.checkedChangeHandle();
+    setInitialAttrs() {
+        if (this.variant || !this.hover) {
+            const tableEl = this.el.closest(XV_TABLE_TAG);
+            if (!this.hover) {
+                this.hover = tableEl.hasAttribute('hover');
+            }
+            if (this.variant) {
+                setAttr(this.el.closest(XV_TABLE_TAG), `variant-${this.variant}`, !!this.variant);
+            }
+        }
     }
     render() {
-        return (h(Host, { key: '0ecaf319abeb4d74f304ce9c87c150d0aafb61f8', role: "row", cols: this.cols }, h("div", { key: '4e5737a8bbb29863419a2eb91cb197fbe5e55d82', class: "left-container" }, this.expandable && (h("button", { key: '66298e7b69b89720a08160d0c922d04edef792c1', onClick: this.onExpandHandle, class: `expand-btn ${this.expanded ? 'expanded' : ''}` })), this.selectionName && (h("xv-checkbox-v2", { key: '4c01f35c763a00cb5f60330307a0be2ab6321db6', disabled: this.disabled, name: this.selectionName, value: this.value, checked: !!(this.checked || this.partial), partial: this.partial, onEventChange: this.checkboxChange }))), h("slot", { key: 'd559c89935cc9de78b712e238a1a08c537b67a5d' })));
+        return (h(Host, { key: 'a83693a0ac8a484e77d6569e9c5e6d5552d1e4bd' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '79c530cedc2dedfe7a3f30cca998d96e8e26e68d', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: 'd5e061b229448bba6d71321cff99aac9947a55d1', 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: 'e39cc7c88c199863810e4b261bc833cac4f5d883', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '17151fe90edcb037bc504f88a33bd206e684c402' })));
+    }
+    componentWillLoad() {
+        this.setInitialAttrs();
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1198,37 +982,6 @@ const XvTableRow = class {
 };
 XvTableRow.style = XvTableV2RowStyle0;
 
-const xvTableToolbarCss = ":host{display:block;font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);font-style:normal;font-weight:700;line-height:128.571%;letter-spacing:0.16px}:host .toolbar{transition:max-height 0.2s ease;overflow:hidden;max-height:96px;margin-bottom:8px}:host .butch-editing{display:flex;align-items:center;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;border-radius:3px;column-gap:var(--gap-md, 16px);background-color:var(--interactive-01, #273435);color:var(--text-on-color, var(--Text-text-on-color, #FFF));transition:max-height 0.2s ease;overflow:hidden;max-height:0}:host .butch-editing_content{flex:1;padding:var(--gap-md, 16px) 0 var(--gap-md, 16px) var(--gap-md, 16px)}:host .butch-editing_selected{padding:var(--gap-md, 16px) var(--gap-md, 16px) var(--gap-md, 16px) 0;align-self:center;text-align:right;min-width:117px}:host(.active) .toolbar{max-height:0;margin-bottom:0}:host(.active) .butch-editing{max-height:96px}";
-const XvTableV2ToolbarStyle0 = xvTableToolbarCss;
-
-const XvTableToolbar = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.selected = 0;
-    }
-    async setSelectedItems(selected) {
-        let count = 0;
-        selected.forEach(row => {
-            var _a, _b, _c;
-            // not count header
-            if (row.name === 'header')
-                return;
-            // count row if it's not group
-            if (!((_a = row.group) === null || _a === void 0 ? void 0 : _a.isMainRow)) {
-                count++;
-                return;
-            }
-            // count selected group rows
-            count += (((_c = (_b = row.group) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.length) || 0);
-        });
-        this.selected = count;
-    }
-    render() {
-        return (h(Host, { key: 'ff7f4169161d758dc2d9ecac906fe8f80e1aa0cc', class: { active: !!this.selected } }, h("div", { key: '687aacbb14767fc360a5ebd77333e5cc7d4991e2', class: "toolbar" }, h("slot", { key: '4eb52c981bd1193fb0c4f5c9b2f541329fafe010' })), h("div", { key: 'eb51c8c6d54629623fbf52d930b230067d2199de', class: "butch-editing" }, h("div", { key: '68fea62d37eb5b82ff3536a7bc2117c1d3b40ac7', class: "butch-editing_content" }, h("slot", { key: '513837fd458c511472704e11313345882845e33e', name: "actions" })), h("div", { key: '4e81903ecd38b1c84cede6c0ab64725b47d19dd6', class: "butch-editing_selected" }, this.selected, " ", this.selected === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'))));
-    }
-};
-XvTableToolbar.style = XvTableV2ToolbarStyle0;
-
 var TAB_TAGS;
 (function (TAB_TAGS) {
     TAB_TAGS["TABS"] = "xv-tabs-v2";
@@ -1240,13 +993,13 @@ var TABS_VATIANT;
     // other variants will be here
 })(TABS_VATIANT || (TABS_VATIANT = {}));
 
-const xvTabsCss = ":host(.xv-tabs){display:flex;flex-direction:column}:host(.xv-tabs) .tab-headers{display:flex}:host(.xv-tabs) .tab-headers button{background:none;padding:11px var(--gap-md, 16px);cursor:pointer;font:inherit;transition:border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;position:relative;border:2px solid transparent;border-bottom-color:var(--border-border-subtle-01, #D1D1D1);background-blend-mode:multiply;color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:18px;letter-spacing:0.16px;height:40px;white-space:nowrap}:host(.xv-tabs) .tab-headers button:after{content:\"\";position:absolute;transition:background-color 0.3s ease, width 0.3s ease;top:100%;left:0;right:0;width:0;height:2px;background-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers button:focus{outline:none;border:2px solid var(--border-border-subtle-01, #D1D1D1)}:host(.xv-tabs) .tab-headers button:hover{border-bottom-color:var(--border-strong-01, #8B8B8B)}:host(.xv-tabs) .tab-headers button.active{color:var(--text-primary, #333);font-weight:700}:host(.xv-tabs) .tab-headers button.active:after{width:100%}:host(.xv-tabs) .tab-headers button.active:focus{border-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers button:disabled{color:var(--text-on-color-disabled, #8B8B8B);border-bottom-color:var(--border-disabled, #D1D1D1);cursor:not-allowed}:host(.xv-tabs) .tab-headers button:disabled:after{background-color:var(--border-disabled, #D1D1D1)}:host(.xv-tabs) .tab-content-wrapper{position:relative;overflow:hidden;transition:height 0.3s ease;padding:var(--gap-md, 16px)}:host(.xv-tabs) ::slotted(xv-tab-v2){position:absolute;opacity:0;transition:opacity 0.3s ease;width:100%;pointer-events:none}:host(.xv-tabs) ::slotted(xv-tab-v2.active){position:relative;opacity:1;pointer-events:auto}";
+const xvTabsCss = ":host(.xv-tabs){display:flex;flex-direction:column}:host(.xv-tabs) .tab-headers{display:flex}:host(.xv-tabs) .tab-headers_tab{background:none;padding:11px var(--gap-md, 16px);cursor:pointer;font:inherit;transition:border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;position:relative;border:2px solid transparent;border-bottom-color:var(--border-border-subtle-01, #D1D1D1);background-blend-mode:multiply;color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:18px;letter-spacing:0.16px;height:40px;white-space:nowrap}:host(.xv-tabs) .tab-headers_tab:after{content:\"\";position:absolute;transition:background-color 0.3s ease, width 0.3s ease;top:100%;left:0;right:0;width:0;height:2px;background-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers_tab:focus{outline:none;border:2px solid var(--border-border-subtle-01, #D1D1D1)}:host(.xv-tabs) .tab-headers_tab:hover{border-bottom-color:var(--border-strong-01, #8B8B8B)}:host(.xv-tabs) .tab-headers_tab.active{color:var(--text-primary, #333);font-weight:700}:host(.xv-tabs) .tab-headers_tab.active:after{width:100%}:host(.xv-tabs) .tab-headers_tab.active:focus{border-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers_tab:disabled{color:var(--text-on-color-disabled, #8B8B8B);border-bottom-color:var(--border-disabled, #D1D1D1);cursor:not-allowed}:host(.xv-tabs) .tab-headers_tab:disabled:after{background-color:var(--border-disabled, #D1D1D1)}:host(.xv-tabs) .tab-headers_btn{outline:none;width:40px;height:40px;background:none;border:none;cursor:pointer;position:relative;transition:0.25s ease-in-out opacity}:host(.xv-tabs) .tab-headers_btn:before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;border:solid currentColor;border-width:0 2px 2px 0;display:inline-block;padding:5px;transform:translate(-50%, -50%) rotate(45deg)}:host(.xv-tabs) .tab-headers_btn:active{opacity:0.3}:host(.xv-tabs) .tab-headers_btn.prev:before{transform:translate(-50%, -50%) rotate(135deg)}:host(.xv-tabs) .tab-headers_btn.next:before{transform:translate(-50%, -50%) rotate(-45deg)}:host(.xv-tabs) .tab-content-wrapper{position:relative;overflow:hidden;padding:var(--gap-md, 16px) 0}:host(.xv-tabs) ::slotted(xv-tab-v2){position:absolute;opacity:0;max-height:0;transition:max-height 0.5s ease;width:100%;pointer-events:none}:host(.xv-tabs) ::slotted(xv-tab-v2.active){position:relative;opacity:1;overflow-y:auto;pointer-events:auto;max-height:1000px}:host(.xv-tabs) .xv-tabs_empty{display:block;text-align:center;margin:20px auto;font-size:var(--fz-xl);color:var(--text-primary)}:host([loading]){display:flex;align-items:center;justify-content:center;min-height:300px}";
 const XvTabsV2Style0 = xvTabsCss;
 
 const XvTabs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.tabSelect = createEvent(this, "tabSelect", 7);
+        this.activeChange = createEvent(this, "activeChange", 7);
         /**
          * Index of active tab
          */
@@ -1255,62 +1008,56 @@ const XvTabs = class {
          * Variant of tabs from TABS_VATIANT enum
          */
         this.variant = TABS_VATIANT.DEFAULT;
-        /**
-         * for animate the tab content
-         */
-        this.height = 0;
         /**
          * local variable for tab labels collection
          */
         this.tabElements = [];
-    }
-    /**
-     * Watch active tab changes to animate content height
-     */
-    onActiveTabChanged() {
-        this.setHeight();
-    }
-    collectTabs() {
-        if (!this.tabElements.length) {
-            this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
-        }
+        this.collectTabs = () => {
+            if (!this.tabElements.length) {
+                this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
+                this.tabElements.forEach((tab) => {
+                    if (tab.hasAttribute('name') && !this.active) {
+                        this.active = tab.getAttribute('name');
+                    }
+                });
+            }
+        };
     }
     updateTabClasses() {
         this.tabElements.forEach((tab, i) => {
-            tab.classList.toggle('active', i === this.active);
+            tab.classList.toggle('active', (tab.getAttribute('name') || `${i}`) === `${this.active}`);
         });
     }
-    setHeight() {
-        requestAnimationFrame(() => {
-            var _a;
-            const tab = this.tabElements[this.active];
-            if (tab) {
-                const content = (_a = tab.shadowRoot) === null || _a === void 0 ? void 0 : _a.host;
-                this.height = (content === null || content === void 0 ? void 0 : content.scrollHeight) || 0;
-            }
-        });
-    }
-    handleTabClick(index) {
-        if (index === this.active)
+    handleTabClick(active) {
+        if (active === this.active)
             return;
-        this.active = index;
-        this.setHeight();
-        this.tabSelect.emit(this.active);
+        this.active = active;
+        this.activeChange.emit(Number(this.active) || this.active);
+    }
+    setTab(count = 1) {
+        const currentIdx = this.tabElements.findIndex((tab, i) => (tab.getAttribute('name') || `${i}`) === `${this.active}`);
+        const tab = this.tabElements[currentIdx + count];
+        if (tab && !(tab === null || tab === void 0 ? void 0 : tab.hasAttribute('disabled'))) {
+            this.active = tab.getAttribute('name') || `${currentIdx + count}`;
+        }
     }
     render() {
-        return (h(Host, { key: '490001d8e74c759e11a2fc99c545d0a3429465f6', class: "xv-tabs", variant: this.variant }, h("div", { key: 'bd5210a9e26775c56b14fb4d0a330ed472033403', class: "tab-headers", role: "tablist" }, this.tabElements.map((tab, index) => (h("button", { role: "tab", disabled: !!tab.getAttribute('disabled') || !!(tab === null || tab === void 0 ? void 0 : tab.disabled), class: { active: index === this.active }, onClick: () => this.handleTabClick(index) }, tab.getAttribute('label') || `Tab ${index + 1}`)))), h("div", { key: '0e15189ae37d5ac1431545df44a4c6500694a2fc', class: "tab-content-wrapper", style: { height: `${this.height}px` }, role: "tabpanel", tabindex: -1 }, h("slot", { key: '18dc32e8d6f6576b355786d6c959582df87a59b5' }))));
+        var _a, _b, _c;
+        if (this.loading) {
+            return (h(Host, { class: "xv-tabs", variant: this.variant }, h("xv-loader-v2", { size: SIZE_VAR.XL })));
+        }
+        return (h(Host, { class: "xv-tabs", variant: this.variant }, h("div", { class: "tab-headers", role: "tablist" }, h("button", { hidden: !this.showArrows || !((_a = this.tabElements) === null || _a === void 0 ? void 0 : _a.length), "aria-label": "Previous", class: "tab-headers_btn prev", onClick: () => this.setTab(-1) }), ((_b = this.tabElements) === null || _b === void 0 ? void 0 : _b.length) ? this.tabElements.map((tab, index) => (h("button", { role: "tab", disabled: !!tab.getAttribute('disabled') || !!(tab === null || tab === void 0 ? void 0 : tab.disabled), class: {
+                'tab-headers_tab': true,
+                active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,
+            }, onClick: () => this.handleTabClick(tab.getAttribute('name') || `${index}`) }, tab.getAttribute('label') || `Tab ${index + 1}`))) : this.emptyMessage && h("p", { class: "xv-tabs_empty" }, this.emptyMessage), h("button", { "aria-label": "Next", hidden: !this.showArrows || !((_c = this.tabElements) === null || _c === void 0 ? void 0 : _c.length), class: "tab-headers_btn next", onClick: () => this.setTab(1) })), h("div", { class: "tab-content-wrapper", role: "tabpanel", tabindex: -1 }, h("slot", { onSlotchange: this.collectTabs }))));
     }
     componentWillLoad() {
-        this.collectTabs();
-        this.setHeight();
+        // this.collectTabs();
     }
     componentDidRender() {
         this.updateTabClasses();
     }
     get el() { return getElement(this); }
-    static get watchers() { return {
-        "active": ["onActiveTabChanged"]
-    }; }
 };
 XvTabs.style = XvTabsV2Style0;
 
@@ -1333,7 +1080,7 @@ const XvTag = class {
         this.closeClick.emit(e);
     }
     render() {
-        return (h(Host, { key: 'cca59dceeb566fa038234f7962be22424dc9a35e', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '5d7bedbbbb7ce916b1aa5efda7cebe957b985762', class: "xv-tag_content" }, h("slot", { key: '300db1eecac2be8508b328cd869599af162c04a8' })), this.closeable && (h("button", { key: '4d7eacbb1d380ecf664780e4466129327563bace', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
+        return (h(Host, { key: 'e7015e92932ed5f4d6d3acb68ab63628e4a4bcb6', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '87a56eb93d86027dfcfa6c2e0edc22defe7628b4', class: "xv-tag_content" }, h("slot", { key: 'b71fb28fdbf29da81d8cc701f7a9b4bf0fc23c4d' })), this.closeable && (h("button", { key: 'f99c2fc938973a3809a355a8621cf161e185c46c', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
     }
 };
 XvTag.style = XvTagV2Style0;
@@ -1351,6 +1098,7 @@ const XvTextInputV2Style0 = xvTextInputCss;
 const XvTextInput = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -1364,12 +1112,17 @@ const XvTextInput = class {
         this.value = '';
         this.disabled = false;
         this.readonly = false;
+        this.loading = false;
         this.handleInput = (e) => {
             const target = e.target;
             this.value = target.value;
+            this.valueChange.emit(this.value);
             this.internals.setFormValue(target.value);
         };
         this.getControlIcon = (status) => {
+            if (this.loading) {
+                return h("xv-loader-v2", { class: "control_icon", size: SIZE_VAR.XS });
+            }
             switch (status) {
                 case TextInputStatus.ERROR: {
                     return (h("svg", { class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" })));
@@ -1381,7 +1134,7 @@ const XvTextInput = class {
         };
     }
     render() {
-        return (h(Host, { key: '4a16cd6ea36fd074e118bc262bf2aa50a32bbc90', name: this.name, class: "xv-text-input", role: "textbox", tabindex: this.disabled ? -1 : false }, this.label && h("label", { key: 'a18f098c242b7923951ad745d8fdca68289b6a1e', class: "label" }, this.label), h("div", { key: '3fc93834180279e5dfcc4b203e6e821e13acb539', class: "control" }, h("input", { key: '5d4b743dcb4c7afff9475f69b0127b478bc6a2a1', type: "text", class: { withIcon: this.status !== TextInputStatus.DEF }, readonly: this.readonly, value: this.value, disabled: this.disabled, onInput: this.handleInput, placeholder: this.placeholder }), this.getControlIcon(this.status)), this.helper && h("p", { key: 'e24b2c111e6fdba83006493d1fc7dcdf08256880', class: "helper" }, this.helper)));
+        return (h(Host, { key: '7e773cbebf4bd3bc6c2e71f454f733de77ec2b56', name: this.name, class: "xv-text-input", role: "textbox", tabindex: this.disabled ? -1 : false }, this.label && h("label", { key: 'a28eca6e736e747c5730d2b517cbcf33178a53af', class: "label" }, this.label), h("div", { key: 'c432a6ca83a94d1f160745b1f0f2e1a532441ccd', class: "control" }, h("input", { key: '5545a39193c180329fe382f8f9fd4aac5d79adcd', type: "text", class: { withIcon: this.status !== TextInputStatus.DEF }, readonly: this.readonly, value: this.value, disabled: this.disabled, onInput: this.handleInput, placeholder: this.placeholder }), this.getControlIcon(this.status)), this.helper && h("p", { key: 'ab7aee3589f336f3899afef307845466c4eee41e', class: "helper" }, this.helper)));
     }
     componentWillLoad() {
         this.internals.setFormValue(this.value);
@@ -1391,7 +1144,7 @@ const XvTextInput = class {
 };
 XvTextInput.style = XvTextInputV2Style0;
 
-const xvTooltipCss = ":host{position:relative;display:inline-block;cursor:pointer;line-height:0.5}:host::before,:host::after{position:absolute;opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;z-index:10}:host::before{content:attr(tooltip);background:var(--background-inverse, #333);color:var(--icon-inverse, #fff);padding:var(--gap-sm, 5px) var(--gap-md, 16px);border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw;font-family:var(--fz-body, Tahoma);font-size:var(fz-md, 14px);font-weight:400;line-height:18px;letter-spacing:0.16px}:host::after{content:\"\";border:6px solid transparent}:host(:hover)::before,:host(:hover)::after,:host(:focus)::before,:host(:focus)::after{opacity:1;visibility:visible}:host(.xv-tooltip_top)::before{bottom:100%;left:50%;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_top)::after{bottom:100%;left:50%;border-top-color:var(--background-inverse, #333);transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_top-left)::before{bottom:100%;left:0;transform:translateY(-5px)}:host(.xv-tooltip_top-left)::after{bottom:100%;left:10px;border-top-color:black;transform:translateY(5px)}:host(.xv-tooltip_top-right)::before{bottom:100%;right:0;transform:translateY(-5px)}:host(.xv-tooltip_top-right)::after{bottom:100%;right:10px;border-top-color:var(--background-inverse, #333);transform:translateY(5px)}:host(.xv-tooltip_bottom)::before{top:100%;left:50%;transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_bottom)::after{top:100%;left:50%;border-bottom-color:black;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_bottom-left)::before{top:100%;left:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-left)::after{top:100%;left:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_bottom-right)::before{top:100%;right:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-right)::after{top:100%;right:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_left)::before{right:100%;top:50%;transform:translateY(-50%) translateX(-5px)}:host(.xv-tooltip_left)::after{right:100%;top:50%;border-left-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::before{left:100%;top:50%;transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::after{left:100%;top:50%;border-right-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(-5px)}";
+const xvTooltipCss = ":host{position:relative;display:inline-block;cursor:pointer;line-height:0.5}:host::before,:host::after{position:absolute;opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out 0.5s, transform 0.2s ease-in-out 0.5s;z-index:10}:host::before{content:attr(tooltip);background:var(--background-inverse, #333);color:var(--icon-inverse, #fff);padding:var(--gap-sm, 5px) var(--gap-md, 16px);border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw;font-family:var(--fz-body, Tahoma);font-size:var(fz-md, 14px);font-weight:400;line-height:18px;letter-spacing:0.16px}:host([multiline])::before{white-space:normal;min-width:300px}:host::after{content:\"\";border:6px solid transparent}:host(:hover)::before,:host(:hover)::after,:host(:focus)::before,:host(:focus)::after{opacity:1;visibility:visible}:host(.xv-tooltip_top)::before{bottom:100%;left:50%;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_top)::after{bottom:100%;left:50%;border-top-color:var(--background-inverse, #333);transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_top-left)::before{bottom:100%;left:0;transform:translateY(-5px)}:host(.xv-tooltip_top-left)::after{bottom:100%;left:10px;border-top-color:black;transform:translateY(5px)}:host(.xv-tooltip_top-right)::before{bottom:100%;right:0;transform:translateY(-5px)}:host(.xv-tooltip_top-right)::after{bottom:100%;right:10px;border-top-color:var(--background-inverse, #333);transform:translateY(5px)}:host(.xv-tooltip_bottom)::before{top:100%;left:50%;transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_bottom)::after{top:100%;left:50%;border-bottom-color:black;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_bottom-left)::before{top:100%;left:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-left)::after{top:100%;left:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_bottom-right)::before{top:100%;right:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-right)::after{top:100%;right:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_left)::before{right:100%;top:50%;transform:translateY(-50%) translateX(-5px)}:host(.xv-tooltip_left)::after{right:100%;top:50%;border-left-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::before{left:100%;top:50%;transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::after{left:100%;top:50%;border-right-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(-5px)}";
 const XvTooltipV2Style0 = xvTooltipCss;
 
 const XvTooltip = class {
@@ -1405,11 +1158,11 @@ const XvTooltip = class {
         this.position = 'top';
     }
     render() {
-        return (h(Host, { key: '3cbaa0f4193f8d41adfa47fac25a9e77b4deaa0d', tooltip: this.message, class: `xv-tooltip_${this.position}` }, h("slot", { key: '176f13a692ca159849dacf780030f1a71f22de87' }, h("svg", { key: '334581c0388fcf67337605189461f8d7433fbf8c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: 'd0bbcb1d8ed14bcc183d6dc3277873702510900e', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
+        return (h(Host, { key: 'caeab002ff02c6b43a1eefc52a59f0f0f6d5c75a', tooltip: this.message, class: `xv-tooltip_${this.position}` }, h("slot", { key: '9d873d03af5225e4f2d1cc607221044499c59485' }, h("svg", { key: 'b6a29a947bdcb7903e526c430cbbd6486ec496e4', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '43144f435eeaad899b446273309719e99283240f', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
     }
 };
 XvTooltip.style = XvTooltipV2Style0;
 
-export { XvAccordion as xv_accordion_v2, XvAccordionItem as xv_accordion_v2_item, XvButton as xv_button_v2, XvCard as xv_card_v2, XvCheckbox as xv_checkbox_v2, XvDropdown as xv_dropdown_v2, XvDropdownItem as xv_dropdown_v2_item, Xvfooter as xv_footer, XvHeader as xv_header, XvLink as xv_link_v2, XvLoader as xv_loader_v2, XvModal as xv_modal_v2, XvNotification as xv_notification_v2, XvOverflowMenu as xv_overflow_menu_v2, XvOverflowMenuItem as xv_overflow_menu_v2_item, XvProgressIndicator as xv_progress_indicator_v2, XvProgressIndicatorItem as xv_progress_indicator_v2_item, XvTab as xv_tab_v2, XvTable as xv_table_v2, XvTableCol as xv_table_v2_col, XvTableExpand as xv_table_v2_expand, XvTableHeaderRow as xv_table_v2_header_row, XvTableRow as xv_table_v2_row, XvTableToolbar as xv_table_v2_toolbar, XvTabs as xv_tabs_v2, XvTag as xv_tag_v2, XvTextInput as xv_text_input_v2, XvTooltip as xv_tooltip_v2 };
+export { XvAccordion as xv_accordion_v2, XvAccordionItem as xv_accordion_v2_item, XvButton as xv_button_v2, XvCard as xv_card_v2, XvCheckbox as xv_checkbox_v2, XvDropdown as xv_dropdown_v2, XvDropdownItem as xv_dropdown_v2_item, Xvfooter as xv_footer, XvHeader as xv_header, XvLink as xv_link_v2, XvLoader as xv_loader_v2, XvModal as xv_modal_v2, XvNotification as xv_notification_v2, XvOverflowMenu as xv_overflow_menu_v2, XvOverflowMenuItem as xv_overflow_menu_v2_item, XvProgressIndicator as xv_progress_indicator_v2, XvProgressIndicatorItem as xv_progress_indicator_v2_item, XvTab as xv_tab_v2, XvTable as xv_table_v2, XvTableCell as xv_table_v2_cell, XvTableExpand as xv_table_v2_expand, XvTableRow as xv_table_v2_row, XvTabs as xv_tabs_v2, XvTag as xv_tag_v2, XvTextInput as xv_text_input_v2, XvTooltip as xv_tooltip_v2 };
 
-//# sourceMappingURL=xv-accordion-v2_28.entry.js.map
+//# sourceMappingURL=xv-accordion-v2_26.entry.js.map