xv-webcomponents 1.21.1-dev.0 → 1.22.1-qa.0

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

@@ -34,12 +34,12 @@ export class XvNumberInput {
     }
     render() {
         const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
-        return (h(Host, { key: 'ba63e7fa19fd83ab096c869ab3a33ed4dabef168', class: { disabled: !!this.disabled } }, h("label", { key: '8a137804864b4e54565596c91ed52c79fa6a66cf', class: "control" }, this.label && h("span", { key: '77ddec282acdf268d31af796d1cf8da7fe44fe5e', class: "control_label" }, this.label), h("div", { key: '064f3788cf5c2ef4d9cdfb923a358e97d561c7a0', class: {
+        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: '4bf26b850789d854d44b793dca1c0d227c660a99', 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: '596667cfe48667f702dfcb9065c98a898d610211', 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: '9e79ffafd54dc828dead73978cdbb72b179c4897', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, h("span", { key: 'f0d3762af206c0a66ec2164446455d17480a376e', slot: "icon-left", class: "status-icon" }, "\u2212")), h("hr", { key: 'd52a3f06f82bf5889ad1e0dd43cbd4e0714d71d5' }), h("xv-button-v2", { key: '41599106c8c01c493b0a5b8ee2ef0c3ab089168f', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, h("span", { key: 'ff2bdef2a4b23c35026be7b748a900aaf92d8015', slot: "icon-left", class: "status-icon" }, "+"))))), message && (h("p", { key: 'c47ab641f1397f365fc38e745eaedc8e7c42d93d', class: { message: true, [message.level]: true } }, message.text))));
+            } }, 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: 'c633c6ac9fe8914f9bb3450454d29deb4498f33c', class: { block: this.block, [this.currentVariant]: true, [this.size]: !!this.size } }, this.currentVariant === 'full' && (h("div", { key: '4689c4ed6f64a9b5dc2e3395d53b490a730e5ca5', class: "block" }, h("select", { key: '5f862add397fe7cede0dd669cf2cac3ee2faed24', class: "options-select", name: "options", onChange: this.handleItemsPerPageChange }, this.itemsPerPageOptions.map((v) => h("option", { value: v }, v))))), this.currentVariant === 'full' && (h("span", { key: 'cf3e2494f6de619c2c7f6022e399a73a3008f959', 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: 'ba7e56f791156055ed691c650538a4f96ea17fa7', class: "block" }, h("select", { key: '253e38124f969a044dae1bca9fcfec208d632e19', 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: '7ea03075ea162fc9207dd9289a0a5ccef2843b04' }, "von ", this.total, " Seiten"))), this.currentVariant === 'compact' && h("span", { key: 'a9823279d3d3a75b87b00a191f751593b9b5e697', class: "block" }, "Seite ", this.page), h("xv-button-v2", { key: '231a8a4b65aed97f8da971985189db36a134bd7b', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page - 1), disabled: this.page <= 1 }, h("span", { key: 'dcbb692dbc819e659f257b96325b7db487c98eaf', slot: "icon-left", class: "icon icon_prev" })), this.currentVariant === 'regular' && (h("ul", { key: '5f8b4afeb3d9db94cee15be516a670456d433753', 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: 'b38241f82c34e3f24c49b6b2afe1a221c23079b8', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page + 1), disabled: this.page >= this.total }, h("span", { key: '9a3f915b28dc8bb53079c8f66c7959e81163762f', 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: '36c3535224bef33c901f5ca306e8a51f7ec67b7d', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: '07f68ece4250da1fa1c6865b2109181b455233ac', class: "line" }), h("span", { key: '8b1a10b3492a8565a3ece85e0992844b4789f6ed', class: "icon" }, h("svg", { key: '9b4d63c32a8c8b2b4e48ffd48e1bc97e9d28911b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: 'a324fd9401d75744e6f6be34b087035561699c46', 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: 'ced9d4b3685303b707ade7cfbb778e58bd76f354', class: "label" }, h("slot", { key: 'f016d1345554df36532f7521706a794c9cb6ed76' }))));
+        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"; }