xv-webcomponents 1.19.2 → 1.20.1

package/dist/cjs/xv-header-next.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C4fJ70r4.js');
-var _vars = require('./_vars-A07oKwJ_.js');
+var _vars = require('./_vars-DMytunQw.js');
 var index$1 = require('./index-DwneAp1a.js');
 
 const userMagnifyingGlassRegularFullSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBQcm8gNy4xLjAgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UgKENvbW1lcmNpYWwgTGljZW5zZSkgQ29weXJpZ2h0IDIwMjUgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTE3Ni41IDE5MkMxNzYuNSAxNDcuOCAyMTIuMyAxMTIgMjU2LjUgMTEyQzMwMC43IDExMiAzMzYuNSAxNDcuOCAzMzYuNSAxOTJDMzM2LjUgMjM2LjIgMzAwLjcgMjcyIDI1Ni41IDI3MkMyMTIuMyAyNzIgMTc2LjUgMjM2LjIgMTc2LjUgMTkyek0zODQuNSAxOTJDMzg0LjUgMTIxLjMgMzI3LjIgNjQgMjU2LjUgNjRDMTg1LjggNjQgMTI4LjUgMTIxLjMgMTI4LjUgMTkyQzEyOC41IDI2Mi43IDE4NS44IDMyMCAyNTYuNSAzMjBDMzI3LjIgMzIwIDM4NC41IDI2Mi43IDM4NC41IDE5MnpNODAuNSA1NDRDODAuNSA0NzMuMyAxMzcuOCA0MTYgMjA4LjUgNDE2TDI4OC43IDQxNkMyODkuNSAzOTkuMiAyOTIuNyAzODMuMSAyOTguMSAzNjhMMjA4LjUgMzY4QzExMS4zIDM2OCAzMi41IDQ0Ni44IDMyLjUgNTQ0TDMyLjUgNTUyQzMyLjUgNTY1LjMgNDMuMiA1NzYgNTYuNSA1NzZDNjkuOCA1NzYgODAuNSA1NjUuMyA4MC41IDU1Mkw4MC41IDU0NHpNNDU2LjUgMzUyQzQ5Ni4zIDM1MiA1MjguNSAzODQuMiA1MjguNSA0MjRDNTI4LjUgNDYzLjggNDk2LjMgNDk2IDQ1Ni41IDQ5NkM0MTYuNyA0OTYgMzg0LjUgNDYzLjggMzg0LjUgNDI0QzM4NC41IDM4NC4yIDQxNi43IDM1MiA0NTYuNSAzNTJ6TTQ1Ni41IDU0NEM0ODAuOSA1NDQgNTAzLjYgNTM2LjcgNTIyLjYgNTI0LjJMNTgzLjUgNTg1LjFDNTkyLjkgNTk0LjUgNjA4LjEgNTk0LjUgNjE3LjQgNTg1LjFDNjI2LjcgNTc1LjcgNjI2LjggNTYwLjUgNjE3LjQgNTUxLjJMNTU2LjUgNDkwLjNDNTY5LjEgNDcxLjMgNTc2LjQgNDQ4LjUgNTc2LjQgNDI0QzU3Ni40IDM1Ny43IDUyMi43IDMwNCA0NTYuNCAzMDRDMzkwLjEgMzA0IDMzNi40IDM1Ny43IDMzNi40IDQyNEMzMzYuNCA0OTAuMyAzOTAuMSA1NDQgNDU2LjQgNTQ0eiIvPjwvc3ZnPg==';
@@ -199,7 +199,7 @@ const XvHeaderNext = class {
     render() {
         var _a, _b, _c, _d, _e;
         const isXvBrand = (((_a = this.metaNav) === null || _a === void 0 ? void 0 : _a['WhitelabelName']) || 'Xv') === 'Xv';
-        return (index.h("header", { key: '367db1f50b5e830f44d3856f477cffc86d883af1', class: "header" }, index.h("div", { key: '30799028ac203ee37793cf02ff051d301de4547b', class: "header-wrapper" }, index.h("div", { key: 'fc74acbc5a05646ae13b72e8e3b6b5b16e549128', class: "xv-container" }, index.h("div", { key: 'fd39609d7dbd00d4e1a6f2d42936017dc7b92133', class: "header-top" }, index.h("div", { key: '144c2f9b44e10e630e72ddf0f5908a57adb870c0', class: "header-top--left" }, index.h("xv-button-v2", { key: '60bafd1688527ee990d33a737621cc7a0f86c1a8', class: "menu-btn", variant: "ghost", onClick: this.toggleMobMenu }, index.h("i", { key: 'd3f6921a217103d0ba4737a7fa2cf255ec4ba494', slot: "icon-left", class: { 'fa': true, 'fa-times': this.mobMenuOpen, 'fa-bars': !this.mobMenuOpen } })), this.metaNav && (index.h("a", { key: '239d6f40cf27b3bd156b3a4b89673e8e7de0ade0', href: `${window.location.origin}/` }, index.h("picture", { key: 'b0d07ac3809b754bd3d9d1a854314f5b5097af65' }, index.h("source", { key: '6ced5e2dd0fc39237a4730bfcae9696d10485dac', srcSet: ((_b = this.metaNav) === null || _b === void 0 ? void 0 : _b.LogoUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg', media: "(min-width: 990px)" }), index.h("img", { key: '5c2089055930be622f4880bf493ecd3a937963d4', src: ((_c = this.metaNav) === null || _c === void 0 ? void 0 : _c.LogoSmallUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg', onError: this.logoFallback, loading: "lazy", alt: "Crossvertise" })))), this.orgUnit && (index.h("xv-link-v2", { key: 'bc159154774361df602ceadcfefc6fbae4612c82', class: "header-top--orgUnit", variant: "standalone", href: "/de-de/mycrossvertise" }, this.orgUnit))), index.h("ul", { key: '1ab6278056ab4000f858299a288cc6de47616307', class: "header-top--right" }, this._renderLocaleSwitcher(), this._renderSearch(), this._renderImpersonationInfo(), !((_d = this.metaNav) === null || _d === void 0 ? void 0 : _d.IsManager) && isXvBrand && (index.h("li", { key: '5a51295129e0adae87ed44bf0fc64f66b861f223' }, index.h("xv-link-v2", { key: '2bf404f048f0866e88c505d304a0cfd9b6f59728', variant: "ghost", href: "https://www.crossvertise.com/ueber-uns/kontakt" }, index.h("xv-button-v2", { key: '620e2520d9e77310447ddaeacfb8581d1325c614', variant: "ghost", size: _vars.SIZE_VAR.MD }, index.h("i", { key: '2af6b9aaa41072fa0b8a667169c567c67c1fc698', class: "header-icon far fa-envelope" }), index.h("span", { key: '515720ab78fec3507e1e14b3657372b375dbdbf5', class: "header-label xv-body-02" }, "Kontakt"))))), this._renderNotifications(), this._renderAccount(), !((_e = this.metaNav) === null || _e === void 0 ? void 0 : _e.IsManager) && isXvBrand && (index.h("li", { key: '07adfb149a7ef1c5889f1a7a4529d5e0779cf992' }, index.h("xv-link-v2", { key: 'caa650c5c7b479aa44102e2ec370e2f07c854fee', variant: "ghost", href: "https://help.crossvertise.com" }, index.h("xv-button-v2", { key: '1d72eb9a9c084183d7c5d55b2bd1f734296d63c9', variant: "ghost", size: _vars.SIZE_VAR.MD }, index.h("i", { key: '5c175d7afbfc7527e78c51289dd28d9f62af1010', class: "header-icon far fa-question-circle" }), index.h("span", { key: '95f8f14e391470d46647df176dde788653742bbb', class: "header-label xv-body-02" }, "Hilfe"))))), this._renderShoppingCart()))), index.h("div", { key: 'c52d3fc26cb4b787892aedf43b61b7baa5d95935', class: "header-wrapper--bg" }, index.h("div", { key: 'd5445ba26a4691b6f5acf7682fac67a6118d331f', class: "xv-container" }, index.h("xv-mega-menu-next", { key: '55541489dfaf1ce307149e932c7e4bee0e55747f', open: this.mobMenuOpen, onOpenChange: this.closeMobMenu, menuData: this.menuData })))), index.h("xv-login-modal", { key: '9383f391de7d39c28775cf9842130b0f3e5dbce5', visible: this.showLoginModal, onClose: () => this.showLoginModal = false })));
+        return (index.h("header", { key: 'c0012b5ecac3c6471b4ec7b1bfd2eccc3f86dd5f', class: "header" }, index.h("div", { key: 'cfb8213dac2c3fc8ceef915067a51aa0d7a9555f', class: "header-wrapper" }, index.h("div", { key: 'd3d2ccf65f3cefe5c67546e43fed176917877ead', class: "xv-container" }, index.h("div", { key: 'a8fe5efaba57b5687516513d374f9cfba0c705b2', class: "header-top" }, index.h("div", { key: '4b2119408ec66776a86af787383b79ebee41106d', class: "header-top--left" }, index.h("xv-button-v2", { key: 'f097db3d55ace0242e871961e6108436e0131aad', class: "menu-btn", variant: "ghost", onClick: this.toggleMobMenu }, index.h("i", { key: '0986f3d44c8898a3e2f0bd298f2819f3e9a5a34b', slot: "icon-left", class: { 'fa': true, 'fa-times': this.mobMenuOpen, 'fa-bars': !this.mobMenuOpen } })), this.metaNav && (index.h("a", { key: 'bf800f74bd14a7c425fcb6eb61aa8225dfcc3ee3', href: `${window.location.origin}/` }, index.h("picture", { key: '5c976747d8ff1cfdd6393340873ed45358cb181d' }, index.h("source", { key: 'a7b14ff940f436afe7f7efd6c04db248b0a06729', srcSet: ((_b = this.metaNav) === null || _b === void 0 ? void 0 : _b.LogoUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg', media: "(min-width: 990px)" }), index.h("img", { key: 'd3a1889224b26633def31994483a8bcdfb56e774', src: ((_c = this.metaNav) === null || _c === void 0 ? void 0 : _c.LogoSmallUrl) || 'https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg', onError: this.logoFallback, loading: "lazy", alt: "Crossvertise" })))), this.orgUnit && (index.h("xv-link-v2", { key: 'b1aba193ddf6c193f4ea05e3bf3856b50261ef67', class: "header-top--orgUnit", variant: "standalone", href: "/de-de/mycrossvertise" }, this.orgUnit))), index.h("ul", { key: '1c91ec33597c7c8ac8f92f3f7c5e759ef50e1dda', class: "header-top--right" }, this._renderLocaleSwitcher(), this._renderSearch(), this._renderImpersonationInfo(), !((_d = this.metaNav) === null || _d === void 0 ? void 0 : _d.IsManager) && isXvBrand && (index.h("li", { key: '1dc84281285f1b66a3942f8b51055be5d05dd846' }, index.h("xv-link-v2", { key: 'de90e6054b9f0cd9bf1fee2b8cbb3f6aedbf9767', variant: "ghost", href: "https://www.crossvertise.com/ueber-uns/kontakt" }, index.h("xv-button-v2", { key: '4fd63e27baad255ef62e36b5e4b6ced436fdf01e', variant: "ghost", size: _vars.SIZE_VAR.MD }, index.h("i", { key: '1c2569b332c7caa5518e0884b646020a11b5ae43', class: "header-icon far fa-envelope" }), index.h("span", { key: 'f890b2fbbdcd750cd1f19fd3d0b8731db1163013', class: "header-label xv-body-02" }, "Kontakt"))))), this._renderNotifications(), this._renderAccount(), !((_e = this.metaNav) === null || _e === void 0 ? void 0 : _e.IsManager) && isXvBrand && (index.h("li", { key: 'd5a450877b90b5cf8671e7cf315f0af03c392a03' }, index.h("xv-link-v2", { key: '9ab83170245eb9cc36e47969f381b7fb2229b010', variant: "ghost", href: "https://help.crossvertise.com" }, index.h("xv-button-v2", { key: 'ca823e73d6088c2be70335658187eb8aedd5142e', variant: "ghost", size: _vars.SIZE_VAR.MD }, index.h("i", { key: '0b72b8d4c39c1a986590275ba486249f94fc915a', class: "header-icon far fa-question-circle" }), index.h("span", { key: '41ae816f63d86995f5ae92fb383fd7f42374bedb', class: "header-label xv-body-02" }, "Hilfe"))))), this._renderShoppingCart()))), index.h("div", { key: 'c591fc53113a711ae4f716ca58246b076931ab3a', class: "header-wrapper--bg" }, index.h("div", { key: '2be8a3100c70b41cf60ca423fa7bedc9fd220d6d', class: "xv-container" }, index.h("xv-mega-menu-next", { key: 'd0f07991030a2067a8250ccc1f5efef36dbe74b3', open: this.mobMenuOpen, onOpenChange: this.closeMobMenu, menuData: this.menuData })))), index.h("xv-login-modal", { key: 'dd27d33edef87ad2915151573005dbf0e0291005', visible: this.showLoginModal, onClose: () => this.showLoginModal = false })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/xv-mega-menu-next.cjs.entry.js

@@ -90,7 +90,7 @@ const XvMegaMenuNext = class {
         void this.fetchMenuData();
     }
     render() {
-        return (index.h(index.Host, { key: 'fc9a1226c489898acd551ff1802bf3a2be58f88f' }, index.h("nav", { key: 'ab1c4ebbe301788c6dd9c7d1b54dcc0190a299cf', class: { 'xv-menu': true, open: this.open } }, this.menuLoading && (index.h("div", { key: 'a44198cc7301b91e24b262905c47246f99457da2', class: { 'xv-menu-loader': true, open: this.open } }, index.h("xv-loader-v2", { key: 'a7c5388a93dc80d70ab925cda41cbe64beb4ea01' }))), index.h("ul", { key: 'aacd5768fdf60ecdea2d947e495ceea23fa1f334', class: { menu: true, open: this.open } }, this.menuItems.map((menuItem) => {
+        return (index.h(index.Host, { key: 'f72d11053417cb7e999a24257f38ff00ba1a7097' }, index.h("nav", { key: '721da64fcb2d4a0268f1d26592225da518284457', class: { 'xv-menu': true, open: this.open } }, this.menuLoading && (index.h("div", { key: 'fbe58f4d8b44bffd9dc868d21d44c0f70361a1a1', class: { 'xv-menu-loader': true, open: this.open } }, index.h("xv-loader-v2", { key: 'd6b9dfb3bfd9026db6f4be158e558bdb993c9f08' }))), index.h("ul", { key: '208ad56e913ba59ed28f6781eed51e48d0843ab9', class: { menu: true, open: this.open } }, this.menuItems.map((menuItem) => {
             var _a, _b;
             return (index.h("li", { class: { 'menu-item': true, active: menuItem.id === ((_a = this.activeItem) === null || _a === void 0 ? void 0 : _a.id) } }, menuItem.route ? (index.h("xv-link-v2", { variant: "ghost", href: menuItem.route.route }, index.h("p", { class: "menu-item-label" }, (_b = menuItem.route) === null || _b === void 0 ? void 0 : _b.label))) : (index.h(index.Fragment, null, index.h("p", { class: "menu-item-label", onClick: () => this.setActiveItem(menuItem) }, menuItem === null || menuItem === void 0 ? void 0 : menuItem.label), index.h("ul", { class: "menu-item-groups" }, menuItem.groups.map((group) => {
                 var _a;
@@ -100,7 +100,7 @@ const XvMegaMenuNext = class {
                     } }, index.h("div", { class: "group-menus" }, index.h("ul", { class: { 'group-menus-categories': true, inline: group.layout === 'inline' } }, group.categories.map((category) => (index.h("li", { class: "category" }, index.h("p", { class: "category-label" }, category.label), index.h("ul", { class: "category-routes" }, category.routes.map((route) => (index.h("li", { class: "route" }, index.h("xv-link-v2", { size: "lg", variant: "ghost", href: route.route || '#' }, route.label), route.tag && (index.h("xv-tag-v2", { class: "route-tag", size: "sm", color: "#161616", bg: "#E0E0E0" }, route.tag)))))))))), index.h("ul", { class: "group-menus-actions" }, group.actions.map((action) => (index.h("li", { class: "action" }, action.type === 'link' && (index.h("xv-link-v2", { variant: "standalone", href: action === null || action === void 0 ? void 0 : action.url }, action.label, index.h("span", { class: "link-chevron", slot: "icon-right" }, "\u2192"))), action.type === 'button' &&
                     index.h("xv-button-v2", { onClick: () => this.navActionClick(action), block: true, variant: "tertiary" }, action.label)))))), (group === null || group === void 0 ? void 0 : group.card) && (index.h("div", { class: "group-card" }, index.h("xv-card-v2", { media: this.applicationContext !== 'Komsa' ? group.card.image : undefined, variant: this.isMobile ? 'horizontal' : 'vertical' }, index.h("h5", { slot: "header", class: "group-card-title" }, group.card.title), index.h("p", { slot: "body", class: "group-card-desc" }, group.card.description), group.card.linkLabel && (index.h("xv-link-v2", { slot: "footer", variant: "standalone", href: group.card.linkUrl || '#' }, group.card.linkLabel, index.h("span", { class: "link-chevron", slot: "icon-right" }, "\u2192"))))))))));
             }))))));
-        }), index.h("li", { key: 'e003e5ed84f0cae46b9e70b421f39099b23f2520', class: "menu--right" }, index.h("slot", { key: 'eaad598bcf36b34e6d6b0447b4b69bc6dbda542e', name: "menu-right" })), this.open && (index.h("li", { key: '07c6843b057fd98c333d626fa89531489c10cbe6', class: "menu--backdrop", onClick: () => this.handleClose() }))))));
+        }), index.h("li", { key: '773b59d60bf0410b1fc60c59c24e6772e856492b', class: "menu--right" }, index.h("slot", { key: '89c6b08cdc47fc264308cf2f962c89266c6d5073', name: "menu-right" })), this.open && (index.h("li", { key: '5e3e1d1e38a97c72dbcb8ee3f521f16d4aba3cbd', class: "menu--backdrop", onClick: () => this.handleClose() }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/xv-webcomponents.cjs.js

@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["xv-accordion-v2_47.cjs",[[0,"xv-header",{"metaNav":[32],"orgUnit":[32],"baseUrl":[32],"loading":[32],"mobMenuOpen":[32],"suggestions":[32],"suggestionsLoading":[32],"notifications":[32],"showLoginModal":[32]},[[8,"xv:orgUnitChange","handleOrgUnitChange"],[8,"xv:metaNav-update","metaNavUpdate"]]],[257,"xv-dropdown-v2",{"search":[516],"disabled":[516],"multiple":[516],"required":[516],"loading":[516],"readonly":[516],"open":[1540],"error":[520],"label":[513],"helper":[513],"warning":[513],"placeholder":[513],"info":[1],"searchPlaceholder":[1,"search-placeholder"],"size":[1],"defaultValue":[8,"default-value"],"value":[1032],"variant":[1],"position":[1],"selected":[32],"selectedMap":[32],"resolvedPosition":[32]},[[0,"itemSelected","handleItemSelected"],[0,"keydown","handleKeyDown"]],{"open":[{"openChangeHandle":0}],"multiple":[{"multipleChangeHandle":0}],"value":[{"valueChange":1}]}],[257,"xv-data-table-row",{"variant":[1],"name":[1025],"collapse":[1],"collapsable":[516],"checked":[1028],"partial":[1028],"hover":[1028],"group":[4],"header":[4],"footer":[4],"disabled":[4],"readonly":[4],"required":[4],"value":[8],"collapsed":[32],"reorderable":[32],"reorderHandleMode":[32],"close":[64]}],[65,"xv-datepicker",{"value":[1040],"variant":[1],"label":[1],"helper":[1],"error":[8],"warning":[8],"readonly":[4],"disabled":[4],"loading":[4],"block":[4],"size":[513],"min":[1],"max":[1],"month":[32],"days":[32],"open":[32],"localError":[32]},[[4,"click","handleClickOutside"]],{"open":[{"openChange":0}],"month":[{"getCalendarGrid":0}],"value":[{"handleValueChange":0}]}],[1,"xv-file-uploader",{"label":[1],"description":[1],"addText":[1,"add-text"],"variant":[1],"size":[1],"accept":[16],"buttonVariant":[1,"button-variant"],"maxFileSizeMB":[2,"max-file-size-mb"],"maxFiles":[2,"max-files"],"multiple":[4],"disabled":[516],"files":[1040],"loadingStates":[1040],"error":[1537],"errors":[1040],"dragActive":[32],"errorMessages":[32],"clearFiles":[64]}],[65,"xv-number-input-v2",{"label":[1],"placeholder":[513],"name":[513],"value":[1538],"helper":[1],"error":[8],"warning":[8],"step":[2],"max":[2],"min":[2],"readonly":[4],"disabled":[4],"loading":[4],"block":[516],"size":[513]}],[1,"xv-pagination",{"total":[2],"page":[1026],"size":[1],"block":[4],"variant":[1],"responsiveVariant":[16],"totalItems":[2,"total-items"],"itemsPerPage":[32],"currentVariant":[32]}],[257,"xv-table-v2-row",{"checked":[1540],"partial":[1540],"name":[1537],"value":[520],"hover":[1540],"readonly":[516],"required":[516],"disabled":[516],"header":[516],"variant":[1537]},null,{"checked":[{"checkedChangeHandle":0}]}],[65,"xv-textarea",{"value":[1025],"name":[1],"label":[1],"placeholder":[1],"helper":[1],"info":[1],"error":[8],"warning":[8],"disabled":[4],"readonly":[4],"block":[4],"counterHide":[4,"counter-hide"],"noResize":[4,"no-resize"],"loading":[4],"max":[2],"rows":[2],"size":[513]}],[257,"xv-data-table",{"size":[1],"block":[520],"loading":[4],"columnWidths":[16],"multiple":[516],"hover":[4],"reorderable":[516],"reorderHandle":[513,"reorder-handle"]},null,{"reorderable":[{"reorderableChanged":0}],"reorderHandle":[{"reorderHandleChanged":0}]}],[257,"xv-dropdown-v2-item",{"disabled":[4],"value":[1544],"selected":[1540],"multiple":[516],"size":[513]},[[0,"click","handleClick"]]],[257,"xv-image-viewer",{"src":[1],"fullscreenSrc":[1,"fullscreen-src"],"alt":[1],"placeholder":[1],"lazy":[4],"isFullscreen":[32],"loaded":[32],"fullscreenLoaded":[32],"errored":[32]}],[257,"xv-tab-v2",{"label":[513],"disabled":[516],"loading":[516],"name":[8]}],[257,"xv-table-v2",{"size":[513],"hover":[516],"loading":[516],"colsSize":[16],"selected":[32],"selectedCount":[32]},[[0,"checkedChange","handleCheckedChange"]],{"colsSize":[{"setColsSizeTemplate":0}]}],[257,"xv-tabs-v2",{"active":[1544],"loading":[516],"variant":[1],"emptyMessage":[1,"empty-message"],"hideSingleTab":[4,"hide-single-tab"],"tabElements":[32],"showArrows":[32]},[[9,"resize","updateArrowVisibility"]]],[1,"xv-tag-combobox",{"options":[16],"label":[1],"size":[1],"placeholder":[1],"allowCreate":[4,"allow-create"],"maxSuggestions":[2,"max-suggestions"],"disabled":[4],"readonly":[4],"error":[8],"warning":[8],"value":[16],"normalizedOptions":[32],"selected":[32],"inputValue":[32],"open":[32],"filtered":[32],"highlighted":[32],"focusInput":[64],"clear":[64]},null,{"options":[{"watchOptions":0}],"value":[{"watchValue":0}]}],[257,"xv-accordion-v2",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[257,"xv-accordion-v2-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[260,"xv-breadcrumbs-v2"],[257,"xv-content-switcher-item-v2",{"value":[520],"label":[513],"icon":[513],"disabled":[516]}],[257,"xv-content-switcher-v2",{"selected":[1544],"size":[513],"iconOnly":[516,"icon-only"],"disabled":[516],"block":[516],"controlled":[516],"items":[32]}],[257,"xv-data-table-collapse",{"collapsed":[1540],"setCollapsed":[64]}],[0,"xv-footer",{"data":[32]},[[8,"xv:metaNav-update","handleLoadData"]]],[257,"xv-progress-indicator-v2",{"progress":[514],"variant":[1],"size":[1]},null,{"progress":[{"updateChildItems":0}]}],[257,"xv-progress-indicator-v2-item",{"status":[1]}],[324,"xv-radio-v2",{"name":[1],"value":[1],"label":[1],"checked":[1028],"indeterminate":[4],"block":[4],"disabled":[4],"required":[4],"reverse":[4],"readonly":[4],"error":[8],"warning":[520],"size":[1]},null,{"checked":[{"onCheckedChange":0}]}],[65,"xv-slider-v2",{"label":[1],"name":[1],"min":[2],"max":[2],"value":[1026],"step":[2],"disabled":[4],"readonly":[4],"notEditable":[4,"not-editable"]}],[257,"xv-table-v2-expand",{"open":[1540],"disabled":[516]}],[260,"xv-tile",{"variant":[513],"label":[1],"error":[4],"multiple":[4],"disabled":[4],"block":[4],"name":[1],"message":[513],"value":[1025],"checked":[1028],"readonly":[1028]},[[4,"tileChange","tileChangeHandle"],[0,"click","handleClick"]]],[321,"xv-toggle",{"label":[1],"value":[1],"name":[1],"checked":[1540],"disabled":[4],"readonly":[4],"size":[513],"block":[4]}],[257,"xv-mega-menu",{"open":[1540],"activeItem":[32],"activeGroup":[32],"menuItems":[32],"applicationContext":[32],"menuLoading":[32]},[[4,"click","handleClickOutside"]]],[257,"xv-data-table-cell",{"name":[1025],"sort":[1537],"multiline":[520],"width":[1],"align":[1],"tooltip":[1]},[[0,"click","handleSort"]]],[257,"xv-table-v2-cell",{"multiline":[516],"name":[1537],"align":[513],"sort":[1537]},[[0,"click","handleSort"]]],[2,"xv-login-modal",{"visible":[4],"urls":[32],"loading":[32],"errorMessage":[32]}],[257,"xv-overflow-menu-v2",{"open":[1540],"disabled":[516],"position":[1],"size":[1],"tooltip":[1]},[[0,"keydown","handleKeyDown"]],{"open":[{"openChangeHandle":0}]}],[257,"xv-overflow-menu-v2-item",{"disabled":[516],"value":[520],"variant":[513],"clickable":[4]},[[0,"click","handleClick"]]],[257,"xv-toggle-tip",{"open":[1540],"autoSize":[516,"auto-size"],"block":[4],"position":[1],"setPopover":[64]},[[4,"click","handleClickOutside"],[0,"keydown","handleKeyDown"]],{"open":[{"openChangeHandle":0}]}],[257,"xv-modal-v2",{"open":[1540],"permanent":[516],"size":[513],"overflow":[516],"loading":[4],"openModal":[64],"closeModal":[64]}],[257,"xv-notification-v2",{"variant":[513],"dismissible":[516]}],[65,"xv-text-input-v2",{"type":[1],"label":[1],"placeholder":[513],"name":[513],"value":[1025],"autocomplete":[1],"helper":[1],"error":[8],"warning":[8],"readonly":[4],"disabled":[4],"loading":[4],"block":[516],"size":[513],"isPasswordVisible":[32]}],[257,"xv-card-v2",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[257,"xv-link-v2",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[321,"xv-checkbox-v2",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[513],"value":[513],"readonly":[516],"required":[516],"partial":[516],"label":[1],"size":[513],"error":[520],"align":[513],"hasFocus":[32]},null,{"checked":[{"onCheckedChange":0}]}],[257,"xv-tag-v2",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[260,"xv-tooltip-v2",{"message":[1],"position":[1],"block":[4],"dashed":[4]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"]]],[321,"xv-button-v2",{"value":[1],"name":[1],"label":[513],"variant":[513],"size":[513],"disabled":[516],"loading":[516],"block":[516],"type":[513],"hasLeftIcon":[32],"hasRightIcon":[32],"hasContent":[32]}],[257,"xv-loader-v2",{"show":[4],"variant":[1],"size":[1]}]]],["xv-mega-menu-next.cjs",[[257,"xv-mega-menu-next",{"open":[1540],"menuData":[1,"menu-data"],"activeItem":[32],"activeGroup":[32],"menuItems":[32],"applicationContext":[32],"menuLoading":[32]},[[4,"click","handleClickOutside"]],{"menuData":[{"onMenuDataChange":0}]}]]],["xv-header-next.cjs",[[0,"xv-header-next",{"menuData":[1,"menu-data"],"currentLocale":[1,"current-locale"],"locales":[1],"metaNav":[32],"orgUnit":[32],"baseUrl":[32],"loading":[32],"mobMenuOpen":[32],"suggestions":[32],"suggestionsLoading":[32],"notifications":[32],"showLoginModal":[32]},[[8,"xv:orgUnitChange","handleOrgUnitChange"],[8,"xv:metaNav-update","metaNavUpdate"]]]]]], options);
+  return index.bootstrapLazy([["xv-accordion-v2_48.cjs",[[0,"xv-header",{"metaNav":[32],"orgUnit":[32],"baseUrl":[32],"loading":[32],"mobMenuOpen":[32],"suggestions":[32],"suggestionsLoading":[32],"notifications":[32],"showLoginModal":[32]},[[8,"xv:orgUnitChange","handleOrgUnitChange"],[8,"xv:metaNav-update","metaNavUpdate"]]],[257,"xv-dropdown-v2",{"search":[516],"disabled":[516],"multiple":[516],"required":[516],"loading":[516],"readonly":[516],"open":[1540],"error":[520],"label":[513],"helper":[513],"warning":[513],"placeholder":[513],"info":[1],"searchPlaceholder":[1,"search-placeholder"],"size":[1],"defaultValue":[8,"default-value"],"value":[1032],"variant":[1],"position":[1],"selected":[32],"selectedMap":[32],"resolvedPosition":[32]},[[0,"itemSelected","handleItemSelected"],[0,"keydown","handleKeyDown"]],{"open":[{"openChangeHandle":0}],"multiple":[{"multipleChangeHandle":0}],"value":[{"valueChange":1}]}],[257,"xv-data-table-row",{"variant":[1],"name":[1025],"collapse":[1],"collapsable":[516],"checked":[1028],"partial":[1028],"hover":[1028],"group":[4],"header":[4],"footer":[4],"disabled":[4],"readonly":[4],"required":[4],"value":[8],"collapsed":[32],"reorderable":[32],"reorderHandleMode":[32],"close":[64]}],[65,"xv-datepicker",{"value":[1040],"variant":[1],"label":[1],"helper":[1],"error":[8],"warning":[8],"readonly":[4],"disabled":[4],"loading":[4],"block":[4],"size":[513],"min":[1],"max":[1],"month":[32],"days":[32],"open":[32],"localError":[32]},[[4,"click","handleClickOutside"]],{"open":[{"openChange":0}],"month":[{"getCalendarGrid":0}],"value":[{"handleValueChange":0}]}],[1,"xv-file-uploader",{"label":[1],"description":[1],"addText":[1,"add-text"],"variant":[1],"size":[1],"accept":[16],"buttonVariant":[1,"button-variant"],"maxFileSizeMB":[2,"max-file-size-mb"],"maxFiles":[2,"max-files"],"multiple":[4],"disabled":[516],"files":[1040],"loadingStates":[1040],"error":[1537],"errors":[1040],"dragActive":[32],"errorMessages":[32],"clearFiles":[64]}],[65,"xv-number-input-v2",{"label":[1],"placeholder":[513],"name":[513],"value":[1538],"helper":[1],"error":[8],"warning":[8],"step":[2],"max":[2],"min":[2],"readonly":[4],"disabled":[4],"loading":[4],"block":[516],"size":[513]}],[1,"xv-pagination",{"total":[2],"page":[1026],"size":[1],"block":[4],"variant":[1],"responsiveVariant":[16],"totalItems":[2,"total-items"],"itemsPerPage":[32],"currentVariant":[32]}],[257,"xv-table-v2-row",{"checked":[1540],"partial":[1540],"name":[1537],"value":[520],"hover":[1540],"readonly":[516],"required":[516],"disabled":[516],"header":[516],"variant":[1537]},null,{"checked":[{"checkedChangeHandle":0}]}],[1,"xv-tag-combobox",{"options":[16],"label":[1],"size":[1],"placeholder":[1],"allowCreate":[4,"allow-create"],"maxSuggestions":[2,"max-suggestions"],"disabled":[4],"loading":[4],"readonly":[4],"error":[8],"warning":[8],"value":[16],"normalizedOptions":[32],"selected":[32],"inputValue":[32],"open":[32],"filtered":[32],"highlighted":[32],"focusInput":[64],"clear":[64]},null,{"options":[{"watchOptions":0}],"value":[{"watchValue":0}]}],[65,"xv-textarea",{"value":[1025],"name":[1],"label":[1],"placeholder":[1],"helper":[1],"info":[1],"error":[8],"warning":[8],"disabled":[4],"readonly":[4],"block":[4],"counterHide":[4,"counter-hide"],"noResize":[4,"no-resize"],"loading":[4],"max":[2],"rows":[2],"size":[513]}],[257,"xv-data-table",{"size":[1],"block":[520],"loading":[4],"columnWidths":[16],"multiple":[516],"hover":[4],"reorderable":[516],"reorderHandle":[513,"reorder-handle"]},null,{"reorderable":[{"reorderableChanged":0}],"reorderHandle":[{"reorderHandleChanged":0}]}],[257,"xv-dropdown-v2-item",{"disabled":[4],"value":[1544],"selected":[1540],"multiple":[516],"size":[513]},[[0,"click","handleClick"]]],[257,"xv-image-viewer",{"src":[1],"fullscreenSrc":[1,"fullscreen-src"],"alt":[1],"placeholder":[1],"lazy":[4],"isFullscreen":[32],"loaded":[32],"fullscreenLoaded":[32],"errored":[32]}],[257,"xv-tab-v2",{"label":[513],"disabled":[516],"loading":[516],"name":[8]}],[257,"xv-table-v2",{"size":[513],"hover":[516],"loading":[516],"colsSize":[16],"selected":[32],"selectedCount":[32]},[[0,"checkedChange","handleCheckedChange"]],{"colsSize":[{"setColsSizeTemplate":0}]}],[257,"xv-tabs-v2",{"active":[1544],"loading":[516],"variant":[1],"emptyMessage":[1,"empty-message"],"hideSingleTab":[4,"hide-single-tab"],"tabElements":[32],"showArrows":[32]},[[9,"resize","updateArrowVisibility"]]],[257,"xv-accordion-v2",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[257,"xv-accordion-v2-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[260,"xv-breadcrumbs-v2"],[257,"xv-button-group-v2",{"variant":[513],"multiple":[516],"value":[1025]},[[0,"click","handleClick"]],{"value":[{"onSelectionInputChange":0}],"multiple":[{"onSelectionInputChange":0}]}],[257,"xv-content-switcher-item-v2",{"value":[520],"label":[513],"icon":[513],"disabled":[516]}],[257,"xv-content-switcher-v2",{"selected":[1544],"size":[513],"iconOnly":[516,"icon-only"],"disabled":[516],"block":[516],"controlled":[516],"items":[32]}],[257,"xv-data-table-collapse",{"collapsed":[1540],"setCollapsed":[64]}],[0,"xv-footer",{"data":[32]},[[8,"xv:metaNav-update","handleLoadData"]]],[257,"xv-progress-indicator-v2",{"progress":[514],"variant":[1],"size":[1]},null,{"progress":[{"updateChildItems":0}]}],[257,"xv-progress-indicator-v2-item",{"status":[1]}],[324,"xv-radio-v2",{"name":[1],"value":[1],"label":[1],"checked":[1028],"indeterminate":[4],"block":[4],"disabled":[4],"required":[4],"reverse":[4],"readonly":[4],"error":[8],"warning":[520],"size":[1]},null,{"checked":[{"onCheckedChange":0}]}],[65,"xv-slider-v2",{"label":[1],"name":[1],"min":[2],"max":[2],"value":[1026],"step":[2],"disabled":[4],"readonly":[4],"notEditable":[4,"not-editable"]}],[257,"xv-table-v2-expand",{"open":[1540],"disabled":[516]}],[260,"xv-tile",{"variant":[513],"label":[1],"error":[4],"multiple":[4],"disabled":[4],"block":[4],"name":[1],"message":[513],"value":[1025],"checked":[1028],"readonly":[1028]},[[4,"tileChange","tileChangeHandle"],[0,"click","handleClick"]]],[321,"xv-toggle",{"label":[1],"value":[1],"name":[1],"checked":[1540],"disabled":[4],"readonly":[4],"size":[513],"block":[4]}],[257,"xv-mega-menu",{"open":[1540],"activeItem":[32],"activeGroup":[32],"menuItems":[32],"applicationContext":[32],"menuLoading":[32]},[[4,"click","handleClickOutside"]]],[257,"xv-data-table-cell",{"name":[1025],"sort":[1537],"multiline":[520],"width":[1],"align":[1],"tooltip":[1]},[[0,"click","handleSort"]]],[257,"xv-table-v2-cell",{"multiline":[516],"name":[1537],"align":[513],"sort":[1537]},[[0,"click","handleSort"]]],[2,"xv-login-modal",{"visible":[4],"urls":[32],"loading":[32],"errorMessage":[32]}],[257,"xv-overflow-menu-v2",{"open":[1540],"disabled":[516],"position":[1],"alignment":[1],"size":[1],"tooltip":[1],"anchor":[1],"activeId":[32],"openMenu":[64],"closeMenu":[64],"toggleMenu":[64]},[[0,"keydown","handleKeyDown"]],{"open":[{"openChangeHandle":0}],"anchor":[{"anchorChangeHandle":0}]}],[257,"xv-overflow-menu-v2-item",{"disabled":[516],"value":[520],"variant":[513],"clickable":[4],"href":[1],"target":[1],"divider":[516],"hasIcon":[32],"hasIconEnd":[32]},[[0,"click","handleClick"]]],[257,"xv-toggle-tip",{"open":[1540],"autoSize":[516,"auto-size"],"block":[4],"position":[1],"setPopover":[64]},[[4,"click","handleClickOutside"],[0,"keydown","handleKeyDown"]],{"open":[{"openChangeHandle":0}]}],[257,"xv-modal-v2",{"open":[1540],"permanent":[516],"size":[513],"overflow":[516],"loading":[4],"openModal":[64],"closeModal":[64]}],[257,"xv-notification-v2",{"variant":[513],"dismissible":[516]}],[65,"xv-text-input-v2",{"type":[1],"label":[1],"placeholder":[513],"name":[513],"value":[1025],"autocomplete":[1],"helper":[1],"error":[8],"warning":[8],"readonly":[4],"disabled":[4],"loading":[4],"block":[516],"size":[513],"isPasswordVisible":[32]}],[257,"xv-card-v2",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[257,"xv-link-v2",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[321,"xv-checkbox-v2",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[513],"value":[513],"readonly":[516],"required":[516],"partial":[516],"label":[1],"size":[513],"error":[520],"align":[513],"hasFocus":[32]},null,{"checked":[{"onCheckedChange":0}]}],[257,"xv-tag-v2",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[260,"xv-tooltip-v2",{"message":[1],"position":[1],"block":[4],"dashed":[4]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"]]],[321,"xv-button-v2",{"value":[1],"name":[1],"label":[513],"variant":[513],"size":[513],"disabled":[516],"loading":[516],"block":[516],"type":[513],"active":[516],"hasLeftIcon":[32],"hasRightIcon":[32],"hasContent":[32]}],[257,"xv-loader-v2",{"show":[4],"variant":[1],"size":[1]}]]],["xv-mega-menu-next.cjs",[[257,"xv-mega-menu-next",{"open":[1540],"menuData":[1,"menu-data"],"activeItem":[32],"activeGroup":[32],"menuItems":[32],"applicationContext":[32],"menuLoading":[32]},[[4,"click","handleClickOutside"]],{"menuData":[{"onMenuDataChange":0}]}]]],["xv-header-next.cjs",[[0,"xv-header-next",{"menuData":[1,"menu-data"],"currentLocale":[1,"current-locale"],"locales":[1],"metaNav":[32],"orgUnit":[32],"baseUrl":[32],"loading":[32],"mobMenuOpen":[32],"suggestions":[32],"suggestionsLoading":[32],"notifications":[32],"showLoginModal":[32]},[[8,"xv:orgUnitChange","handleOrgUnitChange"],[8,"xv:metaNav-update","metaNavUpdate"]]]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -4,6 +4,7 @@
     "components/xv-accordion-item/xv-accordion-item.js",
     "components/xv-breadcrumbs/xv-breadcrumbs.js",
     "components/xv-button/xv-button.js",
+    "components/xv-button-group/xv-button-group.js",
     "components/xv-card/xv-card.js",
     "components/xv-checkbox/xv-checkbox.js",
     "components/xv-content-switcher/xv-content-switcher.js",

package/dist/collection/components/xv-button/xv-button-v2.css

@@ -141,9 +141,9 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  border-radius: 3px;
+  border-radius: var(--xv-button-border-radius, 3px);
   font-size: var(--fz-md);
-  font-family: var(--ff-body, Tahoma);
+  font-family: var(--ff-body, Tahoma), sans-serif;
   font-style: normal;
   font-weight: var(--xv-button-font-weight, 700);
   line-height: 128.571%;
@@ -191,7 +191,7 @@
 .xv-button--primary:hover {
   background-color: var(--button-primary-hover);
 }
-.xv-button--primary:active {
+.xv-button--primary.xv-button--active, .xv-button--primary:active {
   background-color: var(--button-primary-active);
 }
 .xv-button--accent {
@@ -201,7 +201,7 @@
 .xv-button--accent:hover {
   background-color: var(--button-accent-hover);
 }
-.xv-button--accent:active {
+.xv-button--accent.xv-button--active, .xv-button--accent:active {
   background-color: var(--button-accent-active);
 }
 .xv-button--secondary {
@@ -212,7 +212,7 @@
 .xv-button--secondary:hover {
   background-color: var(--button-secondary-hover);
 }
-.xv-button--secondary:active {
+.xv-button--secondary.xv-button--active, .xv-button--secondary:active {
   background-color: var(--button-secondary-active);
 }
 .xv-button--danger {
@@ -222,7 +222,7 @@
 .xv-button--danger:hover {
   background-color: #ba1b23;
 }
-.xv-button--danger:active {
+.xv-button--danger.xv-button--active, .xv-button--danger:active {
   background-color: #750e13;
 }
 .xv-button--danger:disabled {
@@ -238,7 +238,7 @@
 .xv-button--tertiary:hover {
   background-color: var(--button-tertiary-hover);
 }
-.xv-button--tertiary:active {
+.xv-button--tertiary.xv-button--active, .xv-button--tertiary:active {
   background-color: var(--button-tertiary-active);
 }
 .xv-button--tertiary:disabled {
@@ -253,7 +253,7 @@
 .xv-button--ghost:hover {
   background-color: var(--background-hover);
 }
-.xv-button--ghost:active {
+.xv-button--ghost.xv-button--active, .xv-button--ghost:active {
   background-color: rgba(139, 139, 139, 0.5);
 }
 .xv-button--ghost:disabled {

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

@@ -14,6 +14,8 @@ export class XvButton {
         this.block = false;
         /** Button type */
         this.type = 'button';
+        /** Set button to active styles */
+        this.active = false;
         this.hasLeftIcon = false;
         this.hasRightIcon = false;
         this.hasContent = false;
@@ -42,8 +44,9 @@ export class XvButton {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'ca4d2a911587ac7e4621f320166a683cf198d0f0' }, h("button", { key: '946469fc5e2c5f4e57c576929313afd07279328b', class: {
+        return (h(Host, { key: 'aca4f3e80723593be61fab9bf77b2bfae5b68e66' }, h("button", { key: '1f0b3abe1eb888aa927c7d2351f437c82d8a7dc7', class: {
                 'xv-button': true,
+                'xv-button--active': this.active,
                 [`xv-button--${this.variant}`]: !!this.variant,
                 [`xv-button--${this.size}`]: !!this.size,
                 'xv-button--disabled': this.disabled || this.loading,
@@ -52,7 +55,7 @@ export class XvButton {
                 'xv-button--icon-left': this.hasLeftIcon,
                 'xv-button--icon-right': this.hasRightIcon,
                 'xv-button--icon-only': !this.hasContent,
-            }, part: "button", title: (_a = this.el) === null || _a === void 0 ? void 0 : _a.title, value: this.value, name: this.name, onClick: this.handleClick, type: this.type, disabled: this.disabled || this.loading, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": ((_b = this.el) === null || _b === void 0 ? void 0 : _b.ariaLabel) || 'XV button' }, this.loading && (h("xv-loader-v2", { key: 'ec4203d7ae6516d9e7af2a614bd80aec2f3955b8', class: "xv-button__loader", size: this.size !== SIZE_VAR.XL ? this.size : SIZE_VAR.LG })), h("span", { key: '0c1946bc8e8c6dd997a32743e99da5aace7a3572', class: "xv-button__icon xv-button__icon--left" }, h("slot", { key: '7d24426efbeca547b132eddd3fc9c33bb7df54d1', name: "icon-left", onSlotchange: this.handleSlotChangeLeft })), h("span", { key: '23703a344cb6389bf6d4254a8f21f7f48f451233', class: "xv-button__label" }, h("slot", { key: 'a66aa8f71aae84809297ed5e95197d1ec8ac14d5', onSlotchange: this.handleSlotChangeContent }, this.label)), h("span", { key: '0ec4ab0519b7c0b20d8b5445f14cb0a312dbd79e', class: "xv-button__icon xv-button__icon--right" }, h("slot", { key: '42b90f9820fbbdaa36e19ffea8296debf810f62e', name: "icon-right", onSlotchange: this.handleSlotChangeRight })))));
+            }, part: "button", title: (_a = this.el) === null || _a === void 0 ? void 0 : _a.title, value: this.value, name: this.name, onClick: this.handleClick, type: this.type, disabled: this.disabled || this.loading, "aria-disabled": this.disabled ? 'true' : undefined, "aria-pressed": this.active ? 'true' : undefined, "aria-label": ((_b = this.el) === null || _b === void 0 ? void 0 : _b.ariaLabel) || 'XV button' }, this.loading && (h("xv-loader-v2", { key: 'ffa0a49ef478bc558dc3511ac90e883de63188d1', class: "xv-button__loader", size: this.size !== SIZE_VAR.XL ? this.size : SIZE_VAR.LG })), h("span", { key: '3b27a5e36072adf1d749fe1b75a2f2507d2783b9', class: "xv-button__icon xv-button__icon--left" }, h("slot", { key: 'a66d0e292864c45141b3e7c78a55e1f419bca02d', name: "icon-left", onSlotchange: this.handleSlotChangeLeft })), h("span", { key: 'bb2bb95b64a11e480cb2cb267d4db79506996495', class: "xv-button__label" }, h("slot", { key: 'e14a8b19bce7b449934a5a2096c8d8ce20bb73eb', onSlotchange: this.handleSlotChangeContent }, this.label)), h("span", { key: '003cca2d751e40ec47b4d01f91f4381ba75ce529', class: "xv-button__icon xv-button__icon--right" }, h("slot", { key: 'f379bdf670da3ea97b196b055a7eaef105e455c7', name: "icon-right", onSlotchange: this.handleSlotChangeRight })))));
     }
     static get is() { return "xv-button-v2"; }
     static get encapsulation() { return "shadow"; }
@@ -251,6 +254,26 @@ export class XvButton {
                 "reflect": true,
                 "attribute": "type",
                 "defaultValue": "'button'"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set button to active styles"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/xv-button-group/xv-button-group.css

@@ -0,0 +1,173 @@
+.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;
+}
+
+:host([variant=vertical]) {
+  flex-direction: column;
+}
+
+::slotted(xv-button-v2) {
+  --xv-button-border-radius: 0;
+}
+
+::slotted(xv-button-v2:first-child) {
+  --xv-button-border-radius: 3px 0 0 3px;
+}
+
+::slotted(xv-button-v2:last-child) {
+  --xv-button-border-radius: 0 3px 3px 0;
+}
+
+:host([variant=vertical]) ::slotted(xv-button-v2:first-child) {
+  --xv-button-border-radius: 3px 3px 0 0;
+}
+
+:host([variant=vertical]) ::slotted(xv-button-v2:last-child) {
+  --xv-button-border-radius: 0 0 3px 3px;
+}
+
+::slotted(xv-button-v2:only-child) {
+  --xv-button-border-radius: 3px;
+}
+
+::slotted(xv-button-v2:not(:first-child)) {
+  margin-inline-start: -1px;
+}
+
+:host([variant=vertical]) ::slotted(xv-button-v2:not(:first-child)) {
+  margin-block-start: -1px;
+  margin-inline-start: 0;
+}
+
+::slotted(xv-button-v2[active]),
+::slotted(xv-button-v2:hover) {
+  position: relative;
+  z-index: 1;
+}

package/dist/collection/components/xv-button-group/xv-button-group.js

@@ -0,0 +1,206 @@
+import { Host, h } from "@stencil/core";
+const ITEM_TAG = 'xv-button-v2';
+/**
+ * xv-button-group-v2
+ *
+ * Groups a set of `xv-button-v2` buttons into a single horizontal or vertical
+ * unit. Use `secondary` or `tertiary` buttons inside it.
+ *
+ * The group owns only three things: the layout direction, the rounded corners
+ * (applied to the outer edges of the group via each button's
+ * `--xv-button-border-radius` variable) and the **active** selection. Everything
+ * else — `variant`, `size`, `disabled`, icons, labels — stays on each child
+ * `xv-button-v2`.
+ *
+ * Selection is single by default (radio-like: re-clicking the active button is a
+ * no-op). Set `multiple` to let each button toggle independently. The active
+ * button shows the existing `--button-{type}-active` colour.
+ *
+ * @slot - One or more `xv-button-v2` elements, each with its own `value`.
+ */
+export class XvButtonGroup {
+    constructor() {
+        /** Layout direction of the group. */
+        this.variant = 'horizontal';
+        /** Allow several buttons to be active at the same time (independent toggles). */
+        this.multiple = false;
+    }
+    onSelectionInputChange() {
+        this.syncActive();
+    }
+    componentDidLoad() {
+        this.syncActive();
+    }
+    handleClick(event) {
+        var _a;
+        const btn = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest(ITEM_TAG);
+        if (!btn || !this.el.contains(btn) || btn.hasAttribute('disabled'))
+            return;
+        this.toggle(this.getItemKey(btn));
+    }
+    /** Live list of child buttons, in DOM order. */
+    get items() {
+        return Array.from(this.el.querySelectorAll(ITEM_TAG));
+    }
+    getItemKey(item) {
+        const value = item.getAttribute('value');
+        return value !== null && value !== '' ? value : `${this.items.indexOf(item)}`;
+    }
+    selectedKeys() {
+        const value = this.value;
+        if (value === undefined || value === null || value === '')
+            return [];
+        if (Array.isArray(value))
+            return value.map(String);
+        // A string: split on commas in multiple mode, otherwise treat as one key.
+        return this.multiple
+            ? `${value}`.split(',').map((key) => key.trim()).filter(Boolean)
+            : [`${value}`];
+    }
+    toggle(key) {
+        if (this.multiple) {
+            const current = this.selectedKeys();
+            const next = current.includes(key) ? current.filter((k) => k !== key) : [...current, key];
+            this.value = next;
+            this.activeChange.emit(next);
+        }
+        else {
+            // Radio-like: clicking the already-active button does nothing.
+            if (`${this.value}` === key)
+                return;
+            this.value = key;
+            this.activeChange.emit(key);
+        }
+        this.syncActive();
+    }
+    /**
+     * Mirror the selection onto the children by flipping each button's `active`
+     * attribute. The button renders `aria-pressed` on its own inner `<button>`
+     * from that state (the host element has no role, so ARIA must live there).
+     */
+    syncActive() {
+        const keys = this.selectedKeys();
+        this.items.forEach((item) => {
+            const isActive = keys.includes(this.getItemKey(item));
+            if (isActive)
+                item.setAttribute('active', '');
+            else
+                item.removeAttribute('active');
+        });
+    }
+    render() {
+        return (h(Host, { key: '173e1e09cd6a12d8f3058395914ddeceb8c12b2c', role: "group" }, h("slot", { key: 'ed963d11b49624d4f9e7144c6a9421449bfb27c4', onSlotchange: () => this.syncActive() })));
+    }
+    static get is() { return "xv-button-group-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-button-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-button-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout direction of the group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'horizontal'"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow several buttons to be active at the same time (independent toggles)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Active selection \u2014 a single value (single mode) or an array of values\n(`multiple` mode). Matched against each button's `value`, falling back to\nits zero-based index when it has none. Via an attribute in `multiple` mode,\na comma-separated string is also accepted."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "activeChange",
+                "name": "activeChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever the active selection changes. Carries a `string` in single\nmode and a `string[]` in `multiple` mode. Does not bubble or cross shadow\nboundaries, so it never collides with an enclosing component's events."
+                },
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onSelectionInputChange"
+            }, {
+                "propName": "multiple",
+                "methodName": "onSelectionInputChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}