xv-webcomponents 1.25.1 → 2.0.0-beta.28

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: 'f38ba33135269ebb1f42b09f0632183723e216d3', class: { disabled: !!this.disabled } }, h("label", { key: 'da0b638442125c176889d98df343b3084a015b08', class: "control" }, this.label && h("span", { key: '317e7b66636becf0e7fc620d9f131396a8e6d223', class: "control_label" }, this.label), h("div", { key: 'fda02350022b9bb24e221bb2055d29b6926a7065', class: {
+        return (h(Host, { key: 'fd949dbee9a685334744513839474335e97190d3', class: { disabled: !!this.disabled } }, h("label", { key: 'db29ff8f70da55aa973496ee7e7af965d79e7bae', class: "control" }, this.label && h("span", { key: 'caa748ec74ea2effe380a56b0855633ce10e2065', class: "control_label" }, this.label), h("div", { key: '8fe3b2f7905905e7b1d27ba43c571b4eee7593b8', class: {
                 'control_input': true,
                 readonly: !!this.readonly,
                 error: !!this.error,
                 warning: !!this.warning
-            } }, h("input", { key: '3fda092a38b7998ea0c55814ed6188acb97865b5', 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: '64bbba5f9d3bd029c244f9ab7f6a0121a4aedd58', 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: 'aa9e83de581f19b936b68b0981888ecaf945bc71', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, h("span", { key: 'f6d854836f44bd40c37279015308276b147f6b30', slot: "icon-left", class: "status-icon" }, "\u2212")), h("hr", { key: '512d0208bb7bad48f2df1271dd3d2439301abb50' }), h("xv-button-v2", { key: '5e288267dd454d6368ec773aca888bb071fd00fd', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, h("span", { key: 'd9e9304ef6ace291bfea30d08057ba48facb9de7', slot: "icon-left", class: "status-icon" }, "+"))))), message && (h("p", { key: 'eb24260824a30ea3b3888fbf7d532d97544152de', class: { message: true, [message.level]: true } }, message.text))));
+            } }, h("input", { key: 'ab4b88d4f838ee579c7aaed2b3bbda40f9d5af85', 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: '54c0f3a57ea0453c933007c1c497fb04db93abc6', 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: '71aa77781a192b7bf256ca2f76758b7b88a585db', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.decrement, "aria-label": "Decrease" }, h("span", { key: '5dfbf741ac7bd7e3f13fb74e0b3128d42e90792a', slot: "icon-left", class: "status-icon" }, "\u2212")), h("hr", { key: '300df3ef94b8a27ae1a9fac99f7b83bd41212e5b' }), h("xv-button-v2", { key: '54fe63a29a63ba942e0c7f8e57049deef32a0451', size: this.size, variant: "ghost", disabled: this.disabled || this.readonly, onClick: this.increment, "aria-label": "Increase" }, h("span", { key: '0cbbf8c2dd42fe60f5ab60a61c4c33373290cca7', slot: "icon-left", class: "status-icon" }, "+"))))), message && (h("p", { key: 'e8fff1ef532b31dfe97f01e8f92d776e9abd9a94', class: { message: true, [message.level]: true } }, message.text))));
     }
     static get is() { return "xv-number-input-v2"; }
     static get encapsulation() { return "shadow"; }
@@ -334,7 +334,8 @@ export class XvNumberInput {
                         "SIZE_VAR_STR": {
                             "location": "import",
                             "path": "../../types/enum",
-                            "id": "src/types/enum.ts::SIZE_VAR_STR"
+                            "id": "src/types/enum.ts::SIZE_VAR_STR",
+                            "referenceLocation": "SIZE_VAR_STR"
                         }
                     }
                 },

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

@@ -75,7 +75,8 @@ export class XvOverflowMenuItem {
                         "OverflowMenuEvent": {
                             "location": "import",
                             "path": "../_vars",
-                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuEvent"
+                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuEvent",
+                            "referenceLocation": "OverflowMenuEvent"
                         }
                     }
                 },
@@ -100,7 +101,8 @@ export class XvOverflowMenuItem {
                         "OverflowMenuVariant": {
                             "location": "import",
                             "path": "../_vars",
-                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuVariant"
+                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuVariant",
+                            "referenceLocation": "OverflowMenuVariant"
                         }
                     }
                 },
@@ -114,7 +116,7 @@ export class XvOverflowMenuItem {
                 "setter": false,
                 "reflect": true,
                 "attribute": "variant",
-                "defaultValue": "OverflowMenuVariant.DEFAULT"
+                "defaultValue": "''"
             },
             "clickable": {
                 "type": "boolean",
@@ -220,7 +222,8 @@ export class XvOverflowMenuItem {
                         "OverflowMenuEvent": {
                             "location": "import",
                             "path": "../_vars",
-                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuEvent"
+                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuEvent",
+                            "referenceLocation": "OverflowMenuEvent"
                         }
                     }
                 }

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

@@ -21,20 +21,21 @@ export class XvOverflowMenu {
             document.removeEventListener('click', this.handleClickOutside, { capture: true });
         };
         this.handleClickOutside = (ev) => {
-            var _a, _b, _c;
+            var _a, _b;
             if (!this.open)
                 return;
-            // A shadow-DOM click retargets ev.target to the host in the browser (covered by el.contains).
-            // Also check the shadow trigger/list directly so it works when there is no retargeting (jsdom).
-            const target = ev.target;
-            if (this.el.contains(target))
+            // composedPath is the only check that survives shadow-DOM retargeting: a click inside a menu
+            // that lives in another component's shadow root arrives here retargeted to that outer host.
+            const path = (_b = (_a = ev.composedPath) === null || _a === void 0 ? void 0 : _a.call(ev)) !== null && _b !== void 0 ? _b : [];
+            const inside = (node) => !!node && (path.includes(node) || (path.length === 0 && node.contains(ev.target)));
+            if (inside(this.el))
                 return;
-            if ((_a = this.triggerButtonEl) === null || _a === void 0 ? void 0 : _a.contains(target))
+            if (inside(this.triggerButtonEl))
                 return;
-            if ((_b = this.listEl) === null || _b === void 0 ? void 0 : _b.contains(target))
+            if (inside(this.listEl))
                 return;
             // A click on the anchor is handled by its own listener (toggle) — don't treat it as "outside".
-            if ((_c = this.anchorEl) === null || _c === void 0 ? void 0 : _c.contains(target))
+            if (inside(this.anchorEl))
                 return;
             this.open = false;
         };
@@ -397,7 +398,8 @@ export class XvOverflowMenu {
                         "SIZE_VAR_STR": {
                             "location": "import",
                             "path": "../../types/enum",
-                            "id": "src/types/enum.ts::SIZE_VAR_STR"
+                            "id": "src/types/enum.ts::SIZE_VAR_STR",
+                            "referenceLocation": "SIZE_VAR_STR"
                         }
                     }
                 },
@@ -449,7 +451,7 @@ export class XvOverflowMenu {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Open the menu from an arbitrary element instead of the built-in trigger button.\nAccepts an element or a CSS selector; a click on it toggles the menu, which is then\npositioned against that element."
+                    "text": "Open the menu from an arbitrary element instead of the built-in trigger button.\r\nAccepts an element or a CSS selector; a click on it toggles the menu, which is then\r\npositioned against that element."
                 },
                 "getter": false,
                 "setter": false,
@@ -481,7 +483,8 @@ export class XvOverflowMenu {
                         "OverflowMenuEvent": {
                             "location": "import",
                             "path": "./_vars",
-                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuEvent"
+                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuEvent",
+                            "referenceLocation": "OverflowMenuEvent"
                         }
                     }
                 }

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

@@ -56,7 +56,7 @@
   user-select: none;
 }
 :host .list .active .list_page {
-  color: var(--text-on-color-active, #000);
+  color: var(--text-primary);
   font-weight: 700;
 }
 :host .list .active .list_page:after {
@@ -66,7 +66,7 @@
   left: 25%;
   width: 50%;
   height: 2px;
-  background-color: var(--text-on-color-active, #000);
+  background-color: var(--border-interactive);
 }
 :host .list_dots {
   position: relative;

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

@@ -106,7 +106,7 @@ export class XvPagination {
             this.observer.disconnect();
     }
     render() {
-        return (h(Host, { key: '458da62296b23b8faa2b9180e74c900df5787bad', class: { block: this.block, [this.currentVariant]: true, [this.size]: !!this.size } }, this.currentVariant === 'full' && (h("div", { key: 'caefc70a44e777307d3f00e54b687bf67a401880', class: "block" }, h("select", { key: '2f3bacc6134e4480f064c8f7298e77988fcd2721', 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: 'e4292a652ee9fcc4df2b6794558b1a0b3e827973', 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: '3037e4cffe04ed21817cc6a6a359db4142bfa526', class: "block" }, h("select", { key: '827486ab4cc29ce903c3c94a391dc960eee5a34c', 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: 'a2459bb11735308e8eb9f32cd84719f3efdec7ea' }, "von ", this.total, " Seiten"))), this.currentVariant === 'compact' && h("span", { key: 'd5e47168f6f69e72f3dafd07894b398bc5c8be89', class: "block" }, "Seite ", this.page), h("xv-button-v2", { key: '646e9405571a7dccaa9cbeb68713593441018c40', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page - 1), disabled: this.page <= 1 }, h("span", { key: '6da11047987e235f440cfc1cd39ba4d5f2b017af', slot: "icon-left", class: "icon icon_prev" })), this.currentVariant === 'regular' && (h("ul", { key: 'bc306c51b9eedbb3a702ce4255ecce63694d6621', 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: 'c9eb42df2f4d8d019ed75db2f4c344f7f81d96c3', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page + 1), disabled: this.page >= this.total }, h("span", { key: '80be70526a9d788752e025708096b3cfdf57c3c9', slot: "icon-left", class: "icon icon_next" }))));
+        return (h(Host, { key: 'dfcaec3126bda46a384d2ba0cebb5725b1746974', class: { block: this.block, [this.currentVariant]: true, [this.size]: !!this.size } }, this.currentVariant === 'full' && (h("div", { key: '1f78ed3108ceba63a5642fc7d6461c8bd54b0bfc', class: "block" }, h("select", { key: 'c9094a7d587f8cd20e44e810d45d4d17b542b8b7', 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: 'e44c9d5b426cee28c774a1882d61cd8dae612b32', 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: 'facf4962a665a9a46df80e3ccba8b033079abfd5', class: "block" }, h("select", { key: '7f75e81bbfd6e95d680432cd22fa5abff5da4b76', 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: '312c48c90727a800248e1736c314ae0c9d98ba8f' }, "von ", this.total, " Seiten"))), this.currentVariant === 'compact' && h("span", { key: '954f68bfa4e2ab1b0f96a5608fff0f2836d00141', class: "block" }, "Seite ", this.page), h("xv-button-v2", { key: '06d4ba3385b072dd63e097d6d130a3a12707f892', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page - 1), disabled: this.page <= 1 }, h("span", { key: '44351eb65d1bad894b1762a754b29b359b0f4dfc', slot: "icon-left", class: "icon icon_prev" })), this.currentVariant === 'regular' && (h("ul", { key: '541df2de18106ffa2200608edf6880495c6a911a', 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: '44a99d1c878dd67ff31ea5a0853082cc908842b8', variant: "ghost", size: this.size, onClick: () => this.handlePageChange(this.page + 1), disabled: this.page >= this.total }, h("span", { key: 'b7abb64c61e86f4f630a7c8314d0b56af236156f', slot: "icon-left", class: "icon icon_next" }))));
     }
     static get is() { return "xv-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -212,7 +212,8 @@ export class XvPagination {
                         "SIZE_VAR_STR": {
                             "location": "import",
                             "path": "../../types/enum",
-                            "id": "src/types/enum.ts::SIZE_VAR_STR"
+                            "id": "src/types/enum.ts::SIZE_VAR_STR",
+                            "referenceLocation": "SIZE_VAR_STR"
                         }
                     }
                 },
@@ -257,7 +258,8 @@ export class XvPagination {
                         "XvPaginationVariant": {
                             "location": "import",
                             "path": "./xv-pagination.model",
-                            "id": "src/components/xv-pagination/xv-pagination.model.ts::XvPaginationVariant"
+                            "id": "src/components/xv-pagination/xv-pagination.model.ts::XvPaginationVariant",
+                            "referenceLocation": "XvPaginationVariant"
                         }
                     }
                 },
@@ -291,7 +293,8 @@ export class XvPagination {
                         "XvPaginationVariant": {
                             "location": "import",
                             "path": "./xv-pagination.model",
-                            "id": "src/components/xv-pagination/xv-pagination.model.ts::XvPaginationVariant"
+                            "id": "src/components/xv-pagination/xv-pagination.model.ts::XvPaginationVariant",
+                            "referenceLocation": "XvPaginationVariant"
                         }
                     }
                 },

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: '70a066ed39b26ced1901dcc6cb8869f351042611', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: '34ceb1063b044e65c5e21515ff8f72e8efe460cc', class: "line" }), h("span", { key: 'a3aa41c5682ce5b044e87a3452654dc98c16c83c', class: "icon" }, h("svg", { key: '7a35559ad68b93105d28efd94bcd8eb148cd7fa1', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: 'acbfc059d9bc93cbb62c545eb0946b4c4052416f', 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: '1400da29249e2fe61d9c261d10f99567a2b85304', class: "label" }, h("slot", { key: 'e7dc90f2f28c6c4262fbab374d6aee19804a47f8' }))));
+        return (h(Host, { key: '095d2a3ab584938764e1ce056f8f4a4e03838b88', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: '77ac13565ced65dbc52eda61d15bff0bfe8253b2', class: "line" }), h("span", { key: '104664fce3e8512edaf71c76d5bf76cce7c397e4', class: "icon" }, h("svg", { key: '3d81d279fa5ef3e50ee4a3b315097986ffb57546', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, h("path", { key: 'e109447615213d59eb17539fc0c0d649360c2d64', 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: 'd7120219126685f42ab267b60a5397bd69b5d61c', class: "label" }, h("slot", { key: 'f8e873bfa1b913c74e1971fe4445fdd2473b9262' }))));
     }
     static get is() { return "xv-progress-indicator-v2-item"; }
     static get encapsulation() { return "shadow"; }
@@ -31,7 +31,8 @@ export class XvProgressIndicatorItem {
                         "PROGRESS_ITEM_STATUS": {
                             "location": "import",
                             "path": "../_vars",
-                            "id": "src/components/xv-progress-indicator/_vars.ts::PROGRESS_ITEM_STATUS"
+                            "id": "src/components/xv-progress-indicator/_vars.ts::PROGRESS_ITEM_STATUS",
+                            "referenceLocation": "PROGRESS_ITEM_STATUS"
                         }
                     }
                 },

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

@@ -55,7 +55,7 @@ export class XvProgressIndicator {
         this.updateChildItems();
     }
     render() {
-        return (h(Host, { key: 'ff5c1024d3a111514491a3a12fe20066f6af045a', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: '5f7383500e4d73b1f3859b7ee9ae1a8a80e3be85' })));
+        return (h(Host, { key: '48d7968fc2b8d205171b1bd111b04de7c7939979', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: '740f57cea4b36e53d02c42527504003fd188fa45' })));
     }
     static get is() { return "xv-progress-indicator-v2"; }
     static get encapsulation() { return "shadow"; }
@@ -83,7 +83,7 @@ export class XvProgressIndicator {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Current progress\nfrom 0 to 100"
+                    "text": "Current progress\r\nfrom 0 to 100"
                 },
                 "getter": false,
                 "setter": false,
@@ -103,7 +103,7 @@ export class XvProgressIndicator {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Progress variant\npossible option `horizontal`"
+                    "text": "Progress variant\r\npossible option `horizontal`"
                 },
                 "getter": false,
                 "setter": false,
@@ -121,7 +121,8 @@ export class XvProgressIndicator {
                         "SIZE_VAR_STR": {
                             "location": "import",
                             "path": "../../types/enum",
-                            "id": "src/types/enum.ts::SIZE_VAR_STR"
+                            "id": "src/types/enum.ts::SIZE_VAR_STR",
+                            "referenceLocation": "SIZE_VAR_STR"
                         }
                     }
                 },
@@ -129,7 +130,7 @@ export class XvProgressIndicator {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Size of progress\nenum SIZE_VAR\npossible options `XS | SM | MD | LG | XL`"
+                    "text": "Size of progress\r\nenum SIZE_VAR\r\npossible options `XS | SM | MD | LG | XL`"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -25,12 +25,12 @@ export class XvRadio {
     }
     render() {
         const message = resolveFieldMessage({ error: this.error, warning: this.warning, helper: this.helper });
-        return (h("div", { key: '3ae31a4819b53d18d2bf91e8ed3d9b86c8c1a4af', class: {
+        return (h("div", { key: '78a696124ace0194164abfdd9b9cf0dae5663c25', class: {
                 'xv-radio': true,
                 'xv-radio--reverse': this.reverse,
                 'xv-radio--block': this.block,
                 [`xv-radio--size-${this.size}`]: !!this.size,
-            } }, this.label && h("p", { key: '32b78dba6a4a7852f7ccebf762c5378cb223794c', class: "xv-radio_label" }, this.label), h("label", { key: 'bfbd3de534dc8aafd1226b2fc9bd0d3ab7e696a8', class: { 'xv-radio_container': true, disabled: this.disabled } }, h("div", { key: '12b31d0be2bc7e0353fbdcc5e3b91b44d2612a8e', class: { 'xv-radio_input': true, 'xv-radio_input--error': !!this.error || this.error === '' } }, h("input", { key: 'e2f8d6d7550ba06ae31e4b81516bbbc6c6f38614', ref: el => (this.inputEl = el), type: "radio", name: this.name, value: this.value, checked: this.checked, readonly: this.readonly, disabled: this.disabled }), h("span", { key: '1354ee35781fa030b465b78f4421901c536b5080', class: "xv-radio_input__mark" })), h("span", { key: 'c70b218bfdf1a28d87eb4b86f0a701d734878683', class: "xv-radio_container__label" }, h("slot", { key: '0a14170ef488242d42e24146fff6e139aca38b23' }))), message && (h("span", { key: '4ad2280080995ae826611023015a7953221f8cea', class: `xv-radio_msg xv-radio_msg--${message.level}` }, message.level !== 'helper' && (h("span", { key: 'd22113045df97429450183e54e5616dfe996984b', class: "xv-radio_msg__status", "aria-hidden": "true" }, message.level === 'error' ? '!' : '⚠')), message.text)), h("slot", { key: '770306d1e7aa1a380b90813e94319b6257921536', name: "info" })));
+            } }, this.label && h("p", { key: '895d292b60056c47d085942204bda2172f1cb1f9', class: "xv-radio_label" }, this.label), h("label", { key: 'ad104662e82e4e49c79e1c1059f67b9a1dc1b4d0', class: { 'xv-radio_container': true, disabled: this.disabled } }, h("div", { key: '982c57a82e6346926571843e0d82014572eb4f55', class: { 'xv-radio_input': true, 'xv-radio_input--error': !!this.error || this.error === '' } }, h("input", { key: 'd9f0ec401a8d960446d175f9c716125e9a76d23c', ref: el => (this.inputEl = el), type: "radio", name: this.name, value: this.value, checked: this.checked, readonly: this.readonly, disabled: this.disabled }), h("span", { key: '065508427f0788c19fa8ce0b380e6f04c9f3f2d6', class: "xv-radio_input__mark" })), h("span", { key: '3edaf56714cc54403e99f14ad82d9bd65106b4ff', class: "xv-radio_container__label" }, h("slot", { key: '6e4f98fd856b503516870e457b326ba4e592c3e2' }))), message && (h("span", { key: '683f26fc4c9f77e2aef9c716fe7b010276cf911a', class: `xv-radio_msg xv-radio_msg--${message.level}` }, message.level !== 'helper' && (h("span", { key: '77c8e8c5e63f1b99ae92dc9f1b2743f95fd9fecd', class: "xv-radio_msg__status", "aria-hidden": "true" }, message.level === 'error' ? '!' : '⚠')), message.text)), h("slot", { key: '446f5d0c261b225cf86ab53c17b8e80e995237e0', name: "info" })));
     }
     connectedCallback() {
         var _a;
@@ -334,7 +334,8 @@ export class XvRadio {
                         "SIZE_VAR_STR": {
                             "location": "import",
                             "path": "../../types/enum",
-                            "id": "src/types/enum.ts::SIZE_VAR_STR"
+                            "id": "src/types/enum.ts::SIZE_VAR_STR",
+                            "referenceLocation": "SIZE_VAR_STR"
                         }
                     }
                 },

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

@@ -38,7 +38,7 @@ export class XvSlider {
             this.setValue(this.min);
     }
     render() {
-        return (h(Host, { key: 'f7cf8d660b5ee4b8cdc577d06ddeba3dec2b8b81', class: { disabled: this.disabled, readonly: this.readonly } }, this.label && h("label", { key: '0cb07355af35c598699f71e52c04efc8ee8444d6', class: "label" }, this.label), h("div", { key: 'ecd2a38a628a673750dd445de887b81e4bb44ba6', class: "control" }, h("span", { key: 'af4c82b1e1eb8f10cd7a9f1b6525a4378f8f4b88', class: "control_label" }, this.min), h("input", { key: '98448e2ee6c948361151e0fa5afbb3c3b649971b', type: "range", disabled: this.disabled || this.readonly, readonly: this.readonly, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, style: { backgroundSize: `${((this.value - this.min) * 100) / (this.max - this.min)}% 100%` } }), h("span", { key: 'a522155c7ed3a483a94b0c91f125aac888733f19', class: "control_label" }, this.max), !this.notEditable && (h("input", { key: 'b3b2a7284df92d9b8d6b09ed80203804693e3662', type: "number", disabled: this.disabled, readonly: this.readonly, name: `${this.name}-number-input`, step: this.step, min: this.min, max: this.max, value: this.value, onInput: this.handleNumberInput, onBlur: this.handleNumberBlur })))));
+        return (h(Host, { key: 'ed2b742de5bb3b3dc72776e18df4c06a7322acf4', class: { disabled: this.disabled, readonly: this.readonly } }, this.label && h("label", { key: 'b01428e20fc4034f8bf4597ec1b0a05f7c0e3724', class: "label" }, this.label), h("div", { key: 'ea74b08ac9ba4870f8ab1faa6c4ae9bf766967df', class: "control" }, h("span", { key: 'cede2155f4e93ec8ef3ea2fb53e14a26ca7d2ed0', class: "control_label" }, this.min), h("input", { key: 'dc456088e17cde56d99139155f596e7a5587b75c', type: "range", disabled: this.disabled || this.readonly, readonly: this.readonly, name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, onInput: this.handleInput, style: { backgroundSize: `${((this.value - this.min) * 100) / (this.max - this.min)}% 100%` } }), h("span", { key: '04a125979c07e8c83d897ff43ea682a209156c00', class: "control_label" }, this.max), !this.notEditable && (h("input", { key: '3fa69300100cf1784e0e9938d15633d014fab66c', type: "number", disabled: this.disabled, readonly: this.readonly, name: `${this.name}-number-input`, step: this.step, min: this.min, max: this.max, value: this.value, onInput: this.handleNumberInput, onBlur: this.handleNumberBlur })))));
     }
     static get is() { return "xv-slider-v2"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.css

@@ -1,93 +1,161 @@
-@charset "UTF-8";
 :host {
-  white-space: nowrap;
+  /**
+   * @prop --xv-table-cell-padding-x: Horizontal padding. Inherited from the table.
+   * @prop --xv-table-cell-padding-y: Vertical padding. Inherited from the table.
+   * @prop --xv-table-cell-clamp: Lines kept when `overflow` is `clamp`.
+   */
+  --xv-table-cell-padding-x: var(--xv-table-padding-x, var(--spacing-05));
+  --xv-table-cell-padding-y: var(--xv-table-padding-y, var(--spacing-03));
+  --xv-table-cell-clamp: 2;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-width: 0;
+  padding-block: var(--xv-table-cell-padding-y);
+  padding-inline: min(var(--xv-table-cell-padding-x), 25%);
+  color: var(--text-primary);
+  font-family: var(--ff-body);
+  font-size: var(--fz-md);
+  line-height: 18px;
+  letter-spacing: 0.16px;
+}
+
+:host([align=center]) {
+  justify-content: center;
+  text-align: center;
+}
+
+:host([align=end]) {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+.content {
+  min-width: 0;
+  max-width: 100%;
+}
+
+[part=tooltip] {
+  min-width: 0;
+  max-width: 100%;
+}
+
+:host([overflow=ellipsis]) .content {
   overflow: hidden;
+  white-space: nowrap;
   text-overflow: ellipsis;
-  padding: var(--xv-table-padding-y) var(--xv-table-padding-x);
-  color: var(--text-primary, #333);
-  font-family: var(--ff-body, Tahoma);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.2;
-  letter-spacing: 0.16px;
-  transition: 0.25s ease-in-out background-color;
+}
+:host([overflow=ellipsis]) .content ::slotted(*) {
+  min-width: 0;
+  max-width: 100%;
 }
 
-:host([multiline]) {
+:host([overflow=clamp]) .content {
   display: -webkit-box;
-  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-  white-space: initial;
-  padding-bottom: 1px;
-  padding-top: 0;
-  line-height: 1.2;
+  -webkit-line-clamp: var(--xv-table-cell-clamp);
+  overflow: hidden;
+}
+:host([overflow=clamp]) .content ::slotted(*) {
+  display: inline;
 }
 
-:host([align=left]) {
-  text-align: left;
+:host([overflow=wrap]) .content {
+  overflow: visible;
+  white-space: normal;
 }
 
-:host([align=right]) {
-  text-align: right;
+:host([header]) {
+  position: relative;
+  gap: var(--spacing-02);
+  font-weight: 600;
 }
 
-:host([align=center]) {
-  text-align: center;
+:host([header]) .content {
+  flex: 1;
 }
 
-:host([sort]) {
-  position: relative;
+:host([header][align=end]) .sort {
+  order: -1;
+}
+
+:host([header][sortable]) {
   cursor: pointer;
-  user-select: none;
 }
-:host([sort]):before, :host([sort]):after {
-  font-size: 12px;
-  line-height: 10px;
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  right: 8px;
-  pointer-events: none;
-  transition: 350ms ease-in-out opacity;
-  opacity: 0;
+:host([header][sortable]):hover {
+  background: var(--layer-accent-hover-01);
 }
-:host([sort]):before {
-  content: "▲";
-  top: 50%;
-  transform: translateY(calc(-50% - 5px));
+:host([header][sortable]):focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 0;
 }
-:host([sort])::after {
-  content: "▼";
-  top: 50%;
-  transform: translateY(calc(-50% + 5px));
+:host([header][sortable]):focus-visible {
+  outline-offset: -2px;
 }
 
-:host([sort]:hover) {
-  background-color: var(--layer-accent-hover-01, #E3E3E3);
+:host([header][sort-direction=asc]),
+:host([header][sort-direction=desc]) {
+  background: var(--layer-accent-active-01);
 }
-:host([sort]:hover)::before, :host([sort]:hover)::after {
-  opacity: 1;
+
+.sort {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-right: 1px solid currentColor;
+  border-bottom: 1px solid currentColor;
+  opacity: 0;
+  transform: rotate(45deg) translate(-2px, -2px);
 }
 
-:host([sort=asc]) {
-  background-color: var(--layer-accent-active-01, #D1D1D1);
+:host([header][sortable]:hover) .sort {
+  opacity: 0.5;
 }
-:host([sort=asc])::before {
+
+:host([header][sort-direction=asc]) .sort,
+:host([header][sort-direction=desc]) .sort {
   opacity: 1;
 }
-:host([sort=asc])::after {
-  display: none;
+
+:host([header][sort-direction=asc]) .sort {
+  transform: rotate(-135deg) translate(-2px, -2px);
 }
 
-:host([sort=desc]) {
-  background-color: var(--layer-accent-active-01, #D1D1D1);
+.grip {
+  position: absolute;
+  top: 50%;
+  left: 4px;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 14px;
+  opacity: 0;
+  cursor: grab;
+  background-image: radial-gradient(currentColor 1px, transparent 1px);
+  background-size: 4px 4px;
 }
-:host([sort=desc])::before {
-  display: none;
+
+:host([header]:hover) .grip {
+  opacity: 0.5;
 }
-:host([sort=desc])::after {
-  opacity: 1;
+
+:host(.drag-over) {
+  box-shadow: inset 2px 0 0 0 var(--interactive-01);
+}
+
+.resize {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  touch-action: none;
+}
+.resize:hover, .resize:active {
+  background: var(--interactive-01);
+}
+
+:host([hidden]) {
+  display: none;
 }