xv-webcomponents 1.17.1-staging.0 → 1.17.3-dev.0

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

@@ -228,12 +228,12 @@ export class XvDatepicker {
     }
     render() {
         const [start, end] = this.value;
-        return (h(Host, { key: '4e1b7968bb670a8fc361c929fcffb804622abcfd', class: { disabled: !!this.disabled }, tabindex: this.disabled ? '-1' : undefined }, h("div", { key: '9a9f2dc31c4d48f5a78ffe904ebbac1c47902c02', "aria-controls": "popover", class: "control" }, this.label && h("label", { key: 'e46e942c45de9d58f6bf131d8f9bf68edc9aeef2', class: "control_label" }, this.label), h("div", { key: '71eb87432754769fe562ed71137d6df64183772d', class: {
+        return (h(Host, { key: '92bfe5ead4c634c2df3b42ec41014b23a00f9101', class: { disabled: !!this.disabled }, tabindex: this.disabled ? '-1' : undefined }, h("div", { key: '557f7a3bd3d61b3a351614c2603681805f6765db', "aria-controls": "popover", class: "control" }, this.label && h("label", { key: 'e41309e48361c1a5cfabe427322f546713853937', class: "control_label" }, this.label), h("div", { key: 'ab9517371f913eed9336a98947a3dbb0f3f28a87', class: {
                 'control_field': true,
                 loading: this.loading,
                 error: !!this.error || !!this.localError,
                 warning: this.warning !== undefined,
-            }, onClick: this.handleOpen, ref: (el) => (this.controlEl = el) }, h("input", { key: '0908d3af22f8aaf8c5407a8b66ac56c3a34b7d24', lang: "de", type: "date", name: "start", disabled: this.loading || this.disabled, readonly: this.readonly || this.variant === 'range', min: this.min, max: this.max, value: start ? dateFns.format(start, DEF_FORMAT) : '', onChange: (e) => this.handleChange(e, 'start'), onBlur: (e) => this.handleBlur(e, 'start'), onKeyDown: (e) => this.handleKeydown(e, 'start') }), this.variant === 'range' && (h("input", { key: '1841a2f65ddb657e0aeff38cc34e90c01019815b', lang: "de", type: "date", name: "end", disabled: this.loading || this.disabled, readonly: this.readonly || this.variant === 'range', min: this.min, max: this.max, value: end ? dateFns.format(end, DEF_FORMAT) : '', onChange: (e) => this.handleChange(e, 'end'), onBlur: (e) => this.handleBlur(e, 'end'), onKeyDown: (e) => this.handleKeydown(e, 'end') }))), (this.helper || this.error || this.warning || this.localError) && (h("div", { key: '13766133adfab4a2ce2c4e038871699d360f22ce' }, this.helper && h("p", { key: '274c7dfcc09ef35b9f0cdbba8454c2fc385370f7', class: "control_message helper" }, this.helper), (this.error || this.warning || this.localError) && (h("p", { key: '3ed6f0c1f53f15c22e60fabf5f476bb663b8d24c', class: { control_message: true, error: !!this.error || !!this.localError } }, this.error || this.localError || this.warning))))), h("div", { key: '5762ec14597d9418dfbd04a31db44d299aa88625', role: "dialog", class: { popover: true, open: this.open }, ref: (el) => (this.popoverEl = el) }, h("div", { key: '8ad3a1e6c31b982755f7b82b7cb16644c4f23f38', class: "header" }, h("xv-button-v2", { key: 'db4d454e82ca8ec26fcf4f291ac21146dcb14a3b', tabindex: this.open ? undefined : '-1', disabled: this.isPrevDisabled, variant: "ghost", onClick: this.prevMonth }, h("span", { key: 'e80d1efac41ea1e4aa7aa83a22cd5f7d9db40553', slot: "icon-left", class: "header_icon prev" })), h("p", { key: '37505645ea5e5181a0797560aeada8b0f22ef92e', class: "header_date" }, dateFns.format(this.month, 'LLLL', { locale: de }), h("input", { key: 'b3ccae4078f4ce61ec85a79abe16a4c406553f6f', tabindex: this.open ? undefined : '-1', type: "number", value: this.month.getFullYear(), onInput: this.handleYearChange, onBlur: this.handleYearBlur })), h("xv-button-v2", { key: '8ece0927ba0dc434765a7b2fea50ad1420913cbe', tabindex: this.open ? undefined : '-1', disabled: this.isNextDisabled, variant: "ghost", onClick: this.nextMonth }, h("span", { key: 'b471b2d6137c5c52f5089d821225d21c93cb1f4d', slot: "icon-left", class: "header_icon next" }))), h("div", { key: 'd7de53d7865a5c033fb0e5e2c416eee8dff3b60a', class: "week" }, h("p", { key: '8d4d8b3b9e42c040435d2e6813aa96bcaca2144d', class: "week_day" }), WEEK.map((day) => h("p", { class: "week_day" }, day, "."))), h("div", { key: '63b91609bc0e2709952f8b66b20997b16b960260', class: "week" }, this.days.map((day, idx) => (h(Fragment, null, idx % 7 === 0 && (h("button", { tabindex: this.open ? undefined : '-1', disabled: true, class: "week_day disabled" }, day.week)), h("button", { tabindex: this.open ? undefined : '-1', onClick: () => this.handleSetDate(day), disabled: day.disabled, class: {
+            }, onClick: this.handleOpen, ref: (el) => (this.controlEl = el) }, h("input", { key: '6d2f79d071fe020235586f849efbb48dd5cba315', lang: "de", type: "date", name: "start", disabled: this.loading || this.disabled, readonly: this.readonly || this.variant === 'range', min: this.min, max: this.max, value: start ? dateFns.format(start, DEF_FORMAT) : '', onChange: (e) => this.handleChange(e, 'start'), onBlur: (e) => this.handleBlur(e, 'start'), onKeyDown: (e) => this.handleKeydown(e, 'start') }), this.variant === 'range' && (h("input", { key: '97c4d03019f2e1a9c0583e1b76aa4d143f503172', lang: "de", type: "date", name: "end", disabled: this.loading || this.disabled, readonly: this.readonly || this.variant === 'range', min: this.min, max: this.max, value: end ? dateFns.format(end, DEF_FORMAT) : '', onChange: (e) => this.handleChange(e, 'end'), onBlur: (e) => this.handleBlur(e, 'end'), onKeyDown: (e) => this.handleKeydown(e, 'end') }))), (this.helper || this.error || this.warning || this.localError) && (h("div", { key: 'b19342150eeb4c7c356a817b268ec76e76daa94a' }, this.helper && h("p", { key: '39970bdc2765e3a63072a6d7f54c038d6cee6d11', class: "control_message helper" }, this.helper), (this.error || this.warning || this.localError) && (h("p", { key: '579ca9aa50b6b7dacb787029691baf023219a265', class: { control_message: true, error: !!this.error || !!this.localError } }, this.error || this.localError || this.warning))))), h("div", { key: 'af8eee78121448e66c9f6d3dd6d5bb7d9eab03dc', role: "dialog", class: { popover: true, open: this.open }, ref: (el) => (this.popoverEl = el) }, h("div", { key: 'd400c66831941238670ae021209ea2a40a59e88b', class: "header" }, h("xv-button-v2", { key: '2cdd95bc4114b0bd3c7ffa613c7a69d68685f0a6', tabindex: this.open ? undefined : '-1', disabled: this.isPrevDisabled, variant: "ghost", onClick: this.prevMonth }, h("span", { key: '5a5cb4965aa5b64d8a8d57d96076bcf2cc5fdb6b', slot: "icon-left", class: "header_icon prev" })), h("p", { key: 'f806d5ac078fccca5cadfb0e368cb78f478f582e', class: "header_date" }, dateFns.format(this.month, 'LLLL', { locale: de }), h("input", { key: '134ddaa8cf64f2faf3306aac6cfbc9cf8ff2047d', tabindex: this.open ? undefined : '-1', type: "number", value: this.month.getFullYear(), onInput: this.handleYearChange, onBlur: this.handleYearBlur })), h("xv-button-v2", { key: 'f90e88c43c0365f64fd4494c75bfcc00558b5034', tabindex: this.open ? undefined : '-1', disabled: this.isNextDisabled, variant: "ghost", onClick: this.nextMonth }, h("span", { key: '0b539e43a031acc4a69f0743e4f22d244a8856c3', slot: "icon-left", class: "header_icon next" }))), h("div", { key: '8986efbeb8a2c86c01aa72afccf3b3db0cafaf7d', class: "week" }, h("p", { key: 'de290231af4fa141537c348c57fc402082b06f28', class: "week_day" }), WEEK.map((day) => h("p", { class: "week_day" }, day, "."))), h("div", { key: 'b61e68c524a8cacf4bd8f08deee3662de91ae7c0', class: "week" }, this.days.map((day, idx) => (h(Fragment, null, idx % 7 === 0 && (h("button", { tabindex: this.open ? undefined : '-1', disabled: true, class: "week_day disabled" }, day.week)), h("button", { tabindex: this.open ? undefined : '-1', onClick: () => this.handleSetDate(day), disabled: day.disabled, class: {
                 'week_day': true,
                 inRange: this.variant === 'range' && dateFns.isWithinInterval(day.date, { start, end }),
                 isToday: day.isToday,

package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js

@@ -24,7 +24,7 @@ export class XvDropdownItem {
         });
     }
     render() {
-        return (h(Host, { key: '355cf1fe5be6d5fda5fd30f6a892b2591d94b36b', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, this.multiple && (h("xv-checkbox-v2", { key: '957c7fe39439b9ce115176e5c4c609635f0aa482', class: "multiple-check", size: this.size, checked: this.selected, disabled: this.disabled })), h("slot", { key: '75a513ed8ca0e9e6bea629a9fb0c5673965a960a' }), (!this.multiple && this.selected) && h("span", { key: '3368c59f452b9cdcb5fdf8ccbd4ea918ba0bb45e', class: "checkmark far fa-check" })));
+        return (h(Host, { key: '129c105a5f0c793b893e800b05ce97d8352eb06f', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, this.multiple && (h("xv-checkbox-v2", { key: '2145dd2fd6a7ac83ea7c474d2b4b17cb5b7ecc53', class: "multiple-check", size: this.size, checked: this.selected, disabled: this.disabled })), h("slot", { key: '82d7595ff99453660590241da2b6df592f497201' }), (!this.multiple && this.selected) && h("span", { key: '343f6c8f9930054e5aabb015579a5e0ee996cf6e', class: "checkmark far fa-check" })));
     }
     componentWillLoad() {
         if (!this.value)

package/dist/collection/components/xv-dropdown/xv-dropdown.css

@@ -130,6 +130,7 @@
   --dropdown-padding-y: 11px;
   --dropdown-max-width: 300px;
   --dropdown-visible-items: 6;
+  --dropdown-ghost-width: min-content;
   display: block;
   position: relative;
   text-align: left;
@@ -141,7 +142,7 @@
   font-family: var(--ff-body, Work Sans), sans-serif;
   font-size: 12px;
   font-style: normal;
-  font-weight: 700;
+  font-weight: 400;
   line-height: 16px;
   letter-spacing: 0.32px;
   margin-bottom: 8px;
@@ -151,7 +152,7 @@
   font-family: var(--ff-body, Work Sans), sans-serif;
   font-size: 12px;
   font-style: normal;
-  font-weight: 700;
+  font-weight: 400;
   line-height: 16px;
   letter-spacing: 0.32px;
 }
@@ -230,8 +231,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  block-size: 1.5rem;
-  inline-size: 1.5rem;
+  block-size: min(16px, 1em);
+  inline-size: min(16px, 1em);
   inset-inline-end: 0.75rem;
   outline: none;
   transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
@@ -279,6 +280,10 @@
   background: linear-gradient(to bottom, var(--field-02, #FFF) 0%, var(--field-02, #FFF) 85%, transparent 100%);
   padding: var(--dropdown-padding-y) var(--dropdown-padding-x);
 }
+:host .options.right {
+  left: unset;
+  right: 0;
+}
 :host .options ::slotted(.xv-dropdown-item) {
   display: block;
   max-block-size: 13.75rem;
@@ -312,7 +317,8 @@
 :host .options ::slotted(.xv-dropdown-item:not([hidden]):first-child):after {
   display: none;
 }
-:host .options ::slotted(.xv-dropdown-item:hover) {
+:host .options ::slotted(.xv-dropdown-item:hover),
+:host .options ::slotted(.xv-dropdown-item[active]) {
   background-color: var(--layer-hover-02, #F7F7F7);
 }
 :host .options ::slotted(.xv-dropdown-item:active) {
@@ -354,7 +360,7 @@
   padding-inline-end: 5px;
 }
 :host(.ghost) .options {
-  width: min-content;
+  width: var(--dropdown-ghost-width);
 }
 
 :host([open]) .control_arrow {
@@ -372,6 +378,17 @@
   background-color: transparent;
 }
 
+:host(:focus) {
+  outline: none;
+}
+
+:host(:focus-visible) {
+  outline: none;
+}
+:host(:focus-visible) .control {
+  outline: 2px solid var(--focus);
+}
+
 :host([error]) .control {
   box-shadow: none;
   outline: 2px solid var(--support-support-error, #F1290E);

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

@@ -2,14 +2,23 @@ import { Host, h } from "@stencil/core";
 import { SIZE_VAR } from "../../types/enum";
 import { DropdownItemSelector } from "./_vars";
 import { forEach, setAttr } from "../../utils/utils";
+let dropdownUid = 0;
 export class XvDropdown {
     constructor() {
         this.searchPlaceholder = 'Suchen';
         this.size = SIZE_VAR.MD;
         this.variant = 'default';
+        this.position = 'auto';
         this.selected = [];
         this.selectedMap = new Map();
-        /*  region Search variables */
+        /** Side the options panel is actually aligned to (computed when position === 'auto'). */
+        this.resolvedPosition = 'left';
+        this.positionMeasured = false;
+        /*  region Keyboard navigation */
+        this.listboxId = `xv-dd-listbox-${dropdownUid++}`;
+        this.optIdSeq = 0;
+        this.activeItem = null;
+        this.pendingOpenInit = false;
         this.searchQuery = '';
         this.dropdownItems = [];
         this.setSelected = (selectedMap, optionNodes) => {
@@ -37,6 +46,44 @@ export class XvDropdown {
         this.removeListeners = () => {
             document.removeEventListener('click', this.handleClickOutside, { capture: true });
         };
+        this.getNavigableItems = () => Array.from(this.el.querySelectorAll(DropdownItemSelector))
+            .filter((el) => !el.hasAttribute('hidden') && !el.hasAttribute('disabled'));
+        this.moveActive = (delta) => {
+            const items = this.getNavigableItems();
+            if (!items.length)
+                return;
+            const current = this.activeItem ? items.indexOf(this.activeItem) : -1;
+            let next = current + delta;
+            if (next < 0)
+                next = items.length - 1;
+            else if (next >= items.length)
+                next = 0;
+            this.setActiveItem(items[next]);
+        };
+        this.setActiveByEdge = (edge) => {
+            const items = this.getNavigableItems();
+            if (!items.length)
+                return;
+            this.setActiveItem(edge === 'first' ? items[0] : items[items.length - 1]);
+        };
+        this.setActiveItem = (item, scroll = true) => {
+            var _a;
+            if (this.activeItem === item)
+                return;
+            (_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.removeAttribute('active');
+            this.activeItem = item;
+            if (!item) {
+                this.el.removeAttribute('aria-activedescendant');
+                return;
+            }
+            if (!item.id)
+                item.id = `${this.listboxId}-opt-${this.optIdSeq++}`;
+            item.setAttribute('active', '');
+            this.el.setAttribute('aria-activedescendant', item.id);
+            if (scroll)
+                item.scrollIntoView({ block: 'nearest' });
+        };
+        /*  endregion Keyboard navigation */
         this.clearHandle = () => {
             const options = this.el.querySelectorAll(DropdownItemSelector);
             forEach(options, (option) => setAttr(option, 'selected', false));
@@ -60,11 +107,40 @@ export class XvDropdown {
             this.searchQuery = ev.target.value.toLowerCase();
             clearTimeout(this.searchTimeout);
             this.searchTimeout = setTimeout(() => {
-                for (let { el, text } of this.dropdownItems) {
+                var _a;
+                for (const { el, text } of this.dropdownItems) {
                     el.toggleAttribute('hidden', !text.includes(this.searchQuery));
                 }
+                // keep keyboard focus on a visible option after filtering
+                if ((_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.hasAttribute('hidden'))
+                    this.setActiveByEdge('first');
             }, 200);
         };
+        this.resetSearch = () => {
+            clearTimeout(this.searchTimeout);
+            if (!this.search)
+                return;
+            this.searchQuery = '';
+            if (this.searchInputEl)
+                this.searchInputEl.value = '';
+            for (const { el } of this.dropdownItems)
+                el.removeAttribute('hidden');
+        };
+        /** Runs once per open, after the panel is in the DOM: highlight an option and place focus. */
+        this.initOpenState = () => {
+            var _a, _b, _c;
+            this.pendingOpenInit = false;
+            const items = this.getNavigableItems();
+            const preselected = items.find((el) => el.hasAttribute('selected'));
+            this.setActiveItem(preselected || items[0] || null, false);
+            if (this.search) {
+                // shadow root is open, so we can hand focus to the inner input for typing
+                (_c = (_b = (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input')) === null || _c === void 0 ? void 0 : _c.focus();
+            }
+            else {
+                this.el.focus();
+            }
+        };
     }
     openChangeHandle() {
         this.syncOpenState();
@@ -76,9 +152,15 @@ export class XvDropdown {
         if (this.open) {
             this.cacheItems(); // get items on open
             this.addListeners();
+            this.pendingOpenInit = true; // highlight + focus once the panel has rendered
         }
         else {
             this.removeListeners();
+            this.resolvedPosition = 'left'; // reset so next open re-measures from the default side
+            this.positionMeasured = false;
+            this.pendingOpenInit = false;
+            this.setActiveItem(null);
+            this.resetSearch();
         }
     }
     multipleChangeHandle() {
@@ -147,9 +229,59 @@ export class XvDropdown {
         forEach(optionElements, (option) => setAttr(option, 'selected', this.selectedMap.has(option.getAttribute('value'))));
         this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));
     }
+    /*  region Keyboard navigation */
+    handleKeyDown(ev) {
+        var _a, _b;
+        if (this.disabled || this.readonly || this.loading)
+            return;
+        if (!this.open) {
+            if (['ArrowDown', 'ArrowUp', 'Enter', ' ', 'Spacebar'].includes(ev.key)) {
+                ev.preventDefault();
+                this.open = true;
+            }
+            return;
+        }
+        switch (ev.key) {
+            case 'ArrowDown':
+                ev.preventDefault();
+                this.moveActive(1);
+                break;
+            case 'ArrowUp':
+                ev.preventDefault();
+                this.moveActive(-1);
+                break;
+            case 'Home':
+                ev.preventDefault();
+                this.setActiveByEdge('first');
+                break;
+            case 'End':
+                ev.preventDefault();
+                this.setActiveByEdge('last');
+                break;
+            case 'Enter':
+                ev.preventDefault();
+                (_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.click(); // reuse the same selection path as a mouse click
+                break;
+            case ' ':
+            case 'Spacebar':
+                if (!this.search) { // when searching, space must type into the field
+                    ev.preventDefault();
+                    (_b = this.activeItem) === null || _b === void 0 ? void 0 : _b.click();
+                }
+                break;
+            case 'Escape':
+                ev.preventDefault();
+                this.open = false;
+                this.el.focus();
+                break;
+            case 'Tab':
+                this.open = false; // let focus leave naturally
+                break;
+        }
+    }
     /*  endregion Search methods */
     render() {
-        return (h(Host, { key: 'fd9278225b7c1e0499f11a43b447b792ffecbecf', class: { 'xv-dropdown': true, [this.variant]: !!this.variant }, role: "combobox", size: this.size, open: this.open, error: !!this.error, disabled: this.disabled, tabindex: (this.disabled || this.readonly) ? -1 : false }, (this.label || this.info) && (h("label", { key: '4e1e6dd506e7c0ca12f24717a4ac0c507ed77150', class: "label" }, h("slot", { key: '7a7f9d886c871616a0214264fc012495b77d48a8', name: "label" }, this.label), this.info && h("xv-tooltip-v2", { key: '97b64ef9259c2924fa9cc388e029775f22d67f77', class: "label_info", message: this.info }))), h("div", { key: '57aa25e912aa840bbe049fa30248315ad1962f79', class: { "xv-dropdown-control control": true, readonly: !!this.readonly }, onClick: this.handleOpen }, (this.multiple && this.selectedMap.size > 0) && (h("xv-tag-v2", { key: 'ccdd67146706bde7a0b1d68db1033700262db1ad', class: "control_count", onCloseClick: this.clearHandle, closeable: !this.required, bg: "var(--background-inverse)", color: "var(--icon-inverse)" }, this.selectedMap.size)), this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this._renderIcon(), h("svg", { key: '2594b21e9b9150a1d50099603b964177d467fb7b', 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: 'df82db7fb2c6a43e97484b5f8f987bd9f0aaae90', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && h("div", { key: '841b3935e0140289491a79711c5a81f3d838cb6e', class: "options" }, this.search && (h("div", { key: '836c860255c81b585525a7aa0a15ed4e9c4153b8', class: "options_search" }, h("xv-text-input-v2", { key: '24e362915e2b2137fe4b96073b4f358e757e68e1', type: "search", block: true, autocomplete: "off", size: this.size, value: this.searchQuery, placeholder: this.searchPlaceholder, onValueChange: this.handleSearchInput }))), h("slot", { key: "xv-dropdown-options" })), (this.helper || typeof this.error === 'string' || this.warning) && (h("p", { key: '4e2e576aaeb17740cf79c045edbe19c48eb4c346', class: "helper" }, this.error || this.warning || this.helper))));
+        return (h(Host, { key: 'd829dfeed78bfa23b22b5d04658bddfcfb3f9677', class: { 'xv-dropdown': true, [this.variant]: !!this.variant }, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.open ? this.listboxId : null, size: this.size, open: this.open, error: !!this.error, disabled: this.disabled, tabindex: (this.disabled || this.readonly) ? -1 : 0 }, (this.label || this.info) && (h("label", { key: '3329167b435dc874a175ca4fdf863f024ca59172', class: "label" }, h("slot", { key: '9fa412345fa4e59f0e5bf075a969c97f50ffd190', name: "label" }, this.label), this.info && h("xv-tooltip-v2", { key: 'ff8a830219cd41a54f80aba9f087f8851136f094', class: "label_info", message: this.info }))), h("div", { key: '9046c4c21ed270b9e9be0a6361cb629910fcd752', class: { "xv-dropdown-control control": true, readonly: !!this.readonly }, onClick: this.handleOpen }, (this.multiple && this.selectedMap.size > 0) && (h("xv-tag-v2", { key: 'e2d4ed3d256d9f9409181dfc0d374c80b51113e2', class: "control_count", onCloseClick: this.clearHandle, closeable: !this.required, bg: "var(--background-inverse)", color: "var(--icon-inverse)" }, this.selectedMap.size)), this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this._renderIcon(), h("svg", { key: '8b00320c6078f01967f5f205700bd10747065659', 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 448 512" }, h("path", { key: 'b5387f1a85b2b4efccf9e5cbc5376cf34bc660a3', d: "M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z" }))), this.open && h("div", { key: '7b1de2568396f650059277d06bc9b4d8bbb4d6f3', ref: (el) => (this.optionsEl = el), id: this.listboxId, role: "listbox", "aria-multiselectable": this.multiple ? 'true' : null, class: { options: true, right: this._appliedPosition() === 'right', search: !!this.search } }, this.search && (h("div", { key: '7225547fc7964b33e1afaf07dd6694932e4fedec', class: "options_search" }, h("xv-text-input-v2", { key: 'dc5ce6e2200c627e259d02622b31515be49dde0b', type: "search", ref: (el) => (this.searchInputEl = el), block: true, autocomplete: "off", size: this.size, value: this.searchQuery, placeholder: this.searchPlaceholder, onValueChange: this.handleSearchInput }))), h("slot", { key: "xv-dropdown-options" })), (this.helper || typeof this.error === 'string' || this.warning) && (h("p", { key: 'a18e86e5bfeca3a94f15cb58424db798e95a799f', class: "helper" }, this.error || this.warning || this.helper))));
     }
     componentDidLoad() {
         this.syncOpenState();
@@ -157,8 +289,51 @@ export class XvDropdown {
         if (this.defaultValue)
             this.value = this.defaultValue;
     }
+    /** Side the panel is rendered on: explicit prop wins, otherwise the auto-measured side. */
+    _appliedPosition() {
+        return this.position === 'auto' ? this.resolvedPosition : this.position;
+    }
+    componentDidRender() {
+        if (this.open && this.pendingOpenInit)
+            this.initOpenState();
+        // Only ghost panels can be wider than the control, so only they can overflow.
+        // Measure once per open; skip for the default variant and for explicit positions.
+        if (!this.open || this.position !== 'auto' || this.variant !== 'ghost' || !this.optionsEl || this.positionMeasured)
+            return;
+        this.positionMeasured = true;
+        const rect = this.optionsEl.getBoundingClientRect();
+        const bounds = this._clipBounds();
+        // Flip in one direction only, so a panel wider than its container can't thrash between sides.
+        let next = this.resolvedPosition;
+        if (this.resolvedPosition === 'left' && rect.right > bounds.right)
+            next = 'right';
+        else if (this.resolvedPosition === 'right' && rect.left < bounds.left)
+            next = 'left';
+        if (next !== this.resolvedPosition)
+            this.resolvedPosition = next;
+    }
+    /** Inline edges of the nearest ancestor that clips overflow; falls back to the viewport. */
+    _clipBounds() {
+        let node = this.el.parentNode;
+        while (node) {
+            if (node instanceof ShadowRoot) {
+                node = node.host;
+                continue;
+            }
+            if (node instanceof HTMLElement) {
+                const overflowX = getComputedStyle(node).overflowX;
+                if (overflowX === 'hidden' || overflowX === 'auto' || overflowX === 'scroll' || overflowX === 'clip') {
+                    const r = node.getBoundingClientRect();
+                    return { left: r.left, right: r.right };
+                }
+            }
+            node = node.parentNode;
+        }
+        return { left: 0, right: document.documentElement.clientWidth };
+    }
     disconnectedCallback() {
         this.removeListeners();
+        clearTimeout(this.searchTimeout);
     }
     _renderIcon() {
         if (this.loading) {
@@ -548,6 +723,26 @@ export class XvDropdown {
                 "reflect": false,
                 "attribute": "variant",
                 "defaultValue": "'default'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'right' | 'left'",
+                    "resolved": "\"auto\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'auto'"
             }
         };
     }
@@ -555,7 +750,7 @@ export class XvDropdown {
         return {
             "selected": {},
             "selectedMap": {},
-            "searchQuery": {}
+            "resolvedPosition": {}
         };
     }
     static get events() {
@@ -620,6 +815,12 @@ export class XvDropdown {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/xv-file-uploader/xv-file-uploader.js

@@ -84,7 +84,7 @@ export class XvFileUploader {
         }
     }
     render() {
-        return (h(Host, { key: '4dcf9f36c770aab56b19334a8cf8e71da5264195', class: { 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled, error: !!this.error } }, this.label && h("label", { key: 'bfce6e9fab5884fcaf6b221251caa5dd5f896f3a', class: "label" }, this.label), this.description && h("p", { key: '21fa2b5e9ca8aeb2be2c405878fba66bb012f825', class: "description" }, this.description), this.variant === 'button' ? (h("xv-button-v2", { class: "uploadBtn", variant: this.buttonVariant, disabled: this.disabled, onClick: () => this.fileInput.click() }, this.addText || 'Dateien auswählen')) : (h("div", { class: { 'drop-zone': true, active: this.dragActive }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onClick: () => this.fileInput.click() }, this.addText || 'Dateien hierher ziehen oder darauf klicken, um eine Datei auszuwählen.')), h("input", { key: '1a41f2dc19ab2176d63edaeb1973daf753ac28fb', ref: el => (this.fileInput = el), type: "file", hidden: true, onChange: this.onFileSelect, multiple: this.multiple, accept: this.accept.join(',') }), this.error && h("p", { key: '67b83e7841948fea6ec34ba51cd838561039e1ff', class: "global-error" }, this.error), h("ul", { key: 'fbdb04a04604f64a995d6c8044c04fcf566c7e01', class: "file-list" }, this.files.map((file, index) => {
+        return (h(Host, { key: '3423ccf72c581a004e5ca59d9cbf6f673f7896c1', class: { 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled, error: !!this.error } }, this.label && h("label", { key: '93b7b8edc0ac8e980910dc83d7cabf2030f97b35', class: "label" }, this.label), this.description && h("p", { key: 'c6b030335b34ee97ada3127fc8641f7b009d6c55', class: "description" }, this.description), this.variant === 'button' ? (h("xv-button-v2", { class: "uploadBtn", variant: this.buttonVariant, disabled: this.disabled, onClick: () => this.fileInput.click() }, this.addText || 'Dateien auswählen')) : (h("div", { class: { 'drop-zone': true, active: this.dragActive }, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onClick: () => this.fileInput.click() }, this.addText || 'Dateien hierher ziehen oder darauf klicken, um eine Datei auszuwählen.')), h("input", { key: '04a082fae037f176533bee68ea0a8b24f8f36257', ref: el => (this.fileInput = el), type: "file", hidden: true, onChange: this.onFileSelect, multiple: this.multiple, accept: this.accept.join(',') }), this.error && h("p", { key: '6fb7b7c5517030caf1f22206a6612077b0c14e7e', class: "global-error" }, this.error), h("ul", { key: 'e3d5461797abbc1168117c6772238780a0a7e14a', class: "file-list" }, this.files.map((file, index) => {
             var _a, _b;
             return (h("li", { class: { file: true, withError: !!(((_a = this.errors) === null || _a === void 0 ? void 0 : _a[index]) || ((_b = this.errorMessages) === null || _b === void 0 ? void 0 : _b[index])) } }, h("div", { class: "file_container" }, h("span", { class: "file_container_name" }, file.name), this._renderLoaderState(index)), this._renderError(index)));
         }))));

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

@@ -34,7 +34,7 @@ export class Xvfooter {
     render() {
         const { categories, socials, logo, legalLinks, payments, partners, advantages } = this.data || {};
         const hasDataLength = ((categories === null || categories === void 0 ? void 0 : categories.length) || (partners === null || partners === void 0 ? void 0 : partners.length) || (payments === null || payments === void 0 ? void 0 : payments.length) || (socials === null || socials === void 0 ? void 0 : socials.length));
-        return (h("footer", { key: '31f496895b343c1b5a26cf04a73acd82df4c0305', class: "xv-footer" }, (advantages === null || advantages === void 0 ? void 0 : advantages.length) > 0 && (h("div", { key: 'd1203c0a5596c41106c1433b4b7c4ae5432250ef', class: "xv-footer-advantages" }, h("div", { key: '288c8cc9b0507063e260a40dc105723eb59f5f1a', class: "xv-container" }, this._renderFooterList(advantages, { itemWithLabel: true })))), hasDataLength && (h("div", { key: '188b4a11d3f1b9f713b866157d21ac70b130781b', class: "xv-container" }, h("div", { key: 'f8c737d868c94a9502cd106597ac9fb006ee2075', class: "xv-footer__grid xv-footer-y-spacing" }, h("div", { key: '78e68d0fb11fc0a3e5f75cef4caa24078f9768f4', class: "xv-footer__col-main" }, h("ul", { key: 'ce1b2c7b2c98e490d44f670f745c9d6ed1579c4b', class: "xv-footer-categories" }, categories === null || categories === void 0 ? void 0 : categories.map((category) => (h("li", null, h("p", { class: "xv-label-02" }, category.label), h("ul", { class: "xv-footer-routes" }, category.routes.map((item) => (h("li", null, h("a", { class: "xv-body-compact-02", href: item.href, target: item.target }, item.label)))))))))), h("div", { key: '0d2f0a95a3435e9817c21e1eddf7372da1566404', class: "xv-footer__col-sidebar" }, this._renderFooterList(partners, { label: 'crossvertise Partner' }), this._renderFooterList(payments, { label: 'Bequem und sicher bezahlen' }), this._renderFooterList(socials, { label: 'Folgen Sie uns', isRow: true }))))), (legalLinks === null || legalLinks === void 0 ? void 0 : legalLinks.length) > 0 && (h("div", { key: '771aabeac7888753cf561f9d6ef04561aeb1816c', class: "xv-footer-legal" }, h("div", { key: '31e92aa6c324e23d1f99b041360861741829e255', class: "xv-container" }, h("div", { key: '9e615547872c8a9fa75e76c0890430f82e8b5024', class: "xv-footer-legal-row" }, logo && (h("a", { key: 'f5c932dc0d29b25642f2da6fa74bd43a29359f3f', class: "xv-footer-logo", href: logo.href, target: logo.target }, logo.label && h("span", { key: '737eecddab96349fec709c4c5609d83e87d0e560', class: "xv-label-02" }, logo.label), h("img", { key: 'f5e64947742cfd5f9e79adffb14d5c7e7d0dc66e', loading: "lazy", src: logo.image, alt: logo.label }))), h("ul", { key: 'b05632d176a3a60f0c6b698d0958b8546ba0867f' }, legalLinks.map((item) => {
+        return (h("footer", { key: 'c3406d777693fe2311102e6fcb9852383fc9ac6a', class: "xv-footer" }, (advantages === null || advantages === void 0 ? void 0 : advantages.length) > 0 && (h("div", { key: 'f5636ec1f9f660f5735d27a79924bd9c40adf75f', class: "xv-footer-advantages" }, h("div", { key: '42656264cb7590f5e61ce1bbe38aa37a63f04ee9', class: "xv-container" }, this._renderFooterList(advantages, { itemWithLabel: true })))), hasDataLength && (h("div", { key: 'e142aa994a80d0fe5be4e00a8f0c4039da1791d6', class: "xv-container" }, h("div", { key: 'b7d5ab5f3613736775b3ef83cc2cc676449663ba', class: "xv-footer__grid xv-footer-y-spacing" }, h("div", { key: 'c997c4022a8d2bea3547230f5ba9ed7a37635d46', class: "xv-footer__col-main" }, h("ul", { key: 'c1be504d2ce2a411dab6f1681564524f8b2446b3', class: "xv-footer-categories" }, categories === null || categories === void 0 ? void 0 : categories.map((category) => (h("li", null, h("p", { class: "xv-label-02" }, category.label), h("ul", { class: "xv-footer-routes" }, category.routes.map((item) => (h("li", null, h("a", { class: "xv-body-compact-02", href: item.href, target: item.target }, item.label)))))))))), h("div", { key: 'f82ccaf18e1fe63b47f109bf20845af9ea0d4add', class: "xv-footer__col-sidebar" }, this._renderFooterList(partners, { label: 'crossvertise Partner' }), this._renderFooterList(payments, { label: 'Bequem und sicher bezahlen' }), this._renderFooterList(socials, { label: 'Folgen Sie uns', isRow: true }))))), (legalLinks === null || legalLinks === void 0 ? void 0 : legalLinks.length) > 0 && (h("div", { key: 'e1d12515175bffaa970ac5bfe41ad0cf27d5097e', class: "xv-footer-legal" }, h("div", { key: '969c103e50bdfeb52f9139c3dd53189d80d9a22d', class: "xv-container" }, h("div", { key: '5b3e4f18da410ea82fc62074f22daa8e226d6d4b', class: "xv-footer-legal-row" }, logo && (h("a", { key: '8e7bf3fd82686faa5a2e83131a542730eba7389f', class: "xv-footer-logo", href: logo.href, target: logo.target }, logo.label && h("span", { key: 'b211963ee69c7a6151cdae1a2476223f8ef73e34', class: "xv-label-02" }, logo.label), h("img", { key: '243eed6378143f9328a174f515c2c6276a90a09a', loading: "lazy", src: logo.image, alt: logo.label }))), h("ul", { key: '88538ee0047edf6df20a4e27d4d9bf348724bc56' }, legalLinks.map((item) => {
             if (item.label === 'Cookie Einstellungen') {
                 return h("li", null, h("a", { class: "xv-helper-text-02", onClick: this.openCookieSettings }, item.label));
             }

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

@@ -167,7 +167,7 @@ export class XvHeader {
     render() {
         var _a, _b, _c, _d, _e;
         const isXvBrand = (((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a['WhitelabelName']) || 'Xv') === 'Xv';
-        return (h("header", { key: '4e04b78a99212bc5fdfbda41aa2f2f6a88175c48', class: "header" }, h("div", { key: 'd9966301c1616fcaec060e50fa29f81a3198227b', class: "header-wrapper" }, h("div", { key: '9256f6a7b31da73fff32ac2d95bee384e64496d2', class: "xv-container" }, h("div", { key: 'f9927a5b1d283fecfc57014c35676c5a3cf47d9f', class: "header-top" }, h("div", { key: 'fbd79ec4e41e203b0c7d8e37085633a6ab3ee466', class: "header-top--left" }, h("xv-button-v2", { key: '8d4e4f298e2f708e06a90a7c9a21ab578a43a7a3', class: "menu-btn", variant: "ghost", onClick: this.toggleMobMenu }, h("i", { key: '33aa5177581c5f8b47ec0c435a896b25e2305316', slot: "icon-left", class: { 'fa': true, 'fa-times': this.mobMenuOpen, 'fa-bars': !this.mobMenuOpen } })), this.metaNav && (h("a", { key: '1fca5d3cd0638145f34f9bdc6c6446e75f1fffdc', href: `${window.location.origin}/` }, h("picture", { key: 'a51179dd4e7b0a60d5e9a458660d23501b4d152b' }, h("source", { key: 'faef9c5ca3f5e6355862eedcb447a4975b14463b', srcSet: ((_b = this.metaNav) === null || _b === void 0 ? void 0 : _b.LogoUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg', media: "(min-width: 990px)" }), h("img", { key: '83c80fb99185fceb3d6559bcd59b44e3bbaeb689', src: ((_c = this.metaNav) === null || _c === void 0 ? void 0 : _c.LogoSmallUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg', onError: this.logoFallback, loading: "lazy", alt: "Crossvertise" })))), this.orgUnit && (h("xv-link-v2", { key: '32b8ca9c78c50df7fac9a5f816fb75db96af1df5', class: "header-top--orgUnit", variant: "standalone", href: "/de-de/mycrossvertise" }, this.orgUnit))), h("ul", { key: '67a88b216fff8353188ce1b684b2e644dbb5c34a', class: "header-top--right" }, this._renderSearch(), this._renderImpersonationInfo(), !((_d = this.metaNav) === null || _d === void 0 ? void 0 : _d.IsManager) && isXvBrand && (h("li", { key: '5895fae5c1da7e8ac325c03b07c55e8c522d5d76' }, h("xv-link-v2", { key: '3ed95ee7d3bb9d250cc80f51265a45cdcbc879ae', variant: "ghost", href: "https://www.crossvertise.com/ueber-uns/kontakt" }, h("xv-button-v2", { key: 'fd3201859e31efb6767110a648f79b571ba9412e', variant: "ghost", size: SIZE_VAR.MD }, h("i", { key: 'a357cf1fc11f5df20c06ba7bba688760e730795d', class: "header-icon far fa-envelope" }), h("span", { key: '2958ee2e9b503b5a9eda1db721474d452bfc14d9', class: "header-label xv-body-02" }, "Kontakt"))))), this._renderNotifications(), this._renderAccount(), !((_e = this.metaNav) === null || _e === void 0 ? void 0 : _e.IsManager) && isXvBrand && (h("li", { key: '8e0d0ade405003a63512d7c736f4dd2e3aa65a3a' }, h("xv-link-v2", { key: '152ab5e9e8e13a1261de664f95d1ed10a4572d01', variant: "ghost", href: "https://help.crossvertise.com" }, h("xv-button-v2", { key: '641f8fca24c2bef017ba11494e76063731df1c9b', variant: "ghost", size: SIZE_VAR.MD }, h("i", { key: '2dab2659e3010e1cca36be982c14bfafa27f2a69', class: "header-icon far fa-question-circle" }), h("span", { key: '4c919f58a513e136311a30ac6367f5134171c109', class: "header-label xv-body-02" }, "Hilfe"))))), this._renderShoppingCart()))), h("div", { key: '35dc7801ae8b2b21b14a2f6d54c72d21aa6da9d2', class: "header-wrapper--bg" }, h("div", { key: '058fcec87bf3e1b7a9263f5e8d108b9d6d82857a', class: "xv-container" }, h("xv-mega-menu", { key: '43293fa89e5e9629847c47cd582425cf53fbb875', open: this.mobMenuOpen, onOpenChange: this.closeMobMenu })))), h("xv-login-modal", { key: 'f21b968eba5252c0acfb1963482da8e2d31a3ab0', visible: this.showLoginModal, onClose: () => this.showLoginModal = false })));
+        return (h("header", { key: '413975515b82ac0c3eac96c7836d3e0567393431', class: "header" }, h("div", { key: 'fa2daa56949f45da1fe9abb9e780e5cc74317710', class: "header-wrapper" }, h("div", { key: '2e40c39258e80aaedaddbe1b3365dbe000a26bd1', class: "xv-container" }, h("div", { key: '1536e648029b21576532f08756a8f9cb0265d6c9', class: "header-top" }, h("div", { key: 'c12f0a569d5af6a0db7e4884722008b801879afc', class: "header-top--left" }, h("xv-button-v2", { key: '0cec355451c1991dc4bea7747645476403b3a0e9', class: "menu-btn", variant: "ghost", onClick: this.toggleMobMenu }, h("i", { key: '0b6cbb53fab547fc0b7ba9c381815dea29e8420a', slot: "icon-left", class: { 'fa': true, 'fa-times': this.mobMenuOpen, 'fa-bars': !this.mobMenuOpen } })), this.metaNav && (h("a", { key: '6e297e0486adb1cdb8aa3d10136127a433729741', href: `${window.location.origin}/` }, h("picture", { key: '963ba9a1a8ef6f154ee26aab34707abb97b4224f' }, h("source", { key: '7e06ea0165052dc7c09a0dc6b1d3c59b5bd329b7', srcSet: ((_b = this.metaNav) === null || _b === void 0 ? void 0 : _b.LogoUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg', media: "(min-width: 990px)" }), h("img", { key: '81b305b418f0ebd656216fbb9432f70f7e8c6477', src: ((_c = this.metaNav) === null || _c === void 0 ? void 0 : _c.LogoSmallUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg', onError: this.logoFallback, loading: "lazy", alt: "Crossvertise" })))), this.orgUnit && (h("xv-link-v2", { key: '32177289430d1034851d99bffe332e078c7e01ad', class: "header-top--orgUnit", variant: "standalone", href: "/de-de/mycrossvertise" }, this.orgUnit))), h("ul", { key: '0ef3d85e5a38c590ec8f5a793a587b4aaf173dee', class: "header-top--right" }, this._renderSearch(), this._renderImpersonationInfo(), !((_d = this.metaNav) === null || _d === void 0 ? void 0 : _d.IsManager) && isXvBrand && (h("li", { key: 'ea34cd07f3126d6f4bfa97e84dcf7fe5b324a12c' }, h("xv-link-v2", { key: '3f3d5bc35e5961f0bec89458c534a7805dde9417', variant: "ghost", href: "https://www.crossvertise.com/ueber-uns/kontakt" }, h("xv-button-v2", { key: '7837fd8b66a7430b30122f6dfe5dee5e40183969', variant: "ghost", size: SIZE_VAR.MD }, h("i", { key: '0154c3c8c5a74df1b7f2ea55f3c3e59b5fec44be', class: "header-icon far fa-envelope" }), h("span", { key: 'bd6d80a40d20597344f86b175819ad653f789841', class: "header-label xv-body-02" }, "Kontakt"))))), this._renderNotifications(), this._renderAccount(), !((_e = this.metaNav) === null || _e === void 0 ? void 0 : _e.IsManager) && isXvBrand && (h("li", { key: '094df3526967377b32d3a2a4c9f941330122f570' }, h("xv-link-v2", { key: '374ca3a703428ce76f1aacc7f4033ce9f955c1a0', variant: "ghost", href: "https://help.crossvertise.com" }, h("xv-button-v2", { key: '07a2e7771bf8a350c02bede432f412bb584a3e1b', variant: "ghost", size: SIZE_VAR.MD }, h("i", { key: '48116ea733e87ae3801b6995208e4c9f993582cd', class: "header-icon far fa-question-circle" }), h("span", { key: '2b5ed5733555847f8d92f285f736206421c49b8f', class: "header-label xv-body-02" }, "Hilfe"))))), this._renderShoppingCart()))), h("div", { key: '6274a3a9b68ecf96def769de84f19de759e01c3d', class: "header-wrapper--bg" }, h("div", { key: 'c80e6030db6916b6fdfe72e5a707497e61aaf141', class: "xv-container" }, h("xv-mega-menu", { key: '5c1740f5061cbdd8404ce2690301afbf45fe226d', open: this.mobMenuOpen, onOpenChange: this.closeMobMenu })))), h("xv-login-modal", { key: 'eaa458800f87f7afd5fb8e59971bdb2f753e20d4', visible: this.showLoginModal, onClose: () => this.showLoginModal = false })));
     }
     static get is() { return "xv-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/xv-header-next/xv-header-next.js

@@ -180,7 +180,7 @@ export class XvHeaderNext {
     render() {
         var _a, _b, _c, _d, _e;
         const isXvBrand = (((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a['WhitelabelName']) || 'Xv') === 'Xv';
-        return (h("header", { key: '3e5b036c8a87c64dedc188182055745dab593bdf', class: "header" }, h("div", { key: 'da3c6359eef47a0a9a6e326ea71eca15a127f005', class: "header-wrapper" }, h("div", { key: 'c403912d3ab0807ae51b3b98ddfd857144209459', class: "xv-container" }, h("div", { key: 'a15d117e3f95a8d65a1022f6a7efc48b68664da7', class: "header-top" }, h("div", { key: '1c3a412f45e5957c74cb6e18f3cdba61aec07129', class: "header-top--left" }, h("xv-button-v2", { key: '83f5c11eb91bec0a233c56aa50443909b2c937a9', class: "menu-btn", variant: "ghost", onClick: this.toggleMobMenu }, h("i", { key: 'cefac234defe108c971f2d6950fde258094d9e1b', slot: "icon-left", class: { 'fa': true, 'fa-times': this.mobMenuOpen, 'fa-bars': !this.mobMenuOpen } })), this.metaNav && (h("a", { key: '7da1e1a5fd6338cd11ec416f1bbd4e63b419001a', href: `${window.location.origin}/` }, h("picture", { key: '4a05e52e3acd6e60eb84441bd196fe5ccda0f48d' }, h("source", { key: '58c46c947df12f09c3719fcff0e53681b288d42b', srcSet: ((_b = this.metaNav) === null || _b === void 0 ? void 0 : _b.LogoUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg', media: "(min-width: 990px)" }), h("img", { key: '29597424f11f7aeff11df8399761dafc540745cd', src: ((_c = this.metaNav) === null || _c === void 0 ? void 0 : _c.LogoSmallUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg', onError: this.logoFallback, loading: "lazy", alt: "Crossvertise" })))), this.orgUnit && (h("xv-link-v2", { key: '293c00d8bc5ec56be893f24032eb38b1aa71d0c2', class: "header-top--orgUnit", variant: "standalone", href: "/de-de/mycrossvertise" }, this.orgUnit))), h("ul", { key: 'abbbf1eda6880fded2a7f9362cab61f09d084120', class: "header-top--right" }, this._renderSearch(), this._renderImpersonationInfo(), !((_d = this.metaNav) === null || _d === void 0 ? void 0 : _d.IsManager) && isXvBrand && (h("li", { key: '96e78e8b53c0667bf19a59b610623ecb231b20a9' }, h("xv-link-v2", { key: 'ebc9492d475d42b6dfdad65b017eb6ad14c2626e', variant: "ghost", href: "https://www.crossvertise.com/ueber-uns/kontakt" }, h("xv-button-v2", { key: '5c0f1e18eb09c0420a80540630fe8c855a1ae349', variant: "ghost", size: SIZE_VAR.MD }, h("i", { key: 'c5f72c0ccb60c50085785f6b2fc38656bd62df71', class: "header-icon far fa-envelope" }), h("span", { key: '62b3d1743b2cb925188360c7125a98d31683a6ea', class: "header-label xv-body-02" }, "Kontakt"))))), this._renderNotifications(), this._renderAccount(), !((_e = this.metaNav) === null || _e === void 0 ? void 0 : _e.IsManager) && isXvBrand && (h("li", { key: '407612a5a8e118133b30481c60ff777dea602d4d' }, h("xv-link-v2", { key: '27ea69272c9ba12d2d8dfb988ec55e513033cb04', variant: "ghost", href: "https://help.crossvertise.com" }, h("xv-button-v2", { key: '62b2c0f02784b55f4c0652dc2283635d519032f8', variant: "ghost", size: SIZE_VAR.MD }, h("i", { key: 'dfd071527c857854c1d038dcff41650ad974faab', class: "header-icon far fa-question-circle" }), h("span", { key: '2f0d80df52e1830946514382afcdca565ed5ec92', class: "header-label xv-body-02" }, "Hilfe"))))), this._renderShoppingCart()))), h("div", { key: 'd0f8a3d2367749e7a0b08b0de1ffe37bb53da138', class: "header-wrapper--bg" }, h("div", { key: '4a10adea98aab6f67214a00b3da0a41d9b4b16e8', class: "xv-container" }, h("xv-mega-menu-next", { key: 'b92a784f3481c17dff2c577a939e9e9c04cfb302', open: this.mobMenuOpen, onOpenChange: this.closeMobMenu, menuData: this.menuData })))), h("xv-login-modal", { key: '80eb3aa35bda06095228ff789c60e6470c47aab2', visible: this.showLoginModal, onClose: () => this.showLoginModal = false })));
+        return (h("header", { key: '7d377e3b2ac6324c7371bcaf72b3f2089c2f30fd', class: "header" }, h("div", { key: 'fa3904a2640fd3c83755e08672ca5b66f19f87ee', class: "header-wrapper" }, h("div", { key: '9b57e62635aa0add1b0d885476c6381651c3da2a', class: "xv-container" }, h("div", { key: '48d6c42079ac532951754f932fe9a542b446c7fe', class: "header-top" }, h("div", { key: 'a44144dd311fed25c6e322228d22ebcb34125227', class: "header-top--left" }, h("xv-button-v2", { key: 'f2924c7863e72a4421b03de34725b4e17eaadd0c', class: "menu-btn", variant: "ghost", onClick: this.toggleMobMenu }, h("i", { key: '60a99967703e38681a593b47be5b244ca812d735', slot: "icon-left", class: { 'fa': true, 'fa-times': this.mobMenuOpen, 'fa-bars': !this.mobMenuOpen } })), this.metaNav && (h("a", { key: 'b14cfd121dbe0bb043ba153f196d93517ad1aee6', href: `${window.location.origin}/` }, h("picture", { key: '368b0923c562d164bd2a13f35186198694a7f823' }, h("source", { key: 'ed184c898b435ee78d104e3f7ff0608797442ad5', srcSet: ((_b = this.metaNav) === null || _b === void 0 ? void 0 : _b.LogoUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg', media: "(min-width: 990px)" }), h("img", { key: '02f4efe1190fd7eaa9666bcfa09575655fc300fe', src: ((_c = this.metaNav) === null || _c === void 0 ? void 0 : _c.LogoSmallUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg', onError: this.logoFallback, loading: "lazy", alt: "Crossvertise" })))), this.orgUnit && (h("xv-link-v2", { key: '6142c239875d1b38e6496348badce4f1d8929fa4', class: "header-top--orgUnit", variant: "standalone", href: "/de-de/mycrossvertise" }, this.orgUnit))), h("ul", { key: '4944e54fb6d0982df59e85113ce5c3634eb754b9', class: "header-top--right" }, this._renderSearch(), this._renderImpersonationInfo(), !((_d = this.metaNav) === null || _d === void 0 ? void 0 : _d.IsManager) && isXvBrand && (h("li", { key: 'c67444522b75b8b6ec375e1bc08b82508313266b' }, h("xv-link-v2", { key: '6e16c1050a6ff936dcecd62110a268ab882aa044', variant: "ghost", href: "https://www.crossvertise.com/ueber-uns/kontakt" }, h("xv-button-v2", { key: 'e3eabf0359e4b90f06caafeda72525c137f5b42e', variant: "ghost", size: SIZE_VAR.MD }, h("i", { key: 'b5fbb44bc2661d19bf59e6c41e6d018853f55293', class: "header-icon far fa-envelope" }), h("span", { key: 'e4947be47ae5e2a31ef54d74426f620d27b43810', class: "header-label xv-body-02" }, "Kontakt"))))), this._renderNotifications(), this._renderAccount(), !((_e = this.metaNav) === null || _e === void 0 ? void 0 : _e.IsManager) && isXvBrand && (h("li", { key: '5f4010c06c0dbd038aa4387f5fc7fac36e50ab19' }, h("xv-link-v2", { key: '09ad10e240aba834778e152fd061b6db767f2e57', variant: "ghost", href: "https://help.crossvertise.com" }, h("xv-button-v2", { key: '7f621f8c795377db2098a299f1c3476d6ad32ee3', variant: "ghost", size: SIZE_VAR.MD }, h("i", { key: '2233a5168c8ac5992376e27a9dc85c9aa829c8cc', class: "header-icon far fa-question-circle" }), h("span", { key: '7a37ffc7f4722b24f99cf9c67462b3491db142bc', class: "header-label xv-body-02" }, "Hilfe"))))), this._renderShoppingCart()))), h("div", { key: '0d64d68220df76c72d937311031879cd3292888e', class: "header-wrapper--bg" }, h("div", { key: '9937bc0ca9eba8b352bc5a5a512f4d009e5e752c', class: "xv-container" }, h("xv-mega-menu-next", { key: 'ac5f444429de7bd72caedf44dbc205a439299185', open: this.mobMenuOpen, onOpenChange: this.closeMobMenu, menuData: this.menuData })))), h("xv-login-modal", { key: '87c2405d6edc5d0b5721191e5055c906e78d55bf', visible: this.showLoginModal, onClose: () => this.showLoginModal = false })));
     }
     static get is() { return "xv-header-next"; }
     static get originalStyleUrls() {

package/dist/collection/components/xv-image-viewer/xv-image-viewer.js

@@ -36,7 +36,7 @@ export class XvImageViewer {
         }
     }
     render() {
-        return (h(Host, { key: '18892e8e88de15de5654ef75ff85cbd99206e1a8', class: "image-wrapper" }, this.loaded ? (h("img", { src: this.src, alt: this.alt, class: "image", onClick: this.handleClick })) : h("xv-loader-v2", { class: "loading" }, this.placeholder), this.isFullscreen && (h("div", { key: '8f0aa7e798837d055c1b4c195f6cca2bd4c3a8cb', class: "fullscreen-overlay", onClick: this.closeFullscreen }, !this.fullscreenLoaded && h("xv-loader-v2", { key: '07851163ab07dccf30f82ad96b47965308950f5c', class: "loading", size: SIZE_VAR.LG }, this.placeholder), h("img", { key: '1a56f060df6768a603b80f3a1d816edb14147745', src: this.fullscreenSrc || this.src, alt: this.alt, class: {
+        return (h(Host, { key: '9a38430d83c931045bed1692b0c96c4682a18c1a', class: "image-wrapper" }, this.loaded ? (h("img", { src: this.src, alt: this.alt, class: "image", onClick: this.handleClick })) : h("xv-loader-v2", { class: "loading" }, this.placeholder), this.isFullscreen && (h("div", { key: '4cdae1d6b9c5140613520b37f0be4b6da842a4ce', class: "fullscreen-overlay", onClick: this.closeFullscreen }, !this.fullscreenLoaded && h("xv-loader-v2", { key: '8eb6d9f98514ae782882f8a86eab66f3804d275a', class: "loading", size: SIZE_VAR.LG }, this.placeholder), h("img", { key: '4e25b79e548aedc045a75d8d7b3ca7e56e577ebf', src: this.fullscreenSrc || this.src, alt: this.alt, class: {
                 'fullscreen-image': true,
                 loaded: this.fullscreenLoaded,
             } })))));

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

@@ -12,7 +12,7 @@ export class XvLink {
         e.stopPropagation();
     }
     render() {
-        return (h(Host, { key: '016e3dbb068768af7f3b1009a9ff4a41e7fe7e29', class: { [`xv-link_${this.variant}`]: true, disabled: !!this.disabled } }, h("a", { key: 'a3773aa9d56f67db1c8e38fb094ee182911eac2a', href: this.href, onClick: this.preventLinkHandler.bind(this), class: { 'xv-link': true, 'xv-link_disabled': !!this.disabled, [this.size]: !!this.size }, target: this.target }, h("slot", { key: '43cfd1a0bd21e3a06d626ebc1c011c0b97cb754b', name: "icon-left" }), h("slot", { key: '358556f640189ab282f907f16b1a9973561e7fe6' }), h("slot", { key: '252e9302928e87c88d502c7b513301333843cab0', name: "icon-right" }))));
+        return (h(Host, { key: '487bb531f1eade847d6ff3487830eca6ff07d9b2', class: { [`xv-link_${this.variant}`]: true, disabled: !!this.disabled } }, h("a", { key: '791b1a482545af8495b04cae22409e736fc5166b', href: this.href, onClick: this.preventLinkHandler.bind(this), class: { 'xv-link': true, 'xv-link_disabled': !!this.disabled, [this.size]: !!this.size }, target: this.target }, h("slot", { key: 'c2b0214254c2498093828d35c51eb691bf887120', name: "icon-left" }), h("slot", { key: '06df3a56df57a6a730e3352a52b178cd7c41dc8d' }), h("slot", { key: '7bc90e9c136e5fd72e61b20a134c3b8ddfeb00c2', name: "icon-right" }))));
     }
     static get is() { return "xv-link-v2"; }
     static get encapsulation() { return "shadow"; }

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

@@ -59,7 +59,7 @@ export class XvMegaMenu {
         void this.fetchMenuData();
     }
     render() {
-        return (h(Host, { key: 'b112b87e38c1534cd5313e6c71fdc96f6fc8f515' }, h("nav", { key: 'e2ce585ac7dcce8e7abf628be7eb635948985a4f', class: { 'xv-menu': true, open: this.open } }, this.menuLoading && (h("div", { key: 'f72304e9a5310914bad2c5f2160d4b408dba6c80', class: { 'xv-menu-loader': true, open: this.open } }, h("xv-loader-v2", { key: '08be3cc31abc000d508825ae0cba715de7265ad4' }))), h("ul", { key: '651eb649457fbab1f3bac968f55702fd5b2219f9', class: { menu: true, open: this.open } }, this.menuItems.map((menuItem) => {
+        return (h(Host, { key: '72def4630e671be424a302fb835880cddeb6b17f' }, h("nav", { key: 'e8719aa30336759ca2c43f524ccc77d24da70eae', class: { 'xv-menu': true, open: this.open } }, this.menuLoading && (h("div", { key: '06f2ff2344b4ceda1286b19d9b103c2a5b9b2996', class: { 'xv-menu-loader': true, open: this.open } }, h("xv-loader-v2", { key: '3e49ba2fcf79b84f9308212c4d9bf0a071fc97c4' }))), h("ul", { key: '428f50fbd46b764c98738ea5a4780a4601b849b3', class: { menu: true, open: this.open } }, this.menuItems.map((menuItem) => {
             var _a, _b;
             return (h("li", { class: { 'menu-item': true, active: menuItem.id === ((_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.id) } }, menuItem.route ? (h("xv-link-v2", { variant: "ghost", href: menuItem.route.route }, h("p", { class: "menu-item-label" }, (_b = menuItem.route) === null || _b === void 0 ? void 0 : _b.label))) : (h(Fragment, null, h("p", { class: "menu-item-label", onClick: () => this.setActiveItem(menuItem) }, menuItem === null || menuItem === void 0 ? void 0 : menuItem.label), h("ul", { class: "menu-item-groups" }, menuItem.groups.map((group) => {
                 var _a;
@@ -69,7 +69,7 @@ export class XvMegaMenu {
                     } }, h("div", { class: "group-menus" }, h("ul", { class: { 'group-menus-categories': true, inline: group.layout === 'inline' } }, group.categories.map((category) => (h("li", { class: "category" }, h("p", { class: "category-label" }, category.label), h("ul", { class: "category-routes" }, category.routes.map((route) => (h("li", { class: "route" }, h("xv-link-v2", { size: "lg", variant: "ghost", href: route.route || '#' }, route.label), route.tag && (h("xv-tag-v2", { class: "route-tag", size: "sm", color: "#161616", bg: "#E0E0E0" }, route.tag)))))))))), h("ul", { class: "group-menus-actions" }, group.actions.map((action) => (h("li", { class: "action" }, action.type === 'link' && (h("xv-link-v2", { variant: "standalone", href: action === null || action === void 0 ? void 0 : action.url }, action.label, h("span", { class: "link-chevron", slot: "icon-right" }, "\u2192"))), action.type === 'button' &&
                     h("xv-button-v2", { onClick: () => this.navActionClick(action), block: true, variant: "tertiary" }, action.label)))))), (group === null || group === void 0 ? void 0 : group.card) && (h("div", { class: "group-card" }, h("xv-card-v2", { media: this.applicationContext !== 'Komsa' ? group.card.image : undefined, variant: this.isMobile ? 'horizontal' : 'vertical' }, h("h5", { slot: "header", class: "group-card-title" }, group.card.title), h("p", { slot: "body", class: "group-card-desc" }, group.card.description), group.card.linkLabel && (h("xv-link-v2", { slot: "footer", variant: "standalone", href: group.card.linkUrl || '#' }, group.card.linkLabel, h("span", { class: "link-chevron", slot: "icon-right" }, "\u2192"))))))))));
             }))))));
-        }), h("li", { key: '9356ffcf87b9e622db21a01c40077e41169ea94e', class: "menu--right" }, h("slot", { key: 'ef5d8a0aaf0d44fd3eec9a68b91a642cb52d8555', name: "menu-right" })), this.open && (h("li", { key: '0710525eedf5b04ce377deba6a913af3a41b657a', class: "menu--backdrop", onClick: () => this.handleClose() }))))));
+        }), h("li", { key: '29923f808bf6e5ff3a446fc268c8724b82da0c1d', class: "menu--right" }, h("slot", { key: '50333ba3a99af998668236ce77fa138498ec6a03', name: "menu-right" })), this.open && (h("li", { key: '013f8adf4d4c4935252a92df628ee73d0bc68319', class: "menu--backdrop", onClick: () => this.handleClose() }))))));
     }
     static get is() { return "xv-mega-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-mega-menu-next/xv-mega-menu-next.js

@@ -94,7 +94,7 @@ export class XvMegaMenuNext {
         void this.fetchMenuData();
     }
     render() {
-        return (h(Host, { key: '965990cf42dca77d9c87ea5d9f1af1765bd51305' }, h("nav", { key: '1effa8fd4a5a36e29735b5b705e4de153e742942', class: { 'xv-menu': true, open: this.open } }, this.menuLoading && (h("div", { key: 'f2777eb6501f5de71be497e02148ea0e9a226e25', class: { 'xv-menu-loader': true, open: this.open } }, h("xv-loader-v2", { key: '10a1559021022dcdf669ee7b1e4ac8bd4e6d2dad' }))), h("ul", { key: '5f61b88c3813b76ae9d4d49ec7b589666486ea6b', class: { menu: true, open: this.open } }, this.menuItems.map((menuItem) => {
+        return (h(Host, { key: 'd73cfabbc7e69a974abd5c1c219544c2b9c5345e' }, h("nav", { key: '6d2f78e2be424e7aaa8c1f1ee03430a800c14dcc', class: { 'xv-menu': true, open: this.open } }, this.menuLoading && (h("div", { key: '0481d8317f0a0cd58a10114898ab1b60574bfced', class: { 'xv-menu-loader': true, open: this.open } }, h("xv-loader-v2", { key: 'f4104fbbf285165932c092423fe2eb431e6d7496' }))), h("ul", { key: 'e28819ff9c5bcebb32518831faf843085add3601', class: { menu: true, open: this.open } }, this.menuItems.map((menuItem) => {
             var _a, _b;
             return (h("li", { class: { 'menu-item': true, active: menuItem.id === ((_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.id) } }, menuItem.route ? (h("xv-link-v2", { variant: "ghost", href: menuItem.route.route }, h("p", { class: "menu-item-label" }, (_b = menuItem.route) === null || _b === void 0 ? void 0 : _b.label))) : (h(Fragment, null, h("p", { class: "menu-item-label", onClick: () => this.setActiveItem(menuItem) }, menuItem === null || menuItem === void 0 ? void 0 : menuItem.label), h("ul", { class: "menu-item-groups" }, menuItem.groups.map((group) => {
                 var _a;
@@ -104,7 +104,7 @@ export class XvMegaMenuNext {
                     } }, h("div", { class: "group-menus" }, h("ul", { class: { 'group-menus-categories': true, inline: group.layout === 'inline' } }, group.categories.map((category) => (h("li", { class: "category" }, h("p", { class: "category-label" }, category.label), h("ul", { class: "category-routes" }, category.routes.map((route) => (h("li", { class: "route" }, h("xv-link-v2", { size: "lg", variant: "ghost", href: route.route || '#' }, route.label), route.tag && (h("xv-tag-v2", { class: "route-tag", size: "sm", color: "#161616", bg: "#E0E0E0" }, route.tag)))))))))), h("ul", { class: "group-menus-actions" }, group.actions.map((action) => (h("li", { class: "action" }, action.type === 'link' && (h("xv-link-v2", { variant: "standalone", href: action === null || action === void 0 ? void 0 : action.url }, action.label, h("span", { class: "link-chevron", slot: "icon-right" }, "\u2192"))), action.type === 'button' &&
                     h("xv-button-v2", { onClick: () => this.navActionClick(action), block: true, variant: "tertiary" }, action.label)))))), (group === null || group === void 0 ? void 0 : group.card) && (h("div", { class: "group-card" }, h("xv-card-v2", { media: this.applicationContext !== 'Komsa' ? group.card.image : undefined, variant: this.isMobile ? 'horizontal' : 'vertical' }, h("h5", { slot: "header", class: "group-card-title" }, group.card.title), h("p", { slot: "body", class: "group-card-desc" }, group.card.description), group.card.linkLabel && (h("xv-link-v2", { slot: "footer", variant: "standalone", href: group.card.linkUrl || '#' }, group.card.linkLabel, h("span", { class: "link-chevron", slot: "icon-right" }, "\u2192"))))))))));
             }))))));
-        }), h("li", { key: '9ca18d5cdfb37a82e050751542b18eba7b98b158', class: "menu--right" }, h("slot", { key: 'a82d9e4fb0a0d2e482f97a51b66e0e974db2c6f5', name: "menu-right" })), this.open && (h("li", { key: '0d4ef64ba1f80209cc3a77c602a52e39e5cde885', class: "menu--backdrop", onClick: () => this.handleClose() }))))));
+        }), h("li", { key: 'fbdfe095e7fb1988754c9d2d705128cae8d233f8', class: "menu--right" }, h("slot", { key: '7de3bb434a940b67265b2b4e191f7a02a20f8404', name: "menu-right" })), this.open && (h("li", { key: 'a35128e640465fec15c990e46fc778602238d2a5', class: "menu--backdrop", onClick: () => this.handleClose() }))))));
     }
     static get is() { return "xv-mega-menu-next"; }
     static get encapsulation() { return "shadow"; }

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

@@ -58,7 +58,7 @@ export class XvModal {
     }
     render() {
         var _a;
-        return (h(Host, { key: '459334f664b6ef23356082e08e7a5d2a6b843467', role: "dialog", size: this.size, id: this.el.id }, h("slot", { key: 'ea874bc6a5b9de9a7b8bb88b66f9eca564265c3f', name: "trigger", onSlotchange: this.setupTrigger }), h("div", { key: '97aad0310e31ca98a5d96afcc4215f338af59685', class: { backdrop: true }, onClick: this.onBackdropClick }, h("div", { key: '22de437bedf74a0f540cb5a4fe12cb27f0adc459', class: "modal" }, h("button", { key: '0daeb0c0ae716f28b9ba87bd6a752b688e5849c6', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), h("div", { key: '61632aed290597cf833a1bbe38ccf70c031e3cc7', class: "modal_header" }, h("slot", { key: '41d051393e58db7bbe13e26309040750f4a3f182', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && h("h5", { key: 'b1ad75b57fce071b11465a2a1941e73ee01aced8', class: "modal_header__title" }, this.el.title))), h("div", { key: 'ff17494529082dab14715cba727253655852f4f6', class: { 'modal_content': true, overflow: this.overflow } }, h("slot", { key: '9c8df6f31c4a2bf767317ab443c52bbf31c6b9f4' })), h("div", { key: 'be51d96a27f16833cf910b3876515f28e3ce30e0', class: "modal_footer" }, h("slot", { key: '43fa6135052faab628f3531d2d116df4e592f620', name: "footer" })), !!this.loading && (h("div", { key: '63379bfee79a569faecd6c90eb1447bc2d549f5f', class: "loading" }, h("xv-loader-v2", { key: '972b08c9ae0d135516cd2d46e4ad31168ad37c19', size: SIZE_VAR.LG })))))));
+        return (h(Host, { key: '395a794dfbc5e54df4bf4c9ef825180dc02c76fe', role: "dialog", size: this.size, id: this.el.id }, h("slot", { key: '0d54138edf1edfe30a3a05fc9bcbe88699cc0134', name: "trigger", onSlotchange: this.setupTrigger }), h("div", { key: '12a6853ad559cec0829cd2af935de51ada0516f5', class: { backdrop: true }, onClick: this.onBackdropClick }, h("div", { key: '41704448acaab0cfd70aadfe67ac3aa3e803765e', class: "modal" }, h("button", { key: '82c3756ba70e011197015cce6fbbfccd652fce8b', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), h("div", { key: '216a696e637a83db67f17a46570238987f5762a8', class: "modal_header" }, h("slot", { key: 'e0f7a8b13d470ea6dbe922f2f535c6776397d249', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && h("h5", { key: '0fd4666c85f2a65bcae87fddda4c27b4e606244a', class: "modal_header__title" }, this.el.title))), h("div", { key: 'b05859b3b895c7c481586c063f9940f1834e17b5', class: { 'modal_content': true, overflow: this.overflow } }, h("slot", { key: '98ed63c3083036b3aa9f2888754fd4e80a0fcfdc' })), h("div", { key: 'eec90c432f5002a2022a8d153db5633f8e09ebeb', class: "modal_footer" }, h("slot", { key: 'c7f99d613b1a3ff540e49a63010b2efcd0141f6b', name: "footer" })), !!this.loading && (h("div", { key: '4396aa0a43fef8dcb2a333165a9173db6e4a55ad', class: "loading" }, h("xv-loader-v2", { key: '3ca8de976550d84bbf72111e0b177be353e82adf', size: SIZE_VAR.LG })))))));
     }
     disconnectedCallback() {
         this.removeTriggerListener();