xv-webcomponents 0.1.29 → 0.1.31

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 {
@@ -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: '6f956a9fc7685d1f9bf4bdd0cf209955827a6cdf', size: this.size, class: "xv-dropdown", role: "combobox", tabindex: this.disabled ? -1 : false }, h("label", { key: '1b0ba7ffee64cfc5bc1aa551520f63f3b12d2e3f', class: "label" }, h("slot", { key: 'cd5f0834db24ffa22254b3d41f7ebe83958b4379', name: "label" }, this.label)), h("div", { key: '861d9f40dcc9aa80df3e69be819d787bfacb1af7', 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: '70bb351d4b7c8dbd9dbcac502a6d34dd5140bcad', class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { key: '5762de3f8edb0409873e9326647da50170fc5d2b', 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: '9b2e79816102116236f88f8af5d31fd32e2763ce', class: "control_icon warning", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { key: 'aa5c82bd35ee1fed90e9175f3a43bf86afdf056d', 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: '9910f9e62f1e92a6236cd34ce5183f330a92c92f', 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: '64e10f0154a51bf83b08362640887bcdaee2bea8', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && h("div", { key: '1be73390412c2ba192deddbd55bc2cf3e5e8bbf6', class: "options" }, h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (h("p", { key: '4f914e125d5366ee705c82df9991051eec7c0124', class: "helper" }, this.error || this.warning || this.helper))));
     }
     componentWillLoad() {
         this.setDefaultValues();
@@ -360,7 +359,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: '1788b565ef78a5bcc7a0fc1eb1b43fc4f6bbea75', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, h("slot", { key: 'f449f4f022abf298aa3766641864e5ccdf2fec96' }), this.selected && h("span", { key: 'c5ad6f42c36a63168c396130462e51e94e2a59df', class: "checkmark" })));
     }
     componentWillLoad() {
         if (!this.value)
@@ -389,7 +388,7 @@ const Xvfooter = class {
         }
     }
     render() {
-        return (h("footer", { key: '1d62a179df61f0f8ae16112d1877d47078c0f694' }, h("div", { key: 'ebe950dd52aa300f2f6000e3e240384e44c351f0', innerHTML: this.htmlContent })));
+        return (h("footer", { key: '388feeecaff3930827b9917e7cb7a29c3f1abf6c' }, h("div", { key: 'd1c793a6d35ceca9ba7ef1285e4bbe41761035c4', innerHTML: this.htmlContent })));
     }
     get el() { return getElement(this); }
 };
@@ -423,7 +422,7 @@ 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: '4d63b5a2a761c9572837b3a7b74e6f7acb821e87', id: "nav-container", class: "xv-header" }, h("nav", { key: '75d4cbfc57c1ba5959eee023d5da87d8fa2e1593', class: "navbar navbar-default navbar-fixed-top backend-force-relative" }, h("div", { key: 'ae0a155619a1f0f67c105bd0123643a918cfdcc8', class: "container" }, h("div", { key: '71fcc35dd557a834882fff2d389728574288ce6f', class: "row" }, h("div", { key: '92b8baa2f987983e2821d97cc211592fc57b1be0', class: "col-sm-3 col-xs-3 col-xxs-4 no-padding-right" }, h("div", { key: 'f5937c804669745b157929e6764f7b60d9c82001', class: "navbar-header" }, h("button", { key: '45f2f7f73e0410e61a5a2251fbf16339eaedec60', class: "btn btn-default navbar-toggle pull-left navbar-btn", "data-toggle": "collapse", "data-target": "#main-menu" }, h("i", { key: '13c9668bb1ee99479563d0a9e7ac377f7b8b2388', class: "fa fa-bars fa-lg", "aria-hidden": "true" })), h("div", { key: '62af63881a860c16340d8ba69c5c0a621579969f', class: "visible-xs-inline" }, h("a", { key: 'c10b4b30eabcb53f157a4643352929bc2689bd3e', href: "https://www.crossvertise.com/", class: "navbar-brand" }, h("img", { key: 'ccaf23d0a4ff0bf5e5b6dead006d30c56508ed80', src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg", alt: "Crossvertise" }))), h("div", { key: '896419cb1570f0f096e8cb6ebb6cfe265e23bedf', class: "hidden-xs" }, h("a", { key: '5a990ed4585e9a5ae15363b6cc143f40bd912c79', href: "https://www.crossvertise.com/", class: "navbar-brand" }, h("img", { key: '55ca09baacafac12f9ac5b8ebdf0a76eb6665324', loading: "lazy", src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg", alt: "Crossvertise" }))))), h("div", { key: 'febc736394aee82099258ed2fbcb8e438391d879', class: "col-sm-9 col-xs-9 col-xxs-8 no-padding-left" }, h("ul", { key: 'a44a208987969c1ba9622b85368948ef42ad4fbb', class: "nav nav-pills nav-meta pull-right" }, h("li", { key: 'a1aae4e1229b0900ecd0cd9377fedf1c8285b0d0' }, h("a", { key: '8010c9ae98cac607121f49293cbd8b30e86b5921', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, h("i", { key: '67dc50ff933034309d81211a0990e0c50f268ff5', class: "fa fa-user" }), h("i", { key: '0b17ff7fa8c5dc1dfc9d43ec13cc4811ad382503', class: "fa fa-exchange-alt" }))), h("li", { key: 'ac62ab6e696ebf4eb3b74afe752cfb6c2fc0f03b' }, h("a", { key: '50216c2209606afbd5dcf02398cd4ac8464e679b', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, "Kontakt"), h("a", { key: '126d9c452ebd4be95122092abf5415b4b3584c58', href: "https://www.crossvertise.com/contact", class: "btn btn-link navbar-btn hidden-xs", style: { display: 'none' } }, "Kontakt"), h("a", { key: '6fc5fee12d475ad585b2fbfdbde8d938d0f899c7', class: "btn btn-default btn-link navbar-btn visible-xs hidden-xxs", href: "#" }, h("i", { key: 'e8c7493c865fa95703e1997ddbce6cde4beccea4', class: "fa fa-phone" }))), h("li", { key: 'dad7499b9ccbfc3d2322213c138f4bdb13d4def7', class: "dropdown", id: "my-xv-menu" }, h("a", { key: 'b301eb9dc192e83b4aaad423a59ed318fd4a433a', href: "#", class: "dropdown-toggle btn btn-default navbar-btn btn-link", "data-toggle": "dropdown" }, h("i", { key: '220c92657241b5a4463eead088d798fd05ad770e', class: "fa fa-user fa-lg text-success", "aria-hidden": "true" }), "\u00A0", h("span", { key: '25fd14fe1e85a1581a3e9c9db515ba24f253bbcc', class: "hidden-xs" }, "Mein Bereich"), h("span", { key: 'e68e239541d1444960e5350fe92e97b83088e452', class: "caret" })), h("ul", { key: '63e6083836736c898ca7fe6b6200b7eff6c47ceb', class: "dropdown-menu-left dropdown-menu navbar-myxv" }, h("li", { key: 'f6667e3e6bea0b333713c6151491938ed53c11cf' }, h("a", { key: '673e250041d0ae7f2732ebba2123b3da5c43f609', href: "#" }, h("i", { key: 'c158578cf7f3d0d6778ac36870932d267bccdfdc', class: "fa fa-tachometer-alt fa-fw" }), "\u00A0Cockpitfunktionen\u00A0", h("i", { key: '9f9e397d478159e71641ba40fa2f3864cabad7d0', class: "fa fa-caret-down" }))), h("li", { key: '11ed0af1b90c116cab55b0e7746496cbf7adb25b' }, h("a", { key: '73a956381f2f300af1bf9a8fd01ec828acf0c63b', href: "#" }, h("i", { key: '8a7426207d672ea442ccbe28154d468c67f6197f', class: "fa fa-cubes" }), "\u00A0Entit\u00E4ten\u00A0", h("i", { key: '3b5cd486831b281c8b8a4a36d5471a7e83cbf34e', class: "fa fa-caret-down" }))), h("li", { key: '79f8ddcbbffcbee4947d3df7c19fe6aa699c9563', role: "separator", class: "divider" }), h("li", { key: 'cbb65c4782fba2f3621dd7fa302ea40e8ecabe1c' }, h("a", { key: 'd4200246a2fe6e7bfa7e05d8779e99111f1b9880', href: "#" }, h("i", { key: '67a4401e9f0b8a7b9cde06ab01639fc947c96468', class: "fa fa-user" }), "\u00A0Mein Crossvertise\u00A0", h("span", { key: 'e335d4f6039246234d6d3509ff4324de299cb030', class: "badge" }, "0"), h("i", { key: 'da05388b188f52a94ea9637744dd04fadced8b20', class: "fa fa-caret-down" }))), h("li", { key: '49ad09eb586654a9eafcabce1485941d36f6e5dc' }, h("a", { key: '10c547f4a1c65393f231a0cf955a1d9c83eccb14', href: "https://www.crossvertise.com/de-de/mycrossvertise/account/logoff?returnUrl=https%3A%2F%2Fwww.crossvertise.com" }, h("i", { key: '3f77d7d4f6137654aa0c2bb8dda8929a859540f3', class: "fa fa-sign-out-alt fa-fw", "aria-hidden": "true" }), "\u00A0Logout")))), h("li", { key: '3f5ad5d2175e19002c341861f96e9fe44a53c8eb', class: "visible-sm-block visible-xs-block hidden-xxs" }, h("a", { key: 'cafbcfb763a6cb5550c061e2543c97993c94a5aa', class: "btn btn-default navbar-btn btn-link", "data-toggle": "collapse", "data-target": "#search-collapse" }, h("i", { key: '0882b7cee2b9c6ee5be389122c1a06354f39e555', class: "fa fa-search", "aria-hidden": "true" }))), h("li", { key: '06b5c2aa09d92336a22a5edbbfaf30f7634f5196', class: "hidden-md hidden-lg" }, h("a", { key: 'e936c613fd86cc1b16392625c7881b931ad716df', 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: '9ed2c56a75d7d48cc9abfd8502e5a9305741d16a', class: "fa fa-user fa-lg", "aria-hidden": "true" }), h("span", { key: '5a662afe04aeee03a526f03c42a8414de7741349', class: "hidden-xs" }, "Login"))), h("li", { key: 'f4da3a511859cfbb88b6bd1ae189cb475825d84c', class: "hidden-xs hidden-sm" }, h("a", { key: '365b8b92a8dd5ae78309849b370c94b8efa5e35d', role: "button", class: "btn btn-default navbar-btn btn-link", "data-toggle": "modal", "data-target": "#login-modal" }, h("i", { key: '97e6c4304cff28c40f35289fa9e15771bc6c59a4', class: "fa fa-user fa-lg", "aria-hidden": "true" }), h("span", { key: '136f6a36a29204f744e13e1c500b97c4af9a34b9' }, "Login"))), h("li", { key: 'cc4dccd4e0af199910dadc06fdbe6a0184177757', class: "hidden-xs" }, h("a", { key: '38a2ac77bc8d4dbeb6488ae6cf60bd0432231354', class: "btn btn-default navbar-btn btn-link", href: "https://market.crossvertise.com/de-de/mycrossvertise/account/register" }, h("span", { key: '56573d5cc1550ee1e829f65481614063854f3259' }, "Registrieren"))), h("li", { key: 'a4e91f3bb7ac567bb9b306187eb6fabce72e0fb9', class: "navbar-divider hidden-xs" }), h("li", { key: 'f74bb3d0f4ab2d272fa5a0d76b693ca3e6549c69' }, h("a", { key: '8e74a25bd8e9c411b243decfbb0f502dd163200c', class: "btn btn-success navbar-btn", href: "https://market.crossvertise.com/de-de/mycrossvertise/shoppingcart/activecart" }, h("span", { key: 'bf4212c069cc707a776641fb7107076f389b4059', class: "xv-font-icon-warenkorb fa-lg fa-fw", "aria-hidden": "true" }), h("span", { key: 'c7b98e2d51e372b201e2ad6573d4711680bd39ca', class: "hidden-xs hidden-sm" }, "\u00A0Warenkorb\u00A0"), h("span", { key: 'f8afa9445884dde4a3340b23d9072dd412ebf0fc', class: "badge badge-success" }, "0"))))))), h("div", { key: 'c5763a108218073004cacc860ce5475950ff537b', class: "collapse hidden-md hidden-lg", id: "search-collapse" }, h("div", { key: '4e1f4d4c32accf64286ee5481eb1725971654c2d', class: "container" }, h("form", { key: '7f800689b66c89f30d2f1213892eb854c7999cc5', action: "https://market.crossvertise.com/de-de/media/search", class: "navbar-form", method: "get", role: "search" }, h("div", { key: '75f6787fec9f6386eb3ed31b5a766fdc11126114', class: "input-group" }, h("input", { key: '45fb8d3c671099f62577494b28942f6757bcbc40', class: "form-control", name: "Q", placeholder: "Suche", type: "text", autocomplete: "off" }), h("span", { key: '62b2804ccf299a3e6235eb8e9c7856bdba616eec', class: "input-group-btn force-full-width" }, h("button", { key: 'c30f2347d41b5540a000819b189b941823672e8d', class: "btn btn-default search-addon", type: "submit" }, h("i", { key: 'fe74c738cb7bcc233e94c6a79ad17ef5d40e77bc', class: "fa fa-search", "aria-hidden": "true" })))))))), h("div", { key: 'baa87485eae18301b753121c117f64e9e545b146', innerHTML: this.htmlContent })));
     }
     get el() { return getElement(this); }
 };
@@ -446,7 +445,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: 'd4b3e206cdaca75bdd585014363a5b4aedc2db5d', class: `xv-link_${this.variant}` }, h("a", { key: 'ad7d185ec3985d2a313b1b4ad82d90453f102548', href: this.href, onClick: this.preventLinkHandler.bind(this), class: `xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`, target: this.target }, h("slot", { key: '67c31b93b0679a3696b413fa680410b33dc1cdc9', name: "icon-left" }), h("slot", { key: '874587336e2e8031a6e7f4dd5cf77854c3c08493' }), h("slot", { key: 'f9c92f41bde2d2f5147cc6ca06b09d80a573a50c', name: "icon-right" }))));
     }
 };
 XvLink.style = XvLinkV2Style0;
@@ -478,7 +477,7 @@ 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: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 {
@@ -537,7 +536,7 @@ const XvModal = class {
     }
     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: '42e2bddb4c2af56814a311749b7637de2857e860', role: "dialog", size: this.size, id: this.el.id }, h("slot", { key: '83627e8bc9007f469a072b05a5f56cf1cf90dac7', name: "trigger", onSlotchange: this.setupTrigger }), h("div", { key: 'c04488c89bef869fa069cd82fde93da1aae30675', class: { backdrop: true }, onClick: this.onBackdropClick }, h("div", { key: '335da4c24ba63b3f2f948d4a54adfdc61fca3d3d', class: "modal" }, h("button", { key: '1180a615116846931e3204d0f640a91f27034fc6', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), h("div", { key: '6448c7fd6b8af2912f13844047fb26fab622ad19', class: "modal_header" }, h("slot", { key: '33196b3f0b520050aba79c17b49a9c90b1c8d5e0', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && h("h5", { key: '60769656e4dc3ccbbf091d72d071c9b341f9b3ab', class: "modal_header__title" }, this.el.title))), h("div", { key: '408b186993981659df3984f4954cf15a26359307', class: "modal_content" }, h("slot", { key: '9f4251a450f1ff7973003724bb068f079752d13d' })), h("div", { key: '1e364e6de6fc6b38e7329493b9725d01b8858487', class: "modal_footer" }, h("slot", { key: 'a18acef4f02937f42e2bc8a0ead89561c4907cb3', name: "footer" }))))));
     }
     disconnectedCallback() {
         this.removeTriggerListener();
@@ -584,7 +583,7 @@ 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: 'd7d5cf361f87d6775e6919772014d4372f5f42c5', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), h("div", { key: 'f8b31c8585336a933fc2af24a373fc77a3f3eeba', class: "content" }, h("div", { key: '5b04c4ef61781fcf1d03b5129508cad02f8ccc1d', class: "content_wrapper" }, this.el.title && h("h5", { key: '6a69653ed2610c956c72bf81c1ad8c539cd45595', class: "content_title" }, this.el.title), h("slot", { key: '02c8a5ee16553a952e771aa52f6d7c9d76c275e0' })), h("slot", { key: 'a31913d9e81f3291b722b1df4ad62ef3518f3003', name: "footer" })), this.dismissible && h("button", { key: '0cbd353dc22938fcbdbe6d03f8304493768545a5', class: "close", onClick: this.closeHandle })));
     }
     static get assetsDirs() { return ["xv-notification/icons"]; }
     get el() { return getElement(this); }
@@ -644,7 +643,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: '7d1ce5178923330d0b2baa98978481234550147b', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, h("button", { key: 'c5761d536a97ff749bb199e2af16bf2af24da40a', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, h("svg", { key: 'adb9c65c2d63ced81e308c37ffcbd5975da6162a', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, h("path", { key: 'ff8a77b3cdac1889f3dc7c4a9b0f0ddf5809196e', 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: '315c4fcf3137fce656bfca55f7b807649728c7f9', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, h("slot", { key: 'dccf2b51c68e895e85c46b6f3b1b688ec26da7b3' }))));
     }
     componentDidLoad() {
         this.openChangeHandle();
@@ -681,7 +680,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: '85b9cd385b30e646dc170e130e31e5773917b057', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, h("slot", { key: 'fe0128d66d9b500c685d0eafa231f1a4f099b8db' })));
     }
 };
 XvOverflowMenuItem.style = XvOverflowMenuV2ItemStyle0;
@@ -756,7 +755,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: '8f050bb2255b64fbaae593053ac4cc9c912f538a', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: 'c311395c02fa84b73746bd5d2a7074f315f220d3' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -774,7 +773,7 @@ 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: '2298819d5ff22c59545a1eb19539f9f61e9224dd', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: '4d9c5325746cf1b88fe64bfcc81b9a79aaef30de', class: "line" }), h("span", { key: 'e9ef0a957c1fe89d3ea6a204f65ae274867b773a', class: "icon" }, h("svg", { key: 'e7a77f7ecbc69aa8a304a8cfc5d09dd9ebb8a10b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: '438cab4fd260cf07bf3392faac03107fab7b0adb', 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: '5cc4069d5d3862237d7deb1c4c06063e2175f8e1', class: "label" }, h("slot", { key: '393bd83d59a4f17c603c8fcdcb9fc649500850c5' }))));
     }
     get el() { return getElement(this); }
 };
@@ -789,407 +788,161 @@ const XvTab = class {
         this.disabled = false;
     }
     render() {
-        return h(Host, { key: 'b3991bf63fb73f2c39670477652dfa5b40630126', disabled: this.disabled }, h("slot", { key: 'a5dd5a983a13e97be7d925de669461226dc296c0' }));
+        return h(Host, { key: '3dcd55f79d9c95dc54efd7d2547470b61f8bd091', disabled: this.disabled }, h("slot", { key: '72ea7a00510f9a3baa35e11512ab22d1800fdf8c' }));
     }
 };
 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-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-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}:host([size=sm]){--xv-table-padding-y:10px}:host([size=lg]){--xv-table-padding-y:21px}:host([size=xl]){--xv-table-padding-y:31px}";
 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');
-                }
-            });
-        };
-    }
-    handleSetColorSchema() {
-        this.setRowProps();
+        this.selected = new Map();
+        this.selectedCount = 0;
     }
-    listenSelectableHandle() {
-        if (this.selectable) {
-            this.el.addEventListener('checkedChange', this.handleCheckedChange);
+    handleSelectRow({ 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: '98ad681acc0e04bf0c1bb819ab012b3ea22e04c6', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: 'b4315a19b272218842902dfe9ad73fc878e29530', name: "title" }, !!this.el.title && h("h2", { key: 'c2a7a7d1b75206f13475443d31c6554cf80cc91f', class: "xv-table-title" }, this.el.title)), h("slot", { key: '1d3f709b9f6bfb6972eacbb34ae310da4c71ccc9', name: "toolbar" }), h("div", { key: '0653df0154242466a8147e6dee9b2d500d651977', class: "xv-table" }, h("div", { key: '0c1dc822a97f299e5269a4a7b03408c5bb568982', class: "batch-actions" }, h(Fragment, { key: '5974e0f94f21860e78dfe163296099cd6ee42da7' }, h("div", { key: 'f74a8d397e5ff1244b923697559ea1b5c9adf443', class: "batch-actions_content" }, h("slot", { key: '9ab1a03ea8eade4b9b021302f2305c4fca5ccaaf', name: "batch" })), h("p", { key: '4b63b6deaa4d31d5aa13e336a6331dcd86961579', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("slot", { key: '64a7b87bc705b4378665e0991fd1d9506048e4b6' }), h("slot", { key: 'c7a5ac279541c4eaf917e768b27f7a0ee1f1e8dd', name: "footer" }))));
     }
     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"]
-    }; }
 };
 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 XvTableCol = class {
+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([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 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: 'f48b63c8ec367c6d1e90c64237c29064ad5e6372', style: { width: this.width } }, h("slot", { key: 'cb9b159bd4a4951b5981a696bf0cd951c26c8efa' })));
     }
+    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: '03fe6f6aeccdd968034eb8ca2f927ef47e7864d8' }, h("button", { key: 'c6fd847183f1ce75de771c1138de6ed058f555b2', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: '4d7d466275d3cb55552d5b7df60e28bbe75cb058', name: XV_EXPANDABLE_KEY }), h("div", { key: '5fdaa8095fc4cd05ce98549228200a739dadc2a3', class: { expandableContent: true, open: this.open } }, h("slot", { key: '3c04cf53d2a7c3989a4511f3d407e8e0e7597a7e' }))));
     }
-    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;align-items:center;grid-template-columns:var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));border-bottom:1px solid #E3E3E3;transition:0.25s ease-in-out background-color}:host .cell-control{min-height:20px}: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;
         };
     }
     checkedChangeHandle() {
-        const changeData = {
-            name: this.selectionName,
+        if (!this.name)
+            this.name = uidGenerator();
+        this.selectRow.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: '5a5fd70ee1706f3c250c58139a2dc81dfd5a4a6a' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '4a9ac57fcb6baccaf97d866519b747ef1d921199', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: '452ea4f34c537f02f16ef0c26ad17abff15f943d', 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: 'b92316fbec5ed18d0097017cc260097e87443b79', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '5a80306e5b35a072d9f8cabcb9fa3a9bce8ec72c' })));
+    }
+    componentWillLoad() {
+        this.setInitialAttrs();
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1198,37 +951,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,7 +962,7 @@ 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 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;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}";
 const XvTabsV2Style0 = xvTabsCss;
 
 const XvTabs = class {
@@ -1255,62 +977,37 @@ 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));
+            }
+        };
     }
     updateTabClasses() {
         this.tabElements.forEach((tab, i) => {
             tab.classList.toggle('active', 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)
             return;
         this.active = index;
-        this.setHeight();
         this.tabSelect.emit(this.active);
     }
     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' }))));
+        return (h(Host, { key: '71222d5fc07d20673c5ef9e7cda9c6e443611011', class: "xv-tabs", variant: this.variant }, h("div", { key: '179f735cb97ca18df1e4d83167ce9f76a74a5afb', 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: 'c26bcad7439d3a8155fbb0af4e566845f77de28b', class: "tab-content-wrapper", role: "tabpanel", tabindex: -1 }, h("slot", { key: 'c7744d7960dc59ed279103c40e20fa59feb4d0d7', 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 +1030,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: '55ab2ded31587ebc443ace2a8417de8fa23a9d4d', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '8b10a67b88691eb68a0ab659c9d5e16bcf0cf3c4', class: "xv-tag_content" }, h("slot", { key: '31df2f187e4028849870d376fe38566a77c7bb70' })), this.closeable && (h("button", { key: '5dfd253f6c64121747cb7ea8ed4aa697b66edcb8', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
     }
 };
 XvTag.style = XvTagV2Style0;
@@ -1381,7 +1078,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: '8556c01f698beadee8a07430dd5a33d07b0669bc', name: this.name, class: "xv-text-input", role: "textbox", tabindex: this.disabled ? -1 : false }, this.label && h("label", { key: 'd32d94e1731e624bfdb92dabe6dd19eb4a768956', class: "label" }, this.label), h("div", { key: 'ec0ecef3df39c6eb0682036efe30009688568299', class: "control" }, h("input", { key: 'c3d190af296b2cf9b8b2df95bca81f17699ed954', 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: '8abde71aa7c4f8dc6e85d36815789376bc00c4a6', class: "helper" }, this.helper)));
     }
     componentWillLoad() {
         this.internals.setFormValue(this.value);
@@ -1405,11 +1102,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: '9bfc552b3e9ed5697b9718e94344853698737651', tooltip: this.message, class: `xv-tooltip_${this.position}` }, h("slot", { key: '6ed625e9463d0fff4c24835cb1f5f12fb0dc4c01' }, h("svg", { key: '77dba81d363ff45e6903a73eae29f811a7cac7cf', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: 'd956ddf5f82a21a93200cf079bf1f7ff096c0644', 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