@baloise/ds-core 16.8.0 → 17.0.0

package/dist/esm/array-4c09dfe3.js

@@ -0,0 +1,20 @@
+import { l as lodash_isnil } from './index-82aff103.js';
+import { i as isEqual } from './index-95ee0c4b.js';
+
+/**
+ * Returns `true` if the arrays are equal
+ *
+ * ```typescript
+ * areArraysEqual(['a', 'b'], ['b', 'a']) // true
+ * ```
+ */
+function areArraysEqual(a, b) {
+    if (lodash_isnil(a) || lodash_isnil(b)) {
+        return false;
+    }
+    const copyA = [...a].sort();
+    const copyB = [...b].sort();
+    return isEqual(copyA, copyB);
+}
+
+export { areArraysEqual as a };

package/dist/esm/bal-accordion_4.entry.js

@@ -1,16 +1,14 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { l as raf, t as transitionEndAsync, m as debounceEvent, w as waitForComponent } from './helpers-c201154e.js';
+import { n as raf, t as transitionEndAsync, o as debounceEvent, w as waitForComponent } from './helpers-72ae7307.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
-import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
-import { h as isEnterKey, e as isSpaceKey } from './index.esm-cc299511.js';
+import { s as stopEventBubbling } from './form-input-264ad739.js';
+import { b as isEnterKey, d as isSpaceKey } from './keyboard.helpers-b2dd6393.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
-import './index-82aff103.js';
-import './_commonjsHelpers-1c8beb5f.js';
 
 const balAccordionCss = ".bal-accordion{display:block;position:relative;width:100%}.bal-accordion--card-v1,.bal-accordion--card-v2{margin-top:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion--card-v1,.bal-accordion--card-v2{margin-top:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion--card-v1,.bal-accordion--card-v2{margin-top:var(--bal-space-medium-desktop)}}.bal-accordion--card-v2{padding-left:var(--bal-space-medium);padding-right:var(--bal-space-medium);padding-bottom:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion--card-v2{padding-left:var(--bal-space-medium-tablet);padding-right:var(--bal-space-medium-tablet);padding-bottom:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion--card-v2{padding-left:var(--bal-space-medium-desktop);padding-right:var(--bal-space-medium-desktop);padding-bottom:var(--bal-space-medium-desktop)}}.bal-accordion__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.bal-accordion__trigger--card{margin-left:var(--bal-space-medium);margin-right:var(--bal-space-medium);margin-bottom:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion__trigger--card{margin-left:var(--bal-space-medium-tablet);margin-right:var(--bal-space-medium-tablet);margin-bottom:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion__trigger--card{margin-left:var(--bal-space-medium-desktop);margin-right:var(--bal-space-medium-desktop);margin-bottom:var(--bal-space-medium-desktop)}}.bal-accordion__content--card{margin-left:var(--bal-space-medium);margin-right:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion__content--card{margin-left:var(--bal-space-medium-tablet);margin-right:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion__content--card{margin-left:var(--bal-space-medium-desktop);margin-right:var(--bal-space-medium-desktop)}}.bal-accordion--animated{-webkit-transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-accordion--animated .bal-accordion__content{-webkit-transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-accordion__content{overflow:hidden;will-change:max-height}.bal-accordion--collapsing .bal-accordion__content{max-height:0 !important}.bal-accordion--collapsed .bal-accordion__content{display:none}.bal-accordion--expanding .bal-accordion__content{max-height:0}@media (prefers-reduced-motion: reduce){.bal-accordion,.bal-accordion__content{-webkit-transition:none !important;transition:none !important}}";
 const BalAccordionStyle0 = balAccordionCss;
@@ -349,7 +347,7 @@ const AccordionDetails = class {
         const id = this.parentAccordionId ? `${this.parentAccordionId}-details` : this.componentId;
         const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
         const contentPart = expanded ? 'content expanded' : 'content';
-        return (h(Host, { id: id, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('expanding').class(this.state === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.state === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.state === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.state === 1 /* AccordionState.Collapsed */)), block.modifier('animated').class(this.animated)) }, h("div", { id: `${id}-content`, "aria-labelledby": `${this.parentAccordionId}-trigger-button`, role: "region", part: contentPart, class: Object.assign({}, wrapperEl.class()), "data-testid": "bal-accordion-details" }, h("slot", null))));
+        return (h(Host, { key: '46658e9e2842371f4faac02f3666f908f48000a2', id: id, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('expanding').class(this.state === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.state === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.state === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.state === 1 /* AccordionState.Collapsed */)), block.modifier('animated').class(this.animated)) }, h("div", { key: '4e2616b9946f33ce3a30c396f200dd2a8c16eed4', id: `${id}-content`, "aria-labelledby": `${this.parentAccordionId}-trigger-button`, role: "region", part: contentPart, class: Object.assign({}, wrapperEl.class()), "data-testid": "bal-accordion-details" }, h("slot", { key: '76467aaa5660e88ab9a208fdf0577f203f000fcf' }))));
     }
     get el() { return getElement(this); }
 };
@@ -445,7 +443,7 @@ const AccordionSummary = class {
                 'onKeyDown': this.onKeyDown,
             };
         }
-        return (h(Host, Object.assign({ id: id, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('trigger').class(this.trigger)), block.modifier('inner-trigger').class(!this.trigger)), { 'bal-focused': this.trigger }) }, attributes, { "data-testid": "bal-accordion-summary" })));
+        return (h(Host, Object.assign({ key: 'c3a6c35f68b01dcfe81b8e87a8a31b3c87db771c', id: id, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('trigger').class(this.trigger)), block.modifier('inner-trigger').class(!this.trigger)), { 'bal-focused': this.trigger }) }, attributes, { "data-testid": "bal-accordion-summary" })));
     }
     get el() { return getElement(this); }
 };
@@ -540,7 +538,7 @@ const AccordionTrigger = class {
                 tabindex: 0,
             };
         }
-        return (h(Host, { id: id, class: Object.assign({}, block.class()) }, this.button ? (h("bal-button", { id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: true, icon: icon, iconTurn: turn, color: this.color, size: this.size, onClick: this.onClick }, label)) : (h("button", Object.assign({ class: Object.assign(Object.assign({}, block.element('button').class()), { 'bal-focused': parentSummaryEl && !parentSummaryEl.trigger }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-label": "accordion trigger", part: buttonPart, "data-testid": "bal-accordion-trigger", onClick: this.onClick }, triggerAttributes), h("bal-icon", { turn: turn, name: icon })))));
+        return (h(Host, { key: 'af0ac1bbf7cb49a28ad9e481d3cf41f377c3d434', id: id, class: Object.assign({}, block.class()) }, this.button ? (h("bal-button", { id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: true, icon: icon, iconTurn: turn, color: this.color, size: this.size, onClick: this.onClick }, label)) : (h("button", Object.assign({ class: Object.assign(Object.assign({}, block.element('button').class()), { 'bal-focused': parentSummaryEl && !parentSummaryEl.trigger }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-label": "accordion trigger", part: buttonPart, "data-testid": "bal-accordion-trigger", onClick: this.onClick }, triggerAttributes), h("bal-icon", { turn: turn, name: icon })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bal-app.entry.js

@@ -1,14 +1,14 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { b as balBrowser } from './browser-a8073d92.js';
 import { b as balDevice } from './device-8c6d2881.js';
-import { h as debounce, k as rIC } from './helpers-c201154e.js';
+import { j as debounce, m as rIC, l as rLCP } from './helpers-72ae7307.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { s as startFocusVisible } from './focus-visible-f0cdd043.js';
 import { b as updateBalAnimated } from './config.utils-6ac6c9bd.js';
 import './icons.constant-a7885631.js';
 
-const balAppCss = ":root{--bal-app-height:100%}.bal-app{position:relative;display:block}";
+const balAppCss = ":root{--bal-app-height:100%}.bal-app{position:relative;display:block}.lcp-wait{opacity:0;visibility:hidden;display:none}.lcp-ready .lcp-wait{opacity:inherit;visibility:inherit;display:inherit}";
 const BalAppStyle0 = balAppCss;
 
 const App = class {
@@ -35,10 +35,16 @@ const App = class {
         }
     }
     componentDidLoad() {
-        rIC(async () => {
+        rIC(() => {
             this.ready = true;
             startFocusVisible();
         });
+        rLCP(() => {
+            if (balBrowser.hasDocument && balBrowser.hasWindow) {
+                const doc = document.documentElement;
+                doc.classList.add('lcp-ready');
+            }
+        });
     }
     disconnectedCallback() {
         if (balBrowser.hasWindow) {
@@ -51,11 +57,11 @@ const App = class {
         }
     }
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: '7e5b5c9164dd2fc89e1a41278904b6e020b535a7', class: {
                 'bal-app': true,
                 'bal-app--safari': balBrowser.isSafari,
                 'bal-app--touch': balDevice.hasTouchScreen,
-            } }, h("slot", null)));
+            } }, h("slot", { key: '5eac7462d067b17d8ff18ceb5d6ae8aa4e040d39' })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bal-badge.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 
 const balBadgeCss = ":root{--bal-badge-background:var(--bal-color-red-3);--bal-badge-background-grey:var(--bal-color-grey-3);--bal-badge-background-red:var(--bal-color-red-3);--bal-badge-background-yellow:var(--bal-color-yellow-3);--bal-badge-background-green:var(--bal-color-green-3);--bal-badge-background-purple:var(--bal-color-purple-3);--bal-badge-radius:var(--bal-radius-rounded);--bal-badge-text-color:var(--bal-color-text-primary);--bal-badge-color-grey:var(--bal-color-text-grey-dark);--bal-badge-color-red:var(--bal-color-text-primary);--bal-badge-color-yellow:var(--bal-color-text-primary);--bal-badge-color-green:var(--bal-color-text-primary);--bal-badge-color-purple:var(--bal-color-text-primary)}.bal-badge{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;min-width:1.5rem;height:1.5rem;border-radius:var(--bal-badge-radius);background:var(--bal-badge-background);padding:.25rem}.bal-badge--size-small{width:.75rem;max-width:.75rem;min-width:.75rem;height:.75rem}.bal-badge--size-large{width:2rem;height:2rem}.bal-badge--background-red,.bal-badge--background-danger{background:var(--bal-badge-background-red)}.bal-badge--background-yellow,.bal-badge--background-warning{background:var(--bal-badge-background-yellow)}.bal-badge--background-green,.bal-badge--background-success{background:var(--bal-badge-background-green)}.bal-badge--background-purple{background:var(--bal-badge-background-purple)}.bal-badge--background-grey{background:var(--bal-badge-background-grey)}.bal-badge--position-card,.bal-badge--position-button{position:absolute;right:-0.5rem;top:-0.5rem}.bal-badge--position-tabs{margin-top:-0.25rem;position:absolute;right:-1.625rem}.bal-badge--position-tabs.bal-badge--size-small{right:-1rem}span.bal-badge__label{font-weight:var(--bal-font-weight-bold) !important;font-family:var(--bal-font-family-text) !important;font-size:var(--bal-text-size-small) !important;color:var(--bal-badge-text-color);line-height:1.5rem !important;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}span.bal-badge__label--hidden{display:none !important}span.bal-badge__label--color-red,span.bal-badge__label--color-danger{color:var(--bal-badge-color-red)}span.bal-badge__label--color-yellow,span.bal-badge__label--color-warning{color:var(--bal-badge-color-yellow)}span.bal-badge__label--color-green,span.bal-badge__label--color-success{color:var(--bal-badge-color-green)}span.bal-badge__label--color-grey{color:var(--bal-badge-color-grey)}span.bal-badge__label--color-purple{color:var(--bal-badge-color-purple)}.bal-badge__icon--hidden{display:none !important}";
@@ -20,7 +20,7 @@ const Badge = class {
         const size = this.size !== '';
         const position = this.position !== '';
         const labelHidden = !!this.icon || this.size === 'small';
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.color}`).class(color)), block.modifier(`position-${this.position}`).class(position)), block.modifier(`size-${this.size}`).class(size)) }, h("span", { class: Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier(`color-${this.color}`).class(color)), labelEl.modifier(`hidden`).class(labelHidden)), "data-testid": "bal-badge-label" }, h("slot", null)), this.size !== 'small' ? (h("bal-icon", { class: Object.assign(Object.assign({}, iconEl.class()), iconEl.modifier(`hidden`).class(!labelHidden)), size: this.size === '' ? 'small' : '', name: this.icon, color: this.color === 'grey' ? 'grey' : 'primary' })) : ('')));
+        return (h(Host, { key: '8fefcf48fb5ba2011faf11b6d5dee452080d3344', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.color}`).class(color)), block.modifier(`position-${this.position}`).class(position)), block.modifier(`size-${this.size}`).class(size)) }, h("span", { key: '582a5f522dd5c7fff3c373b4e85055d7b203aa20', class: Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier(`color-${this.color}`).class(color)), labelEl.modifier(`hidden`).class(labelHidden)), "data-testid": "bal-badge-label" }, h("slot", { key: 'cb210bd83465da685b87be59d29195f96be0b584' })), this.size !== 'small' ? (h("bal-icon", { class: Object.assign(Object.assign({}, iconEl.class()), iconEl.modifier(`hidden`).class(!labelHidden)), size: this.size === '' ? 'small' : '', name: this.icon, color: this.color === 'grey' ? 'grey' : 'primary' })) : ('')));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bal-button_2.entry.js

@@ -1,6 +1,12 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
+import { l as rLCP } from './helpers-72ae7307.js';
+import { L as ListenTo } from './listen-d1712e70.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
+import './browser-a8073d92.js';
+import './icons.constant-a7885631.js';
+import './config.utils-6ac6c9bd.js';
 
 const balButtonCss = "bal-button,.bal-button{display:inline-block;position:static}bal-button.is-fullwidth,.bal-button.is-fullwidth{width:100%;-ms-flex:1 1 100%;flex:1 1 100%}bal-button[disabled] bal-icon,.bal-button[disabled] bal-icon{pointer-events:none}.bal-button .button-label.has-no-wrap{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bal-button-group{display:-ms-flexbox;display:flex}.bal-button-group--position-center{-ms-flex-pack:center;justify-content:center}.bal-button-group--position-left{-ms-flex-pack:start;justify-content:flex-start}.bal-button-group--position-right{-ms-flex-pack:end;justify-content:flex-end}@media screen and (max-width: 768px){.bal-button-group--direction-auto .field.is-grouped,.bal-button-group--direction-auto .bal-button,.bal-button-group--direction-auto .bal-button .button{width:100% !important}}@media screen and (max-width: 768px){.bal-button-group--direction-column .field.is-grouped,.bal-button-group--direction-column .bal-button,.bal-button-group--direction-column .bal-button .button{width:100% !important}}";
 const BalButtonStyle0 = balButtonCss;
@@ -24,6 +30,7 @@ const Button = class {
                 this.balNavigate.emit(ev);
             }
         };
+        this.isLargestContentPaintDone = false;
         this.color = 'primary';
         this.elementType = 'button';
         this.disabled = false;
@@ -55,6 +62,9 @@ const Button = class {
             ev.stopPropagation();
         }
     }
+    componentDidLoad() {
+        rLCP(() => (this.isLargestContentPaintDone = true));
+    }
     componentWillLoad() {
         this.inheritAttributes = inheritAttributes(this.el, [
             'title',
@@ -155,14 +165,20 @@ const Button = class {
                 'control': true,
                 'is-fullwidth': this.expanded,
                 'is-disabled': this.disabled,
-            } }, h(TagType, Object.assign({}, attrs, this.inheritAttributes, { type: this.elementType, class: this.buttonCssClass, part: "native", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, "aria-disabled": this.disabled ? 'true' : null, "data-testid": "bal-button" }, ariaAttributes), h("bal-spinner", Object.assign({ color: spinnerColor(), small: true }, this.loadingAttrs, { deactivated: !this.loading })), h("bal-icon", Object.assign({}, this.leftIconAttrs, { class: this.square ? '' : 'icon-left', name: this.icon, size: this.square ? this.size : 'small', turn: this.iconTurn, inverted: this.isIconInverted })), h("span", { class: {
+            } }, h(TagType, Object.assign({}, attrs, this.inheritAttributes, { type: this.elementType, class: this.buttonCssClass, part: "native", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, "aria-disabled": this.disabled ? 'true' : null, "data-testid": "bal-button" }, ariaAttributes), this.isLargestContentPaintDone && this.loading ? (h("bal-spinner", Object.assign({ color: spinnerColor(), small: true }, this.loadingAttrs, { deactivated: !this.loading }))) : (''), this.isLargestContentPaintDone && this.icon ? (h("bal-icon", Object.assign({}, this.leftIconAttrs, { class: this.square ? '' : 'icon-left', name: this.icon, size: this.square ? this.size : 'small', turn: this.iconTurn, inverted: this.isIconInverted }))) : (''), h("span", { class: {
                 'button-label': true,
                 'has-no-wrap': this.noWrap,
                 'is-small': this.size === 'small',
-            }, style: { opacity: this.loading ? '0' : '1' }, "data-testid": "bal-button-label" }, h("slot", null)), h("bal-icon", Object.assign({}, this.leftRightAttrs, { class: "icon-right", name: this.iconRight, size: 'small', turn: this.iconTurn, inverted: this.isIconInverted })))));
+            }, style: { opacity: this.loading ? '0' : '1' }, "data-testid": "bal-button-label" }, h("slot", null)), this.isLargestContentPaintDone && this.iconRight ? (h("bal-icon", Object.assign({}, this.leftRightAttrs, { class: "icon-right", name: this.iconRight, size: 'small', turn: this.iconTurn, inverted: this.isIconInverted }))) : (''))));
     }
     get el() { return getElement(this); }
 };
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Button.prototype, "listenOnClick", null);
 Button.style = BalButtonStyle0;
 
 const ButtonGroup = class {
@@ -174,12 +190,12 @@ const ButtonGroup = class {
     }
     render() {
         const block = BEM.block('button-group');
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`position-${this.position}`).class()), block.modifier(`direction-${this.direction}`).class()) }, h("div", { class: {
+        return (h(Host, { key: '37a0df1c1011b201337d3a3838131fd4eec4ad52', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`position-${this.position}`).class()), block.modifier(`direction-${this.direction}`).class()) }, h("div", { key: 'fc6667209c1ce56dee220bca313c1b894e49be62', class: {
                 'field': true,
                 'is-grouped': true,
                 'is-reverse': this.reverse,
                 [`has-direction-${this.direction}`]: true,
-            } }, h("slot", null))));
+            } }, h("slot", { key: '8187edbafa351fc0b57178bd826dd4d36fc56721' }))));
     }
 };
 

package/dist/esm/bal-card_6.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host } from './index-5b1faf93.js';
 import { i as isEmpty } from './index-db06fb0e.js';
 import './_commonjsHelpers-1c8beb5f.js';
 
@@ -22,7 +22,7 @@ const Card = class {
         return isEmpty(this.color) ? '' : `is-${this.inverted ? 'blue' : this.color}`;
     }
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: '7bc59c101e875eedda1f209d3eb2442ac00b4df5', class: {
                 'bal-card': true,
                 [`bal-card--${this.colorTypeClass}`]: !isEmpty(this.color),
                 [`bal-card--is-${this.space}`]: this.space !== '',
@@ -32,7 +32,7 @@ const Card = class {
                 'bal-card--is-selected': this.selected,
                 'bal-card--is-square': this.square,
                 'bal-card--has-fullheight': this.fullheight,
-            } }, h("slot", null)));
+            } }, h("slot", { key: '577a43d779ac88042185e9bf5d3eb61f663cebad' })));
     }
 };
 Card.style = BalCardStyle0;
@@ -43,7 +43,7 @@ const CardActions = class {
         this.position = '';
     }
     render() {
-        return (h(Host, { class: "bal-card-actions" }, h("bal-button-group", { class: "m-none", position: this.position }, h("slot", null))));
+        return (h(Host, { key: '78f85e69ecf9184127533a57f8fb53793bf7f49e', class: "bal-card-actions" }, h("bal-button-group", { key: 'bee1def05a211bffb60f76b69a32cbd9e6d1a536', class: "m-none", position: this.position }, h("slot", { key: 'd62d486907ed3ef8bcd888464a0ddb32f2dfdcd3' }))));
     }
 };
 
@@ -59,7 +59,7 @@ const CardButton = class {
         this.loading = false;
     }
     render() {
-        return (h(Host, { class: "bal-card-button" }, h("bal-button", { color: "info", expanded: true, "bottom-rounded": true, icon: this.icon, iconRight: this.iconRight, elementType: this.elementType, disabled: this.disabled, href: this.href, target: this.target, loading: this.loading }, h("slot", null))));
+        return (h(Host, { key: 'a9a6233b6262d6160868017fd254d5a6ad2612ae', class: "bal-card-button" }, h("bal-button", { key: 'b7a5317e53b75f8d8bb4bbb8dd6ef56325c6676b', color: "info", expanded: true, "bottom-rounded": true, icon: this.icon, iconRight: this.iconRight, elementType: this.elementType, disabled: this.disabled, href: this.href, target: this.target, loading: this.loading }, h("slot", { key: '9461aa5ace6d22d8c7dd6eff5495dfc4e3232506' }))));
     }
 };
 
@@ -68,7 +68,7 @@ const CardContent = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { class: "bal-card-content" }, h("slot", null)));
+        return (h(Host, { key: '3d9b2511b8743f33efeb25ae05691964b938cbcc', class: "bal-card-content" }, h("slot", { key: '2085fa6085da72981d7a5fb86eca8979b8d84076' })));
     }
 };
 
@@ -80,7 +80,7 @@ const CardSubtitle = class {
         this.color = '';
     }
     render() {
-        return (h(Host, { class: "bal-card-subtitle" }, h("bal-text", { bold: this.bold, space: "none", color: this.inverted ? 'white' : this.color }, h("slot", null))));
+        return (h(Host, { key: '3c1cf2160f9cca6e5d9b2ce60069a23bedcb590a', class: "bal-card-subtitle" }, h("bal-text", { key: '22fab503a09f822fe30a6e06340312c3c080b6a4', bold: this.bold, space: "none", color: this.inverted ? 'white' : this.color }, h("slot", { key: 'bb28c8fcbfec3ba10184721940a453b22b2b8865' }))));
     }
 };
 
@@ -90,7 +90,7 @@ const CardTitle = class {
         this.inverted = false;
     }
     render() {
-        return (h(Host, { class: "bal-card-title" }, h("bal-heading", { level: "h3", space: "none", inverted: this.inverted }, h("slot", null))));
+        return (h(Host, { key: '7e5021e2cf281b237676f401ca3109a6988b8edc', class: "bal-card-title" }, h("bal-heading", { key: 'b1a0badb897ba81b3fc25367cdd2155ee5bb7b43', level: "h3", space: "none", inverted: this.inverted }, h("slot", { key: '8765c2c2485f4f1a885278070328136ec1402b1a' }))));
     }
 };
 

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

@@ -1,14 +1,15 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-b6003bc7.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { l as raf, b as waitAfterFramePaint } from './helpers-c201154e.js';
+import { j as debounce, l as rLCP, n as raf, b as waitAfterFramePaint } from './helpers-72ae7307.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
-import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f08ad280.js';
+import { s as stopEventBubbling } from './form-input-264ad739.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-9981606e.js';
 import { g as getComputedWidth } from './style-ca1bd202.js';
-import { L as ListenToMutation } from './mutation.decorator-c7b24839.js';
-import { L as ListenToSwipe } from './swipe.decorator-9d904794.js';
-import { L as ListenToResize } from './resize.decorator-f70563b5.js';
-import { b as balBreakpoints } from './breakpoints.subject-d2b4fd79.js';
+import { L as ListenTo } from './listen-d1712e70.js';
+import { L as ListenToMutation } from './mutation.decorator-985cc0a1.js';
+import { L as ListenToSwipe } from './swipe.decorator-56b6d574.js';
+import { L as ListenToResize } from './resize.decorator-f2d8461d.js';
+import { b as balBreakpoints } from './breakpoints.subject-ae98d0fa.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
@@ -16,9 +17,9 @@ import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './listener-04842ae9.js';
-import './swipe.subject-f1d64e8d.js';
+import './swipe.subject-683f7c7b.js';
 import './device-8c6d2881.js';
-import './tokens.esm-cada8a2a.js';
+import './tokens.esm-ed9fb455.js';
 import './log-dfd1c19f.js';
 
 const TabControl = ({ value, items, containerId, onControlChange }) => {
@@ -118,6 +119,7 @@ const Carousel = class {
         this.carouselId = `bal-carousel-${CarouselIds++}`;
         this.carouselContainerId = `bal-carousel-${CarouselIds++}-container`;
         this.mutationObserverActive = true;
+        this.itemsChanged = debounce(() => this.itemsChangedInternal(), 100);
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -135,6 +137,7 @@ const Carousel = class {
                 }
             }
         };
+        this.isLargestContentfulPaintDone = false;
         this.isLastSlideVisible = true;
         this.isMobile = balBreakpoints.isMobile;
         this.language = defaultConfig.language;
@@ -156,6 +159,11 @@ const Carousel = class {
      * LIFECYCLE
      * ------------------------------------------------------
      */
+    componentDidLoad() {
+        rLCP(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
     /**
      * LISTENERS
      * ------------------------------------------------------
@@ -313,10 +321,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) {
@@ -378,10 +388,16 @@ const Carousel = class {
         const leftControlTitle = i18nControlLabel[this.language].left;
         const rightControlTitle = i18nControlLabel[this.language].right;
         const controlItems = this.getAllControlItems();
-        return (h(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' ? (h(TabControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), 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) }, 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) }, h("slot", null), this.border ? (h("div", { id: `${this.carouselId}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.borderEl = el) })) : (''))), this.controls === 'dots' ? (h(DotControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), this.controls === 'large' ? (h(LargeControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, areControlsHidden: !this.isMobile, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : (''), this.controls === 'small' ? (h(SmallControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : ('')));
+        return (h(Host, { key: '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' ? (h(TabControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), 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) }, 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) }, h("slot", { key: '855f44ac6e8b1cfdfd31cc39f9fd2d9749a2f326' }), this.border ? (h("div", { id: `${this.carouselId}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.borderEl = el) })) : (''))), this.isLargestContentfulPaintDone && this.controls === 'dots' ? (h(DotControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), this.isLargestContentfulPaintDone && this.controls === 'large' ? (h(LargeControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, areControlsHidden: !this.isMobile, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : (''), this.isLargestContentfulPaintDone && this.controls === 'small' ? (h(SmallControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : ('')));
     }
     get el() { return getElement(this); }
 };
+__decorate([
+    ListenTo('touchmove', { target: 'window', passive: false }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Carousel.prototype, "blockVerticalScrolling", null);
 __decorate([
     ListenToMutation({ tags: ['bal-carousel-item'], characterData: false }),
     __metadata("design:type", Function),
@@ -406,6 +422,12 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], Carousel.prototype, "resizeListener", null);
+__decorate([
+    ListenTo('keydown'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], Carousel.prototype, "listenToKeyDown", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),
@@ -433,6 +455,7 @@ const CarouselItem = class {
         this.onBlur = () => {
             this.balBlur.emit();
         };
+        this.isLargestContentfulPaintDone = false;
         this.src = undefined;
         this.label = '';
         this.htmlRole = 'listitem';
@@ -445,6 +468,15 @@ const CarouselItem = class {
         this.download = undefined;
         this.color = undefined;
     }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentDidLoad() {
+        rLCP(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
     componentWillLoad() {
         this.imageInheritAttributes = inheritAttributes(this.el, ['alt']);
     }
@@ -465,7 +497,7 @@ const CarouselItem = class {
         const itemEl = block.element('item');
         const isProduct = !!this.color && !!this.label;
         if (!isProduct) {
-            return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, this.src !== undefined ? (h("img", Object.assign({ draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), h("slot", null)));
+            return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, this.isLargestContentfulPaintDone && this.src !== undefined ? (h("img", Object.assign({ draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), h("slot", null)));
         }
         const button = itemEl.element('button');
         const image = button.element('image');
@@ -480,7 +512,7 @@ const CarouselItem = class {
                 rel,
                 target,
             };
-        return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, h(TagType, Object.assign({}, attrs, { class: Object.assign(Object.assign({}, button.class()), button.modifier(`color-${this.color}`).class()), part: "native", onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, ref: el => (this.buttonEl = el) }), this.src !== undefined ? (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 ? h("span", { class: Object.assign({}, label.class()) }, this.label) : '', h("slot", null))));
+        return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, h(TagType, Object.assign({}, attrs, { class: Object.assign(Object.assign({}, button.class()), button.modifier(`color-${this.color}`).class()), part: "native", onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, ref: el => (this.buttonEl = el) }), this.isLargestContentfulPaintDone && this.src !== undefined ? (h("img", Object.assign({ class: Object.assign({}, image.class()), draggable: false, onDragStart: () => false, "aria-hidden": "true", src: this.src }, this.imageInheritAttributes))) : (''), this.label !== undefined ? h("span", { class: Object.assign({}, label.class()) }, this.label) : '', h("slot", null))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
-import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
+import { s as stopEventBubbling } from './form-input-264ad739.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { F as FOCUS_KEYS } from './focus-visible-f0cdd043.js';
-import { i as isDescendant } from './helpers-c201154e.js';
-import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator-071e2b6b.js';
+import { i as isDescendant } from './helpers-72ae7307.js';
+import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator-0f2107d8.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
@@ -181,7 +181,7 @@ const CheckboxButton = class {
         const invalid = !!this.invalid;
         const color = !!this.color;
         const colored = this.checked && color;
-        return (h(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 }, 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 }, h("slot", null))));
+        return (h(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 }, 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 }, h("slot", { key: 'e83b0706ab2f9d2c8f39b15a654159448921336a' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,20 +1,23 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { s as stopEventBubbling, c as inputSetFocus, d as inputSetBlur } from './form-input-a8fdaaef.js';
-import { i as isDescendant, p as hasTagName } from './helpers-c201154e.js';
+import { s as stopEventBubbling, c as inputSetFocus, d as inputSetBlur } from './form-input-264ad739.js';
+import { i as isDescendant, u as hasTagName } from './helpers-72ae7307.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
-import { e as isSpaceKey, o as areArraysEqual } from './index.esm-cc299511.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { F as FOCUS_KEYS } from './focus-visible-f0cdd043.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
 import { a as ariaBooleanToString } from './aria-d5877698.js';
-import { L as ListenToFocus } from './focus.decorator-8acd79c3.js';
-import { L as ListenToMutation } from './mutation.decorator-c7b24839.js';
+import { L as ListenTo } from './listen-d1712e70.js';
+import { d as isSpaceKey } from './keyboard.helpers-b2dd6393.js';
+import { a as areArraysEqual } from './array-4c09dfe3.js';
+import { L as ListenToFocus } from './focus.decorator-dc333802.js';
+import { L as ListenToMutation } from './mutation.decorator-985cc0a1.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './index-82aff103.js';
+import './index-95ee0c4b.js';
 import './_commonjsHelpers-1c8beb5f.js';
 import './listener-04842ae9.js';
 
@@ -283,7 +286,7 @@ const Checkbox = class {
             labelAttributes.id = `${id}-lbl`;
             labelAttributes.htmlFor = id;
         }
-        return (h(Host, { "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({ 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: '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)))) : ('')));
     }
     get el() { return getElement(this); }
 };
@@ -293,6 +296,18 @@ __decorate([
     __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;
 Checkbox.style = BalCheckboxStyle0;
 
@@ -602,6 +617,30 @@ __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;
 
 export { Checkbox as bal_checkbox, CheckboxGroup as bal_checkbox_group };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { i as i18nBalClose } from './bal-close.i18n-f2daa707.js';
@@ -32,7 +32,7 @@ const Close = class {
         const buttonEl = blockEl.element('button');
         const iconEl = buttonEl.element('icon');
         const label = i18nBalClose[this.language].close;
-        return (h(Host, { class: Object.assign({}, blockEl.class()) }, 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" }, 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 (h(Host, { key: '28a807ed717bd60d6534beee83086e87165c6b8f', class: Object.assign({}, blockEl.class()) }, 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" }, 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 getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
@@ -38,7 +38,7 @@ const Content = class {
         if (alignment) {
             alignValue = this.alignment.split(' ').join('-');
         }
-        return (h(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)) }, h("slot", null)));
+        return (h(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)) }, h("slot", { key: '07907466799f1bc60d530215fd92b7e2c2636e6f' })));
     }
 };
 __decorate([