xv-webcomponents 0.1.32 → 0.1.35

package/dist/esm/xv-accordion-v2_26.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-590eb7d2.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-a650cb06.js';
 import { u as uidGenerator, a as forEach, s as setAttr } from './utils-a9c71376.js';
 
 const xvAccordionCss = ":host{display:block}";
@@ -805,12 +805,12 @@ const XvTab = class {
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: '82d797fe902cd4dab29cf094485aad742835e6b4', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
+        return (h(Host, { key: '41e9cd0d84db300497b86bd697aa867fd591d405', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
     }
 };
 XvTab.style = XvTabV2Style0;
 
-const xvTableCss = ":host{--xv-table-min-height:51.11px;--xv-table-padding-x:16px;--xv-table-padding-y:15px;--xv-table-cols-template:repeat(auto-fit, minmax(0, 1fr));display:block}:host .batch-actions{user-select:none;pointer-events:none;position:absolute;left:0;bottom:100%;width:0;min-height:48px;overflow:hidden;border-radius:3px 3px 0 0;background-color:var(--interactive-01, #273435);display:flex;align-items:center;justify-content:space-between;column-gap:var(--spacing-04);flex-wrap:nowrap;box-sizing:border-box;transition:250ms ease-in-out height, 250ms ease-in-out width, 250ms ease-in-out padding-inline;color:var(--text-on-color, #fff)}:host .batch-actions_content{display:block;overflow:hidden;white-space:nowrap}:host .batch-actions_count{margin:0;white-space:nowrap;font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:var(--fz-lg, 18px);letter-spacing:0.16px}:host .xv-table{display:flex;flex-direction:column;position:relative}:host .xv-table ::slotted([checked]){background-color:var(--layer-selected-01, #E3E3E3)}:host .xv-table ::slotted([checked]:not([header]):hover){background-color:var(--layer-selected-hover-01, #DADADA)}:host .xv-table ::slotted(xv-table-v2-row[disabled]){opacity:0.4;cursor:not-allowed;user-select:none}:host .xv-table ::slotted([slot=footer]:hover),:host .xv-table ::slotted([slot=footer]){background-color:var(--layer-accent-02, #E3E3E3)}:host .xv-table_loading{z-index:10;display:flex;align-items:center;justify-content:center;min-height:var(--xv-table-min-height, 51.11px);position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8)}:host .xv-table-title,:host ::slotted([slot=title]){color:var(--text-primary, #333) !important;font-size:var(--fz-xl, 21px) !important;margin-top:var(--spacing-05, 16px) !important;margin-bottom:var(--spacing-06, 24px) !important;font-family:var(--ff-heading, \"Gill Sans\");font-style:normal;font-weight:400;line-height:normal}:host([hover]) .xv-table ::slotted(:hover:not([header])){background-color:var(--layer-hover-01, #E9E9E9)}:host(.batchVisible) .batch-actions{pointer-events:initial;user-select:initial;width:100%;padding-inline:var(--xv-table-padding-x)}:host([expandable]) ::slotted(xv-table-v2-row){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px)}:host([variant-checkbox]) ::slotted([slot=footer]:not([variant])){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 57.97px)}:host([size=xs]){--xv-table-padding-y:7px;--xv-table-min-height:35.1px}:host([size=sm]){--xv-table-padding-y:10px;--xv-table-min-height:41.11px}:host([size=lg]){--xv-table-padding-y:21px;--xv-table-min-height:63.09px}:host([size=xl]){--xv-table-padding-y:31px;--xv-table-min-height:78.77px}";
+const xvTableCss = ":host{--xv-table-min-height:51.11px;--xv-table-padding-x:16px;--xv-table-padding-y:15px;--xv-table-cols-template:repeat(auto-fit, minmax(0, 1fr));display:block}:host .batch-actions{user-select:none;pointer-events:none;position:absolute;left:0;bottom:100%;width:0;min-height:48px;overflow:hidden;border-radius:3px 3px 0 0;background-color:var(--interactive-01, #273435);display:flex;align-items:center;justify-content:space-between;column-gap:var(--spacing-04);flex-wrap:nowrap;box-sizing:border-box;transition:250ms ease-in-out height, 250ms ease-in-out width, 250ms ease-in-out padding-inline;color:var(--text-on-color, #fff)}:host .batch-actions_content{display:block;overflow:hidden;white-space:nowrap}:host .batch-actions_count{margin:0;white-space:nowrap;font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:var(--fz-lg, 18px);letter-spacing:0.16px}:host .xv-table{display:flex;flex-direction:column;position:relative}:host .xv-table_wrapper{display:flex;flex-direction:column;position:relative;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--layer-accent-03) transparent}:host .xv-table_wrapper ::slotted(*){min-width:1000px}:host .xv-table ::slotted([checked]){background-color:var(--layer-selected-01, #E3E3E3)}:host .xv-table ::slotted([checked]:not([header]):hover){background-color:var(--layer-selected-hover-01, #DADADA)}:host .xv-table ::slotted(xv-table-v2-row[disabled]){opacity:0.4;cursor:not-allowed;user-select:none}:host .xv-table ::slotted([slot=footer]:hover),:host .xv-table ::slotted([slot=footer]){background-color:var(--layer-accent-02, #E3E3E3)}:host .xv-table_loading{z-index:10;display:flex;align-items:center;justify-content:center;min-height:var(--xv-table-min-height, 51.11px);position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8)}:host .xv-table-title,:host ::slotted([slot=title]){color:var(--text-primary, #333) !important;font-size:var(--fz-xl, 21px) !important;margin-top:var(--spacing-05, 16px) !important;margin-bottom:var(--spacing-06, 24px) !important;font-family:var(--ff-heading, \"Gill Sans\");font-style:normal;font-weight:400;line-height:normal}:host([hover]) .xv-table ::slotted(:hover:not([header])){background-color:var(--layer-hover-01, #E9E9E9)}:host(.batchVisible) .batch-actions{pointer-events:initial;user-select:initial;width:100%;padding-inline:var(--xv-table-padding-x)}:host([expandable]) ::slotted(xv-table-v2-row){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px)}:host([variant-checkbox]) ::slotted([slot=footer]:not([variant])){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 57.97px)}:host([size=xs]){--xv-table-padding-y:7px;--xv-table-min-height:35.1px}:host([size=sm]){--xv-table-padding-y:10px;--xv-table-min-height:41.11px}:host([size=lg]){--xv-table-padding-y:21px;--xv-table-min-height:63.09px}:host([size=xl]){--xv-table-padding-y:31px;--xv-table-min-height:78.77px}";
 const XvTableV2Style0 = xvTableCss;
 
 const XvTable = class {
@@ -845,7 +845,7 @@ const XvTable = class {
             .join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
     }
     render() {
-        return (h(Host, { key: 'd661040bcec38c039dd3ae7516fa40bfb0274da7', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: 'a341cf9b6bf250dbf0dbee0bf17da8a734be7a31', name: "title" }, !!this.el.title && h("h2", { key: 'bf33335fe741ebae458f3dcc02d1d65ac4c75ddd', class: "xv-table-title" }, this.el.title)), h("slot", { key: 'b7504f0b48d538ce6d4c1fb7706e1ab8bce8bd8c', name: "toolbar" }), h("div", { key: '54b51b51171726650858ce3484c1d510dd88796c', class: "xv-table" }, h("div", { key: '22f7f3638901e4f80acee21696ee4ae8d7e01ad4', class: "batch-actions" }, h(Fragment, { key: '922d574d34d7ff5632a9b5489bbf4b205f64f3bd' }, h("div", { key: 'eb7a82cda62bb1084715d446da1ca082c7ff6f37', class: "batch-actions_content" }, h("slot", { key: 'eb95cf88821c541e71b1620ce0d79bbe196a16e8', name: "batch" })), h("p", { key: '050dbbefa2fc8adfffbbb12652964279bd5b69d4', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("slot", { key: '8dcfa43420bad4a128b15f1095556eeac062939c' }), h("slot", { key: '588776181bded66364751e3e2e5fd9713084aee7', name: "footer" }), !!this.loading && (h("div", { key: '1478a55759576d012c5dbb3a630309fe42bc527f', class: "xv-table_loading" }, h("xv-loader-v2", { key: '822799790a03089ff83a99a49fa0f8fb4b9f36b0', size: SIZE_VAR.LG }))))));
+        return (h(Host, { key: 'd661040bcec38c039dd3ae7516fa40bfb0274da7', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: 'a341cf9b6bf250dbf0dbee0bf17da8a734be7a31', name: "title" }, !!this.el.title && h("h2", { key: 'bf33335fe741ebae458f3dcc02d1d65ac4c75ddd', class: "xv-table-title" }, this.el.title)), h("slot", { key: 'b7504f0b48d538ce6d4c1fb7706e1ab8bce8bd8c', name: "toolbar" }), h("div", { key: '54b51b51171726650858ce3484c1d510dd88796c', class: "xv-table" }, h("div", { key: '22f7f3638901e4f80acee21696ee4ae8d7e01ad4', class: "batch-actions" }, h(Fragment, { key: '922d574d34d7ff5632a9b5489bbf4b205f64f3bd' }, h("div", { key: 'eb7a82cda62bb1084715d446da1ca082c7ff6f37', class: "batch-actions_content" }, h("slot", { key: 'eb95cf88821c541e71b1620ce0d79bbe196a16e8', name: "batch" })), h("p", { key: '050dbbefa2fc8adfffbbb12652964279bd5b69d4', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("div", { key: 'd9b2187c942ebb3b7acdefdd180be5fcbfcd3584', class: "xv-table_wrapper" }, h("slot", { key: '521a467f10d6af8fbd504376283e6fb738a618d3' }), h("slot", { key: '2e5e03829cc2a410be2e10e547d7c323d05ac251', name: "footer" })), !!this.loading && (h("div", { key: '91ff01d4e08b67c62ba5696dc781edb9b821dd54', class: "xv-table_loading" }, h("xv-loader-v2", { key: '97927371d38d0de32aa9e6cf6f3d68239f97d5a0', size: SIZE_VAR.LG }))))));
     }
     componentWillLoad() {
         this.setColsSizeTemplate();
@@ -894,7 +894,7 @@ const XvTableCell = class {
     }
     ;
     render() {
-        return (h(Host, { key: 'a2b8e397dcc44ae5a4e018f655586ef4e4900564' }, h("slot", { key: '9b2f63ba4c33f03cb55030d87b4da14a2745ecc3' })));
+        return (h(Host, { key: 'c7d27a9888f8dd449e4ece79309497a7a5435f3f' }, h("slot", { key: '9dfec1da63cd4c796a152fd7c95cd95573922445' })));
     }
     get el() { return getElement(this); }
 };
@@ -913,7 +913,7 @@ const XvTableExpand = class {
         };
     }
     render() {
-        return (h(Host, { key: 'f7aca6da5b9345c3c1b5777577f22cfa6f203050' }, h("button", { key: '5c503f211c763cbfa0fb9b8327146e92bb803eef', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: 'f55a433ebf374f2a03381035846b3c180b5e8852', name: XV_EXPANDABLE_KEY }), h("div", { key: '9b6f5e487e156a6f3e14a0aa7a10065410de0cca', class: { expandableContent: true, open: this.open } }, h("slot", { key: 'ac9992699f28465a63346ebdf3f638b8fd53ec15' }))));
+        return (h(Host, { key: 'd5b0feeb957eb5d6ed947c0819225a6898fea034' }, h("button", { key: '63a7820dc19b3dfb5047f6ec5c271b99a3766d9d', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: '73ccb205e604809beee6ffc53f00a2033ded8a4a', name: XV_EXPANDABLE_KEY }), h("div", { key: '32399433e236263d8a63874358d27f78db42975c', class: { expandableContent: true, open: this.open } }, h("slot", { key: '52fe4f89bbea86a16ead1f8f001f7cc74239f5d9' }))));
     }
     componentDidLoad() {
         setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
@@ -970,7 +970,7 @@ const XvTableRow = class {
         }
     }
     render() {
-        return (h(Host, { key: 'a83693a0ac8a484e77d6569e9c5e6d5552d1e4bd' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '79c530cedc2dedfe7a3f30cca998d96e8e26e68d', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: 'd5e061b229448bba6d71321cff99aac9947a55d1', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: 'e39cc7c88c199863810e4b261bc833cac4f5d883', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '17151fe90edcb037bc504f88a33bd206e684c402' })));
+        return (h(Host, { key: '1b026dc3a4cc49aefd6963864fba1cf1e63acc53' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: 'c37dc2e05c0e0b50b74a71e196ccbc2dce10b216', class: "cell-control" }, this.variant === 'checkbox' && (h("xv-checkbox-v2", { key: 'a90ed4e7d5b871e559e6736a33e2caae2be1bc4c', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (h("input", { key: '9223337d132b22e9cc516b0aa13702e5361ff570', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: 'a9a63bd03d0ecb929ceba7e85a96271636ed0a80' })));
     }
     componentWillLoad() {
         this.setInitialAttrs();
@@ -993,7 +993,7 @@ var TABS_VATIANT;
     // other variants will be here
 })(TABS_VATIANT || (TABS_VATIANT = {}));
 
-const xvTabsCss = ":host(.xv-tabs){display:flex;flex-direction:column}:host(.xv-tabs) .tab-headers{display:flex}:host(.xv-tabs) .tab-headers_tab{background:none;padding:11px var(--gap-md, 16px);cursor:pointer;font:inherit;transition:border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;position:relative;border:2px solid transparent;border-bottom-color:var(--border-border-subtle-01, #D1D1D1);background-blend-mode:multiply;color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:18px;letter-spacing:0.16px;height:40px;white-space:nowrap}:host(.xv-tabs) .tab-headers_tab:after{content:\"\";position:absolute;transition:background-color 0.3s ease, width 0.3s ease;top:100%;left:0;right:0;width:0;height:2px;background-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers_tab:focus{outline:none;border:2px solid var(--border-border-subtle-01, #D1D1D1)}:host(.xv-tabs) .tab-headers_tab:hover{border-bottom-color:var(--border-strong-01, #8B8B8B)}:host(.xv-tabs) .tab-headers_tab.active{color:var(--text-primary, #333);font-weight:700}:host(.xv-tabs) .tab-headers_tab.active:after{width:100%}:host(.xv-tabs) .tab-headers_tab.active:focus{border-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers_tab:disabled{color:var(--text-on-color-disabled, #8B8B8B);border-bottom-color:var(--border-disabled, #D1D1D1);cursor:not-allowed}:host(.xv-tabs) .tab-headers_tab:disabled:after{background-color:var(--border-disabled, #D1D1D1)}:host(.xv-tabs) .tab-headers_btn{outline:none;width:40px;height:40px;background:none;border:none;cursor:pointer;position:relative;transition:0.25s ease-in-out opacity}:host(.xv-tabs) .tab-headers_btn:before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;border:solid currentColor;border-width:0 2px 2px 0;display:inline-block;padding:5px;transform:translate(-50%, -50%) rotate(45deg)}:host(.xv-tabs) .tab-headers_btn:active{opacity:0.3}:host(.xv-tabs) .tab-headers_btn.prev:before{transform:translate(-50%, -50%) rotate(135deg)}:host(.xv-tabs) .tab-headers_btn.next:before{transform:translate(-50%, -50%) rotate(-45deg)}:host(.xv-tabs) .tab-content-wrapper{position:relative;overflow:hidden;padding:var(--gap-md, 16px) 0}:host(.xv-tabs) ::slotted(xv-tab-v2){position:absolute;opacity:0;max-height:0;transition:max-height 0.5s ease;width:100%;pointer-events:none}:host(.xv-tabs) ::slotted(xv-tab-v2.active){position:relative;opacity:1;overflow-y:auto;pointer-events:auto;max-height:1000px}:host(.xv-tabs) .xv-tabs_empty{display:block;text-align:center;margin:20px auto;font-size:var(--fz-xl);color:var(--text-primary)}:host([loading]){display:flex;align-items:center;justify-content:center;min-height:300px}";
+const xvTabsCss = ":host(.xv-tabs){display:flex;flex-direction:column}:host(.xv-tabs) .tab-headers{position:relative;display:flex;flex-wrap:nowrap}:host(.xv-tabs) .tab-headers_container{display:flex;flex:1 1 auto;white-space:nowrap;overflow-x:auto;scroll-behavior:smooth}:host(.xv-tabs) .tab-headers_container::-webkit-scrollbar{display:none}:host(.xv-tabs) .tab-headers_tab{background:none;padding:11px var(--gap-md, 16px);cursor:pointer;font:inherit;transition:border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;position:relative;border:2px solid transparent;border-bottom-color:var(--border-border-subtle-01, #D1D1D1);background-blend-mode:multiply;color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:18px;letter-spacing:0.16px;height:40px;white-space:nowrap}:host(.xv-tabs) .tab-headers_tab:after{content:\"\";position:absolute;transition:background-color 0.3s ease, width 0.3s ease;top:100%;left:0;right:0;width:0;height:2px;background-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers_tab:focus{outline:none;border:2px solid var(--border-border-subtle-01, #D1D1D1)}:host(.xv-tabs) .tab-headers_tab:hover{border-bottom-color:var(--border-strong-01, #8B8B8B)}:host(.xv-tabs) .tab-headers_tab.active{color:var(--text-primary, #333);font-weight:700}:host(.xv-tabs) .tab-headers_tab.active:after{width:100%}:host(.xv-tabs) .tab-headers_tab.active:focus{border-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers_tab:disabled{color:var(--text-on-color-disabled, #8B8B8B);border-bottom-color:var(--border-disabled, #D1D1D1);cursor:not-allowed}:host(.xv-tabs) .tab-headers_tab:disabled:after{background-color:var(--border-disabled, #D1D1D1)}:host(.xv-tabs) .tab-headers_btn{outline:none;width:40px;height:40px;background:none;border:none;cursor:pointer;position:relative;transition:0.25s ease-in-out opacity}:host(.xv-tabs) .tab-headers_btn:before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;border:solid currentColor;border-width:0 2px 2px 0;display:inline-block;padding:5px;transform:translate(-50%, -50%) rotate(45deg)}:host(.xv-tabs) .tab-headers_btn:active{opacity:0.3}:host(.xv-tabs) .tab-headers_btn.prev:before{transform:translate(-50%, -50%) rotate(135deg)}:host(.xv-tabs) .tab-headers_btn.next:before{transform:translate(-50%, -50%) rotate(-45deg)}:host(.xv-tabs) .tab-content-wrapper{position:relative;overflow:hidden;padding:var(--gap-md, 16px) 0}:host(.xv-tabs) ::slotted(xv-tab-v2){position:absolute;opacity:0;max-height:0;transition:max-height 0.5s ease;width:100%;pointer-events:none}:host(.xv-tabs) ::slotted(xv-tab-v2.active){position:relative;opacity:1;overflow-y:auto;pointer-events:auto;max-height:1000px}:host(.xv-tabs) .xv-tabs_empty{display:block;text-align:center;margin:20px auto;font-size:var(--fz-xl);color:var(--text-primary)}:host([loading]){display:flex;align-items:center;justify-content:center;min-height:300px}";
 const XvTabsV2Style0 = xvTabsCss;
 
 const XvTabs = class {
@@ -1012,6 +1012,10 @@ const XvTabs = class {
          * local variable for tab labels collection
          */
         this.tabElements = [];
+        /**
+         * Is show arrows for scroll
+         */
+        this.showArrows = false;
         this.collectTabs = () => {
             if (!this.tabElements.length) {
                 this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
@@ -1020,9 +1024,17 @@ const XvTabs = class {
                         this.active = tab.getAttribute('name');
                     }
                 });
+                setTimeout(() => this.updateArrowVisibility(), 100);
             }
         };
     }
+    updateArrowVisibility() {
+        var _a;
+        const container = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tab-headers_container');
+        if (!container)
+            return;
+        this.showArrows = container.scrollWidth > container.clientWidth;
+    }
     updateTabClasses() {
         this.tabElements.forEach((tab, i) => {
             tab.classList.toggle('active', (tab.getAttribute('name') || `${i}`) === `${this.active}`);
@@ -1033,26 +1045,38 @@ const XvTabs = class {
             return;
         this.active = active;
         this.activeChange.emit(Number(this.active) || this.active);
+        this.scrollToActiveTab();
+    }
+    scrollToActiveTab() {
+        if (!this.showArrows)
+            return;
+        // wait next JS tik
+        setTimeout(() => {
+            this.el.shadowRoot
+                .querySelector('.tab-headers_tab.active')
+                .scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
+        });
     }
     setTab(count = 1) {
         const currentIdx = this.tabElements.findIndex((tab, i) => (tab.getAttribute('name') || `${i}`) === `${this.active}`);
-        const tab = this.tabElements[currentIdx + count];
-        if (tab && !(tab === null || tab === void 0 ? void 0 : tab.hasAttribute('disabled'))) {
-            this.active = tab.getAttribute('name') || `${currentIdx + count}`;
-        }
+        const nextIdx = currentIdx + count;
+        if (nextIdx < 0 || nextIdx >= this.tabElements.length)
+            return;
+        const nextTab = this.tabElements[nextIdx];
+        if (!nextTab || nextTab.hasAttribute('disabled'))
+            return;
+        this.active = nextTab.getAttribute('name') || `${nextIdx}`;
+        this.scrollToActiveTab();
     }
     render() {
         var _a, _b, _c;
         if (this.loading) {
             return (h(Host, { class: "xv-tabs", variant: this.variant }, h("xv-loader-v2", { size: SIZE_VAR.XL })));
         }
-        return (h(Host, { class: "xv-tabs", variant: this.variant }, h("div", { class: "tab-headers", role: "tablist" }, h("button", { hidden: !this.showArrows || !((_a = this.tabElements) === null || _a === void 0 ? void 0 : _a.length), "aria-label": "Previous", class: "tab-headers_btn prev", onClick: () => this.setTab(-1) }), ((_b = this.tabElements) === null || _b === void 0 ? void 0 : _b.length) ? this.tabElements.map((tab, index) => (h("button", { role: "tab", disabled: !!tab.getAttribute('disabled') || !!(tab === null || tab === void 0 ? void 0 : tab.disabled), class: {
+        return (h(Host, { class: "xv-tabs", variant: this.variant }, h("div", { class: "tab-headers", role: "tablist" }, h("button", { hidden: !this.showArrows || !((_a = this.tabElements) === null || _a === void 0 ? void 0 : _a.length), "aria-label": "Previous", class: "tab-headers_btn prev", onClick: () => this.setTab(-1) }), h("div", { class: "tab-headers_container" }, ((_b = this.tabElements) === null || _b === void 0 ? void 0 : _b.length) ? this.tabElements.map((tab, index) => (h("button", { role: "tab", disabled: !!tab.getAttribute('disabled') || !!(tab === null || tab === void 0 ? void 0 : tab.disabled), class: {
                 'tab-headers_tab': true,
                 active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,
-            }, onClick: () => this.handleTabClick(tab.getAttribute('name') || `${index}`) }, tab.getAttribute('label') || `Tab ${index + 1}`))) : this.emptyMessage && h("p", { class: "xv-tabs_empty" }, this.emptyMessage), h("button", { "aria-label": "Next", hidden: !this.showArrows || !((_c = this.tabElements) === null || _c === void 0 ? void 0 : _c.length), class: "tab-headers_btn next", onClick: () => this.setTab(1) })), h("div", { class: "tab-content-wrapper", role: "tabpanel", tabindex: -1 }, h("slot", { onSlotchange: this.collectTabs }))));
-    }
-    componentWillLoad() {
-        // this.collectTabs();
+            }, onClick: () => this.handleTabClick(tab.getAttribute('name') || `${index}`) }, tab.getAttribute('label') || `Tab ${index + 1}`))) : this.emptyMessage && h("p", { class: "xv-tabs_empty" }, this.emptyMessage)), h("button", { "aria-label": "Next", hidden: !this.showArrows || !((_c = this.tabElements) === null || _c === void 0 ? void 0 : _c.length), class: "tab-headers_btn next", onClick: () => this.setTab(1) })), h("div", { class: "tab-content-wrapper", role: "tabpanel", tabindex: -1 }, h("slot", { onSlotchange: this.collectTabs }))));
     }
     componentDidRender() {
         this.updateTabClasses();
@@ -1080,7 +1104,7 @@ const XvTag = class {
         this.closeClick.emit(e);
     }
     render() {
-        return (h(Host, { key: 'e7015e92932ed5f4d6d3acb68ab63628e4a4bcb6', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '87a56eb93d86027dfcfa6c2e0edc22defe7628b4', class: "xv-tag_content" }, h("slot", { key: 'b71fb28fdbf29da81d8cc701f7a9b4bf0fc23c4d' })), this.closeable && (h("button", { key: 'f99c2fc938973a3809a355a8621cf161e185c46c', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
+        return (h(Host, { key: '5b1a43a20c89355aae7830dab1b41381a6aa9ab3', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '1a7bcdadd14cdc34703916ad390ed2f3f2a57f7a', class: "xv-tag_content" }, h("slot", { key: 'a12fa11b3659c140bc5b3e6b455aaec87a5f33e1' })), this.closeable && (h("button", { key: 'df1b2ac0a97b5d10304c9f829f7dd7bdc2026bb9', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
     }
 };
 XvTag.style = XvTagV2Style0;
@@ -1092,7 +1116,7 @@ var TextInputStatus;
     TextInputStatus["DEF"] = "";
 })(TextInputStatus || (TextInputStatus = {}));
 
-const xvTextInputCss = ":host{--text-input-padding-x:16px;--text-input-padding-y:11px;display:inline-flex;flex-direction:column;row-gap:calc(var(--text-input-padding-y) / 2);text-align:left;font-family:var(--ff-body, Tahoma)}:host .label{margin:0;color:var(--text-secondary, #515151);font-size:var(--fz-sm, 12px);font-weight:700;line-height:133.333%;letter-spacing:0.32px}:host .control{margin:0;position:relative;box-sizing:border-box;display:flex;column-gap:5px;align-items:center;flex-direction:row}:host .control input{background-color:var(--field-02, #FFF);border:1px solid var(--border-strong-01, #E3E3E3);border-radius:3px;padding-block:var(--text-input-padding-y);padding-inline-start:var(--text-input-padding-x);padding-inline-end:var(--text-input-padding-x);flex:1;outline:2px solid transparent;color:var(--text-primary, #333);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:128.571%;letter-spacing:0.16px;transition:0.2s ease-in-out border-color, 0.2s ease-in-out outline-color}:host .control input.withIcon{padding-inline-end:calc(var(--text-input-padding-x) + 22px)}:host .control input::placeholder{color:var(--text-placeholder, #ACACAC)}:host .control input:focus{outline:2px solid var(--focus, #273435)}:host .control_icon{position:absolute;top:calc(50% - 9px);right:var(--text-input-padding-y);width:18px;height:18px}:host .control_icon.error{color:var(--support-error, #F1290E)}:host .control_icon.warning{color:var(--support-warning, #FF7F04)}:host .helper{margin:0;color:var(--text-helper, #646464);font-size:var(--fz-sm, 12px);line-height:133.333%;letter-spacing:0.32px}:host([status=error]) .control input{border-color:var(--support-error, #F1290E)}:host([status=error]) .control input:focus{outline-color:var(--support-error, #F1290E)}:host([status=error]) .helper{color:var(--text-error, #D62512)}:host([readonly]) .control input{border-top-color:transparent;border-right-color:transparent;border-left-color:transparent;cursor:default;background-color:transparent}:host([readonly]) .control input:focus{outline-color:transparent}:host([disabled]){opacity:0.4}:host([disabled]) .control input{cursor:not-allowed}:host([size=xs]){--text-input-padding-y:4px;--text-input-padding-x:6px}:host([size=sm]){--text-input-padding-y:7px}:host([size=md]){--text-input-padding-y:11px}:host([size=lg]){--text-input-padding-y:15px}:host([size=xl]){--text-input-padding-y:16px;--text-input-padding-x:18px}";
+const xvTextInputCss = ":host{--text-input-padding-x:16px;--text-input-padding-y:11px;display:inline-flex;flex-direction:column;row-gap:calc(var(--text-input-padding-y) / 2);text-align:left;font-family:var(--ff-body, Tahoma)}:host .label{margin:0;color:var(--text-secondary, #515151);font-size:var(--fz-sm, 12px);font-weight:700;line-height:133.333%;letter-spacing:0.32px}:host .control{margin:0;position:relative;box-sizing:border-box;display:flex;column-gap:5px;align-items:center;flex-direction:row}:host .control input{width:100%;background-color:var(--field-02, #FFF);border:1px solid var(--border-strong-01, #E3E3E3);border-radius:3px;padding-block:var(--text-input-padding-y);padding-inline-start:var(--text-input-padding-x);padding-inline-end:var(--text-input-padding-x);flex:1;outline:2px solid transparent;color:var(--text-primary, #333);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:128.571%;letter-spacing:0.16px;transition:0.2s ease-in-out border-color, 0.2s ease-in-out outline-color}:host .control input.withIcon{padding-inline-end:calc(var(--text-input-padding-x) + 22px)}:host .control input::placeholder{color:var(--text-placeholder, #ACACAC)}:host .control input:focus{outline:2px solid var(--focus, #273435)}:host .control_icon{position:absolute;top:calc(50% - 9px);right:var(--text-input-padding-y);width:18px;height:18px}:host .control_icon.error{color:var(--support-error, #F1290E)}:host .control_icon.warning{color:var(--support-warning, #FF7F04)}:host .helper{margin:0;color:var(--text-helper, #646464);font-size:var(--fz-sm, 12px);line-height:133.333%;letter-spacing:0.32px}:host([status=error]) .control input{border-color:var(--support-error, #F1290E)}:host([status=error]) .control input:focus{outline-color:var(--support-error, #F1290E)}:host([status=error]) .helper{color:var(--text-error, #D62512)}:host([readonly]) .control input{border-top-color:transparent;border-right-color:transparent;border-left-color:transparent;cursor:default;background-color:transparent}:host([readonly]) .control input:focus{outline-color:transparent}:host([disabled]){opacity:0.4}:host([disabled]) .control input{cursor:not-allowed}:host([size=xs]){--text-input-padding-y:4px;--text-input-padding-x:6px}:host([size=sm]){--text-input-padding-y:7px}:host([size=md]){--text-input-padding-y:11px}:host([size=lg]){--text-input-padding-y:15px}:host([size=xl]){--text-input-padding-y:16px;--text-input-padding-x:18px}";
 const XvTextInputV2Style0 = xvTextInputCss;
 
 const XvTextInput = class {
@@ -1134,7 +1158,7 @@ const XvTextInput = class {
         };
     }
     render() {
-        return (h(Host, { key: '7e773cbebf4bd3bc6c2e71f454f733de77ec2b56', name: this.name, class: "xv-text-input", role: "textbox", tabindex: this.disabled ? -1 : false }, this.label && h("label", { key: 'a28eca6e736e747c5730d2b517cbcf33178a53af', class: "label" }, this.label), h("div", { key: 'c432a6ca83a94d1f160745b1f0f2e1a532441ccd', class: "control" }, h("input", { key: '5545a39193c180329fe382f8f9fd4aac5d79adcd', type: "text", class: { withIcon: this.status !== TextInputStatus.DEF }, readonly: this.readonly, value: this.value, disabled: this.disabled, onInput: this.handleInput, placeholder: this.placeholder }), this.getControlIcon(this.status)), this.helper && h("p", { key: 'ab7aee3589f336f3899afef307845466c4eee41e', class: "helper" }, this.helper)));
+        return (h(Host, { key: 'b03e76ad22fa85e05d9dc9fe08f41bd5bbfbeb68', name: this.name, class: "xv-text-input", role: "textbox", tabindex: this.disabled ? -1 : false }, this.label && h("label", { key: 'de7b44ff18e443237b956548d3b0ff6451311aa4', class: "label" }, this.label), h("div", { key: 'fbd59313f8ed10b325c8c821508f1a1a33f1bd14', class: "control" }, h("input", { key: '03bd2b4b50a0df3d2d7251f1a767941409a05ae6', type: "text", class: { withIcon: this.status !== TextInputStatus.DEF }, readonly: this.readonly, value: this.value, disabled: this.disabled, onInput: this.handleInput, placeholder: this.placeholder }), this.getControlIcon(this.status)), this.helper && h("p", { key: '621688137e647269a82f6c8e23017a435d7cf785', class: "helper" }, this.helper)));
     }
     componentWillLoad() {
         this.internals.setFormValue(this.value);
@@ -1158,7 +1182,7 @@ const XvTooltip = class {
         this.position = 'top';
     }
     render() {
-        return (h(Host, { key: 'caeab002ff02c6b43a1eefc52a59f0f0f6d5c75a', tooltip: this.message, class: `xv-tooltip_${this.position}` }, h("slot", { key: '9d873d03af5225e4f2d1cc607221044499c59485' }, h("svg", { key: 'b6a29a947bdcb7903e526c430cbbd6486ec496e4', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '43144f435eeaad899b446273309719e99283240f', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
+        return (h(Host, { key: 'fa18866398003754364b653f1f90d1a44ed8151d', tooltip: this.message, class: `xv-tooltip_${this.position}` }, h("slot", { key: '428a412b62a1503794eefad29707fe540095b3d8' }, h("svg", { key: '88cb8ddc29c07022493eaf04344e508c049f24e5', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: '7cf29bc6c74b0cdc7613b2bf6e5aa6b851ad2aeb', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
     }
 };
 XvTooltip.style = XvTooltipV2Style0;