npm - @baloise/ds-core - Versions diffs - 17.2.1 → 17.2.2-nightly.20250109 - Mend

@baloise/ds-core 17.2.1 → 17.2.2-nightly.20250109

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (790) hide show

package/dist/esm/bal-carousel_2.entry.js CHANGED Viewed

@@ -1,25 +1,26 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-5b1faf93.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-8d2a7ce7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { j as debounce, l as rLCP, n as raf, b as waitAfterFramePaint } from './helpers-72ae7307.js';
+import { m as rOnLoad, b as waitAfterFramePaint } from './helpers-32d9e1cc.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
-import { s as stopEventBubbling } from './form-input-264ad739.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-a8efc52b.js';
-import { g as getComputedWidth } from './style-ca1bd202.js';
-import { L as ListenTo } from './listen-d1712e70.js';
-import { L as ListenToMutation } from './mutation.decorator-74831883.js';
-import { L as ListenToSwipe } from './swipe.decorator-56b6d574.js';
-import { L as ListenToResize } from './resize.decorator-f2d8461d.js';
-import { b as balBreakpoints } from './breakpoints.subject-0764e6ff.js';
+import { a as ariaBooleanToString } from './aria-d5877698.js';
+import { t as toKebabCase, S as SwiperUtil } from './swiper.util-3e090584.js';
+import { s as stopEventBubbling } from './form-input-1f3d8337.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-d489f428.js';
+import { L as ListenToMutation } from './mutation.decorator-0c202bed.js';
+import { L as ListenToSwipe } from './swipe.decorator-20f4a0cb.js';
+import { L as ListenToResize } from './resize.decorator-bd416c47.js';
+import { b as balBreakpoints } from './breakpoints.subject-d0b34510.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
+import './keyboard.helpers-159e517d.js';
 import './listener-04842ae9.js';
-import './swipe.subject-683f7c7b.js';
+import './swipe.subject-e3db5994.js';
 import './device-8c6d2881.js';
-import './tokens.esm-69df759d.js';
+import './tokens.esm-28388bbc.js';
 import './log-dfd1c19f.js';
 const TabControl = ({ value, items, containerId, onControlChange }) => {
@@ -27,118 +28,26 @@ const TabControl = ({ value, items, containerId, onControlChange }) => {
     const controls = block.element('controls');
     return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('tabs').class()) },
         h("bal-card", null,
-            h("bal-card-content", null, items.map(item => (h("bal-button", { "aria-controls": containerId, key: item.value, expanded: true, color: value === item.value ? 'primary' : 'light', onClick: () => onControlChange(item) }, item.label)))))));
+            h("bal-card-content", { role: "tabs" }, items.map(item => (h("button", { class: {
+                    'button': true,
+                    'is-fullwidth': true,
+                    'is-primary': value === item.value,
+                    'is-light': value !== item.value,
+                }, role: "tab", "aria-selected": ariaBooleanToString(value === item.value), "aria-controls": containerId + '-' + toKebabCase(item.label), key: item.value, onClick: () => onControlChange(item) }, item.label)))))));
 };
-const DotControl = ({ value, items, containerId, onControlChange }) => {
-    const block = BEM.block('carousel');
-    const controls = block.element('controls');
-    const onChange = (ev) => {
-        let selectedValue = ev.detail - 1;
-        if (selectedValue < 0) {
-            selectedValue = 0;
-        }
-        if (selectedValue >= items.length) {
-            selectedValue = items.length - 1;
-        }
-        onControlChange(items[selectedValue]);
-    };
-    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('tabs').class()) },
-        h("bal-pagination", { "aria-controls": containerId, interface: "small", value: value + 1, totalPages: items.length, onBalChange: onChange })));
-};
-const LargeControl = ({ isFirst, isLast, inverted, areControlsHidden, onNextClick, onPreviousClick, containerId, leftControlTitle, rightControlTitle, }) => {
-    const block = BEM.block('carousel');
-    const controls = block.element('controls');
-    const button = controls.element('button');
-    return (h("div", { "data-mutation": "false", class: Object.assign(Object.assign({}, controls.class()), controls.modifier('large').class()) },
-        h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst && areControlsHidden)), "aria-controls": containerId, square: true, icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), disabled: isFirst, "aria-hidden": isFirst && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-left", title: leftControlTitle }),
-        h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast && areControlsHidden)), "aria-controls": containerId, square: true, icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), disabled: isLast, "aria-hidden": isLast && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
-};
-const SmallControl = ({ isFirst, isLast, inverted, leftControlTitle, rightControlTitle, containerId, onNextClick, onPreviousClick, }) => {
-    const block = BEM.block('carousel');
-    const controls = block.element('controls');
-    const button = controls.element('button');
-    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('small').class()) },
-        h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst)), "aria-controls": containerId, square: true, size: "small", icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), disabled: isFirst, "aria-hidden": isFirst ? 'true' : null, tabindex: "-1", "data-testid": "bal-carousel-control-left", title: leftControlTitle }),
-        h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast)), "aria-controls": containerId, square: true, size: "small", icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), disabled: isLast, "aria-hidden": isLast ? 'true' : null, tabindex: "-1", "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
-};
-const i18nControlLabel = {
-    de: {
-        left: 'vorherige',
-        right: 'nächste',
-    },
-    en: {
-        left: 'previous',
-        right: 'next',
-    },
-    fr: {
-        left: 'précédent',
-        right: 'suivant',
-    },
-    it: {
-        left: 'precedente',
-        right: 'successivo',
-    },
-    nl: {
-        left: 'vorige',
-        right: 'volgende',
-    },
-    es: {
-        left: 'anterior',
-        right: 'siguiente',
-    },
-    pl: {
-        left: 'poprzedni',
-        right: 'następny',
-    },
-    pt: {
-        left: 'anterior',
-        right: 'próximo',
-    },
-    sv: {
-        left: 'föregående',
-        right: 'nästa',
-    },
-    fi: {
-        left: 'edellinen',
-        right: 'seuraava',
-    },
-};
-const balCarouselCss = ":root{--bal-carousel-inner-border-background:var(--bal-color-border);--bal-carousel-inner-border-background-inverted:var(--bal-color-border-primary-light);--bal-carousel-inner-shadow-left-background-before:var(--bal-color-white);--bal-carousel-inner-shadow-right-background-after:var(--bal-color-white);--bal-carousel-inner-shadow-left-background-inverted-before:var(--bal-color-primary);--bal-carousel-inner-shadow-right-background-inverted-after:var(--bal-color-primary);--bal-carousel-product-item-button-background:var(--bal-color-white);--bal-carousel-product-item-button-background-green:var(--bal-color-green-1);--bal-carousel-product-item-button-background-green-hover:var(--bal-color-green-1);--bal-carousel-product-item-button-background-green-active:var(--bal-color-green-2);--bal-carousel-product-item-button-background-red:var(--bal-color-red-1);--bal-carousel-product-item-button-background-red-hover:var(--bal-color-red-1);--bal-carousel-product-item-button-background-red-active:var(--bal-color-red-2);--bal-carousel-product-item-button-background-yellow:var(--bal-color-yellow-1);--bal-carousel-product-item-button-background-yellow-hover:var(--bal-color-yellow-1);--bal-carousel-product-item-button-background-yellow-active:var(--bal-color-yellow-2);--bal-carousel-product-item-button-background-purple:var(--bal-color-purple-1);--bal-carousel-product-item-button-background-purple-hover:var(--bal-color-purple-1);--bal-carousel-product-item-button-background-purple-active:var(--bal-color-purple-2);--bal-carousel-inner-border-radius:var(--bal-radius-rounded);--bal-carousel-image-border-radius:var(--bal-radius-normal);--bal-carousel-product-item-button-border-radius:var(--bal-radius-large);--bal-carousel-product-item-button-label-text-color:var(--bal-color-text-primary);--bal-carousel-sticky-top:0}.bal-carousel{display:block;position:relative}.bal-carousel__inner{display:block;position:relative;margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;-ms-touch-action:pan-y;touch-action:pan-y}.bal-carousel--full-height{height:100%}.bal-carousel__inner--full-height{height:100%}.bal-carousel__inner__container{position:relative;width:100%;height:100%;display:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-duration:0ms;transition-duration:0ms;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.bal-carousel__inner__container--border{padding-bottom:var(--bal-border-width-normal)}.bal-carousel__inner__container__border{position:absolute;background:var(--bal-carousel-inner-border-background);border-radius:var(--bal-carousel-inner-border-radius);height:var(--bal-border-width-normal);width:100%;bottom:0;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.bal-carousel__inner__container__border--inverted{background:var(--bal-carousel-inner-border-background-inverted)}.bal-carousel__item{text-align:center;font-size:var(--bal-text-size-large);min-height:2rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.bal-carousel__inner--shadow-left::before,.bal-carousel__inner--shadow-right::after{position:absolute;width:3rem;height:100%;top:0}.bal-carousel__inner--shadow-left::before{content:\"\";left:0;background:-webkit-gradient(linear, left top, right top, color-stop(50%, var(--bal-carousel-inner-shadow-left-background-before)), to(rgba(255, 255, 255, 0)));background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-carousel__inner--shadow-right::after{content:\"\";right:0;background:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--bal-carousel-inner-shadow-right-background-after)));background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-after) 50%)}.bal-carousel__inner--shadow-left.bal-carousel__inner--inverted::before{background:-webkit-gradient(linear, left top, right top, color-stop(50%, var(--bal-carousel-inner-shadow-left-background-inverted-before)), to(rgba(255, 255, 255, 0)));background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-inverted-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-carousel__inner--shadow-right.bal-carousel__inner--inverted::after{background:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--bal-carousel-inner-shadow-right-background-inverted-after)));background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-carousel__inner--items-per-view-auto .bal-carousel__item{width:auto}.bal-carousel__inner--items-per-view-1 .bal-carousel__item{width:100%}.bal-carousel__inner--items-per-view-2 .bal-carousel__item{width:50%}.bal-carousel__inner--items-per-view-3 .bal-carousel__item{width:33.3333%}.bal-carousel__inner--items-per-view-4 .bal-carousel__item{width:25%}.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:2.5rem}}@media screen and (min-width: 1024px){.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:3rem}}.bal-carousel--card{margin-left:-1rem;margin-right:-1rem}@media screen and (min-width: 769px),print{.bal-carousel--card{margin-left:-2.5rem;margin-right:-2.5rem}}.bal-carousel--card .bal-carousel__controls{padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__controls{padding-left:2.5rem;padding-right:2.5rem}}.bal-carousel--card .bal-carousel__item{width:calc(100% - 2rem);padding-top:1rem;padding-bottom:1rem;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__item{width:calc(100% - 5rem);padding-top:2.5rem;padding-bottom:2.5rem;padding-left:2.5rem;padding-right:2.5rem}}.bal-carousel--controls-sticky .bal-carousel__controls--tabs{position:-webkit-sticky;position:sticky;top:var(--bal-carousel-sticky-top);z-index:var(--bal-z-index-sticky)}.bal-carousel__controls--tabs .bal-card{padding:0}.bal-carousel__controls--tabs .bal-card-content{padding:.5rem !important;gap:.5rem;display:-ms-flexbox;display:flex}.bal-carousel__controls--tabs .bal-card-content .bal-button{-ms-flex:1;flex:1}.bal-carousel__controls--tabs .bal-card-content .bal-button .button{padding:.5rem !important}.bal-carousel--image .bal-carousel__inner{border-radius:var(--bal-carousel-image-border-radius)}.bal-carousel--image .bal-carousel__inner--is-1by1{padding-top:100%}.bal-carousel--image .bal-carousel__inner--is-16by9{padding-top:56.25%}.bal-carousel--image .bal-carousel__inner--is-3by2{padding-top:66.66%}.bal-carousel--image .bal-carousel__inner--is-4by3{padding-top:75%}.bal-carousel--image .bal-carousel__inner__container{position:absolute;top:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:100%}.bal-carousel--image .bal-carousel__item{position:relative;-ms-flex:0 0 100%;flex:0 0 100%}.bal-carousel--image .bal-carousel__item>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;user-drag:none;user-zoom:fixed}.bal-carousel--product .bal-carousel__inner__container{gap:1rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-carousel--product .bal-carousel__item{display:-ms-flexbox;display:flex;width:10rem;height:11rem;text-align:center;padding-top:.5rem;padding-bottom:.5rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item__button{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;gap:1rem;border-radius:var(--bal-carousel-product-item-button-border-radius);padding:var(--bal-text-size-x-small);border:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;background:var(--bal-carousel-product-item-button-background)}@media (hover: hover)and (pointer: fine){.bal-carousel--product .bal-carousel__item__button:focus-visible:not(:active){-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-green{background:var(--bal-carousel-product-item-button-background-green)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-green:hover{background:var(--bal-carousel-product-item-button-background-green-hover)}.bal-carousel--product .bal-carousel__item__button--color-green:active{background:var(--bal-carousel-product-item-button-background-green-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-red{background:var(--bal-carousel-product-item-button-background-red)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-red:hover{background:var(--bal-carousel-product-item-button-background-red-hover)}.bal-carousel--product .bal-carousel__item__button--color-red:active{background:var(--bal-carousel-product-item-button-background-red-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-yellow{background:var(--bal-carousel-product-item-button-background-yellow)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-yellow:hover{background:var(--bal-carousel-product-item-button-background-yellow-hover)}.bal-carousel--product .bal-carousel__item__button--color-yellow:active{background:var(--bal-carousel-product-item-button-background-yellow-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-purple{background:var(--bal-carousel-product-item-button-background-purple)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-purple:hover{background:var(--bal-carousel-product-item-button-background-purple-hover)}.bal-carousel--product .bal-carousel__item__button--color-purple:active{background:var(--bal-carousel-product-item-button-background-purple-active)}}.bal-carousel--product .bal-carousel__item__button__image{width:5rem;height:5rem;pointer-events:none}.bal-carousel--product .bal-carousel__item__button__label{font-weight:var(--bal-font-weight-bold);color:var(--bal-carousel-product-item-button-label-text-color);font-size:var(--bal-text-size-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;height:3.5rem;overflow:hidden;line-height:1.15rem;word-break:break-word}@media screen and (max-width: 768px){.bal-carousel__controls--large{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:100%;gap:2rem;margin-top:1rem}}@media screen and (min-width: 769px),print{.bal-carousel__controls--large .bal-carousel__controls__button{position:absolute;top:calc(50% - 24px);z-index:7}.bal-carousel__controls--large .bal-carousel__controls__button--left{left:0}.bal-carousel__controls--large .bal-carousel__controls__button--right{right:0}}.bal-carousel__controls__button--hidden{display:none !important;visibility:none !important}.bal-carousel__controls--small .bal-carousel__controls__button{position:absolute;top:calc(50% - 1rem);z-index:7}.bal-carousel__controls--small .bal-carousel__controls__button--left{left:0}.bal-carousel__controls--small .bal-carousel__controls__button--right{right:0}.bal-carousel__controls--small .bal-carousel__controls__button--hidden{display:none !important;visibility:hidden !important}";
+const balCarouselCss = ":root{--bal-carousel-inner-border-background:var(--bal-color-border);--bal-carousel-inner-border-background-inverted:var(--bal-color-border-primary-light);--bal-carousel-inner-shadow-left-background-before:var(--bal-color-white);--bal-carousel-inner-shadow-right-background-after:var(--bal-color-white);--bal-carousel-inner-shadow-left-background-inverted-before:var(--bal-color-primary);--bal-carousel-inner-shadow-right-background-inverted-after:var(--bal-color-primary);--bal-carousel-product-item-button-background:var(--bal-color-white);--bal-carousel-product-item-button-background-green:var(--bal-color-green-1);--bal-carousel-product-item-button-background-green-hover:var(--bal-color-green-1);--bal-carousel-product-item-button-background-green-active:var(--bal-color-green-2);--bal-carousel-product-item-button-background-red:var(--bal-color-red-1);--bal-carousel-product-item-button-background-red-hover:var(--bal-color-red-1);--bal-carousel-product-item-button-background-red-active:var(--bal-color-red-2);--bal-carousel-product-item-button-background-yellow:var(--bal-color-yellow-1);--bal-carousel-product-item-button-background-yellow-hover:var(--bal-color-yellow-1);--bal-carousel-product-item-button-background-yellow-active:var(--bal-color-yellow-2);--bal-carousel-product-item-button-background-purple:var(--bal-color-purple-1);--bal-carousel-product-item-button-background-purple-hover:var(--bal-color-purple-1);--bal-carousel-product-item-button-background-purple-active:var(--bal-color-purple-2);--bal-carousel-inner-border-radius:var(--bal-radius-rounded);--bal-carousel-image-border-radius:var(--bal-radius-normal);--bal-carousel-product-item-button-border-radius:var(--bal-radius-large);--bal-carousel-product-item-button-label-text-color:var(--bal-color-text-primary);--bal-carousel-sticky-top:0}.bal-swiper{position:relative}.bal-swiper__inner{display:block;position:relative;margin-left:auto;margin-right:auto;position:relative;overflow:clip;list-style:none;padding:0;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-overflow-scrolling:touch}.bal-swiper__inner--items-per-view-auto .bal-carousel__item{width:auto}.bal-swiper__inner--items-per-view-1 .bal-carousel__item{width:100%}.bal-swiper__inner--items-per-view-2 .bal-carousel__item{width:50%}.bal-swiper__inner--items-per-view-3 .bal-carousel__item{width:33.3333%}.bal-swiper__inner--items-per-view-4 .bal-carousel__item{width:25%}.bal-swiper__container{position:relative;max-width:100%;width:100%;height:100%;display:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-duration:0ms;transition-duration:0ms;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}@media screen and (max-width: 768px){.bal-swiper__controls--large{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:100%;gap:2rem;margin-top:1rem}}@media screen and (min-width: 769px),print{.bal-swiper__controls--large .bal-swiper__controls__button{position:absolute;top:calc(50% - 24px);z-index:7}.bal-swiper__controls--large .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--large .bal-swiper__controls__button--right{right:0}}.bal-swiper__controls__button--hidden{display:none !important;visibility:none !important}.bal-swiper__controls--small .bal-swiper__controls__button{position:absolute;top:calc(50% - 1rem);z-index:7}.bal-swiper__controls--small .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--small .bal-swiper__controls__button--right{right:0}.bal-swiper__controls--small .bal-swiper__controls__button--hidden{display:none !important;visibility:hidden !important}.bal-swiper__inner--shadow-left::before,.bal-swiper__inner--shadow-right::after{position:absolute;width:3rem;height:100%;top:0}.bal-swiper__inner--shadow-left::before{content:\"\";left:0;background:-webkit-gradient(linear, left top, right top, color-stop(50%, var(--bal-carousel-inner-shadow-left-background-before)), to(rgba(255, 255, 255, 0)));background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right::after{content:\"\";right:0;background:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--bal-carousel-inner-shadow-right-background-after)));background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-after) 50%)}.bal-swiper__inner--shadow-left.bal-swiper__inner--inverted::before{background:-webkit-gradient(linear, left top, right top, color-stop(50%, var(--bal-carousel-inner-shadow-left-background-inverted-before)), to(rgba(255, 255, 255, 0)));background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-inverted-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right.bal-swiper__inner--inverted::after{background:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--bal-carousel-inner-shadow-right-background-inverted-after)));background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-carousel--full-height{height:100%}.bal-carousel__inner--full-height{height:100%}.bal-carousel__inner__container--border{padding-bottom:var(--bal-border-width-normal)}.bal-carousel__inner__container__border{position:absolute;background:var(--bal-carousel-inner-border-background);border-radius:var(--bal-carousel-inner-border-radius);height:var(--bal-border-width-normal);width:100%;bottom:0;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.bal-carousel__inner__container__border--inverted{background:var(--bal-carousel-inner-border-background-inverted)}.bal-carousel__item{-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;font-size:var(--bal-text-size-large);min-height:2rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;round:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:2.5rem}}@media screen and (min-width: 1024px){.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:3rem}}.bal-carousel--card{margin-left:-1rem;margin-right:-1rem}@media screen and (min-width: 769px),print{.bal-carousel--card{margin-left:-2.5rem;margin-right:-2.5rem}}.bal-carousel--card .bal-carousel__controls{padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__controls{padding-left:2.5rem;padding-right:2.5rem}}.bal-carousel--card .bal-carousel__item{width:100%;padding-top:1rem;padding-bottom:1rem;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__item{width:100%;padding-top:2.5rem;padding-bottom:2.5rem;padding-left:2.5rem;padding-right:2.5rem}}.bal-carousel--controls-sticky .bal-carousel__controls--tabs{position:-webkit-sticky;position:sticky;top:var(--bal-carousel-sticky-top);z-index:var(--bal-z-index-sticky)}.bal-carousel__controls--tabs .bal-card{padding:0}.bal-carousel__controls--tabs .bal-card-content{padding:.5rem !important;gap:.5rem;display:-ms-flexbox;display:flex}.bal-carousel__controls--tabs .bal-card-content .bal-button{-ms-flex:1;flex:1}.bal-carousel__controls--tabs .bal-card-content .bal-button .button{padding:.5rem !important}.bal-carousel--image .bal-carousel__inner{border-radius:var(--bal-carousel-image-border-radius)}.bal-carousel--image .bal-carousel__inner--is-1by1{padding-top:100%}.bal-carousel--image .bal-carousel__inner--is-16by9{padding-top:56.25%}.bal-carousel--image .bal-carousel__inner--is-3by2{padding-top:66.66%}.bal-carousel--image .bal-carousel__inner--is-4by3{padding-top:75%}.bal-carousel--image .bal-carousel__inner__container{position:absolute;top:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:100%}.bal-carousel--image .bal-carousel__item{position:relative;-ms-flex:0 0 100%;flex:0 0 100%}.bal-carousel--image .bal-carousel__item>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;user-drag:none;user-zoom:fixed}.bal-carousel--product .bal-carousel__inner__container{gap:1rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-carousel--product .bal-carousel__item{display:-ms-flexbox;display:flex;width:10rem;height:11rem;text-align:center;padding-top:.5rem;padding-bottom:.5rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item__button{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;gap:1rem;border-radius:var(--bal-carousel-product-item-button-border-radius);padding:var(--bal-text-size-x-small);border:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;background:var(--bal-carousel-product-item-button-background)}@media (hover: hover)and (pointer: fine){.bal-carousel--product .bal-carousel__item__button:focus-visible:not(:active){-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-green{background:var(--bal-carousel-product-item-button-background-green)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-green:hover{background:var(--bal-carousel-product-item-button-background-green-hover)}.bal-carousel--product .bal-carousel__item__button--color-green:active{background:var(--bal-carousel-product-item-button-background-green-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-red{background:var(--bal-carousel-product-item-button-background-red)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-red:hover{background:var(--bal-carousel-product-item-button-background-red-hover)}.bal-carousel--product .bal-carousel__item__button--color-red:active{background:var(--bal-carousel-product-item-button-background-red-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-yellow{background:var(--bal-carousel-product-item-button-background-yellow)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-yellow:hover{background:var(--bal-carousel-product-item-button-background-yellow-hover)}.bal-carousel--product .bal-carousel__item__button--color-yellow:active{background:var(--bal-carousel-product-item-button-background-yellow-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-purple{background:var(--bal-carousel-product-item-button-background-purple)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-purple:hover{background:var(--bal-carousel-product-item-button-background-purple-hover)}.bal-carousel--product .bal-carousel__item__button--color-purple:active{background:var(--bal-carousel-product-item-button-background-purple-active)}}.bal-carousel--product .bal-carousel__item__button__image{width:5rem;height:5rem;pointer-events:none}.bal-carousel--product .bal-carousel__item__button__label{font-weight:var(--bal-font-weight-bold);color:var(--bal-carousel-product-item-button-label-text-color);font-size:var(--bal-text-size-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;height:3.5rem;overflow:hidden;line-height:1.15rem;word-break:break-word}";
 const BalCarouselStyle0 = balCarouselCss;
 const Carousel = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.balChange = createEvent(this, "balChange", 7);
-        this.previousTransformValue = 0;
-        this.carouselId = `bal-carousel-${CarouselIds++}`;
-        this.carouselContainerId = `bal-carousel-${CarouselIds++}-container`;
+        this.swiper = new SwiperUtil();
+        this.swiperIsLastSlideVisible = false;
         this.mutationObserverActive = true;
-        this.itemsChanged = debounce(() => this.itemsChangedInternal(), 100);
-        /**
-         * EVENT BINDING
-         * ------------------------------------------------------
-         */
-        this.onPreviousButtonClick = () => this.previous();
-        this.onNextButtonClick = () => this.next();
-        this.onControlChange = (selectedValue) => {
-            if (selectedValue !== this.value) {
-                const isForward = selectedValue > this.value;
-                if (isForward) {
-                    this.next(selectedValue - this.value);
-                }
-                else {
-                    this.previous(this.value - selectedValue);
-                }
-            }
-        };
         this.isLargestContentfulPaintDone = false;
-        this.isLastSlideVisible = true;
+        this.hasAnimated = false;
         this.isMobile = balBreakpoints.isMobile;
         this.language = defaultConfig.language;
         this.value = 0;
@@ -155,12 +64,38 @@ const Carousel = class {
         this.scrollY = true;
         this.border = false;
     }
+    onValueChange() {
+        this.swiper.index = this.value;
+    }
+    onStepsChange() {
+        this.swiper.steps = this.steps;
+    }
+    onItemsPerViewChange() {
+        this.swiper.itemsPerView = this.itemsPerView;
+    }
+    onControlsChange() {
+        this.swiper.controls = this.controls;
+    }
+    onInterFaceChange() {
+        this.swiper.gapSize = this.interface === 'product' ? 16 : 0;
+    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
+    connectedCallback() {
+        this.swiper.connectedCallback(this);
+        this.onControlsChange();
+        this.onInterFaceChange();
+        this.onItemsPerViewChange();
+        this.onStepsChange();
+        this.onValueChange();
+    }
+    disconnectedCallback() {
+        this.swiper.disconnectedCallback();
+    }
     componentDidLoad() {
-        rLCP(() => {
+        rOnLoad(() => {
             this.isLargestContentfulPaintDone = true;
         });
     }
@@ -175,7 +110,7 @@ const Carousel = class {
         }
     }
     mutationListener() {
-        this.itemsChanged();
+        this.swiper.notifyChange();
     }
     swipeListener({ left, right }) {
         if (left) {
@@ -187,22 +122,10 @@ const Carousel = class {
     }
     breakpointListener(breakpoints) {
         this.isMobile = breakpoints.mobile;
-        this.itemsChanged();
+        this.swiper.notifyChange();
     }
     resizeListener() {
-        this.itemsChanged();
-    }
-    listenToKeyDown(ev) {
-        if (this.htmlRole !== 'tablist') {
-            if (ev.code === 'Tab') {
-                if (ev.shiftKey) {
-                    this.focusPreviousItem(ev);
-                }
-                else {
-                    this.focusNextItem(ev);
-                }
-            }
-        }
+        this.swiper.notifyChange();
     }
     /**
      * @internal define config for the component
@@ -215,167 +138,31 @@ const Carousel = class {
      * ------------------------------------------------------
      */
     async previous(steps = this.steps) {
-        let previousValue = this.value - steps;
-        if (previousValue < 0) {
-            previousValue = 0;
-        }
-        const activeSlide = await this.buildSlide(previousValue);
-        if (activeSlide) {
-            const didAnimate = await this.animate(activeSlide.transformActive, true);
-            if (didAnimate || this.value !== previousValue) {
-                this.value = previousValue;
-                this.balChange.emit(this.value);
-            }
-        }
-        return activeSlide;
+        this.swiper.previous(steps);
     }
     async next(steps = this.steps) {
-        const items = this.getAllItemElements();
-        const length = items.length;
-        let nextValue = this.value + steps;
-        if (nextValue >= length) {
-            nextValue = length - 1;
-        }
-        const activeSlide = await this.buildSlide(nextValue);
-        if (activeSlide) {
-            const didAnimate = await this.animate(activeSlide.transformActive, true);
-            if (didAnimate || this.value !== nextValue) {
-                this.value = nextValue;
-                this.balChange.emit(this.value);
-            }
-        }
-        return activeSlide;
+        this.swiper.next(steps);
     }
     /**
-     * PRIVATE METHODS
-     * ------------------------------------------------------
+     * @internal
      */
-    async animate(amount = 0, animated = true) {
-        return new Promise(resolve => {
-            if (this.currentRaf !== undefined) {
-                cancelAnimationFrame(this.currentRaf);
-            }
-            this.currentRaf = raf(async () => {
-                if (this.containerEl && this.innerEl) {
-                    const lastSlide = await this.buildSlide();
-                    if (lastSlide) {
-                        const containerWidth = this.innerEl.clientWidth || 0;
-                        const itemsWith = lastSlide.transformNext || 0;
-                        const noNeedForSlide = itemsWith <= containerWidth;
-                        let maxAmount = itemsWith - containerWidth;
-                        let isLastSlideVisible = maxAmount <= amount;
-                        // -1 one is needed for example when we use items per view 3 with 33.333%
-                        if (this.itemsPerView === 3) {
-                            maxAmount = itemsWith - containerWidth - 1;
-                            isLastSlideVisible = maxAmount <= amount;
-                        }
-                        const isFirst = amount === 0 || maxAmount <= 2;
-                        if (isFirst) {
-                            this.value = 0;
-                            this.balChange.emit(this.value);
-                        }
-                        const hasSmallControls = this.controls === 'small';
-                        const hasLargeControls = this.controls === 'large';
-                        let transformValue = noNeedForSlide ? 0 : isLastSlideVisible ? maxAmount : amount;
-                        if (!isFirst && !noNeedForSlide && (hasSmallControls || (hasLargeControls && !this.isMobile))) {
-                            transformValue = transformValue - (isLastSlideVisible ? 0 : hasLargeControls ? 56 : 48);
-                        }
-                        this.containerEl.style.transitionDuration = animated ? '0.6s' : '0';
-                        this.containerEl.style.transform = `translate3d(-${transformValue}px, 0px, 0px)`;
-                        const didAnimate = transformValue !== this.previousTransformValue;
-                        this.previousTransformValue = transformValue;
-                        this.isLastSlideVisible = isLastSlideVisible;
-                        if (this.borderEl) {
-                            this.borderEl.style.transitionDuration = animated ? '0.6s' : '0';
-                            this.borderEl.style.transform = `translate3d(${transformValue}px, 0px, 0px)`;
-                        }
-                        if (!didAnimate) {
-                            return resolve(false);
-                        }
-                        return resolve(true);
-                    }
-                }
-            });
-        });
-    }
-    async buildSlide(slideIndex) {
-        const items = this.getAllItemElements();
-        const index = slideIndex === undefined ? items.length - 1 : slideIndex;
-        if (items.length > index && index >= 0) {
-            const data = await this.getAllItemData();
-            const gapSize = this.interface === 'product' ? 16 : 0;
-            return {
-                el: items[index],
-                data: data[index],
-                transformNext: items
-                    .filter((_, n) => n < index + 1)
-                    .reduce((acc, item) => acc + getComputedWidth(item) + gapSize, 0),
-                transformActive: items
-                    .filter((_, n) => n < index)
-                    .reduce((acc, item) => acc + getComputedWidth(item) + gapSize, 0),
-                isFirst: index === 0,
-                isLast: index === items.length - 1,
-                total: items.length,
-                index,
-            };
-        }
-        return undefined;
-    }
-    async itemsChangedInternal() {
-        if (this.isLargestContentfulPaintDone) {
-            const activeSlide = await this.buildSlide(this.value);
-            if (activeSlide) {
-                this.animate(activeSlide.transformActive, false);
-            }
-        }
-    }
-    async focusNextItem(ev) {
-        if (!this.isLast) {
-            const slide = await this.next(1);
-            if (slide && slide.el) {
-                stopEventBubbling(ev);
-                await slide.el.setFocus();
-            }
-        }
-    }
-    async focusPreviousItem(ev) {
-        if (!this.isFirst) {
-            const slide = await this.previous(1);
-            if (slide && slide.el) {
-                stopEventBubbling(ev);
-                await slide.el.setFocus();
-            }
-        }
+    async getContainerId() {
+        return this.swiper.containerId;
     }
     /**
      * GETTERS
      * ------------------------------------------------------
      */
-    async getAllItemData() {
-        const queue = this.getAllItemElements().map(el => el.getData());
-        return await Promise.all(queue);
-    }
-    getAllItemElements() {
+    swiperGetAllChildrenElements() {
         return Array.from(this.el.querySelectorAll('bal-carousel-item'));
     }
-    getAllControlItems() {
-        const items = this.getAllItemElements();
-        return items.map((item, index) => ({ value: index, label: item.label }));
-    }
-    hasShadow() {
-        return this.itemsPerView === 'auto' || this.itemsPerView > 1 || this.interface === 'card';
-    }
-    hasShadowLeft() {
-        return this.hasShadow() && (this.value !== 0 || this.interface === 'card');
-    }
-    hasShadowRight() {
-        return this.hasShadow() && (!this.isLastSlideVisible || this.interface === 'card');
-    }
-    isFirst() {
-        return this.value === 0;
-    }
-    isLast() {
-        return this.isLastSlideVisible;
+    /**
+     * EVENT HANDLERS
+     * ------------------------------------------------------
+     */
+    swiperOnChange(index) {
+        this.value = index;
+        this.balChange.emit(index);
     }
     /**
      * RENDER
@@ -385,19 +172,17 @@ const Carousel = class {
         const block = BEM.block('carousel');
         const inner = block.element('inner');
         const container = inner.element('container');
-        const leftControlTitle = i18nControlLabel[this.language].left;
-        const rightControlTitle = i18nControlLabel[this.language].right;
-        const controlItems = this.getAllControlItems();
-        return (h(Host, { key: '9805dc838ffaf76bf0db144968685dd4c8483816', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-${this.controls}`).class()) }, this.isLargestContentfulPaintDone && this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), h("div", { key: 'dced19705178ae9cdca9ab3594793ed9b86d0a9f', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, inner.class()), inner.modifier(`items-per-view-${this.itemsPerView}`).class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), inner.modifier(`shadow-left`).class(this.hasShadowLeft())), inner.modifier(`shadow-right`).class(this.hasShadowRight())), ref: el => (this.innerEl = el) }, h("div", { key: '64b95814c1bba169bab81a1384a2d753dfcf964d', role: this.htmlRole, "aria-live": this.htmlRole !== '' ? 'polite' : undefined, id: this.carouselContainerId, class: Object.assign(Object.assign(Object.assign({}, container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.containerEl = el) }, h("slot", { key: '2baee20f00ff09cc771ba6743bff97f62a1a7570' }), this.border ? (h("div", { id: `${this.carouselId}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.borderEl = el) })) : (''))), this.isLargestContentfulPaintDone && this.controls === 'dots' ? (h(DotControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), this.isLargestContentfulPaintDone && this.controls === 'large' ? (h(LargeControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, areControlsHidden: !this.isMobile, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : (''), this.isLargestContentfulPaintDone && this.controls === 'small' ? (h(SmallControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : ('')));
+        return (h(Host, { key: '5466ee14c351f73d1455cbf258797eda4bc87b03', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiper()), block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-tabs`).class(this.controls === 'tabs')) }, this.isLargestContentfulPaintDone && this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: this.swiper.getAllControlItems(), containerId: this.swiper.containerId, onControlChange: item => this.swiper.onControlChange(item.value) })) : (''), h("div", { key: 'de7e102cdba0dfe74f09979413f7f059625eeac0', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssInnerSwiper()), inner.class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), ref: el => (this.swiper.innerEl = el) }, h("div", { key: '31266d0268cd3ff5414317ef027304d7b13bcdd8', id: this.swiper.containerId, role: this.controls === 'tabs' ? '' : 'list', class: Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiperContainer()), container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.swiper.containerEl = el) }, h("slot", { key: 'a78dd80c90bd70442f4f152492acac041fb93ae3' }), this.border ? (h("div", { id: `${this.swiper.id}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.swiper.borderEl = el) })) : (''))), this.isLargestContentfulPaintDone ? this.swiper.renderControls() : ''));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["onValueChange"],
+        "steps": ["onStepsChange"],
+        "itemsPerView": ["onItemsPerViewChange"],
+        "controls": ["onControlsChange"],
+        "interface": ["onInterFaceChange"]
+    }; }
 };
-__decorate([
-    ListenTo('touchmove', { target: 'window', passive: false }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], Carousel.prototype, "blockVerticalScrolling", null);
 __decorate([
     ListenToMutation({ tags: ['bal-carousel-item'], characterData: false }),
     __metadata("design:type", Function),
@@ -422,19 +207,12 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], Carousel.prototype, "resizeListener", null);
-__decorate([
-    ListenTo('keydown'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [KeyboardEvent]),
-    __metadata("design:returntype", void 0)
-], Carousel.prototype, "listenToKeyDown", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
 ], Carousel.prototype, "configChanged", null);
-let CarouselIds = 0;
 Carousel.style = BalCarouselStyle0;
 const CarouselItem = class {
@@ -456,12 +234,13 @@ const CarouselItem = class {
             this.balBlur.emit();
         };
         this.isLargestContentfulPaintDone = false;
+        this.containerId = '';
         this.src = undefined;
         this.label = '';
         this.htmlRole = 'listitem';
         this.elementType = 'button';
-        this.name = '';
-        this.value = '';
+        this.name = undefined;
+        this.value = undefined;
         this.href = undefined;
         this.target = '_self';
         this.rel = undefined;
@@ -473,18 +252,13 @@ const CarouselItem = class {
      * ------------------------------------------------------
      */
     componentDidLoad() {
-        rLCP(() => {
+        rOnLoad(() => {
             this.isLargestContentfulPaintDone = true;
         });
     }
     componentWillLoad() {
         this.imageInheritAttributes = inheritAttributes(this.el, ['alt']);
-    }
-    async getData() {
-        return {
-            clientWidth: this.el.clientWidth,
-            label: this.label,
-        };
+        this.getContainerId();
     }
     async setFocus() {
         await waitAfterFramePaint();
@@ -492,12 +266,19 @@ const CarouselItem = class {
             this.buttonEl.focus();
         }
     }
+    async getContainerId() {
+        const parentEl = this.el.closest('bal-carousel');
+        this.containerId = await parentEl.getContainerId();
+    }
     render() {
         const block = BEM.block('carousel');
         const itemEl = block.element('item');
         const isProduct = !!this.color && !!this.label;
+        const parentEl = this.el.closest('bal-carousel');
+        const role = parentEl && parentEl.controls === 'tabs' ? 'tabpanel' : 'listitem';
+        const id = `${this.containerId}-${toKebabCase(this.label)}`;
         if (!isProduct) {
-            return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, this.isLargestContentfulPaintDone && this.src !== undefined ? (h("img", Object.assign({ draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), h("slot", null)));
+            return (h(Host, { id: id, role: role, class: Object.assign({}, itemEl.class()), "aria-label": this.label }, this.isLargestContentfulPaintDone && this.src !== undefined ? (h("img", Object.assign({ draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), h("slot", null)));
         }
         const button = itemEl.element('button');
         const image = button.element('image');
@@ -512,7 +293,7 @@ const CarouselItem = class {
                 rel,
                 target,
             };
-        return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, h(TagType, Object.assign({}, attrs, { class: Object.assign(Object.assign({}, button.class()), button.modifier(`color-${this.color}`).class()), part: "native", onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, ref: el => (this.buttonEl = el) }), this.isLargestContentfulPaintDone && this.src !== undefined ? (h("img", Object.assign({ class: Object.assign({}, image.class()), draggable: false, onDragStart: () => false, "aria-hidden": "true", src: this.src }, this.imageInheritAttributes))) : (''), this.label !== undefined ? h("span", { class: Object.assign({}, label.class()) }, this.label) : '', h("slot", null))));
+        return (h(Host, { id: id, role: role, "aria-label": this.label, class: Object.assign({}, itemEl.class()) }, h(TagType, Object.assign({}, attrs, { class: Object.assign(Object.assign({}, button.class()), button.modifier(`color-${this.color}`).class()), part: "native", onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, ref: el => (this.buttonEl = el) }), this.isLargestContentfulPaintDone && this.src !== undefined ? (h("img", Object.assign({ class: Object.assign({}, image.class()), draggable: false, onDragStart: () => false, "aria-hidden": "true", src: this.src }, this.imageInheritAttributes))) : (''), this.label !== undefined ? h("span", { class: Object.assign({}, label.class()) }, this.label) : '', h("slot", null))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bal-checkbox-button.entry.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
-import { s as stopEventBubbling } from './form-input-264ad739.js';
+import { s as stopEventBubbling } from './form-input-1f3d8337.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { F as FOCUS_KEYS } from './focus-visible-f0cdd043.js';
-import { i as isDescendant } from './helpers-72ae7307.js';
-import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator-0f2107d8.js';
+import { j as isDescendant } from './helpers-32d9e1cc.js';
+import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator-4cf6af31.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';