@baloise/ds-core 16.8.0 → 17.0.0

package/components/bal-accordion-details.js

@@ -53,7 +53,7 @@ const AccordionDetails = /*@__PURE__*/ proxyCustomElement(class AccordionDetails
         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 this; }
     static get style() { return BalAccordionDetailsStyle0; }

package/components/bal-accordion-summary.js

@@ -3,7 +3,7 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { i as isEnterKey, a as isSpaceKey } from './index.esm.js';
+import { i as isEnterKey, a as isSpaceKey } from './keyboard.helpers.js';
 
 const balAccordionSummaryCss = "@media (hover: hover)and (pointer: fine){.bal-accordion__summary--trigger:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}.bal-accordion__summary{position:static;display:block}.bal-accordion__summary--trigger{cursor:pointer}";
 const BalAccordionSummaryStyle0 = balAccordionSummaryCss;
@@ -89,7 +89,7 @@ const AccordionSummary = /*@__PURE__*/ proxyCustomElement(class AccordionSummary
                 '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 this; }
     static get style() { return BalAccordionSummaryStyle0; }

package/components/bal-accordion-trigger.js

@@ -90,7 +90,7 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
                 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 this; }
     static get style() { return BalAccordionTriggerStyle0; }

package/components/bal-accordion.js

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

package/components/bal-app.js

@@ -2,12 +2,12 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { b as balBrowser } from './browser.js';
 import { b as balDevice } from './device.js';
-import { h as debounce, k as rIC } from './helpers.js';
+import { j as debounce, o as rIC, l as rLCP } from './helpers.js';
 import { L as Logger } from './log.js';
 import { s as startFocusVisible } from './focus-visible.js';
 import { b as updateBalAnimated } from './config.utils.js';
 
-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 = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
@@ -35,10 +35,16 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
         }
     }
     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 = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
         }
     }
     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 this; }
     static get style() { return BalAppStyle0; }

package/components/bal-badge2.js

@@ -22,7 +22,7 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
         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 this; }
     static get style() { return BalBadgeStyle0; }

package/components/bal-button-group2.js

@@ -11,12 +11,12 @@ const ButtonGroup = /*@__PURE__*/ proxyCustomElement(class ButtonGroup extends H
     }
     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' }))));
     }
 }, [4, "bal-button-group", {
         "position": [1],

package/components/bal-button2.js

@@ -1,5 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { i as inheritAttributes } from './attributes.js';
+import { l as rLCP } from './helpers.js';
+import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { d as defineCustomElement$1 } from './bal-spinner2.js';
 
@@ -26,6 +29,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
                 this.balNavigate.emit(ev);
             }
         };
+        this.isLargestContentPaintDone = false;
         this.color = 'primary';
         this.elementType = 'button';
         this.disabled = false;
@@ -57,6 +61,9 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
             ev.stopPropagation();
         }
     }
+    componentDidLoad() {
+        rLCP(() => (this.isLargestContentPaintDone = true));
+    }
     componentWillLoad() {
         this.inheritAttributes = inheritAttributes(this.el, [
             'title',
@@ -157,11 +164,11 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
                 '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 this; }
     static get style() { return BalButtonStyle0; }
@@ -189,8 +196,15 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         "noWrap": [4, "no-wrap"],
         "name": [1],
         "value": [8],
-        "aria": [16]
-    }, [[6, "click", "listenOnClick"]]]);
+        "aria": [16],
+        "isLargestContentPaintDone": [32]
+    }]);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Button.prototype, "listenOnClick", null);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/components/bal-card-actions.js

@@ -8,7 +8,7 @@ const CardActions = /*@__PURE__*/ proxyCustomElement(class CardActions extends H
         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' }))));
     }
 }, [4, "bal-card-actions", {
         "position": [1]

package/components/bal-card-button.js

@@ -16,7 +16,7 @@ const CardButton = /*@__PURE__*/ proxyCustomElement(class CardButton extends HTM
         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' }))));
     }
 }, [4, "bal-card-button", {
         "icon": [1],

package/components/bal-card-content2.js

@@ -6,7 +6,7 @@ const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends H
         this.__registerHost();
     }
     render() {
-        return (h(Host, { class: "bal-card-content" }, h("slot", null)));
+        return (h(Host, { key: '3d9b2511b8743f33efeb25ae05691964b938cbcc', class: "bal-card-content" }, h("slot", { key: '2085fa6085da72981d7a5fb86eca8979b8d84076' })));
     }
 }, [4, "bal-card-content"]);
 function defineCustomElement() {

package/components/bal-card-subtitle.js

@@ -10,7 +10,7 @@ const CardSubtitle = /*@__PURE__*/ proxyCustomElement(class CardSubtitle extends
         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' }))));
     }
 }, [4, "bal-card-subtitle", {
         "inverted": [4],

package/components/bal-card-title.js

@@ -8,7 +8,7 @@ const CardTitle = /*@__PURE__*/ proxyCustomElement(class CardTitle extends HTMLE
         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' }))));
     }
 }, [4, "bal-card-title", {
         "inverted": [4]

package/components/bal-card2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { i as isEmpty } from './index3.js';
+import { i as isEmpty } from './index2.js';
 
 const balCardCss = ":root{--bal-card-background:transparent;--bal-card-background-white:var(--bal-color-white);--bal-card-background-blue:var(--bal-color-primary);--bal-card-background-primary:var(--bal-color-primary);--bal-card-background-info:var(--bal-color-primary);--bal-card-background-success:var(--bal-color-success-2);--bal-card-background-warning:var(--bal-color-warning-2);--bal-card-background-danger:var(--bal-color-danger-2);--bal-card-background-grey:var(--bal-color-grey);--bal-card-background-red:var(--bal-color-red);--bal-card-background-yellow:var(--bal-color-yellow);--bal-card-background-purple:var(--bal-color-purple);--bal-card-background-green:var(--bal-color-green);--bal-card-background-red-light:var(--bal-color-red-1);--bal-card-background-yellow-light:var(--bal-color-yellow-1);--bal-card-background-purple-light:var(--bal-color-purple-1);--bal-card-background-green-light:var(--bal-color-green-1);--bal-card-background-grey-light:var(--bal-color-grey-1);--bal-card-background-purple-1:var(--bal-color-purple-1);--bal-card-background-purple-2:var(--bal-color-purple-2);--bal-card-background-purple-3:var(--bal-color-purple);--bal-card-background-green-1:var(--bal-color-green-1);--bal-card-background-green-2:var(--bal-color-green-2);--bal-card-background-green-3:var(--bal-color-green);--bal-card-background-red-1:var(--bal-color-red-1);--bal-card-background-red-2:var(--bal-color-red-2);--bal-card-background-red-3:var(--bal-color-red);--bal-card-background-yellow-1:var(--bal-color-yellow-1);--bal-card-background-yellow-2:var(--bal-color-yellow-2);--bal-card-background-yellow-3:var(--bal-color-yellow);--bal-card-selected-background:var(--bal-color-primary-2);--bal-card-radius:var(--bal-radius-large);--bal-card-square-radius:0;--bal-card-border:var(--bal-border-width-normal) dashed var(--bal-color-grey)}.bal-card{position:relative;display:block;background:var(--bal-card-background);-webkit-box-shadow:var(--bal-shadow-normal);box-shadow:var(--bal-shadow-normal);border-radius:var(--bal-card-radius)}.bal-card--is-white{background:var(--bal-card-background-white)}.bal-card--is-blue{background:var(--bal-card-background-blue)}.bal-card--is-primary{background:var(--bal-card-background-primary)}.bal-card--is-info{background:var(--bal-card-background-info)}.bal-card--is-success{background:var(--bal-card-background-success)}.bal-card--is-warning{background:var(--bal-card-background-warning)}.bal-card--is-danger{background:var(--bal-card-background-danger)}.bal-card--is-grey{background:var(--bal-card-background-grey)}.bal-card--is-red{background:var(--bal-card-background-red)}.bal-card--is-yellow{background:var(--bal-card-background-yellow)}.bal-card--is-purple{background:var(--bal-card-background-purple)}.bal-card--is-green{background:var(--bal-card-background-green)}.bal-card--is-red-light{background:var(--bal-card-background-red-light)}.bal-card--is-yellow-light{background:var(--bal-card-background-yellow-light)}.bal-card--is-purple-light{background:var(--bal-card-background-purple-light)}.bal-card--is-green-light{background:var(--bal-card-background-green-light)}.bal-card--is-grey-light{background:var(--bal-card-background-grey-light)}.bal-card--is-purple-1{background:var(--bal-card-background-purple-1)}.bal-card--is-purple-2{background:var(--bal-card-background-purple-2)}.bal-card--is-purple-3{background:var(--bal-card-background-purple-3)}.bal-card--is-green-1{background:var(--bal-card-background-green-1)}.bal-card--is-green-2{background:var(--bal-card-background-green-2)}.bal-card--is-green-3{background:var(--bal-card-background-green-3)}.bal-card--is-red-1{background:var(--bal-card-background-red-1)}.bal-card--is-red-2{background:var(--bal-card-background-red-2)}.bal-card--is-red-3{background:var(--bal-card-background-red-3)}.bal-card--is-yellow-1{background:var(--bal-card-background-yellow-1)}.bal-card--is-yellow-2{background:var(--bal-card-background-yellow-2)}.bal-card--is-yellow-3{background:var(--bal-card-background-yellow-3)}.bal-card--has-fullheight,.bal-card--has-fullheight .bal-card-content,.bal-card--has-fullheight .bal-card-content>.is-flex{height:100%}.bal-card--has-border{border:var(--bal-card-border)}.bal-card--is-flat{-webkit-box-shadow:none;box-shadow:none}.bal-card--is-square{border-radius:var(--bal-card-square-radius)}.bal-card--is-selected{background:var(--bal-card-selected-background)}.bal-card--is-clickable{cursor:pointer;-webkit-transition:-webkit-transform .15s ease-in-out;transition:-webkit-transform .15s ease-in-out;transition:transform .15s ease-in-out;transition:transform .15s ease-in-out, -webkit-transform .15s ease-in-out}.bal-card--is-clickable:active,.bal-card--is-clickable:hover{-webkit-box-shadow:var(--bal-shadow-large);box-shadow:var(--bal-shadow-large);-webkit-transform:translate3d(0, -2px, 0);transform:translate3d(0, -2px, 0)}.bal-card>:not(bal-badge):not(bal-tag):first-child{padding-top:1rem}.bal-card>:not(bal-badge):not(bal-tag):last-child{padding-bottom:1rem}.bal-card>bal-badge+bal-card-title,.bal-card>bal-badge+bal-card-content,.bal-card>bal-tag+bal-card-title,.bal-card>bal-tag+bal-card-content,.bal-card>bal-card-title+bal-card-content,.bal-card>bal-card-subtitle+bal-card-content,.bal-card>bal-card-actions,.bal-card>bal-card-button{padding-top:1rem}.bal-card>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card bal-card-title,.bal-card bal-card-subtitle,.bal-card bal-card-content,.bal-card bal-card-actions,.bal-card bal-card-button{padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-card>:not(bal-badge):not(bal-tag):first-child{padding-top:1.5rem}.bal-card>:not(bal-badge):not(bal-tag):last-child{padding-bottom:1.5rem}.bal-card>bal-badge+bal-card-title,.bal-card>bal-badge+bal-card-content,.bal-card>bal-tag+bal-card-title,.bal-card>bal-tag+bal-card-content,.bal-card>bal-card-title+bal-card-content,.bal-card>bal-card-subtitle+bal-card-content,.bal-card>bal-card-actions,.bal-card>bal-card-button{padding-top:1.5rem}.bal-card>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card bal-card-title,.bal-card bal-card-subtitle,.bal-card bal-card-content,.bal-card bal-card-actions,.bal-card bal-card-button{padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 769px),print{.bal-card--is-small>:not(bal-badge):not(bal-tag):first-child{padding-top:1rem}.bal-card--is-small>:not(bal-badge):not(bal-tag):last-child{padding-bottom:1rem}.bal-card--is-small>bal-badge+bal-card-title,.bal-card--is-small>bal-badge+bal-card-content,.bal-card--is-small>bal-tag+bal-card-title,.bal-card--is-small>bal-tag+bal-card-content,.bal-card--is-small>bal-card-title+bal-card-content,.bal-card--is-small>bal-card-subtitle+bal-card-content,.bal-card--is-small>bal-card-actions,.bal-card--is-small>bal-card-button{padding-top:1rem}.bal-card--is-small>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card--is-small bal-card-title,.bal-card--is-small bal-card-subtitle,.bal-card--is-small bal-card-content,.bal-card--is-small bal-card-actions,.bal-card--is-small bal-card-button{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 769px),print{.bal-card--is-medium>:not(bal-badge):not(bal-tag):first-child{padding-top:1.5rem}.bal-card--is-medium>:not(bal-badge):not(bal-tag):last-child{padding-bottom:1.5rem}.bal-card--is-medium>bal-badge+bal-card-title,.bal-card--is-medium>bal-badge+bal-card-content,.bal-card--is-medium>bal-tag+bal-card-title,.bal-card--is-medium>bal-tag+bal-card-content,.bal-card--is-medium>bal-card-title+bal-card-content,.bal-card--is-medium>bal-card-subtitle+bal-card-content,.bal-card--is-medium>bal-card-actions,.bal-card--is-medium>bal-card-button{padding-top:1.5rem}.bal-card--is-medium>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card--is-medium bal-card-title,.bal-card--is-medium bal-card-subtitle,.bal-card--is-medium bal-card-content,.bal-card--is-medium bal-card-actions,.bal-card--is-medium bal-card-button{padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 1024px){.bal-card--is-medium>:not(bal-badge):not(bal-tag):first-child{padding-top:2rem}.bal-card--is-medium>:not(bal-badge):not(bal-tag):last-child{padding-bottom:2rem}.bal-card--is-medium>bal-badge+bal-card-title,.bal-card--is-medium>bal-badge+bal-card-content,.bal-card--is-medium>bal-tag+bal-card-title,.bal-card--is-medium>bal-tag+bal-card-content,.bal-card--is-medium>bal-card-title+bal-card-content,.bal-card--is-medium>bal-card-subtitle+bal-card-content,.bal-card--is-medium>bal-card-actions,.bal-card--is-medium>bal-card-button{padding-top:2rem}.bal-card--is-medium>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card--is-medium bal-card-title,.bal-card--is-medium bal-card-subtitle,.bal-card--is-medium bal-card-content,.bal-card--is-medium bal-card-actions,.bal-card--is-medium bal-card-button{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 769px),print{.bal-card--is-large>:not(bal-badge):not(bal-tag):first-child{padding-top:2rem}.bal-card--is-large>:not(bal-badge):not(bal-tag):last-child{padding-bottom:2rem}.bal-card--is-large>bal-badge+bal-card-title,.bal-card--is-large>bal-badge+bal-card-content,.bal-card--is-large>bal-tag+bal-card-title,.bal-card--is-large>bal-tag+bal-card-content,.bal-card--is-large>bal-card-title+bal-card-content,.bal-card--is-large>bal-card-subtitle+bal-card-content,.bal-card--is-large>bal-card-actions,.bal-card--is-large>bal-card-button{padding-top:2rem}.bal-card--is-large>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card--is-large bal-card-title,.bal-card--is-large bal-card-subtitle,.bal-card--is-large bal-card-content,.bal-card--is-large bal-card-actions,.bal-card--is-large bal-card-button{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1024px){.bal-card--is-large>:not(bal-badge):not(bal-tag):first-child{padding-top:4rem}.bal-card--is-large>:not(bal-badge):not(bal-tag):last-child{padding-bottom:4rem}.bal-card--is-large>bal-badge+bal-card-title,.bal-card--is-large>bal-badge+bal-card-content,.bal-card--is-large>bal-tag+bal-card-title,.bal-card--is-large>bal-tag+bal-card-content,.bal-card--is-large>bal-card-title+bal-card-content,.bal-card--is-large>bal-card-subtitle+bal-card-content,.bal-card--is-large>bal-card-actions,.bal-card--is-large>bal-card-button{padding-top:4rem}.bal-card--is-large>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card--is-large bal-card-title,.bal-card--is-large bal-card-subtitle,.bal-card--is-large bal-card-content,.bal-card--is-large bal-card-actions,.bal-card--is-large bal-card-button{padding-left:4rem;padding-right:4rem}}.bal-card>.bal-tag{position:absolute;left:1rem;top:-1rem}@media screen and (min-width: 1024px){.bal-card>.bal-tag{left:1.5rem}}.bal-card>.bal-tag--is-left{left:1rem}@media screen and (min-width: 1024px){.bal-card>.bal-tag--is-left{left:1.5rem}}.bal-card>.bal-tag--is-center{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}@media screen and (min-width: 1024px){.bal-card>.bal-tag--is-center{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}.bal-card-title{display:block;position:static}.bal-card-title .title .bal-tag-group,.bal-card-title .title .bal-button-group,.bal-card-title .bal-heading__text .bal-tag-group,.bal-card-title .bal-heading__text .bal-button-group{margin-top:.5rem}@media screen and (min-width: 769px),print{.bal-card-title .bal-heading h3{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bal-card-title .title,.bal-card-title .bal-heading__text{display:-ms-flexbox;display:flex}.bal-card-title .title .bal-tag-group,.bal-card-title .title .bal-button-group,.bal-card-title .bal-heading__text .bal-tag-group,.bal-card-title .bal-heading__text .bal-button-group{margin-top:0;margin-left:.5rem;display:-ms-inline-flexbox;display:inline-flex}.bal-card-title .title .bal-tag-group .bal-tag,.bal-card-title .bal-heading__text .bal-tag-group .bal-tag{margin-top:.125rem}.bal-card-title .title .bal-button-group,.bal-card-title .bal-heading__text .bal-button-group{-ms-flex:1;flex:1}}.bal-card-subtitle{display:block;position:static}.bal-card-content{display:block;position:static;word-break:break-word;text-align:left;font-family:var(--bal-font-family-text);font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-card-actions{display:block;position:static}.bal-card-button{display:block;position:static}.column bal-card.has-height-auto,.column bal-card.has-height-auto bal-card-content,.column bal-card.has-height-auto bal-card-content>.is-flex{height:100%}";
 const BalCardStyle0 = balCardCss;
@@ -22,7 +22,7 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
         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 = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
                 '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' })));
     }
     static get style() { return BalCardStyle0; }
 }, [4, "bal-card", {

package/components/bal-carousel-item2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { B as BEM } from './bem.js';
-import { b as waitAfterFramePaint } from './helpers.js';
+import { l as rLCP, b as waitAfterFramePaint } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 
 const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends HTMLElement {
@@ -22,6 +22,7 @@ const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends
         this.onBlur = () => {
             this.balBlur.emit();
         };
+        this.isLargestContentfulPaintDone = false;
         this.src = undefined;
         this.label = '';
         this.htmlRole = 'listitem';
@@ -34,6 +35,15 @@ const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends
         this.download = undefined;
         this.color = undefined;
     }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentDidLoad() {
+        rLCP(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
     componentWillLoad() {
         this.imageInheritAttributes = inheritAttributes(this.el, ['alt']);
     }
@@ -54,7 +64,7 @@ const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends
         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');
@@ -69,7 +79,7 @@ const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends
                 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 this; }
 }, [4, "bal-carousel-item", {
@@ -84,6 +94,7 @@ const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends
         "rel": [1],
         "download": [1],
         "color": [1],
+        "isLargestContentfulPaintDone": [32],
         "getData": [64],
         "setFocus": [64]
     }]);

package/components/bal-carousel2.js

@@ -1,9 +1,10 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { l as raf } from './helpers.js';
+import { j as debounce, l as rLCP, m as raf } from './helpers.js';
 import { B as BEM } from './bem.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
+import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$7 } from './bal-button2.js';
 import { d as defineCustomElement$6 } from './bal-card2.js';
 import { d as defineCustomElement$5 } from './bal-card-content2.js';
@@ -139,6 +140,7 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         this.carouselId = `bal-carousel-${CarouselIds++}`;
         this.carouselContainerId = `bal-carousel-${CarouselIds++}-container`;
         this.mutationObserverActive = true;
+        this.itemsChanged = debounce(() => this.itemsChangedInternal(), 100);
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -156,6 +158,7 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
                 }
             }
         };
+        this.isLargestContentfulPaintDone = false;
         this.isLastSlideVisible = true;
         this.isMobile = balBreakpoints.isMobile;
         this.language = defaultConfig.language;
@@ -177,6 +180,11 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
      * LIFECYCLE
      * ------------------------------------------------------
      */
+    componentDidLoad() {
+        rLCP(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
     /**
      * LISTENERS
      * ------------------------------------------------------
@@ -334,10 +342,12 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         }
         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) {
@@ -399,7 +409,7 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         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 this; }
     static get style() { return BalCarouselStyle0; }
@@ -417,13 +427,20 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         "controlsSticky": [4, "controls-sticky"],
         "scrollY": [4, "scroll-y"],
         "border": [4],
+        "isLargestContentfulPaintDone": [32],
         "isLastSlideVisible": [32],
         "isMobile": [32],
         "language": [32],
         "configChanged": [64],
         "previous": [64],
         "next": [64]
-    }, [[8, "touchmove", "blockVerticalScrolling"], [0, "keydown", "listenToKeyDown"]]]);
+    }]);
+__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),
@@ -448,6 +465,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),

package/components/bal-checkbox-button.js

@@ -178,7 +178,7 @@ const CheckboxButton = /*@__PURE__*/ proxyCustomElement(class CheckboxButton ext
         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 this; }
     static get watchers() { return {

package/components/bal-checkbox-group.js

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { b as areArraysEqual } from './index.esm.js';
+import { a as areArraysEqual } from './array.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { i as isDescendant, n as hasTagName } from './helpers.js';
+import { i as isDescendant, p as hasTagName } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { d as defaultBalAriaForm } from './form.js';
+import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$3 } from './bal-checkbox2.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { L as ListenToFocus } from './focus.decorator.js';
@@ -314,7 +315,7 @@ const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup exten
         "setValue": [64],
         "getOptionByValue": [64],
         "setAriaForm": [64]
-    }, [[6, "balChange", "listenOnClick"], [6, "reset", "resetHandler"], [6, "balFocus", "checkboxFocusListener"], [6, "balBlur", "checkboxBlurListener"]], {
+    }, undefined, {
         "options": ["optionChanged"],
         "invalid": ["invalidChanged"],
         "disabled": ["disabledChanged"],
@@ -348,6 +349,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;
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {