@baloise/ds-core 17.2.1 → 17.2.2

package/components/bal-accordion.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { m as raf, t as transitionEndAsync, n as debounceEvent, w as waitForComponent } from './helpers.js';
+import { n as raf, t as transitionEndAsync, o as debounceEvent, w as waitForComponent } from './helpers.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { d as defineCustomElement$4 } from './bal-button2.js';

package/components/bal-app.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { b as balBrowser } from './browser.js';
 import { b as balDevice } from './device.js';
-import { j as debounce, o as rIC, l as rLCP } from './helpers.js';
+import { k as debounce, p as rIC, m as rOnLoad } from './helpers.js';
 import { L as Logger } from './log.js';
 import { s as startFocusVisible } from './focus-visible.js';
 import { b as updateBalAnimated } from './config.utils.js';
@@ -41,7 +41,7 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
             this.ready = true;
             startFocusVisible();
         });
-        rLCP(() => {
+        rOnLoad(() => {
             if (balBrowser.hasDocument && balBrowser.hasWindow) {
                 const doc = document.documentElement;
                 doc.classList.add('lcp-ready');
@@ -59,11 +59,11 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
         }
     }
     render() {
-        return (h(Host, { key: '8e124474f0e95f8fdcd4546d7998556764d81d71', class: {
+        return (h(Host, { key: '29fef05a451290e2e20dc6808d1cce03ec1b1c4c', class: {
                 'bal-app': true,
                 'bal-app--safari': balBrowser.isSafari,
                 'bal-app--touch': balDevice.hasTouchScreen,
-            } }, h("slot", { key: 'e4a8974a3f55ec71c4ff7c46f2a9728d7efd4408' })));
+            } }, h("slot", { key: 'd54179394cb4d9882647d497e09495193d57a12d' })));
     }
     get el() { return this; }
     static get style() { return BalAppStyle0; }

package/components/bal-button2.js

@@ -1,8 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { i as inheritAttributes } from './attributes.js';
-import { l as rLCP } from './helpers.js';
-import { L as ListenTo } from './listen.js';
+import { m as rOnLoad } from './helpers.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { d as defineCustomElement$1 } from './bal-spinner2.js';
 
@@ -62,7 +60,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         }
     }
     componentDidLoad() {
-        rLCP(() => (this.isLargestContentPaintDone = true));
+        rOnLoad(() => (this.isLargestContentPaintDone = true));
     }
     componentWillLoad() {
         this.inheritAttributes = inheritAttributes(this.el, [
@@ -198,13 +196,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         "value": [8],
         "aria": [16],
         "isLargestContentPaintDone": [32]
-    }]);
-__decorate([
-    ListenTo('click', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], Button.prototype, "listenOnClick", null);
+    }, [[6, "click", "listenOnClick"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/components/bal-carousel-item.js

@@ -1,4 +1,120 @@
-import { C as CarouselItem, d as defineCustomElement$1 } from './bal-carousel-item2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { B as BEM } from './bem.js';
+import { m as rOnLoad, b as waitAfterFramePaint } from './helpers.js';
+import { i as inheritAttributes } from './attributes.js';
+import { t as toKebabCase } from './string.js';
+
+const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.balNavigate = createEvent(this, "balNavigate", 7);
+        this.balFocus = createEvent(this, "balFocus", 7);
+        this.balBlur = createEvent(this, "balBlur", 7);
+        this.imageInheritAttributes = {};
+        this.onClick = (ev) => {
+            if (this.href !== undefined) {
+                this.balNavigate.emit(ev);
+            }
+        };
+        this.onFocus = () => {
+            this.balFocus.emit();
+        };
+        this.onBlur = () => {
+            this.balBlur.emit();
+        };
+        this.isLargestContentfulPaintDone = false;
+        this.containerId = '';
+        this.src = undefined;
+        this.label = '';
+        this.htmlRole = 'listitem';
+        this.elementType = 'button';
+        this.name = undefined;
+        this.value = undefined;
+        this.href = undefined;
+        this.target = '_self';
+        this.rel = undefined;
+        this.download = undefined;
+        this.color = undefined;
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentDidLoad() {
+        rOnLoad(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
+    componentWillLoad() {
+        this.imageInheritAttributes = inheritAttributes(this.el, ['alt']);
+        this.getContainerId();
+    }
+    async setFocus() {
+        await waitAfterFramePaint();
+        if (this.buttonEl) {
+            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, { 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');
+        const label = button.element('label');
+        const { elementType, download, href, rel, target, name, value } = this;
+        const TagType = this.href === undefined ? 'button' : 'a';
+        const attrs = TagType === 'button'
+            ? { type: elementType, name, value }
+            : {
+                download,
+                href,
+                rel,
+                target,
+            };
+        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 this; }
+}, [4, "bal-carousel-item", {
+        "src": [513],
+        "label": [513],
+        "htmlRole": [1, "html-role"],
+        "elementType": [1, "element-type"],
+        "name": [513],
+        "value": [520],
+        "href": [1],
+        "target": [1],
+        "rel": [1],
+        "download": [1],
+        "color": [1],
+        "isLargestContentfulPaintDone": [32],
+        "containerId": [32],
+        "setFocus": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-carousel-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-carousel-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CarouselItem);
+            }
+            break;
+    } });
+}
 
 const BalCarouselItem = CarouselItem;
 const defineCustomElement = defineCustomElement$1;

package/components/bal-carousel.js

@@ -1,4 +1,264 @@
-import { C as Carousel, d as defineCustomElement$1 } from './bal-carousel2.js';
+import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { m as rOnLoad } from './helpers.js';
+import { B as BEM } from './bem.js';
+import { a as ariaBooleanToString } from './aria.js';
+import { t as toKebabCase } from './string.js';
+import { s as stopEventBubbling } from './form-input.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
+import { d as defineCustomElement$3 } from './bal-card2.js';
+import { d as defineCustomElement$2 } from './bal-card-content2.js';
+import { S as SwiperUtil } from './swiper.util.js';
+import { L as ListenToMutation } from './mutation.decorator.js';
+import { L as ListenToSwipe } from './swipe.decorator.js';
+import { L as ListenToResize } from './resize.decorator.js';
+import { b as balBreakpoints } from './breakpoints.subject.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
+
+const TabControl = ({ value, items, containerId, onControlChange }) => {
+    const block = BEM.block('carousel');
+    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", { 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 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 = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.balChange = createEvent(this, "balChange", 7);
+        this.swiper = new SwiperUtil();
+        this.swiperIsLastSlideVisible = false;
+        this.mutationObserverActive = true;
+        this.isLargestContentfulPaintDone = false;
+        this.hasAnimated = false;
+        this.isMobile = balBreakpoints.isMobile;
+        this.language = defaultConfig.language;
+        this.value = 0;
+        this.steps = 1;
+        this.itemsPerView = 1;
+        this.controls = 'none';
+        this.htmlRole = 'list';
+        this.controlsOverflow = false;
+        this.inverted = false;
+        this.fullHeight = false;
+        this.aspectRatio = '16by9';
+        this.interface = '';
+        this.controlsSticky = false;
+        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() {
+        rOnLoad(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    async blockVerticalScrolling(ev) {
+        var _a;
+        if (!this.scrollY && ((_a = this.el) === null || _a === void 0 ? void 0 : _a.contains(ev.target))) {
+            stopEventBubbling(ev);
+        }
+    }
+    mutationListener() {
+        this.swiper.notifyChange();
+    }
+    swipeListener({ left, right }) {
+        if (left) {
+            this.next();
+        }
+        else if (right) {
+            this.previous();
+        }
+    }
+    breakpointListener(breakpoints) {
+        this.isMobile = breakpoints.mobile;
+        this.swiper.notifyChange();
+    }
+    resizeListener() {
+        this.swiper.notifyChange();
+    }
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    async previous(steps = this.steps) {
+        this.swiper.previous(steps);
+    }
+    async next(steps = this.steps) {
+        this.swiper.next(steps);
+    }
+    /**
+     * @internal
+     */
+    async getContainerId() {
+        return this.swiper.containerId;
+    }
+    /**
+     * GETTERS
+     * ------------------------------------------------------
+     */
+    swiperGetAllChildrenElements() {
+        return Array.from(this.el.querySelectorAll('bal-carousel-item'));
+    }
+    /**
+     * EVENT HANDLERS
+     * ------------------------------------------------------
+     */
+    swiperOnChange(index) {
+        this.value = index;
+        this.balChange.emit(index);
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = BEM.block('carousel');
+        const inner = block.element('inner');
+        const container = inner.element('container');
+        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 this; }
+    static get watchers() { return {
+        "value": ["onValueChange"],
+        "steps": ["onStepsChange"],
+        "itemsPerView": ["onItemsPerViewChange"],
+        "controls": ["onControlsChange"],
+        "interface": ["onInterFaceChange"]
+    }; }
+    static get style() { return BalCarouselStyle0; }
+}, [4, "bal-carousel", {
+        "value": [1026],
+        "steps": [2],
+        "itemsPerView": [8, "items-per-view"],
+        "controls": [1],
+        "htmlRole": [1, "html-role"],
+        "controlsOverflow": [4, "controls-overflow"],
+        "inverted": [4],
+        "fullHeight": [4, "full-height"],
+        "aspectRatio": [1, "aspect-ratio"],
+        "interface": [1],
+        "controlsSticky": [4, "controls-sticky"],
+        "scrollY": [4, "scroll-y"],
+        "border": [4],
+        "isLargestContentfulPaintDone": [32],
+        "hasAnimated": [32],
+        "isMobile": [32],
+        "language": [32],
+        "configChanged": [64],
+        "previous": [64],
+        "next": [64],
+        "getContainerId": [64]
+    }, [[8, "touchmove", "blockVerticalScrolling"]], {
+        "value": ["onValueChange"],
+        "steps": ["onStepsChange"],
+        "itemsPerView": ["onItemsPerViewChange"],
+        "controls": ["onControlsChange"],
+        "interface": ["onInterFaceChange"]
+    }]);
+__decorate([
+    ListenToMutation({ tags: ['bal-carousel-item'], characterData: false }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], Carousel.prototype, "mutationListener", null);
+__decorate([
+    ListenToSwipe(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Carousel.prototype, "swipeListener", null);
+__decorate([
+    ListenToBreakpoints(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Carousel.prototype, "breakpointListener", null);
+__decorate([
+    ListenToResize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], Carousel.prototype, "resizeListener", null);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Carousel.prototype, "configChanged", null);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-carousel", "bal-card", "bal-card-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-carousel":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Carousel);
+            }
+            break;
+        case "bal-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bal-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
 
 const BalCarousel = Carousel;
 const defineCustomElement = defineCustomElement$1;

package/components/bal-checkbox-button.js

@@ -4,7 +4,7 @@ import { B as BEM } from './bem.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { L as Logger } from './log.js';
 import { F as FOCUS_KEYS } from './focus-visible.js';
-import { i as isDescendant } from './helpers.js';
+import { j as isDescendant } from './helpers.js';
 import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator.js';
 
 const balCheckboxButtonCss = "@media (hover: hover)and (pointer: fine){.bal-checkbox-button__native.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-radio-checkbox-symbol-size:1.5rem;--bal-radio-checkbox-symbol-width:calc(0.5rem - 1px);--bal-radio-checkbox-symbol-height:calc(0.875rem - 1px);--bal-radio-checkbox-symbol-left:calc(0.5rem + 1px);--bal-radio-checkbox-symbol-margin-top:0.25rem;--bal-radio-checkbox-label-min-height:1.5rem;--bal-radio-checkbox-select-button-background-hover:var(--bal-color-grey-2);--bal-radio-checkbox-select-button-background-active:var(--bal-color-grey-2);--bal-radio-checkbox-select-button-background-checked:var(--bal-color-primary);--bal-radio-checkbox-select-button-background-checked-hover:var(--bal-color-light-blue-5);--bal-radio-checkbox-select-button-background-checked-active:var(--bal-color-primary-6);--bal-radio-checkbox-select-button-background-invalid:var(--bal-color-danger-1);--bal-radio-checkbox-select-button-background-invalid-hover:var(--bal-color-danger-1);--bal-radio-checkbox-select-button-background-invalid-active:var(--bal-color-danger-1);--bal-radio-checkbox-select-button-background-invalid-checked:var(--bal-color-border-danger);--bal-radio-checkbox-select-button-background-invalid-checked-hover:var(--bal-color-danger-5);--bal-radio-checkbox-select-button-background-invalid-checked-active:var(--bal-color-danger-6);--bal-radio-checkbox-select-button-background-disabled-hover-active:var(--bal-color-grey-2);--bal-radio-checkbox-select-button-background-disabled-checked-hover-active:var(--bal-color-border-grey-dark);--bal-radio-checkbox-switch-label-background-before:var(--bal-color-primary-1);--bal-radio-checkbox-switch-label-background-after:var(--bal-color-primary);--bal-radio-checkbox-switch-label-background-hover-after:var(--bal-color-light-blue-5);--bal-radio-checkbox-switch-label-background-active-after:var(--bal-color-primary-6);--bal-radio-checkbox-switch-label-background-checked-before:var(--bal-color-success-4);--bal-radio-checkbox-switch-label-background-checked-after:var(--bal-color-white);--bal-radio-checkbox-switch-label-background-checked-hover-before:var(--bal-color-success-5);--bal-radio-checkbox-switch-label-background-checked-active-before:var(--bal-color-success-6);--bal-radio-checkbox-switch-label-background-invalid-before:var(--bal-color-danger-1);--bal-radio-checkbox-switch-label-background-invalid-after:var(--bal-color-border-danger);--bal-radio-checkbox-switch-label-background-invalid-hover-after:var(--bal-color-danger-6);--bal-radio-checkbox-switch-label-background-invalid-active-after:var(--bal-color-border-danger);--bal-radio-checkbox-switch-label-background-invalid-checked-before:var(--bal-color-danger-4);--bal-radio-checkbox-switch-label-background-invalid-checked-after:var(--bal-color-white);--bal-radio-checkbox-switch-label-background-invalid-checked-hover-before:var(--bal-color-danger-5);--bal-radio-checkbox-switch-label-background-invalid-checked-active-before:var(--bal-color-danger-6);--bal-radio-checkbox-switch-label-background-disabled-hover-active-before:var(--bal-color-grey-3);--bal-radio-checkbox-switch-label-background-disabled-hover-active-after:var(--bal-color-border-grey-dark);--bal-radio-checkbox-switch-label-background-disabled-checked-hover-active-before:var(--bal-color-border-grey-dark);--bal-radio-checkbox-switch-label-background-disabled-checked-hover-active-after:var(--bal-color-white);--bal-radio-checkbox-button-background:transparent;--bal-radio-checkbox-button-background-checked-green:var(--bal-color-green-1);--bal-radio-checkbox-button-background-checked-purple:var(--bal-color-purple-1);--bal-radio-checkbox-button-background-checked-red:var(--bal-color-red-1);--bal-radio-checkbox-button-background-checked-yellow:var(--bal-color-yellow-1);--bal-radio-checkbox-button-background-disabled:var(--bal-color-grey-1);--bal-radio-checkbox-button-background-hover:var(--bal-color-grey-1);--bal-radio-checkbox-select-button-border-color:var(--bal-color-primary);--bal-radio-checkbox-select-button-border-color-hover:var(--bal-color-light-blue-5);--bal-radio-checkbox-select-button-border-color-active:var(--bal-color-primary-6);--bal-radio-checkbox-select-button-border-color-invalid:var(--bal-color-border-danger);--bal-radio-checkbox-select-button-border-color-invalid-hover:var(--bal-color-danger-5);--bal-radio-checkbox-select-button-border-color-invalid-active:var(--bal-color-danger-6);--bal-radio-checkbox-select-button-border-color-invalid-checked:var(--bal-color-border-danger);--bal-radio-checkbox-select-button-border-color-invalid-checked-hover:var(--bal-color-danger-5);--bal-radio-checkbox-select-button-border-color-invalid-checked-active:var(--bal-color-danger-6);--bal-radio-checkbox-select-button-border-color-disabled-hover-active:var(--bal-color-border-grey-dark);--bal-radio-checkbox-select-button-border-color-disabled-checked-hover-active:var(--bal-color-border-grey-dark);--bal-radio-checkbox-button-border-color-hover:var(--bal-color-border-primary-hovered);--bal-radio-checkbox-button-border-color-active:var(--bal-color-border-primary-pressed);--bal-radio-checkbox-button-border-color-invalid-hover:var(--bal-color-border-danger-hovered);--bal-radio-checkbox-button-border-color-invalid-active:var(--bal-color-border-danger-pressed);--bal-radio-checkbox-button-border-color:var(--bal-color-border);--bal-radio-checkbox-button-border-color-checked:var(--bal-color-border-primary);--bal-radio-checkbox-button-border-color-disabled:var(--bal-color-border-grey-dark);--bal-radio-checkbox-button-border-color-invalid:var(--bal-color-border-danger)}.bal-checkbox-button{display:block;position:relative;-ms-flex:0 0 100%;flex:0 0 100%}@media screen and (min-width: 769px),print{.bal-checkbox-button--column-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox-button--column-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox-button--column-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (max-width: 768px){.bal-checkbox-button--column-mobile-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox-button--column-mobile-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox-button--column-mobile-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 769px),print{.bal-checkbox-button--column-tablet-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox-button--column-tablet-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox-button--column-tablet-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 1024px){.bal-checkbox-button--column-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox-button--column-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox-button--column-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}.bal-checkbox-button__native{display:block;width:100%;height:100%;background:var(--bal-radio-checkbox-button-background);border-style:var(--bal-form-field-control-border-style);border-radius:var(--bal-form-field-control-radius);border-width:var(--bal-form-field-control-border-width);border-color:var(--bal-radio-checkbox-button-border-color);padding:var(--bal-text-size-medium);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-checkbox-button__native--checked{border-color:var(--bal-radio-checkbox-button-border-color-checked)}.bal-checkbox-button__native--checked.bal-checkbox-button__native--color-green{background:var(--bal-radio-checkbox-button-background-checked-green)}.bal-checkbox-button__native--checked.bal-checkbox-button__native--color-purple{background:var(--bal-radio-checkbox-button-background-checked-purple)}.bal-checkbox-button__native--checked.bal-checkbox-button__native--color-red{background:var(--bal-radio-checkbox-button-background-checked-red)}.bal-checkbox-button__native--checked.bal-checkbox-button__native--color-yellow{background:var(--bal-radio-checkbox-button-background-checked-yellow)}.bal-checkbox-button__native:disabled,.bal-checkbox-button__native--disabled{background:var(--bal-radio-checkbox-button-background-disabled);border-color:var(--bal-radio-checkbox-button-border-color-disabled);cursor:default}.bal-checkbox-button__native--invalid{border-color:var(--bal-radio-checkbox-button-border-color-invalid)}@media (hover: hover)and (pointer: fine){.bal-checkbox-button__native:hover:not(:disabled):not(.bal-checkbox-button__native--colored){background:var(--bal-radio-checkbox-button-background-hover);border-color:var(--bal-radio-checkbox-button-border-color-hover)}}.bal-checkbox-button__native:active:not(:disabled){border-color:var(--bal-radio-checkbox-button-border-color-active)}@media (hover: hover)and (pointer: fine){.bal-checkbox-button__native--invalid:hover:not(:disabled){border-color:var(--bal-radio-checkbox-button-border-color-invalid-hover)}.bal-checkbox-button__native--invalid:active:not(:disabled){border-color:var(--bal-radio-checkbox-button-border-color-invalid-active)}}";

package/components/bal-checkbox-group.js

@@ -2,12 +2,11 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { a as areArraysEqual } from './array.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { i as isDescendant, p as hasTagName } from './helpers.js';
+import { j as isDescendant, q as hasTagName } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { d as defaultBalAriaForm } from './form.js';
-import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$3 } from './bal-checkbox2.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { L as ListenToFocus } from './focus.decorator.js';
@@ -315,7 +314,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
         "setValue": [64],
         "getOptionByValue": [64],
         "setAriaForm": [64]
-    }, undefined, {
+    }, [[6, "balChange", "listenOnClick"], [6, "reset", "resetHandler"], [6, "balFocus", "checkboxFocusListener"], [6, "balBlur", "checkboxBlurListener"]], {
         "options": ["optionChanged"],
         "invalid": ["invalidChanged"],
         "disabled": ["disabledChanged"],
@@ -349,30 +348,6 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], CheckboxGroup.prototype, "mutationListener", null);
-__decorate([
-    ListenTo('balChange', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], CheckboxGroup.prototype, "listenOnClick", null);
-__decorate([
-    ListenTo('reset', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], CheckboxGroup.prototype, "resetHandler", null);
-__decorate([
-    ListenTo('balFocus', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [CustomEvent]),
-    __metadata("design:returntype", void 0)
-], CheckboxGroup.prototype, "checkboxFocusListener", null);
-__decorate([
-    ListenTo('balBlur', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [CustomEvent]),
-    __metadata("design:returntype", void 0)
-], CheckboxGroup.prototype, "checkboxBlurListener", null);
 let checkboxGroupIds = 0;
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/bal-checkbox2.js

@@ -1,14 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { s as stopEventBubbling, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
-import { i as isDescendant } from './helpers.js';
+import { j as isDescendant } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { F as FOCUS_KEYS } from './focus-visible.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { a as ariaBooleanToString } from './aria.js';
-import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$1 } from './bal-icon2.js';
 import { a as isSpaceKey } from './keyboard.helpers.js';
 
@@ -278,7 +277,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
             labelAttributes.id = `${id}-lbl`;
             labelAttributes.htmlFor = id;
         }
-        return (h(Host, { key: 'ecce7f9cb60f37a738f18f72a2735c853ae02985', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-hidden": ariaBooleanToString(this.disabled || this.nonSubmit), "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('checkbox').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('switch').class(this.interface === 'switch')), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('invisible').class(this.invisible)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('inline').class(this.inline)), onKeypress: this.onKeypress, onClick: this.onClick }, h("input", Object.assign({ key: '7a7fe32e829fb5fb68de8a2bb7705db0465792ae', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-checkbox-input", type: "checkbox", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, "aria-hidden": ariaBooleanToString(this.nonSubmit), name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('checkbox').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)), labelEl.modifier('switch').class(this.interface === 'switch')) }, labelAttributes, { "data-testid": "bal-checkbox-label" }), this.interface === 'switch' ? (h("bal-icon", { class: Object.assign({}, iconEl.class()), name: "check", color: "white", size: "x-small", "aria-hidden": "true" })) : (''), h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-checkbox-text" }, this.label, h("slot", null)))) : ('')));
+        return (h(Host, { key: 'c8750cdbfdcacaad3f9732df1b6f41737d8161c6', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-hidden": ariaBooleanToString(this.disabled || this.nonSubmit), "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('checkbox').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('switch').class(this.interface === 'switch')), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('invisible').class(this.invisible)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('inline').class(this.inline)), onKeypress: this.onKeypress, onClick: this.onClick }, h("input", Object.assign({ key: '3ca5dba1459ca35a59463ced5cdc7f14a227110d', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-checkbox-input", type: "checkbox", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, "aria-hidden": ariaBooleanToString(this.nonSubmit), name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('checkbox').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)), labelEl.modifier('switch').class(this.interface === 'switch')) }, labelAttributes, { "data-testid": "bal-checkbox-label" }), this.interface === 'switch' ? (h("bal-icon", { class: Object.assign({}, iconEl.class()), name: "check", color: "white", size: "x-small", "aria-hidden": "true" })) : (''), h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-checkbox-text" }, this.label, h("slot", null)))) : ('')));
     }
     get el() { return this; }
     static get style() { return BalCheckboxStyle0; }
@@ -312,25 +311,13 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         "setButtonTabindex": [64],
         "updateState": [64],
         "setAriaForm": [64]
-    }]);
+    }, [[6, "click", "listenOnClick"], [6, "reset", "resetHandler"]]]);
 __decorate([
     Logger('bal-checkbox'),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Checkbox.prototype, "createLogger", null);
-__decorate([
-    ListenTo('click', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], Checkbox.prototype, "listenOnClick", null);
-__decorate([
-    ListenTo('reset', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], Checkbox.prototype, "resetHandler", null);
 let checkboxIds = 0;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {