@baloise/ds-core 16.8.0 → 17.0.0-nightly.20241129

package/dist/cjs/bal-carousel_2.cjs.entry.js

@@ -2,17 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
-const helpers = require('./helpers-2a8c8333.js');
+const helpers = require('./helpers-393c2183.js');
 const bem = require('./bem-81bc6a2d.js');
-const formInput = require('./form-input-b61eb894.js');
-const breakpoints_decorator = require('./breakpoints.decorator-3e39d424.js');
+const formInput = require('./form-input-35653e8f.js');
+const breakpoints_decorator = require('./breakpoints.decorator-365a25cc.js');
 const style = require('./style-799e9253.js');
-const mutation_decorator = require('./mutation.decorator-af043b68.js');
-const swipe_decorator = require('./swipe.decorator-5206d283.js');
-const resize_decorator = require('./resize.decorator-ae91ead2.js');
-const breakpoints_subject = require('./breakpoints.subject-04e46eae.js');
+const listen = require('./listen-b42a4134.js');
+const mutation_decorator = require('./mutation.decorator-d2ce6c1a.js');
+const swipe_decorator = require('./swipe.decorator-391a0941.js');
+const resize_decorator = require('./resize.decorator-981b6817.js');
+const breakpoints_subject = require('./breakpoints.subject-0470f731.js');
 const config_default = require('./config.default-5bdd6e3d.js');
 const config_decorator = require('./config.decorator-b393a72f.js');
 const attributes = require('./attributes-9f366716.js');
@@ -20,9 +21,9 @@ require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
 require('./listener-52d2e5fd.js');
-require('./swipe.subject-4ec94271.js');
+require('./swipe.subject-48bf62a1.js');
 require('./device-9f97a845.js');
-require('./tokens.esm-c5d8ed82.js');
+require('./tokens.esm-ae27d50f.js');
 require('./log-33398c2a.js');
 
 const TabControl = ({ value, items, containerId, onControlChange }) => {
@@ -122,6 +123,7 @@ const Carousel = class {
         this.carouselId = `bal-carousel-${CarouselIds++}`;
         this.carouselContainerId = `bal-carousel-${CarouselIds++}-container`;
         this.mutationObserverActive = true;
+        this.itemsChanged = helpers.debounce(() => this.itemsChangedInternal(), 100);
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -139,6 +141,7 @@ const Carousel = class {
                 }
             }
         };
+        this.isLargestContentfulPaintDone = false;
         this.isLastSlideVisible = true;
         this.isMobile = breakpoints_subject.balBreakpoints.isMobile;
         this.language = config_default.defaultConfig.language;
@@ -160,6 +163,11 @@ const Carousel = class {
      * LIFECYCLE
      * ------------------------------------------------------
      */
+    componentDidLoad() {
+        helpers.rLCP(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
     /**
      * LISTENERS
      * ------------------------------------------------------
@@ -317,10 +325,12 @@ const Carousel = class {
         }
         return undefined;
     }
-    async itemsChanged() {
-        const activeSlide = await this.buildSlide(this.value);
-        if (activeSlide) {
-            this.animate(activeSlide.transformActive, false);
+    async itemsChangedInternal() {
+        if (this.isLargestContentfulPaintDone) {
+            const activeSlide = await this.buildSlide(this.value);
+            if (activeSlide) {
+                this.animate(activeSlide.transformActive, false);
+            }
         }
     }
     async focusNextItem(ev) {
@@ -382,10 +392,16 @@ const Carousel = class {
         const leftControlTitle = i18nControlLabel[this.language].left;
         const rightControlTitle = i18nControlLabel[this.language].right;
         const controlItems = this.getAllControlItems();
-        return (index.h(index.Host, { 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.controls === 'tabs' ? (index.h(TabControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), index.h("div", { 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) }, index.h("div", { 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) }, index.h("slot", null), this.border ? (index.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.controls === 'dots' ? (index.h(DotControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), this.controls === 'large' ? (index.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.controls === 'small' ? (index.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 (index.h(index.Host, { key: '8f136f31e2fe4fb99703fdd2a5974697cea659b7', 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' ? (index.h(TabControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), index.h("div", { key: '76e644a3db07b7aeae2a599b560903a24312cb6b', 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) }, index.h("div", { key: '8040a1b67deccfa135bda7c1b3cef5b05492ad19', 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) }, index.h("slot", { key: '855f44ac6e8b1cfdfd31cc39f9fd2d9749a2f326' }), this.border ? (index.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' ? (index.h(DotControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), this.isLargestContentfulPaintDone && this.controls === 'large' ? (index.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' ? (index.h(SmallControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : ('')));
     }
     get el() { return index.getElement(this); }
 };
+tslib_es6.__decorate([
+    listen.ListenTo('touchmove', { target: 'window', passive: false }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], Carousel.prototype, "blockVerticalScrolling", null);
 tslib_es6.__decorate([
     mutation_decorator.ListenToMutation({ tags: ['bal-carousel-item'], characterData: false }),
     tslib_es6.__metadata("design:type", Function),
@@ -410,6 +426,12 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", []),
     tslib_es6.__metadata("design:returntype", void 0)
 ], Carousel.prototype, "resizeListener", null);
+tslib_es6.__decorate([
+    listen.ListenTo('keydown'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [KeyboardEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Carousel.prototype, "listenToKeyDown", null);
 tslib_es6.__decorate([
     config_decorator.ListenToConfig(),
     tslib_es6.__metadata("design:type", Function),
@@ -437,6 +459,7 @@ const CarouselItem = class {
         this.onBlur = () => {
             this.balBlur.emit();
         };
+        this.isLargestContentfulPaintDone = false;
         this.src = undefined;
         this.label = '';
         this.htmlRole = 'listitem';
@@ -449,6 +472,15 @@ const CarouselItem = class {
         this.download = undefined;
         this.color = undefined;
     }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentDidLoad() {
+        helpers.rLCP(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
     componentWillLoad() {
         this.imageInheritAttributes = attributes.inheritAttributes(this.el, ['alt']);
     }
@@ -469,7 +501,7 @@ const CarouselItem = class {
         const itemEl = block.element('item');
         const isProduct = !!this.color && !!this.label;
         if (!isProduct) {
-            return (index.h(index.Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, this.src !== undefined ? (index.h("img", Object.assign({ draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), index.h("slot", null)));
+            return (index.h(index.Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, this.isLargestContentfulPaintDone && this.src !== undefined ? (index.h("img", Object.assign({ draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), index.h("slot", null)));
         }
         const button = itemEl.element('button');
         const image = button.element('image');
@@ -484,7 +516,7 @@ const CarouselItem = class {
                 rel,
                 target,
             };
-        return (index.h(index.Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, index.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.src !== undefined ? (index.h("img", Object.assign({ class: Object.assign({}, image.class()), loading: "lazy", draggable: false, onDragStart: () => false, "aria-hidden": "true", src: this.src }, this.imageInheritAttributes))) : (''), this.label !== undefined ? index.h("span", { class: Object.assign({}, label.class()) }, this.label) : '', index.h("slot", null))));
+        return (index.h(index.Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, index.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 ? (index.h("img", Object.assign({ class: Object.assign({}, image.class()), draggable: false, onDragStart: () => false, "aria-hidden": "true", src: this.src }, this.imageInheritAttributes))) : (''), this.label !== undefined ? index.h("span", { class: Object.assign({}, label.class()) }, this.label) : '', index.h("slot", null))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/bal-checkbox-button.cjs.entry.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const bem = require('./bem-81bc6a2d.js');
-const formInput = require('./form-input-b61eb894.js');
+const formInput = require('./form-input-35653e8f.js');
 const log = require('./log-33398c2a.js');
 const focusVisible = require('./focus-visible-264bd9b8.js');
-const helpers = require('./helpers-2a8c8333.js');
-const elementStates_decorator = require('./element-states.decorator-9ce5ff3b.js');
+const helpers = require('./helpers-393c2183.js');
+const elementStates_decorator = require('./element-states.decorator-5aa9bf46.js');
 require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
@@ -185,7 +185,7 @@ const CheckboxButton = class {
         const invalid = !!this.invalid;
         const color = !!this.color;
         const colored = this.checked && color;
-        return (index.h(index.Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, index.h("button", { role: "checkbox", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, index.h("slot", null))));
+        return (index.h(index.Host, { key: '1cc87d4d87494ed93c669658d6b113ecdded148e', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, index.h("button", { key: '2875aff0c5511077bbbbf697e589ca2e9cba9861', role: "checkbox", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, index.h("slot", { key: 'e83b0706ab2f9d2c8f39b15a654159448921336a' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bal-checkbox_2.cjs.entry.js

@@ -2,23 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
-const formInput = require('./form-input-b61eb894.js');
-const helpers = require('./helpers-2a8c8333.js');
+const formInput = require('./form-input-35653e8f.js');
+const helpers = require('./helpers-393c2183.js');
 const attributes = require('./attributes-9f366716.js');
 const bem = require('./bem-81bc6a2d.js');
-const index_esm = require('./index.esm-54a3d84e.js');
 const log = require('./log-33398c2a.js');
 const focusVisible = require('./focus-visible-264bd9b8.js');
 const form = require('./form-2279fb2f.js');
 const aria = require('./aria-c8955a5c.js');
-const focus_decorator = require('./focus.decorator-afaf9ac4.js');
-const mutation_decorator = require('./mutation.decorator-af043b68.js');
+const listen = require('./listen-b42a4134.js');
+const keyboard_helpers = require('./keyboard.helpers-3c105b0c.js');
+const array = require('./array-ae164ca3.js');
+const focus_decorator = require('./focus.decorator-ec3a858c.js');
+const mutation_decorator = require('./mutation.decorator-d2ce6c1a.js');
 require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
 require('./index-e6a233be.js');
+require('./index-3b7f8988.js');
 require('./_commonjsHelpers-68cdf74f.js');
 require('./listener-52d2e5fd.js');
 
@@ -36,7 +39,7 @@ const Checkbox = class {
         this.keyboardMode = true;
         this.initialValue = false;
         this.onKeypress = (ev) => {
-            if (index_esm.isSpaceKey(ev)) {
+            if (keyboard_helpers.isSpaceKey(ev)) {
                 const element = ev.target;
                 if (element.href) {
                     return;
@@ -88,7 +91,7 @@ const Checkbox = class {
         };
         this.onPointerDown = () => (this.keyboardMode = false);
         this.onKeydown = (ev) => {
-            if (!index_esm.isSpaceKey(ev)) {
+            if (!keyboard_helpers.isSpaceKey(ev)) {
                 this.wasFocused = false;
             }
             this.keyboardMode = focusVisible.FOCUS_KEYS.includes(ev.key);
@@ -287,7 +290,7 @@ const Checkbox = class {
             labelAttributes.id = `${id}-lbl`;
             labelAttributes.htmlFor = id;
         }
-        return (index.h(index.Host, { "aria-checked": `${this.checked}`, "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-hidden": aria.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 }, index.h("input", Object.assign({ 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": aria.ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, "aria-hidden": aria.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 ? (index.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' ? (index.h("bal-icon", { class: Object.assign({}, iconEl.class()), name: "check", color: "white", size: "x-small", "aria-hidden": "true" })) : (''), index.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, index.h("slot", null)))) : ('')));
+        return (index.h(index.Host, { key: 'ecce7f9cb60f37a738f18f72a2735c853ae02985', "aria-checked": `${this.checked}`, "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-hidden": aria.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 }, index.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": aria.ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, "aria-hidden": aria.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 ? (index.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' ? (index.h("bal-icon", { class: Object.assign({}, iconEl.class()), name: "check", color: "white", size: "x-small", "aria-hidden": "true" })) : (''), index.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, index.h("slot", null)))) : ('')));
     }
     get el() { return index.getElement(this); }
 };
@@ -297,6 +300,18 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], Checkbox.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    listen.ListenTo('click', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Checkbox.prototype, "listenOnClick", null);
+tslib_es6.__decorate([
+    listen.ListenTo('reset', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Checkbox.prototype, "resetHandler", null);
 let checkboxIds = 0;
 Checkbox.style = BalCheckboxStyle0;
 
@@ -340,7 +355,7 @@ const CheckboxGroup = class {
                     newValue.push(cb.value);
                 }
             });
-            if (!index_esm.areArraysEqual(this.value, newValue)) {
+            if (!array.areArraysEqual(this.value, newValue)) {
                 this.value = [...newValue];
                 this.balChange.emit(this.value);
             }
@@ -412,7 +427,7 @@ const CheckboxGroup = class {
     }
     valueChanged(_value, oldValue) {
         if (this.control) {
-            if (!index_esm.areArraysEqual(this.value, oldValue)) {
+            if (!array.areArraysEqual(this.value, oldValue)) {
                 this.onOptionChange();
             }
         }
@@ -606,6 +621,30 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", []),
     tslib_es6.__metadata("design:returntype", void 0)
 ], CheckboxGroup.prototype, "mutationListener", null);
+tslib_es6.__decorate([
+    listen.ListenTo('balChange', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "listenOnClick", null);
+tslib_es6.__decorate([
+    listen.ListenTo('reset', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "resetHandler", null);
+tslib_es6.__decorate([
+    listen.ListenTo('balFocus', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [CustomEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "checkboxFocusListener", null);
+tslib_es6.__decorate([
+    listen.ListenTo('balBlur', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [CustomEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "checkboxBlurListener", null);
 let checkboxGroupIds = 0;
 
 exports.bal_checkbox = Checkbox;

package/dist/cjs/bal-close.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const bem = require('./bem-81bc6a2d.js');
 const balClose_i18n = require('./bal-close.i18n-56dddd35.js');
@@ -36,7 +36,7 @@ const Close = class {
         const buttonEl = blockEl.element('button');
         const iconEl = buttonEl.element('icon');
         const label = balClose_i18n.i18nBalClose[this.language].close;
-        return (index.h(index.Host, { class: Object.assign({}, blockEl.class()) }, index.h("button", { type: "button", "aria-label": label, title: label, tabindex: "0", class: Object.assign(Object.assign(Object.assign({}, buttonEl.class()), buttonEl.modifier('inverted').class(this.inverted)), buttonEl.modifier(`size-${this.size}`).class(this.size !== '')), "data-testid": "bal-close" }, index.h("bal-icon", { name: "close", size: this.size === 'small' ? 'x-small' : this.size === 'medium' ? 'medium' : 'small', inverted: this.inverted, class: Object.assign({}, iconEl.class()) }))));
+        return (index.h(index.Host, { key: '28a807ed717bd60d6534beee83086e87165c6b8f', class: Object.assign({}, blockEl.class()) }, index.h("button", { key: 'f74d31fca4b77c4a39365cb43ff44279fbfcfe65', type: "button", "aria-label": label, title: label, tabindex: "0", class: Object.assign(Object.assign(Object.assign({}, buttonEl.class()), buttonEl.modifier('inverted').class(this.inverted)), buttonEl.modifier(`size-${this.size}`).class(this.size !== '')), "data-testid": "bal-close" }, index.h("bal-icon", { key: '49e49cf68edacc7d69e8d7c42abfb98ff1281f28', name: "close", size: this.size === 'small' ? 'x-small' : this.size === 'medium' ? 'medium' : 'small', inverted: this.inverted, class: Object.assign({}, iconEl.class()) }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/bal-content.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const bem = require('./bem-81bc6a2d.js');
 const log = require('./log-33398c2a.js');
@@ -42,7 +42,7 @@ const Content = class {
         if (alignment) {
             alignValue = this.alignment.split(' ').join('-');
         }
-        return (index.h(index.Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)) }, index.h("slot", null)));
+        return (index.h(index.Host, { key: 'f5838f89492ab4147c9654d4490780ac55f64437', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)) }, index.h("slot", { key: '07907466799f1bc60d530215fd92b7e2c2636e6f' })));
     }
 };
 tslib_es6.__decorate([

package/dist/cjs/bal-data_4.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const bem = require('./bem-81bc6a2d.js');
 const index$1 = require('./index-e6a233be.js');
 
@@ -34,7 +34,7 @@ const Data = class {
     }
     render() {
         const block = bem.BEM.block('data');
-        return (index.h(index.Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('has-border').class(this.border)), block.modifier('is-horizontal').class(this.horizontal)) }, index.h("slot", null)));
+        return (index.h(index.Host, { key: '864257bdb7de053ad8905c5ed5bd0b2bb9dd5793', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('has-border').class(this.border)), block.modifier('is-horizontal').class(this.horizontal)) }, index.h("slot", { key: '2480dde04221d364d9a6f16a3469d6238762bf86' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -51,7 +51,7 @@ const DataItem = class {
     }
     render() {
         const element = bem.BEM.block('data-item');
-        return (index.h(index.Host, { class: Object.assign(Object.assign(Object.assign({}, element.class()), element.modifier('is-disabled').class(this.disabled)), element.modifier('has-border').class(this.border)) }, index.h("slot", null)));
+        return (index.h(index.Host, { key: 'a2c7f920fdafc6672964f3a34785f9e1bf10f7e3', class: Object.assign(Object.assign(Object.assign({}, element.class()), element.modifier('is-disabled').class(this.disabled)), element.modifier('has-border').class(this.border)) }, index.h("slot", { key: 'e34d2d90b08bd824b54cd636beee7702c2e57192' })));
     }
 };
 
@@ -61,7 +61,7 @@ const DataLabel = class {
         this.required = false;
     }
     render() {
-        return (index.h(index.Host, { class: Object.assign({}, bem.BEM.block('data-label').class()) }, index.h("slot", null), this.required ? '*' : ''));
+        return (index.h(index.Host, { key: '1c156284930b724997e295912bfebfba138649a2', class: Object.assign({}, bem.BEM.block('data-label').class()) }, index.h("slot", { key: 'b39c528fb8f45324a056c9b7305bb4ce8fea47c6' }), this.required ? '*' : ''));
     }
 };
 
@@ -85,7 +85,7 @@ const DataValue = class {
     render() {
         const block = bem.BEM.block('data-value');
         const buttonEl = block.element('button');
-        return (index.h(index.Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('is-editable').class(this.editable)), block.modifier('is-multiline').class(this.multiline)) }, index.h("div", null, index.h("slot", null)), index.h("bal-button", { class: Object.assign({}, buttonEl.class()), "data-testid": "bal-data-value-button", square: true, outlined: true, color: "text", size: "small", icon: "edit", disabled: this.disabled, onBalBlur: _ => this.balBlur.emit(), onBalFocus: _ => this.balFocus.emit(), onClick: ev => this.onClickHandler(ev) })));
+        return (index.h(index.Host, { key: 'a3694b08f08f4bfd2a6de223ae7c27453cdc7f02', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('is-editable').class(this.editable)), block.modifier('is-multiline').class(this.multiline)) }, index.h("div", { key: 'f26f3535658c7a2aacd45b71d0c7feab05703bbb' }, index.h("slot", { key: 'd2b482f904a0312555cc24cc22db7126e1b8da6c' })), index.h("bal-button", { key: 'c3357978fa4d4fdbc65825e8dd0d87d3b22af10b', class: Object.assign({}, buttonEl.class()), "data-testid": "bal-data-value-button", square: true, outlined: true, color: "text", size: "small", icon: "edit", disabled: this.disabled, onBalBlur: _ => this.balBlur.emit(), onBalFocus: _ => this.balFocus.emit(), onClick: ev => this.onClickHandler(ev) })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/bal-date-calendar-cell.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
-const formInput = require('./form-input-b61eb894.js');
+const index = require('./index-96c178a6.js');
+const formInput = require('./form-input-35653e8f.js');
 const bem = require('./bem-81bc6a2d.js');
-require('./helpers-2a8c8333.js');
+require('./helpers-393c2183.js');
 require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
@@ -41,7 +41,7 @@ const DateCalendarCell = class {
      */
     render() {
         const block = bem.BEM.block('date-calendar-cell');
-        return (index.h(index.Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('today').class(!this.disabled && this.today)), block.modifier('selected').class(!this.disabled && this.selected)), block.modifier('disabled').class(this.disabled === true)), tabIndex: -1, type: "button", role: "button", "aria-label": this.fullDate, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', title: this.fullDate, onClick: (ev) => this.onClick(ev, this.isoDate) }, index.h("time", { dateTime: this.isoDate }, this.day)));
+        return (index.h(index.Host, { key: 'f3e32c2777dee61702819acd5839608ae8f28c0c', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('today').class(!this.disabled && this.today)), block.modifier('selected').class(!this.disabled && this.selected)), block.modifier('disabled').class(this.disabled === true)), tabIndex: -1, type: "button", role: "button", "aria-label": this.fullDate, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', title: this.fullDate, onClick: (ev) => this.onClick(ev, this.isoDate) }, index.h("time", { key: '3e9df0253eb9828eacd3fe73f6ce58bfc500e3d4', dateTime: this.isoDate }, this.day)));
     }
 };