@baloise/ds-core 16.8.0 → 17.0.0

package/components/bal-shape2.js

@@ -48,11 +48,11 @@ const Shape = /*@__PURE__*/ proxyCustomElement(class Shape extends HTMLElement {
     render() {
         const block = BEM.block('shape');
         const shapes = [
-            h("g", { id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, h("g", { id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, h("path", { class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M191.6,0c2.2,0,3.4,0,4.2,0.4c0.7,0.4,1.4,1,1.7,1.7c0.4,0.9,0.4,2,0.4,4.2V66h-66V0H191.6z M0,125.6V66h66\n            v66H6.4H0 M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z" }))),
-            h("g", { id: "b949d602-8478-437e-a171-ad3f26649cb4" }, h("g", { id: "ae3574e0-2065-4681-8937-4318b8656147" }, h("path", { class: "b9f37b2d-094d-4f18-b17c-7c5acf36f9a6", d: "M132,66v66H66V66ZM191.6,0c2.24,0,3.36,0,4.22.44a4,4,0,0,1,1.74,1.74c.44.86.44,2,.44,4.22V66H132V0ZM66,0V66H0V6.4C0,4.16,0,3,.44,2.18A4,4,0,0,1,2.18.44C3,0,4.16,0,6.4,0Zm0,132v66H6.4c-2.24,0-3.36,0-4.22-.44a4,4,0,0,1-1.74-1.74C0,195,0,193.84,0,191.6V132Zm66,0v66H66V132Zm66,0v59.6c0,2.24,0,3.36-.44,4.22a4,4,0,0,1-1.74,1.74c-.86.44-2,.44-4.22.44H132V132Zm0-66v66H132V66Z" }))),
-            h("g", { id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, h("g", { id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, h("path", { class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M66,132v66H6.4c-2.2,0-3.4,0-4.2-0.4c-0.7-0.4-1.4-1-1.7-1.7C0,195,0,193.8,0,191.6V132H66z M132,132v66H66\n            v-66H132z M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z M198,66v66h-66V66" }))),
+            h("g", { key: 'd5eb6f2e514c14102db76e006ac910e10a292a2e', id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, h("g", { key: '97523387b4f6285ce5703706cfbdf91758fc2235', id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, h("path", { key: '1801ccf2b5a9198f83860a4d5eba5b2a20b75751', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M191.6,0c2.2,0,3.4,0,4.2,0.4c0.7,0.4,1.4,1,1.7,1.7c0.4,0.9,0.4,2,0.4,4.2V66h-66V0H191.6z M0,125.6V66h66\n            v66H6.4H0 M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z" }))),
+            h("g", { key: 'b3b9f265a395632430bead0a05cd93e69007c001', id: "b949d602-8478-437e-a171-ad3f26649cb4" }, h("g", { key: '7fc20715e27f56ecf346cdf9b2cb2fbca51643f3', id: "ae3574e0-2065-4681-8937-4318b8656147" }, h("path", { key: '982cdba6eae902df4fdbc4799c28f8d8ca670429', class: "b9f37b2d-094d-4f18-b17c-7c5acf36f9a6", d: "M132,66v66H66V66ZM191.6,0c2.24,0,3.36,0,4.22.44a4,4,0,0,1,1.74,1.74c.44.86.44,2,.44,4.22V66H132V0ZM66,0V66H0V6.4C0,4.16,0,3,.44,2.18A4,4,0,0,1,2.18.44C3,0,4.16,0,6.4,0Zm0,132v66H6.4c-2.24,0-3.36,0-4.22-.44a4,4,0,0,1-1.74-1.74C0,195,0,193.84,0,191.6V132Zm66,0v66H66V132Zm66,0v59.6c0,2.24,0,3.36-.44,4.22a4,4,0,0,1-1.74,1.74c-.86.44-2,.44-4.22.44H132V132Zm0-66v66H132V66Z" }))),
+            h("g", { key: '386c20e69b6d4bb30c6f7b071059c765d337bbcf', id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, h("g", { key: '04334c11d48ec0fa51dea5df6b6b42ce8aefcdde', id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, h("path", { key: '99db2d7bafde38e77b92919ed447bb3eeb93d938', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M66,132v66H6.4c-2.2,0-3.4,0-4.2-0.4c-0.7-0.4-1.4-1-1.7-1.7C0,195,0,193.8,0,191.6V132H66z M132,132v66H66\n            v-66H132z M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z M198,66v66h-66V66" }))),
         ];
-        return (h(Host, { class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, h("svg", { version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true", fill: this.getHex() }, shapes[parseInt(this.variation) - 1])));
+        return (h(Host, { key: '93f3b67cfef8a01eac7ccd0334a4315ee0c67b25', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, h("svg", { key: 'b90bc3346d6000d65aeeb8a7749d8d777886e9cf', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true", fill: this.getHex() }, shapes[parseInt(this.variation) - 1])));
     }
     get el() { return this; }
     static get style() { return BalShapeStyle0; }

package/components/bal-sheet.js

@@ -15,7 +15,7 @@ const Sheet = /*@__PURE__*/ proxyCustomElement(class Sheet extends HTMLElement {
         const container = block.element('container');
         const containerInner = container.element('inner');
         const containerModifier = this.containerSize !== '' ? `is-${this.containerSize}` : '';
-        return (h(Host, { class: Object.assign({}, block.class()) }, h("div", { class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, h("div", { class: Object.assign({}, containerInner.class()) }, h("slot", null)))));
+        return (h(Host, { key: '4e3a48a62cf91e0fb73147b7094f241006fdcf53', class: Object.assign({}, block.class()) }, h("div", { key: 'be36688a38f49a790ab29065e4770ba36e274509', class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, h("div", { key: 'e3b946a97a16b4b84f4c3c37088d9ca76b70463e', class: Object.assign({}, containerInner.class()) }, h("slot", { key: '3e821e1e7b313f02508abf5f3b6ddf18aec0f541' })))));
     }
     static get style() { return BalSheetStyle0; }
 }, [4, "bal-sheet", {

package/components/bal-snackbar.js

@@ -68,7 +68,7 @@ const Snackbar = /*@__PURE__*/ proxyCustomElement(class Snackbar extends HTMLEle
         if (this.message !== undefined && this.message !== '') {
             labelAttributes.innerHTML = this.message;
         }
-        return (h(Host, { id: this.snackbarId, class: "bal-snackbar" }, h("div", { role: "alert", class: `bal-snackbar__inner ${this.animationClass} ${this.colorType}` }, h("div", { class: "bal-snackbar__header" }, h("span", { class: "icon-text" }, h("span", { class: "icon", style: { display: this.icon ? '' : 'none' } }, h("bal-icon", { name: this.icon, color: 'primary' })), h("bal-heading", { level: "h5", space: "none", "data-testid": "bal-snackbar-heading" }, this.subject))), h("span", Object.assign({ class: "bal-snackbar__label", "data-testid": "bal-snackbar-label" }, labelAttributes), h("slot", null), h("span", { class: "hidden" })), h("bal-close", { class: "bal-snackbar__close", "data-testid": "bal-snackbar-close", onClick: () => this.close() }), this.action ? (h("div", { class: "bal-snackbar__footer" }, h("bal-button", { color: "info", href: this.href, target: this.target, onClick: () => this.onActionHandler(), "data-testid": "bal-snackbar-action" }, this.action))) : (''))));
+        return (h(Host, { key: '025208382b976a13acddf5a3adfe83335015f346', id: this.snackbarId, class: "bal-snackbar" }, h("div", { key: 'f8f1516176a0bc0f13782dc5293da759cd6d9a3d', role: "alert", class: `bal-snackbar__inner ${this.animationClass} ${this.colorType}` }, h("div", { key: '8269a2d81217b90e9765a696824135c75bb7abd5', class: "bal-snackbar__header" }, h("span", { key: '811abcabe5fb53f70d611d89baa4c21efd101b66', class: "icon-text" }, h("span", { key: 'a32da69137a594c3f759c15c17072b0bbd512c3b', class: "icon", style: { display: this.icon ? '' : 'none' } }, h("bal-icon", { key: '4e0c29abdceb6ca9c08116ca9e441747e31e3865', name: this.icon, color: 'primary' })), h("bal-heading", { key: 'b13bb1286c21cbd33d29c35f234e855da29b5202', level: "h5", space: "none", "data-testid": "bal-snackbar-heading" }, this.subject))), h("span", Object.assign({ key: '2aafbb985aea6ea5be7730ab60745226506f9db2', class: "bal-snackbar__label", "data-testid": "bal-snackbar-label" }, labelAttributes), h("slot", { key: 'f85d16eb9ad20733633fc4d8869e8fc9836044b2' }), h("span", { key: '5fb81eb312a2106f338b34823a4e3144c47e3a94', class: "hidden" })), h("bal-close", { key: '11f42cbed4f48a8bf029b3e6bae6ecf537fd121c', class: "bal-snackbar__close", "data-testid": "bal-snackbar-close", onClick: () => this.close() }), this.action ? (h("div", { class: "bal-snackbar__footer" }, h("bal-button", { color: "info", href: this.href, target: this.target, onClick: () => this.onActionHandler(), "data-testid": "bal-snackbar-action" }, this.action))) : (''))));
     }
     get element() { return this; }
     static get style() { return BalSnackbarStyle0; }

package/components/bal-spinner2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { l as raf, k as rIC } from './helpers.js';
+import { m as raf, l as rLCP } from './helpers.js';
 import { L as Logger } from './log.js';
 import { B as BEM } from './bem.js';
 import { d as defaultConfig } from './config.default.js';
@@ -59,7 +59,7 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends HTMLEleme
                     return resolve();
                 }
                 else {
-                    rIC(async () => {
+                    rLCP(async () => {
                         import(/* @vite-ignore */ './bal-spinner.animation.js')
                             .then(module => {
                             this.animationFunction = module.animate;
@@ -140,7 +140,7 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends HTMLEleme
      */
     render() {
         const block = BEM.block('spinner');
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('circle').class(this.variation === 'circle')), block.modifier('small').class(this.small)), block.modifier('animated').class(this.animated)), role: "progressbar", "aria-hidden": "true" }));
+        return (h(Host, { key: '4e0c8e497d846873ca310d73be3ec92f9fe1a4d9', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('circle').class(this.variation === 'circle')), block.modifier('small').class(this.small)), block.modifier('animated').class(this.animated)), role: "progressbar", "aria-hidden": "true" }));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-stack2.js

@@ -50,7 +50,7 @@ const Stack = /*@__PURE__*/ proxyCustomElement(class Stack extends HTMLElement {
         if (alignment) {
             alignValue = this.alignment.split(' ').join('-');
         }
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`use-wrap`).class(useWrap)), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`space-row-${this.spaceRow}`).class(spaceRow)), block.modifier(`space-row-${this.spaceColumn}`).class(spaceColumn)), block.modifier(`px-${this.px}`).class(px)), block.modifier(`py-${this.py}`).class(py)), block.modifier(`fit-content`).class(fitContent)) }, h("slot", null)));
+        return (h(Host, { key: '536a3cf3f4979288a0035ef0cdc966c4d390ff60', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`use-wrap`).class(useWrap)), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`space-row-${this.spaceRow}`).class(spaceRow)), block.modifier(`space-row-${this.spaceColumn}`).class(spaceColumn)), block.modifier(`px-${this.px}`).class(px)), block.modifier(`py-${this.py}`).class(py)), block.modifier(`fit-content`).class(fitContent)) }, h("slot", { key: 'd1101bb18f49fb392e3ef7b1949f5ce5d797a204' })));
     }
     static get style() { return BalStackStyle0; }
 }, [4, "bal-stack", {

package/components/bal-stage-back-link.js

@@ -12,10 +12,10 @@ const StageBackLink = /*@__PURE__*/ proxyCustomElement(class StageBackLink exten
     }
     render() {
         const block = BEM.block('stage-back-link');
-        return (h(Host, { class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { class: {
+        return (h(Host, { key: 'bc5906c288b5be99aba87a5c8b24773f8e980fe5', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: 'd3ee0d9c434e58bcfbf6b70355dfd5b96b5a0d4d', class: {
                 'link': true,
                 'is-inverted': this.inverted,
-            }, href: this.href }, h("bal-icon", { class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", null))));
+            }, href: this.href }, h("bal-icon", { key: '9ea9ce3b98138878573dd43f43e174da381a5cf2', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: '95ad39a717f47a0d02940a6b6f609ae90226cd76' }))));
     }
     get el() { return this; }
 }, [4, "bal-stage-back-link", {

package/components/bal-stage-body.js

@@ -8,7 +8,7 @@ const StageBody = /*@__PURE__*/ proxyCustomElement(class StageBody extends HTMLE
     }
     render() {
         const block = BEM.block('stage-body');
-        return (h(Host, { class: Object.assign({}, block.class()) }, h("slot", null)));
+        return (h(Host, { key: '8d78c9777215c84373e246ae0495512137620d0c', class: Object.assign({}, block.class()) }, h("slot", { key: 'e866a1e129ad6c87567018a3538e526cc432bdcc' })));
     }
     get el() { return this; }
 }, [4, "bal-stage-body"]);

package/components/bal-stage-foot.js

@@ -6,7 +6,7 @@ const StageFoot = /*@__PURE__*/ proxyCustomElement(class StageFoot extends HTMLE
         this.__registerHost();
     }
     render() {
-        return (h(Host, { class: "hero-foot" }, h("slot", null)));
+        return (h(Host, { key: '77f405fb5a84be341f5709ea9451fd5b01eae1a5', class: "hero-foot" }, h("slot", { key: '7b93751fe0fd796422cdf0d669404bf22f1312c8' })));
     }
     get el() { return this; }
 }, [4, "bal-stage-foot"]);

package/components/bal-stage-head.js

@@ -6,7 +6,7 @@ const StageHead = /*@__PURE__*/ proxyCustomElement(class StageHead extends HTMLE
         this.__registerHost();
     }
     render() {
-        return (h(Host, { class: "hero-head" }, h("slot", null)));
+        return (h(Host, { key: '1d3ba006d2d6aafe5795cdb2f59d9cb02822c927', class: "hero-head" }, h("slot", { key: '2c24fa40d9505b5b7b673d99d7b831161372e35b' })));
     }
     get el() { return this; }
 }, [4, "bal-stage-head"]);

package/components/bal-stage-image.js

@@ -1,26 +1,35 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { B as BEM } from './bem.js';
 import { i as inheritAttributes } from './attributes.js';
+import { l as rLCP } from './helpers.js';
 
 const StageImage = /*@__PURE__*/ proxyCustomElement(class StageImage extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.imageInheritAttributes = {};
+        this.isLargestContentfulPaintDone = false;
         this.srcSet = undefined;
         this.fallback = undefined;
     }
+    componentDidLoad() {
+        rLCP(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
     componentWillLoad() {
         this.imageInheritAttributes = inheritAttributes(this.el, ['alt']);
     }
     render() {
         const block = BEM.block('stage-image');
-        return (h(Host, { class: Object.assign({}, block.class()) }, h("img", Object.assign({ loading: "lazy", src: this.fallback ? this.fallback : this.srcSet.split(',')[0], srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))));
+        const imageSrc = this.fallback ? this.fallback : this.srcSet.split(',')[0];
+        return (h(Host, { key: '5e50cf626868a688afd1ae52bc4d3bbee8985e6f', class: Object.assign({}, block.class()) }, this.isLargestContentfulPaintDone ? (h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
     }
     get el() { return this; }
 }, [0, "bal-stage-image", {
         "srcSet": [1, "src-set"],
-        "fallback": [1]
+        "fallback": [1],
+        "isLargestContentfulPaintDone": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/bal-stage.js

@@ -48,7 +48,7 @@ const Stage = /*@__PURE__*/ proxyCustomElement(class Stage extends HTMLElement {
     render() {
         const block = BEM.block('stage');
         const element = BEM.block('stage-content');
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.size === '' ? 'medium' : this.size}`).class()), block.modifier(`is-${this.color}`).class(!!this.color)), block.modifier('has-shape').class(!!this.shape)), style: { '--bal-stage-container-width': this.getContainerWidth() } }, h("section", { class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, h("slot", null), this.shape && (h("div", { class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, h("bal-shape", { color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
+        return (h(Host, { key: 'e24550c75ccbc228367fcfec8a24f1cc55101fc8', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.size === '' ? 'medium' : this.size}`).class()), block.modifier(`is-${this.color}`).class(!!this.color)), block.modifier('has-shape').class(!!this.shape)), style: { '--bal-stage-container-width': this.getContainerWidth() } }, h("section", { key: 'd925080116d60d4891ac4e141e3d6fa68338aaa8', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, h("slot", { key: 'f4d2eb4d16600695f336b076c07518d553a93cdf' }), this.shape && (h("div", { key: 'cf059b309141555194945d62124437a3d90145f0', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, h("bal-shape", { key: '99b25f746ad8858c885b6bf15df6246492b26b84', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
     }
     static get style() { return BalStageStyle0; }
 }, [4, "bal-stage", {

package/components/bal-step-item.js

@@ -52,10 +52,10 @@ const StepItem = /*@__PURE__*/ proxyCustomElement(class StepItem extends HTMLEle
         };
     }
     render() {
-        return (h(Host, { role: "tabpanel", class: {
+        return (h(Host, { key: '8ee5cc145653a031dd60e10cd8e15a5cea413ded', role: "tabpanel", class: {
                 'bal-step-item': true,
                 'bal-step-item--active': this.isActive,
-            } }, h("slot", null)));
+            } }, h("slot", { key: 'e424db22122910323793ae2b93c4dd8dcf9f2c31' })));
     }
     get el() { return this; }
 }, [4, "bal-step-item", {

package/components/bal-steps.js

@@ -1,9 +1,9 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { m as debounceEvent } from './helpers.js';
+import { n as debounceEvent } from './helpers.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.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 { n as newBalStepOption } from './bal-step.util.js';
 import { d as defineCustomElement$a } from './bal-button2.js';

package/components/bal-tab-item.js

@@ -60,10 +60,10 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
     render() {
         const hasPanel = !this.noPanel;
         const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (h(Host, { id: this.tabPanelID, class: {
+        return (h(Host, { key: '403ef9c6f4195a72139922232b759847a698a5d8', id: this.tabPanelID, class: {
                 'bal-tab-item': true,
                 'bal-tab-item--active': this.isActive,
-            }, role: hasPanel ? 'tabpanel' : undefined, "aria-label": hasPanel ? this.label : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", null)));
+            }, role: hasPanel ? 'tabpanel' : undefined, "aria-label": hasPanel ? this.label : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: 'ff4a802972dadebf7240c41c03a233cc17dba24c' })));
     }
     get el() { return this; }
 }, [4, "bal-tab-item", {

package/components/bal-table.js

@@ -14,7 +14,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
         const block = BEM.block('table');
         const fullwidthClass = 'is-fullwidth';
         const hasFullwidth = this.expanded;
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", null)));
+        return (h(Host, { key: '1059612d6670d6a8c333a6903dfa1ffff7150964', class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", { key: '22d1e47908682547a1d22d17348bfb66dfd81e7a' })));
     }
     get el() { return this; }
     static get style() { return BalTableStyle0; }

package/components/bal-tabs2.js

@@ -1,13 +1,14 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, 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 { l as raf, e as deepReady, t as transitionEndAsync, m as debounceEvent, o as hasParent, p as isChildOfEventTarget, i as isDescendant, b as waitAfterFramePaint } from './helpers.js';
+import { a as areArraysEqual } from './array.js';
+import { m as raf, f as deepReady, t as transitionEndAsync, j as debounce, n as debounceEvent, q as hasParent, l as rLCP, u as isChildOfEventTarget, i as isDescendant, b as waitAfterFramePaint } from './helpers.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { n as newBalTabOption } from './bal-tab.util.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { b as balBrowser } from './browser.js';
 import { g as getComputedPadding, d as defineCustomElement$d } from './bal-carousel2.js';
+import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$h } from './bal-badge2.js';
 import { d as defineCustomElement$g } from './bal-button2.js';
 import { d as defineCustomElement$f } from './bal-card2.js';
@@ -355,16 +356,19 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
          * EVENT BINDING
          * ------------------------------------------------------
          */
-        this.onOptionChange = async () => {
-            try {
-                const options = await this.getOptions();
-                this.updateStore(options);
-                this.setActiveItem();
-                this.setActiveContent();
-                this.animateLine();
-            }
-            catch (e) {
-                console.warn('[WARN] - Could not read tab options');
+        this.onOptionChange = debounce(() => this.onOptionChangeInternal(), 100);
+        this.onOptionChangeInternal = async () => {
+            if (this.isLargestContentfulPaintDone) {
+                try {
+                    const options = await this.getOptions();
+                    this.updateStore(options);
+                    this.setActiveItem();
+                    this.setActiveContent();
+                    this.animateLine();
+                }
+                catch (e) {
+                    console.warn('[WARN] - Could not read tab options');
+                }
             }
         };
         this.onSelectTab = async (ev, tab) => {
@@ -395,6 +399,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         this.isNavbarOpen = false;
         this.inNavbar = false;
         this.inNavbarLight = false;
+        this.isLargestContentfulPaintDone = false;
         this.isMobile = balBreakpoints.isMobile;
         this.isTablet = balBreakpoints.isTablet;
         this.store = [];
@@ -464,7 +469,10 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         }
     }
     componentDidLoad() {
-        this.onOptionChange();
+        rLCP(() => {
+            this.onOptionChange();
+            this.isLargestContentfulPaintDone = true;
+        });
     }
     mutationListener() {
         this.onOptionChange();
@@ -681,20 +689,20 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         const isTouch = isMobile || isTablet;
         const isInverted = (this.inNavbar && !isTouch && !this.inNavbarLight) || (!this.inNavbar && this.inverted);
         const isVertical = this.isVertical();
-        const hasCarousel = !isVertical && this.overflow && !this.expanded;
-        const isSelect = isMobile && this.selectOnMobile;
+        const hasCarousel = this.isLargestContentfulPaintDone && !isVertical && this.overflow && !this.expanded;
+        const isSelect = this.isLargestContentfulPaintDone && isMobile && this.selectOnMobile;
         const tabs = this.store.map(tab => (Object.assign(Object.assign({}, tab), { active: tab.value === this.value })));
         const expanded = this.accordionState === 4 /* AccordionState.Expanded */ || this.accordionState === 8 /* AccordionState.Expanding */;
         const contentPart = expanded ? 'content expanded' : 'content';
         const valueExists = this.value !== undefined && !!this.store.find(o => o.value === this.value);
         const isLinkList = !this.isTabList;
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": this.store
+        return (h(Host, { key: '5cf2cfcf105000a24aabdb6bec167155bfe64d91', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": this.store
                 .filter(t => this.isTabActive(t))
                 .map(t => t.value)
                 .join(','), "data-label": this.store
                 .filter(t => this.isTabActive(t))
                 .map(t => t.label)
-                .join(',') }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, inverted: isInverted, animated: this.animated, context: this.context, border: this.border, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, hasCarousel: hasCarousel, iconPosition: this.iconPosition, verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab })), h("div", { part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, h("div", { id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", null)))));
+                .join(',') }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, inverted: isInverted, animated: this.animated, context: this.context, border: this.border, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, hasCarousel: hasCarousel, iconPosition: this.iconPosition, verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab })), h("div", { key: '9b07748ace351ce78cd552229f2694e349592d3d', part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, h("div", { key: '099b85a0205426e163c8b43320cb007c7ea1afc9', id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '6262221556c0f514b4c42138796b7d92097887d0' })))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -727,6 +735,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         "isNavbarOpen": [32],
         "inNavbar": [32],
         "inNavbarLight": [32],
+        "isLargestContentfulPaintDone": [32],
         "isMobile": [32],
         "isTablet": [32],
         "store": [32],
@@ -736,7 +745,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         "getOptionByValue": [64],
         "renderLine": [64],
         "closeAccordion": [64]
-    }, [[8, "balWillAnimate", "listenToWillAnimate"], [8, "balDidAnimate", "listenToDidAnimate"], [0, "keydown", "listenToKeyDown"]], {
+    }, undefined, {
         "options": ["optionChanged"],
         "debounce": ["debounceChanged"],
         "value": ["valueChanged"]
@@ -765,6 +774,24 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], Tabs.prototype, "resizeListener", null);
+__decorate([
+    ListenTo('balWillAnimate', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Tabs.prototype, "listenToWillAnimate", null);
+__decorate([
+    ListenTo('balDidAnimate', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Tabs.prototype, "listenToDidAnimate", null);
+__decorate([
+    ListenTo('keydown'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], Tabs.prototype, "listenToKeyDown", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

package/components/bal-tag-group.js

@@ -6,7 +6,7 @@ const TagGroup = /*@__PURE__*/ proxyCustomElement(class TagGroup extends HTMLEle
         this.__registerHost();
     }
     render() {
-        return (h(Host, { class: "bal-tag-group" }, h("slot", null)));
+        return (h(Host, { key: 'd1f82919080730fd2555d25e4e5adda071f0c6a2', class: "bal-tag-group" }, h("slot", { key: '2f0ce67b5870beb486f86341214f5f32f234ae47' })));
     }
 }, [4, "bal-tag-group"]);
 function defineCustomElement$1() {

package/components/bal-tag2.js

@@ -38,7 +38,7 @@ const Tag = /*@__PURE__*/ proxyCustomElement(class Tag extends HTMLElement {
         const hasDisabled = this.disabled;
         const positionClass = `is-${this.position}`;
         const hasPosition = this.position !== undefined;
-        return (h(Host, Object.assign({ "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(sizeClass).class(hasSize)), block.modifier(colorClass).class(hasColor)), block.modifier(disabledClass).class(hasDisabled)), block.modifier(positionClass).class(hasPosition)), block.modifier('is-invalid').class(this.invalid)) }, this.inheritedAttributes), h("span", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, elLabel.class()), elLabel.modifier(sizeClass).class(hasSize)), elLabel.modifier(colorClass).class(hasColor)), elLabel.modifier(disabledClass).class(hasDisabled)), elLabel.modifier('is-invalid').class(this.invalid)), "data-testid": "bal-tag-label" }, h("slot", null)), h("bal-close", Object.assign({ class: Object.assign({}, block.element('close').class()), style: {
+        return (h(Host, Object.assign({ key: 'fcb28709fa01ca31a2ae98d59bacfb356e28fd0c', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(sizeClass).class(hasSize)), block.modifier(colorClass).class(hasColor)), block.modifier(disabledClass).class(hasDisabled)), block.modifier(positionClass).class(hasPosition)), block.modifier('is-invalid').class(this.invalid)) }, this.inheritedAttributes), h("span", { key: 'e82b7f7b34add1277872fc105a327f50b305b2f8', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, elLabel.class()), elLabel.modifier(sizeClass).class(hasSize)), elLabel.modifier(colorClass).class(hasColor)), elLabel.modifier(disabledClass).class(hasDisabled)), elLabel.modifier('is-invalid').class(this.invalid)), "data-testid": "bal-tag-label" }, h("slot", { key: '9a29590870327840f6bbf0c9bedebbcb1be51ba8' })), h("bal-close", Object.assign({ key: 'a236adc61866d6ba1080780813b75806c93ec657', class: Object.assign({}, block.element('close').class()), style: {
                 display: this.closable && !this.disabled ? 'flex' : 'none',
             }, size: this.size === 'small' ? 'small' : '', inverted: (['blue', 'primary', 'info', 'success', 'warning', 'danger', 'red', 'purple', 'yellow', 'green'].includes(this.color) &&
                 !this.light) ||

package/components/bal-text2.js

@@ -56,10 +56,10 @@ const Text = /*@__PURE__*/ proxyCustomElement(class Text extends HTMLElement {
         const Text = this.inline ? 'span' : 'p';
         const color = this.parseColor();
         const block = BEM.block('text');
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
+        return (h(Host, { key: '54ea51b4d2db0793307072aa6dd3bd5969f4e1d0', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { key: 'c894a460f369a284910f224b430dd7fc4b9b5123', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
                 .element('text')
                 .modifier(`size-${this.size}`)
-                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", null))));
+                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: '94c09c5d469712da76d9ca0c4a80222c3e76f8a3' }))));
     }
     static get style() { return BalTextStyle0; }
 }, [4, "bal-text", {

package/components/bal-textarea.js

@@ -1,9 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { g as getInputTarget, b as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, j as inputHandleClick, c as inputHandleHostClick, d as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
-import { m as debounceEvent } from './helpers.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { g as getInputTarget, c as inputHandleFocus, d as inputHandleBlur, e as inputHandleChange, f as inputHandleClick, b as inputHandleHostClick, j as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
+import { n as debounceEvent } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
 import { d as defaultBalAriaForm } from './form.js';
+import { L as ListenTo } from './listen.js';
 
 const balTextareaCss = ".bal-textarea{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:relative;-ms-flex:1;flex:1;width:100%;font-family:var(--bal-font-family-text);white-space:pre-wrap;-webkit-box-sizing:border-box;box-sizing:border-box}.bal-textarea__native{margin:0;display:block;width:100%;max-width:100%;max-height:100%;outline:none;background:rgba(0,0,0,0);-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:calc(.75em - 2px)}.bal-textarea__native::-webkit-input-placeholder{padding:0;font-family:inherit}.bal-textarea__native::-moz-placeholder{padding:0;font-family:inherit}.bal-textarea__native:-ms-input-placeholder{padding:0;font-family:inherit}.bal-textarea__native::-ms-input-placeholder{padding:0;font-family:inherit}.bal-textarea__native::placeholder{padding:0;font-family:inherit}";
 const BalTextareaStyle0 = balTextareaCss;
@@ -116,7 +118,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
         const value = this.getValue();
         const block = BEM.block('textarea');
         const elNative = block.element('native');
-        return (h(Host, { onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", null))));
+        return (h(Host, { key: 'ad09331d104fcf7279b9cc2c403fa4d032b47c32', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '00278cc7b951ca19e01dd9157506185782eb8ee4', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: '70ac340a5c61d29a355e115bdec0635eca4367dc' }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -148,9 +150,21 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
         "setBlur": [64],
         "getInputElement": [64],
         "setAriaForm": [64]
-    }, [[6, "click", "listenOnClick"], [6, "reset", "resetHandler"]], {
+    }, undefined, {
         "debounce": ["debounceChanged"]
     }]);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Textarea.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Textarea.prototype, "resetHandler", null);
 let TextareaIds = 0;
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/bal-time-input.js

@@ -1,20 +1,21 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { l as lodash_isnil } from './index2.js';
-import { g as getInputTarget, b as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, s as stopEventBubbling, d as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
-import { m as debounceEvent } from './helpers.js';
+import { l as lodash_isnil } from './index3.js';
+import { g as getInputTarget, c as inputHandleFocus, d as inputHandleBlur, e as inputHandleChange, s as stopEventBubbling, j as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
+import { n as debounceEvent } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 import { i as isCtrlOrCommandKey, N as NUMBER_KEYS, A as ACTION_KEYS } from './keys.constant.js';
 import { B as BEM } from './bem.js';
 import { i as i18nBalTimeInput } from './bal-time-input.i18n.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { L as Logger } from './log.js';
+import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$3 } from './bal-icon2.js';
 import { d as defineCustomElement$2 } from './bal-input-group2.js';
 import { d as defaultConfig } from './config.default.js';
 import { L as ListenToConfig } from './config.decorator.js';
 
-const balTimeInputCss = ":root{--bal-time-input-native-placeholder-background-before:var(--bal-color-white);--bal-time-input-native-placeholder-background-disabled-before:var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-danger-before:var(--bal-color-danger-1);--bal-time-input-native-placeholder-background-disabled-danger-before:var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-hover-before:var(--bal-color-grey-1);--bal-time-input-native-text-color:var(--bal-color-primary-3);--bal-time-input-native-text-color-focus-value:var(--bal-color-primary);--bal-time-input-native-text-color-disabled:var(--bal-color-grey-5);--bal-time-input-native-text-color-disabled-value:var(--bal-color-grey-4);--bal-time-input-native-placeholder-text-color-disabled-before:var(--bal-color-grey-5);--bal-time-input-native-placeholder-text-color-before:var(--bal-color-primary-3)}.bal-time-input{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:relative;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;width:100%;padding:0;font-family:var(--bal-font-family-text)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper{display:flex}.bal-time-input__native::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-clear-button{display:none}.bal-time-input__native::-webkit-inner-spin-button{display:none}.bal-time-input__native::-webkit-calendar-picker-indicator{display:none;background:none}.bal-time-input__native::-webkit-datetime-edit-ampm-field{display:none}.bal-time-input__native.has-focus::-webkit-datetime-edit-text,.bal-time-input__native.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.has-focus::-webkit-datetime-edit-hour-field,.bal-time-input__native.has-value::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.has-focus::-webkit-datetime-edit-minute-field,.bal-time-input__native.has-value::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.show-placeholder.is-disabled::before{color:var(--bal-time-input-native-placeholder-text-color-disabled-before);background:var(--bal-time-input-native-placeholder-background-disabled-before)}.bal-time-input__native.show-placeholder.is-danger::before{background:var(--bal-time-input-native-placeholder-background-danger-before)}.bal-time-input__native.show-placeholder.is-disabled.is-danger::before{background:var(--bal-time-input-native-placeholder-background-disabled-danger-before)}.bal-time-input__native.show-placeholder:hover::before{background:var(--bal-time-input-native-placeholder-background-hover-before)}.bal-time-input__native.show-placeholder::before{color:var(--bal-time-input-native-placeholder-text-color-before);content:attr(placeholder);pointer-events:none;position:absolute;background:var(--bal-time-input-native-placeholder-background-before)}";
+const balTimeInputCss = ":root{--bal-time-input-native-placeholder-background-before:var(--bal-color-white);--bal-time-input-native-placeholder-background-disabled-before:var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-danger-before:var(--bal-color-danger-1);--bal-time-input-native-placeholder-background-disabled-danger-before:var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-hover-before:var(--bal-color-grey-1);--bal-time-input-native-text-color:var(--bal-color-primary-3);--bal-time-input-native-text-color-focus-value:var(--bal-color-primary);--bal-time-input-native-text-color-disabled:var(--bal-color-grey-5);--bal-time-input-native-text-color-disabled-value:var(--bal-color-grey-4);--bal-time-input-native-placeholder-text-color-disabled-before:var(--bal-color-grey-5);--bal-time-input-native-placeholder-text-color-before:var(--bal-color-primary-3)}.bal-time-input{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:relative;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;width:100%;padding:0;font-family:var(--bal-font-family-text)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper{display:flex}.bal-time-input__native::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-clear-button{display:none}.bal-time-input__native::-webkit-inner-spin-button{display:none}.bal-time-input__native::-webkit-calendar-picker-indicator{display:none;background:none}.bal-time-input__native.has-focus::-webkit-datetime-edit-text,.bal-time-input__native.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.has-focus::-webkit-datetime-edit-hour-field,.bal-time-input__native.has-value::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.has-focus::-webkit-datetime-edit-minute-field,.bal-time-input__native.has-value::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.is-disabled.has-value::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native.show-placeholder.is-disabled::before{color:var(--bal-time-input-native-placeholder-text-color-disabled-before);background:var(--bal-time-input-native-placeholder-background-disabled-before)}.bal-time-input__native.show-placeholder.is-danger::before{background:var(--bal-time-input-native-placeholder-background-danger-before)}.bal-time-input__native.show-placeholder.is-disabled.is-danger::before{background:var(--bal-time-input-native-placeholder-background-disabled-danger-before)}.bal-time-input__native.show-placeholder:hover::before{background:var(--bal-time-input-native-placeholder-background-hover-before)}.bal-time-input__native.show-placeholder::before{color:var(--bal-time-input-native-placeholder-text-color-before);content:attr(placeholder);pointer-events:none;position:absolute;background:var(--bal-time-input-native-placeholder-background-before)}";
 const BalTimeInputStyle0 = balTimeInputCss;
 
 const TimeInput = /*@__PURE__*/ proxyCustomElement(class TimeInput extends HTMLElement {
@@ -132,7 +133,7 @@ const TimeInput = /*@__PURE__*/ proxyCustomElement(class TimeInput extends HTMLE
         this.ariaForm = Object.assign({}, ariaForm);
     }
     getAllowedKeys() {
-        return [...NUMBER_KEYS, ...ACTION_KEYS, ':'];
+        return [...NUMBER_KEYS, ...ACTION_KEYS, ':', 'A', 'M', 'P'];
     }
     getRawValue() {
         const value = (this.value || '').toString();
@@ -145,7 +146,7 @@ const TimeInput = /*@__PURE__*/ proxyCustomElement(class TimeInput extends HTMLE
         const value = this.focused ? this.getRawValue() : this.getFormattedValue();
         const block = BEM.block('time-input');
         const native = block.element('native');
-        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("bal-input-group", { disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
+        return (h(Host, { key: '67ec2306c4cf0a9e6b5cee8af80f930e5dc4ee33', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '1873f5acc2647eb4b4d4f2634693caafadb98341', disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ key: '846d18705dd58f61a418cb4c25fab603e3c9264d', type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { key: 'd34d154f6bafaa5fe925a9333796e5c2b1c41dfc', "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -170,7 +171,7 @@ const TimeInput = /*@__PURE__*/ proxyCustomElement(class TimeInput extends HTMLE
         "setBlur": [64],
         "getInputElement": [64],
         "setAriaForm": [64]
-    }, [[6, "click", "listenOnClick"], [6, "reset", "resetHandler"]], {
+    }, undefined, {
         "debounce": ["debounceChanged"]
     }]);
 __decorate([
@@ -179,6 +180,18 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], TimeInput.prototype, "createLogger", null);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], TimeInput.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], TimeInput.prototype, "resetHandler", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

package/components/bal-toast.js

@@ -43,7 +43,7 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
         return `bal-toast__inner--is-${this.color}`;
     }
     render() {
-        return (h(Host, { id: this.toastId, class: "bal-toast" }, h("div", { role: "alert", onClick: () => this.close(), class: `bal-toast__inner ${this.colorType}` }, h("span", { class: "bal-toast__label", innerHTML: this.message, "data-testid": "bal-toast-label" }, h("slot", null)), h("bal-close", { class: "bal-toast__close", inverted: false, "data-testid": "bal-toast-close" }))));
+        return (h(Host, { key: '022b79aa15606a15256ff3a4a8ea327cd3d7badf', id: this.toastId, class: "bal-toast" }, h("div", { key: '13e4f7084f3d27ecec0729a229c4ced273b781d7', role: "alert", onClick: () => this.close(), class: `bal-toast__inner ${this.colorType}` }, h("span", { key: 'ba07ca16899d4af96dbc8936e997a424b3c1b584', class: "bal-toast__label", innerHTML: this.message, "data-testid": "bal-toast-label" }, h("slot", { key: '059e7c7095f24eeefa2629e7fc168d1eda116a7c' })), h("bal-close", { key: '3efd56336ee10d4afbdf118c091ec9f306603450', class: "bal-toast__close", inverted: false, "data-testid": "bal-toast-close" }))));
     }
     get element() { return this; }
     static get style() { return BalToastStyle0; }