xv-webcomponents 1.20.2 → 1.22.1-qa.0

package/dist/collection/components/xv-number-input/xv-number-input.js

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { SIZE_VAR } from "../../types/enum";
+import { resolveFieldMessage } from "../../utils/utils";
 export class XvNumberInput {
     constructor() {
         this.step = 10;
@@ -32,12 +33,13 @@ export class XvNumberInput {
         this.valueChange.emit(this.value);
     }
     render() {
-        return (h(Host, { key: '48433efcac2571e9c35132a59671f2490f353620', class: { disabled: !!this.disabled } }, h("label", { key: 'd723e4ee9ea4923a4c97bd0882b2eb545325c439', class: "control" }, this.label && h("span", { key: '53bba2ac60f9b25f1d3ba0d718071c2c08580611', class: "control_label" }, this.label), h("div", { key: '822b57366a90669a54f9e74db068ee90b54826a2', class: {
+        const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
+        return (h(Host, { key: '64a5bf225ef8ea9761bcccdaae6093715928a836', class: { disabled: !!this.disabled } }, h("label", { key: '1e1405e4036502d71cef820b6c6673a7a0caca9b', class: "control" }, this.label && h("span", { key: 'd1f49c60749a0dfc5b4a27f3550710b8822df621', class: "control_label" }, this.label), h("div", { key: '929cb4f229d25fa22032846157e87a5650465199', class: {
                 'control_input': true,
                 readonly: !!this.readonly,
                 error: !!this.error,
                 warning: !!this.warning
-            } }, h("input", { key: '2ac3ba2d2fe7982437c0d28c436a478f22964d6f', type: "number", placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value }), h("div", { key: '0b7aa503686f72815b8d489863b7711c26cb83fc', class: "control_input__icons" }, this.loading ? (h("xv-loader-v2", { size: SIZE_VAR.XS })) : !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, h("xv-button-v2", { key: '5276fa743cd4d7cf9cacf9305d2ea22964335e75', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, h("span", { key: '9385c41e5eb131833939e4878ecaf7dacd231138', slot: "icon-left", class: "status-icon" }, "\u2212")), h("hr", { key: '2c9bc7b907000edf36ac45d72bc660853a5ba959' }), h("xv-button-v2", { key: 'a871b573841a63c989c1c811c8eb3557dffc02a4', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, h("span", { key: '6da92f9046004c27b3c03607d08e6c70f6310b87', slot: "icon-left", class: "status-icon" }, "+"))))), this.helper && h("p", { key: '1b094da19ac32b498efbaa92d956b121f503fbbc', class: "message" }, this.helper), typeof this.error === 'string' ? (h("p", { class: "message error" }, this.error)) : typeof this.warning === 'string' ? (h("p", { class: "message warning" }, this.warning)) : null));
+            } }, h("input", { key: '209da69c19f87fd25adeae412191951196f40d82', type: "number", placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value }), h("div", { key: '30be9949431909548abb85d79e234c8e8bbdd863', class: "control_input__icons" }, this.loading ? (h("xv-loader-v2", { size: SIZE_VAR.XS })) : !!this.error ? (h("span", { class: "status-icon error", "aria-hidden": "true" }, "!")) : !!this.warning ? (h("span", { class: "status-icon warning", "aria-hidden": "true" }, "\u26A0")) : null, h("xv-button-v2", { key: '6221e7306b5dea4064133ec226e4b3d4db8dfa79', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, h("span", { key: 'ea23a939a64b4f60a2266fad1eda9a34219d74a6', slot: "icon-left", class: "status-icon" }, "\u2212")), h("hr", { key: '5769c16821a814ff3535fa8a517840d8d3d39ba9' }), h("xv-button-v2", { key: 'a8b897ddadbcc5f7948aa9a602ea5f539bb3c511', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, h("span", { key: '0f0d6d469fc468ae596524d3abff6a1dbbd5171e', slot: "icon-left", class: "status-icon" }, "+"))))), message && (h("p", { key: '9a0cffa641d5532b636db46b0b06d0e99bd7f767', class: { message: true, [message.level]: true } }, message.text))));
     }
     static get is() { return "xv-number-input-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.css

@@ -1,131 +1,4 @@
 @charset "UTF-8";
-.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;
   background-color: transparent;

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.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 {
   --overflow-menu-size: 40px;
   --overflow-menu-item-padding: 11px 16px;

package/dist/collection/components/xv-pagination/xv-pagination.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: inline-flex;
 }

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

@@ -2,8 +2,14 @@ import { Host, h } from "@stencil/core";
 import { SIZE_VAR } from "../../types/enum";
 export class XvPagination {
     constructor() {
+        /*
+        * Rows per page; the select updates it, the consumer can also set it
+        * */
+        this.itemsPerPage = 10;
+        /*
+        * Selectable page sizes; array, or comma-separated via the attribute
+        * */
         this.itemsPerPageOptions = [10, 20, 30, 40, 50, 100];
-        this.itemsPerPage = this.itemsPerPageOptions[0];
         /*
         * total number of pages
         * */
@@ -40,6 +46,17 @@ export class XvPagination {
             this.rafId = requestAnimationFrame(() => this.updateVariantByWidth(width));
         };
     }
+    /** Select options; always includes the current itemsPerPage so it can be displayed. */
+    get pageSizeOptions() {
+        const raw = this.itemsPerPageOptions;
+        const parsed = (Array.isArray(raw) ? raw : `${raw !== null && raw !== void 0 ? raw : ''}`.split(','))
+            .map((option) => Number(option))
+            .filter((option) => Number.isFinite(option) && option > 0);
+        const options = parsed.length ? parsed : [this.itemsPerPage];
+        if (!options.includes(this.itemsPerPage))
+            options.push(this.itemsPerPage);
+        return [...new Set(options)].sort((a, b) => a - b);
+    }
     get visiblePagesWithDots() {
         const total = this.total;
         const current = this.page;
@@ -89,7 +106,7 @@ export class XvPagination {
             this.observer.disconnect();
     }
     render() {
-        return (h(Host, { key: '7c5589c5954a364956c471c8b214f7e5c6e2d217', class: { block: this.block, [this.currentVariant]: true, [this.size]: !!this.size } }, this.currentVariant === 'full' && (h("div", { key: '72a9851f3c53fca042f3a5cbefc87e2a4beddd8d', class: "block" }, h("select", { key: '31c16503e23de7c5e6b03b80db3df72a7bf68edb', class: "options-select", name: "options", onChange: this.handleItemsPerPageChange }, this.itemsPerPageOptions.map((v) => h("option", { value: v }, v))))), this.currentVariant === 'full' && (h("span", { key: 'e5d45975abec39806344a36b518129d327a589d5', class: "block block_full" }, `${(this.page - 1) * this.itemsPerPage + 1} – ${Math.min(this.page * this.itemsPerPage, this.totalItems)} von ${this.totalItems} Einträgen`)), this.currentVariant === 'full' && (h("div", { key: '0a97d5ec8e6163ec5f2acd1f613469be984ad829', class: "block" }, h("select", { key: 'f9e2ee52b8243e738e899a32578412853bf0dae3', class: "options-select", name: "pages", onChange: this.handlePageSelectChange }, Array.from({ length: this.total }, (_, i) => (h("option", { selected: this.page === i + 1, value: i + 1 }, i + 1)))), h("span", { key: '95b453e07438aac43c85cf0260415c4781517c24' }, "von ", this.total, " Seiten"))), this.currentVariant === 'compact' && h("span", { key: '591dc8b9ef95f0a94604937a6c3fd23ea5624850', class: "block" }, "Seite ", this.page), h("xv-button-v2", { key: 'd06344e19ef7a0cfc1cf3136c98ed579542a86f2', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page - 1), disabled: this.page <= 1 }, h("span", { key: '1e4dbe879f5fabfcc2ca4af2859124e99491ebae', slot: "icon-left", class: "icon icon_prev" })), this.currentVariant === 'regular' && (h("ul", { key: '8deafa7283a58edc710c5298821878c7de89d5bd', class: "list" }, this.visiblePagesWithDots.map((page) => (h("li", { class: { active: this.page === page } }, page === 'dots-start' ? (h("div", { class: "list_dots" }, h("xv-button-v2", { variant: "ghost", size: this.size, tabindex: -1 }, h("span", { slot: "icon-left", class: "list_dots__icon" }, "...")), h("select", { name: "start", onChange: this.handlePageSelectChange }, Array.from({ length: this.page - 3 }, (_, i) => (h("option", { value: i + 2 }, i + 2)))))) : page === 'dots-end' ? (h("div", { class: "list_dots" }, h("xv-button-v2", { variant: "ghost", size: this.size, tabindex: -1 }, h("span", { slot: "icon-left", class: "list_dots__icon" }, "...")), h("select", { name: "end", onChange: this.handlePageSelectChange }, Array.from({ length: this.total - (this.page + 2) }, (_, i) => (h("option", { value: i + this.page + 2 }, i + this.page + 2)))))) : (h("xv-button-v2", { variant: "ghost", size: this.size, disabled: this.page === page, onClick: () => this.handlePageChange(page) }, h("span", { class: "list_page", slot: "icon-left" }, page)))))))), h("xv-button-v2", { key: '14054db39c36ea71b040fbd40d22b109e46ecb27', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page + 1), disabled: this.page >= this.total }, h("span", { key: 'a42a8b4bd9f297d99b973ea016b98250f3498130', slot: "icon-left", class: "icon icon_next" }))));
+        return (h(Host, { key: '853af372b0548e1b375512b6f96814d0be1246d1', class: { block: this.block, [this.currentVariant]: true, [this.size]: !!this.size } }, this.currentVariant === 'full' && (h("div", { key: '3fe0eb5f1513036387d3b19690adcbb75ce41a48', class: "block" }, h("select", { key: '3ef0405928f23ed5d5451ade3157a6693635f6ac', class: "options-select", name: "options", onChange: this.handleItemsPerPageChange }, this.pageSizeOptions.map((v) => h("option", { selected: v === this.itemsPerPage, value: v }, v))))), this.currentVariant === 'full' && (h("span", { key: 'd3075acbd035ce70da73e3d4d946b9817d7a5a71', class: "block block_full" }, `${(this.page - 1) * this.itemsPerPage + 1} – ${Math.min(this.page * this.itemsPerPage, this.totalItems)} von ${this.totalItems} Einträgen`)), this.currentVariant === 'full' && (h("div", { key: 'd61561d15a3e2152d07a239d7dd19c72a221df09', class: "block" }, h("select", { key: '4026cc1aacf41e202162d82bc60c10b9b667a1f9', class: "options-select", name: "pages", onChange: this.handlePageSelectChange }, Array.from({ length: this.total }, (_, i) => (h("option", { selected: this.page === i + 1, value: i + 1 }, i + 1)))), h("span", { key: '8b29d19f1784f87cdaec13ac7f4af20927c9066b' }, "von ", this.total, " Seiten"))), this.currentVariant === 'compact' && h("span", { key: 'b2b9ffb161c08e230f79b4de3ddb1c36dc9fcaa6', class: "block" }, "Seite ", this.page), h("xv-button-v2", { key: '8831e47fd4bf5a673c5f85ac0684877791e7f72d', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page - 1), disabled: this.page <= 1 }, h("span", { key: 'bd6ad6defbac861aeee2ec7562983b4b6f889ed3', slot: "icon-left", class: "icon icon_prev" })), this.currentVariant === 'regular' && (h("ul", { key: '7f0116f8c496c6c393f06acd7d3758761e94e350', class: "list" }, this.visiblePagesWithDots.map((page) => (h("li", { class: { active: this.page === page } }, page === 'dots-start' ? (h("div", { class: "list_dots" }, h("xv-button-v2", { variant: "ghost", size: this.size, tabindex: -1 }, h("span", { slot: "icon-left", class: "list_dots__icon" }, "...")), h("select", { name: "start", onChange: this.handlePageSelectChange }, Array.from({ length: this.page - 3 }, (_, i) => (h("option", { value: i + 2 }, i + 2)))))) : page === 'dots-end' ? (h("div", { class: "list_dots" }, h("xv-button-v2", { variant: "ghost", size: this.size, tabindex: -1 }, h("span", { slot: "icon-left", class: "list_dots__icon" }, "...")), h("select", { name: "end", onChange: this.handlePageSelectChange }, Array.from({ length: this.total - (this.page + 2) }, (_, i) => (h("option", { value: i + this.page + 2 }, i + this.page + 2)))))) : (h("xv-button-v2", { variant: "ghost", size: this.size, disabled: this.page === page, onClick: () => this.handlePageChange(page) }, h("span", { class: "list_page", slot: "icon-left" }, page)))))))), h("xv-button-v2", { key: '811145f6e62839858ed51b81361db161032787c3', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page + 1), disabled: this.page >= this.total }, h("span", { key: '7a5385386dafdfe4a703f47b47998b9fa431070c', slot: "icon-left", class: "icon icon_next" }))));
     }
     static get is() { return "xv-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -105,6 +122,46 @@ export class XvPagination {
     }
     static get properties() {
         return {
+            "itemsPerPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items-per-page",
+                "defaultValue": "10"
+            },
+            "itemsPerPageOptions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[] | string",
+                    "resolved": "number[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items-per-page-options",
+                "defaultValue": "[10, 20, 30, 40, 50, 100]"
+            },
             "total": {
                 "type": "number",
                 "mutable": false,
@@ -271,7 +328,6 @@ export class XvPagination {
     }
     static get states() {
         return {
-            "itemsPerPage": {},
             "currentVariant": {}
         };
     }

package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-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(.xv-progress-indicator-item) {
   display: flex;
   flex: 1;

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

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