xv-webcomponents 1.22.1 → 1.22.2-qa.0

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

@@ -31,7 +31,8 @@ export class XvDatepicker {
                 return;
             }
             if ((this.minDate && dateFns.isBefore(newDate, this.minDate)) ||
-                (this.maxDate && dateFns.isAfter(newDate, this.maxDate))) {
+                (this.maxDate && dateFns.isAfter(newDate, this.maxDate)) ||
+                this.disabledSet.has(val)) {
                 return;
             }
             if (this.variant === 'single') {
@@ -56,7 +57,8 @@ export class XvDatepicker {
             const val = new Date(input.value);
             if (!dateFns.isValid(val) ||
                 (this.minDate && dateFns.isBefore(val, this.minDate)) ||
-                (this.maxDate && dateFns.isAfter(val, this.maxDate))) {
+                (this.maxDate && dateFns.isAfter(val, this.maxDate)) ||
+                this.disabledSet.has(input.value)) {
                 this.value[range === 'start' ? 0 : 1] = undefined;
                 input.value = '';
                 this.localError = 'Das angegebene Datum ist nicht verfügbar.';
@@ -131,6 +133,30 @@ export class XvDatepicker {
             return iso;
         return dateFns.parse(this.max, 'yyyy-MM-dd', new Date());
     }
+    get disabledSet() {
+        var _a;
+        const keys = ((_a = this.disabledDates) !== null && _a !== void 0 ? _a : []).map(d => this.toDayKey(d)).filter(Boolean);
+        return new Set(keys);
+    }
+    /** Normalise a disabled-date entry to a local 'yyyy-MM-dd' key. */
+    toDayKey(value) {
+        if (value instanceof Date) {
+            return dateFns.isValid(value) ? dateFns.format(value, DEF_FORMAT) : '';
+        }
+        // Bare 'yyyy-MM-dd' is already a key — use verbatim to avoid a TZ shift
+        // from re-parsing it into a Date.
+        if (/^\d{4}-\d{2}-\d{2}$/.test(value))
+            return value;
+        const parsed = dateFns.parseISO(value);
+        return dateFns.isValid(parsed) ? dateFns.format(parsed, DEF_FORMAT) : '';
+    }
+    isDayDisabled(date, disabled = this.disabledSet) {
+        if (this.minDate && dateFns.isBefore(date, this.minDate))
+            return true;
+        if (this.maxDate && dateFns.isAfter(date, this.maxDate))
+            return true;
+        return disabled.has(dateFns.format(date, DEF_FORMAT));
+    }
     get isPrevDisabled() {
         if (!this.minDate)
             return false;
@@ -164,13 +190,14 @@ export class XvDatepicker {
     getCalendarGrid() {
         const start = dateFns.startOfWeek(dateFns.startOfMonth(this.month), { weekStartsOn: 1 });
         const end = dateFns.endOfWeek(dateFns.endOfMonth(this.month), { weekStartsOn: 1 });
+        const disabled = this.disabledSet;
         this.days = dateFns.eachDayOfInterval({ start, end }).map(date => ({
             date,
             week: dateFns.getWeek(date, { weekStartsOn: 1 }),
             day: date.getDate(),
             isCurrentMonth: dateFns.isSameMonth(date, this.month),
             isToday: dateFns.isToday(date),
-            disabled: (this.minDate && dateFns.isBefore(date, this.minDate)) || (this.maxDate && dateFns.isAfter(date, this.maxDate))
+            disabled: this.isDayDisabled(date, disabled)
         }));
         return this.days;
     }
@@ -234,12 +261,12 @@ export class XvDatepicker {
             warning: this.warning,
             helper: this.helper,
         });
-        return (h(Host, { key: '0398b77b6e5b6c1664f34cec632a9811f0004dda', class: { disabled: !!this.disabled }, tabindex: this.disabled ? '-1' : undefined }, h("div", { key: 'eacd3f96b33ae351271daf58deffd9523921b520', "aria-controls": "popover", class: "control" }, this.label && h("label", { key: '450b724b86ff4d60960cb43d4ec2410bb25a3de0', class: "control_label" }, this.label), h("div", { key: '454fa95047b044f584495e18027d24e6f0b14e7f', class: {
+        return (h(Host, { key: 'd3824a5d7c420cf3956bac19dce90ad6a2bf7fa2', class: { disabled: !!this.disabled }, tabindex: this.disabled ? '-1' : undefined }, h("div", { key: 'd93850164d288cb74c8120596196088e44c33a23', "aria-controls": "popover", class: "control" }, this.label && h("label", { key: 'e136f0ef2de64fa2e95b77caeb3675cee7626575', class: "control_label" }, this.label), h("div", { key: '102e8ce2e9dc0d9e74ba9a771b513977acbeb0ba', 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: 'b711134f0a3082990c61dee4955303b8ef537260', 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: '5b7beaf9a3caaeed9684761dd0ace3932df81626', 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') }))), message && (h("p", { key: '2ce2c082d806e13ea1ee47450e8fb1451cd8caed', class: { control_message: true, [message.level]: true } }, message.text))), h("div", { key: '689c3a2bdd00e01d1e60291ceb50f15eb152a660', role: "dialog", class: { popover: true, open: this.open }, ref: (el) => (this.popoverEl = el) }, h("div", { key: '2829d0329004bc14007bdae08be75689315499da', class: "header" }, h("xv-button-v2", { key: 'cf33dc885de4ac63d4732f3d766c22c6afaec46b', tabindex: this.open ? undefined : '-1', disabled: this.isPrevDisabled, variant: "ghost", onClick: this.prevMonth }, h("span", { key: '5af099b261451004e7c10cfbc356686137b590e7', slot: "icon-left", class: "header_icon prev" })), h("p", { key: '3ddb1ae9a61ccf7e881b9d63210af64d691e8b36', class: "header_date" }, dateFns.format(this.month, 'LLLL', { locale: de }), h("input", { key: 'e3a48a0b0a42d0c5ffdfb006a856d4f8471b35cb', tabindex: this.open ? undefined : '-1', type: "number", value: this.month.getFullYear(), onInput: this.handleYearChange, onBlur: this.handleYearBlur })), h("xv-button-v2", { key: 'b14264dc560c4c2a0194fe73c6166e8dd8654032', tabindex: this.open ? undefined : '-1', disabled: this.isNextDisabled, variant: "ghost", onClick: this.nextMonth }, h("span", { key: '89067f6b547c496b487a41740893362bee9105fc', slot: "icon-left", class: "header_icon next" }))), h("div", { key: 'f5bc495aca4c4fcf2b359d694e41639ce617c396', class: "week" }, h("p", { key: '4d978f953f51439d88da536d1bfa3876d704965e', class: "week_day" }), WEEK.map((day) => h("p", { class: "week_day" }, day, "."))), h("div", { key: 'aea1d83963272f1c915a814a7ad8de7465667374', 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: '815eb8a1b9aef9a4ffae56ce120175e4e727e2c0', 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: '4ae5693501d921d8431da8d261de777f159eb778', 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') }))), message && (h("p", { key: 'a3facc864173f9a8d74ef8542fff82ea935f5593', class: { control_message: true, [message.level]: true } }, message.text))), h("div", { key: '649f74e157bcd2e834d03c7a2d52968fbe3087c1', role: "dialog", class: { popover: true, open: this.open }, ref: (el) => (this.popoverEl = el) }, h("div", { key: '2cfbafcfaa23d86e610d488315ac6b1aa34dbf54', class: "header" }, h("xv-button-v2", { key: '3694744a0a8790fc80f65ae2a3a33d7f5a0a4d15', tabindex: this.open ? undefined : '-1', disabled: this.isPrevDisabled, variant: "ghost", onClick: this.prevMonth }, h("span", { key: '96aec7fad4fafc6ed43bea53b5000a1100815bf7', slot: "icon-left", class: "header_icon prev" })), h("p", { key: 'a52cafec3ee1d519d3acd39b65c59209b05a17f3', class: "header_date" }, dateFns.format(this.month, 'LLLL', { locale: de }), h("input", { key: 'f523d1ab179245a725a5bfe2ec97f3bce50533de', tabindex: this.open ? undefined : '-1', type: "number", value: this.month.getFullYear(), onInput: this.handleYearChange, onBlur: this.handleYearBlur })), h("xv-button-v2", { key: '16a1f92a5a461a4c812225a586ea705e858aeac7', tabindex: this.open ? undefined : '-1', disabled: this.isNextDisabled, variant: "ghost", onClick: this.nextMonth }, h("span", { key: '5b38b9fef3ab9914f879f8525dcd5b46f46058b4', slot: "icon-left", class: "header_icon next" }))), h("div", { key: '223691312e59a749bd1f8a982b7270fb529b6b32', class: "week" }, h("p", { key: '898552659a61a0cf789541cf694f7589eacdf457', class: "week_day" }), WEEK.map((day) => h("p", { class: "week_day" }, day, "."))), h("div", { key: '7c91b9a24f7d37f64f159f290a43cbfff4c9be1a', 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,
@@ -521,6 +548,28 @@ export class XvDatepicker {
                 "setter": false,
                 "reflect": false,
                 "attribute": "max"
+            },
+            "disabledDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(Date | string)[]",
+                    "resolved": "(string | Date)[]",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Individual dates to disable within the min/max range. Each entry may be a\n`Date`, a bare 'yyyy-MM-dd' string, or a full ISO string \u2014 all normalised\nto a local 'yyyy-MM-dd' key that matches the calendar grid.\nComposes with min/max: a day is selectable only when it is inside the range\nAND not listed here (e.g. to allow only certain weekdays / block holidays)."
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
@@ -583,6 +632,15 @@ export class XvDatepicker {
             }, {
                 "propName": "month",
                 "methodName": "getCalendarGrid"
+            }, {
+                "propName": "min",
+                "methodName": "getCalendarGrid"
+            }, {
+                "propName": "max",
+                "methodName": "getCalendarGrid"
+            }, {
+                "propName": "disabledDates",
+                "methodName": "getCalendarGrid"
             }, {
                 "propName": "value",
                 "methodName": "handleValueChange"

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

@@ -1,130 +1,3 @@
-.xv-container {
-  width: 100%;
-  max-width: 1170px;
-  margin-inline: auto;
-}
-@media (min-width: 576px) {
-  .xv-container {
-    max-width: 540px;
-  }
-}
-@media (min-width: 768px) {
-  .xv-container {
-    max-width: 720px;
-  }
-}
-@media (min-width: 992px) {
-  .xv-container {
-    max-width: 960px;
-    padding-inline: var(--bs-gutter-x, 0.75rem);
-  }
-}
-@media (min-width: 1200px) {
-  .xv-container {
-    max-width: 1140px;
-  }
-}
-@media (min-width: 1400px) {
-  .xv-container {
-    max-width: 1320px;
-  }
-}
-
-.xv-tooltip[role=tooltip] {
-  position: absolute;
-  background-color: var(--background-inverse, #333333);
-  color: var(--text-on-color);
-  padding: var(--spacing-03) var(--spacing-04);
-  border-radius: 3px;
-  font-size: var(--fz-sm);
-  z-index: 999;
-  min-width: min(150px, 90vw);
-  max-width: min(400px, 90vw);
-}
-.xv-tooltip[role=tooltip]::after {
-  content: "";
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
-  bottom: -5px;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 5px 5px 0 5px;
-  border-color: var(--background-inverse, black) transparent transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
-  bottom: -5px;
-  left: 12px;
-  border-width: 5px 5px 0 5px;
-  border-color: var(--background-inverse, black) transparent transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
-  bottom: -5px;
-  right: 12px;
-  border-width: 5px 5px 0 5px;
-  border-color: var(--background-inverse, black) transparent transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
-  top: -5px;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent var(--background-inverse, black) transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
-  top: -5px;
-  left: 12px;
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent var(--background-inverse, black) transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
-  top: -5px;
-  right: 12px;
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent var(--background-inverse, black) transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
-  top: 50%;
-  right: -5px;
-  transform: translateY(-50%);
-  border-width: 5px 0 5px 5px;
-  border-color: transparent transparent transparent var(--background-inverse, black);
-}
-.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
-  top: 12px;
-  right: -5px;
-  border-width: 5px 0 5px 5px;
-  border-color: transparent transparent transparent var(--background-inverse, black);
-}
-.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
-  bottom: 12px;
-  right: -5px;
-  border-width: 5px 0 5px 5px;
-  border-color: transparent transparent transparent var(--background-inverse, black);
-}
-.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
-  top: 50%;
-  left: -5px;
-  transform: translateY(-50%);
-  border-width: 5px 5px 5px 0;
-  border-color: transparent var(--background-inverse, black) transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
-  top: 12px;
-  left: -5px;
-  border-width: 5px 5px 5px 0;
-  border-color: transparent var(--background-inverse, black) transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
-  bottom: 12px;
-  left: -5px;
-  border-width: 5px 5px 5px 0;
-  border-color: transparent var(--background-inverse, black) transparent transparent;
-}
-
 :host {
   display: block;
 }

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: '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" })));
+        return (h(Host, { key: 'f099e23dd392e97ec646b24d88758ba47568fe15', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, this.multiple && (h("xv-checkbox-v2", { key: '27641c4a60485d70a61b72c8dad725c2c7f9390f', class: "multiple-check", size: this.size, checked: this.selected, disabled: this.disabled })), h("slot", { key: 'eefbe58b06a4c2995e2561e78436f724fee77021' }), (!this.multiple && this.selected) && h("span", { key: '57b640d72e80899786d9d14659cc79a003907ba5', class: "checkmark far fa-check" })));
     }
     componentWillLoad() {
         if (!this.value)

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

@@ -1,130 +1,3 @@
-.xv-container {
-  width: 100%;
-  max-width: 1170px;
-  margin-inline: auto;
-}
-@media (min-width: 576px) {
-  .xv-container {
-    max-width: 540px;
-  }
-}
-@media (min-width: 768px) {
-  .xv-container {
-    max-width: 720px;
-  }
-}
-@media (min-width: 992px) {
-  .xv-container {
-    max-width: 960px;
-    padding-inline: var(--bs-gutter-x, 0.75rem);
-  }
-}
-@media (min-width: 1200px) {
-  .xv-container {
-    max-width: 1140px;
-  }
-}
-@media (min-width: 1400px) {
-  .xv-container {
-    max-width: 1320px;
-  }
-}
-
-.xv-tooltip[role=tooltip] {
-  position: absolute;
-  background-color: var(--background-inverse, #333333);
-  color: var(--text-on-color);
-  padding: var(--spacing-03) var(--spacing-04);
-  border-radius: 3px;
-  font-size: var(--fz-sm);
-  z-index: 999;
-  min-width: min(150px, 90vw);
-  max-width: min(400px, 90vw);
-}
-.xv-tooltip[role=tooltip]::after {
-  content: "";
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
-  bottom: -5px;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 5px 5px 0 5px;
-  border-color: var(--background-inverse, black) transparent transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
-  bottom: -5px;
-  left: 12px;
-  border-width: 5px 5px 0 5px;
-  border-color: var(--background-inverse, black) transparent transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
-  bottom: -5px;
-  right: 12px;
-  border-width: 5px 5px 0 5px;
-  border-color: var(--background-inverse, black) transparent transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
-  top: -5px;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent var(--background-inverse, black) transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
-  top: -5px;
-  left: 12px;
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent var(--background-inverse, black) transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
-  top: -5px;
-  right: 12px;
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent var(--background-inverse, black) transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
-  top: 50%;
-  right: -5px;
-  transform: translateY(-50%);
-  border-width: 5px 0 5px 5px;
-  border-color: transparent transparent transparent var(--background-inverse, black);
-}
-.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
-  top: 12px;
-  right: -5px;
-  border-width: 5px 0 5px 5px;
-  border-color: transparent transparent transparent var(--background-inverse, black);
-}
-.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
-  bottom: 12px;
-  right: -5px;
-  border-width: 5px 0 5px 5px;
-  border-color: transparent transparent transparent var(--background-inverse, black);
-}
-.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
-  top: 50%;
-  left: -5px;
-  transform: translateY(-50%);
-  border-width: 5px 5px 5px 0;
-  border-color: transparent var(--background-inverse, black) transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
-  top: 12px;
-  left: -5px;
-  border-width: 5px 5px 5px 0;
-  border-color: transparent var(--background-inverse, black) transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
-  bottom: 12px;
-  left: -5px;
-  border-width: 5px 5px 5px 0;
-  border-color: transparent var(--background-inverse, black) transparent transparent;
-}
-
 :host {
   --dropdown-height: 40px;
   --dropdown-padding-x: 16px;

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

@@ -282,7 +282,7 @@ export class XvDropdown {
     /*  endregion Search methods */
     render() {
         const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
-        return (h(Host, { key: '2e0a4b087e8b1a66bf4bf3ddac2fb342fb988f1e', 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: '9317e138effdd7ec69133304fe50d11c406b8faf', class: "label" }, h("slot", { key: '896604f1fef1f4531793a865c2083eaa5b744aa0', name: "label" }, this.label), this.info && h("xv-tooltip-v2", { key: 'd862a834642e1c115a063601926711339c53168b', class: "label_info", message: this.info }))), h("div", { key: '2cf34c1d32737ac0b664757b1a53bea34a507c72', class: { "xv-dropdown-control control": true, readonly: !!this.readonly }, onClick: this.handleOpen }, (this.multiple && this.selectedMap.size > 0) && (h("xv-tag-v2", { key: '9dd7be50d9ce42e037822502720a949ac071d8e0', class: "control_count", onClick: (e) => e.stopPropagation(), 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: '023c89db58f385e8a00cab6dce050048b2765b82', 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: '5994fb2f805d0f1c904558f0ded054cd30c14210', 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: 'a2872c7cb6fbeb25583d4ed809b79b11aa533c4e', 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: '8908992fae99c07e3e9d2e06b705c55a4d73fb0a', class: "options_search" }, h("xv-text-input-v2", { key: '21fb4c673a3e46c024379ec7252026c0cf199ff4', 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" })), message && h("p", { key: '104c79569b898fd9f0a9826654de18d16bc68a16', class: "helper" }, message.text)));
+        return (h(Host, { key: '01b71caf620b27aa3cf098ab9449196c1b7b56ea', 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: 'd99f47f2abbbe370efde3a702b5d1c61b11aa4ca', class: "label" }, h("slot", { key: '2ca43ab5d65eb331d6ffd2ca10c251bcd6f6c3d0', name: "label" }, this.label), this.info && h("xv-tooltip-v2", { key: '7d55fa244097898202318adc3b03b898cb4b3f11', class: "label_info", message: this.info }))), h("div", { key: 'c854210410d358b440559702c4efab8b9ac894b8', class: { "xv-dropdown-control control": true, readonly: !!this.readonly }, onClick: this.handleOpen }, (this.multiple && this.selectedMap.size > 0) && (h("xv-tag-v2", { key: '4d46c14e2aab62651692a98b6c3d321d7073849c', class: "control_count", onClick: (e) => e.stopPropagation(), 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: 'e3bf3f8eb0b3e71038423e8eb2e14d78dc4ca33a', 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: '48f1408c0ebaa4c3b0c947dd4d9fdb2ab21a11c9', 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: '8915c7c514f6847a0d479c3ad1d39e00dbef46c2', 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: '2f59d1e41e8cf05038174123bad5b55038be5d75', class: "options_search" }, h("xv-text-input-v2", { key: '8670ba300bb2410d9ba708f4d07ba8f8def0c6c9', 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" })), message && h("p", { key: 'cade20ffd199293bcdb1ee7fa5c6d20e7294929e', class: "helper" }, message.text)));
     }
     componentDidLoad() {
         this.syncOpenState();

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

@@ -1,130 +1,3 @@
-.xv-container {
-  width: 100%;
-  max-width: 1170px;
-  margin-inline: auto;
-}
-@media (min-width: 576px) {
-  .xv-container {
-    max-width: 540px;
-  }
-}
-@media (min-width: 768px) {
-  .xv-container {
-    max-width: 720px;
-  }
-}
-@media (min-width: 992px) {
-  .xv-container {
-    max-width: 960px;
-    padding-inline: var(--bs-gutter-x, 0.75rem);
-  }
-}
-@media (min-width: 1200px) {
-  .xv-container {
-    max-width: 1140px;
-  }
-}
-@media (min-width: 1400px) {
-  .xv-container {
-    max-width: 1320px;
-  }
-}
-
-.xv-tooltip[role=tooltip] {
-  position: absolute;
-  background-color: var(--background-inverse, #333333);
-  color: var(--text-on-color);
-  padding: var(--spacing-03) var(--spacing-04);
-  border-radius: 3px;
-  font-size: var(--fz-sm);
-  z-index: 999;
-  min-width: min(150px, 90vw);
-  max-width: min(400px, 90vw);
-}
-.xv-tooltip[role=tooltip]::after {
-  content: "";
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-style: solid;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=top]::after {
-  bottom: -5px;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 5px 5px 0 5px;
-  border-color: var(--background-inverse, black) transparent transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=top-start]::after {
-  bottom: -5px;
-  left: 12px;
-  border-width: 5px 5px 0 5px;
-  border-color: var(--background-inverse, black) transparent transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=top-end]::after {
-  bottom: -5px;
-  right: 12px;
-  border-width: 5px 5px 0 5px;
-  border-color: var(--background-inverse, black) transparent transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=bottom]::after {
-  top: -5px;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent var(--background-inverse, black) transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=bottom-start]::after {
-  top: -5px;
-  left: 12px;
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent var(--background-inverse, black) transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=bottom-end]::after {
-  top: -5px;
-  right: 12px;
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent var(--background-inverse, black) transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=left]::after {
-  top: 50%;
-  right: -5px;
-  transform: translateY(-50%);
-  border-width: 5px 0 5px 5px;
-  border-color: transparent transparent transparent var(--background-inverse, black);
-}
-.xv-tooltip[role=tooltip][data-popper-placement=left-start]::after {
-  top: 12px;
-  right: -5px;
-  border-width: 5px 0 5px 5px;
-  border-color: transparent transparent transparent var(--background-inverse, black);
-}
-.xv-tooltip[role=tooltip][data-popper-placement=left-end]::after {
-  bottom: 12px;
-  right: -5px;
-  border-width: 5px 0 5px 5px;
-  border-color: transparent transparent transparent var(--background-inverse, black);
-}
-.xv-tooltip[role=tooltip][data-popper-placement=right]::after {
-  top: 50%;
-  left: -5px;
-  transform: translateY(-50%);
-  border-width: 5px 5px 5px 0;
-  border-color: transparent var(--background-inverse, black) transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=right-start]::after {
-  top: 12px;
-  left: -5px;
-  border-width: 5px 5px 5px 0;
-  border-color: transparent var(--background-inverse, black) transparent transparent;
-}
-.xv-tooltip[role=tooltip][data-popper-placement=right-end]::after {
-  bottom: 12px;
-  left: -5px;
-  border-width: 5px 5px 5px 0;
-  border-color: transparent var(--background-inverse, black) transparent transparent;
-}
-
 :host {
   font-family: inherit;
   display: flex;

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

@@ -84,7 +84,7 @@ export class XvFileUploader {
         }
     }
     render() {
-        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) => {
+        return (h(Host, { key: 'b18153e870fd78c9ee386af30a4b0163e9345408', class: { 'upload-wrapper': true, [`uploader-${this.size}`]: true, disabled: !!this.disabled, error: !!this.error } }, this.label && h("label", { key: 'baaaee91572847ae722b2c6d2e28fccf72571a3a', class: "label" }, this.label), this.description && h("p", { key: '4ac3753917d2d174988a2cf75d9c5f456d4079cd', 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: '6cecaf189c5ab89323302a8a47375645617af1d7', ref: el => (this.fileInput = el), type: "file", hidden: true, onChange: this.onFileSelect, multiple: this.multiple, accept: this.accept.join(',') }), this.error && h("p", { key: '6fb87dc13c0f659c6d52e93cdaaaea1737f8fcc6', class: "global-error" }, this.error), h("ul", { key: '1dc56f103b4ab0dc016b46ab499e895e62ada3ed', 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)));
         }))));