@baloise/ds-core 16.8.0 → 17.0.0

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

@@ -2,19 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const index$1 = require('./index-e6a233be.js');
-const helpers = require('./helpers-2a8c8333.js');
-const index_esm = require('./index.esm-54a3d84e.js');
+const helpers = require('./helpers-393c2183.js');
+const array = require('./array-ae164ca3.js');
 const utils = require('./utils-9ea175af.js');
-const formInput = require('./form-input-b61eb894.js');
+const formInput = require('./form-input-35653e8f.js');
 const bem = require('./bem-81bc6a2d.js');
 const log = require('./log-33398c2a.js');
 const form = require('./form-2279fb2f.js');
+const listen = require('./listen-b42a4134.js');
+const keyboard_helpers = require('./keyboard.helpers-3c105b0c.js');
 require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
+require('./index-3b7f8988.js');
 require('./_commonjsHelpers-68cdf74f.js');
 
 const watchForOptions = (containerEl, tagName, onChange) => {
@@ -141,7 +144,7 @@ const Select = class {
             }
         };
         this.handleKeyPress = async (ev) => {
-            if (!this.isPopoverOpen && index_esm.isSpaceKey(ev)) {
+            if (!this.isPopoverOpen && keyboard_helpers.isSpaceKey(ev)) {
                 utils.preventDefault(ev);
                 await this.open();
             }
@@ -205,7 +208,7 @@ const Select = class {
         this.syncRawValue(false);
     }
     updateRawValue(newValue, isHuman = true) {
-        if (!index_esm.areArraysEqual(newValue, this.rawValue || [])) {
+        if (!array.areArraysEqual(newValue, this.rawValue || [])) {
             this.rawValue = [...newValue];
             this.syncNativeInput();
             if (this.didInit && isHuman === true) {
@@ -294,19 +297,19 @@ const Select = class {
     }
     async handleKeyDown(ev) {
         if (this.isPopoverOpen) {
-            if (index_esm.isArrowDownKey(ev) || index_esm.isArrowUpKey(ev)) {
+            if (keyboard_helpers.isArrowDownKey(ev) || keyboard_helpers.isArrowUpKey(ev)) {
                 utils.preventDefault(ev);
                 this.navigateWithArrowKey(ev);
                 this.updateFocus();
             }
-            if (index_esm.isEnterKey(ev)) {
+            if (keyboard_helpers.isEnterKey(ev)) {
                 utils.preventDefault(ev);
                 this.selectedFocusedOption();
             }
-            if (index_esm.isEscapeKey(ev)) {
+            if (keyboard_helpers.isEscapeKey(ev)) {
                 this.cancel();
             }
-            if (index_esm.isBackspaceKey(ev) && this.typeahead && this.multiple) {
+            if (keyboard_helpers.isBackspaceKey(ev) && this.typeahead && this.multiple) {
                 if (this.inputElement.value === '' && utils.length(this.rawValue) > 0) {
                     const valuesArray = utils.getValues(this.rawValue);
                     this.removeValue(valuesArray[utils.length(this.rawValue) - 1]);
@@ -315,13 +318,13 @@ const Select = class {
             if (!this.typeahead && ev.key.length === 1) {
                 this.focusOptionByLabel(ev.key);
             }
-            if (index_esm.isSpaceKey(ev) && !this.typeahead) {
+            if (keyboard_helpers.isSpaceKey(ev) && !this.typeahead) {
                 utils.preventDefault(ev);
             }
         }
         else {
             if (this.hasFocus) {
-                if (index_esm.isArrowDownKey(ev) || index_esm.isArrowUpKey(ev)) {
+                if (keyboard_helpers.isArrowDownKey(ev) || keyboard_helpers.isArrowUpKey(ev)) {
                     utils.preventDefault(ev);
                     await this.open();
                 }
@@ -540,11 +543,11 @@ const Select = class {
         }
     }
     navigateWithArrowKey(ev) {
-        if (index_esm.isArrowDownKey(ev)) {
+        if (keyboard_helpers.isArrowDownKey(ev)) {
             this.focusIndex = this.focusIndex + 1;
         }
         else {
-            if (index_esm.isArrowUpKey(ev)) {
+            if (keyboard_helpers.isArrowUpKey(ev)) {
                 this.focusIndex = this.focusIndex - 1;
             }
         }
@@ -718,7 +721,7 @@ const Select = class {
      */
     render() {
         var _a;
-        const Chip = (props) => (index.h("bal-tag", { size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, utils.findLabelByValue(this.options, props.value) || props.value));
+        const Chip = (props) => (index.h("bal-tag", { key: '4b1cc586f9d9b2a7b08a01b35e60a1b1a9f595cd', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, utils.findLabelByValue(this.options, props.value) || props.value));
         const valuesArray = utils.getValues(this.rawValue);
         const block = bem.BEM.block('select');
         const nativeEl = block.element('native');
@@ -732,19 +735,19 @@ const Select = class {
         const optionContentEl = optionEl.element('content');
         const optionContentCheckboxEl = optionContentEl.element('checkbox');
         const optionContentLabelEl = optionContentEl.element('label');
-        return (index.h(index.Host, { role: "listbox", onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => utils.findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, index.h("select", { class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (index.h("option", { key: value, value: value, selected: true }, value)))), index.h("bal-popover", { onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, index.h("div", { "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, index.h("div", { class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
+        return (index.h(index.Host, { key: '0a96668b7026a0727bb790bd8a832586fac60198', role: "listbox", onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => utils.findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, index.h("select", { key: '171e653ec3b49ef15466a0f6c337a61573ddc86b', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (index.h("option", { key: value, value: value, selected: true }, value)))), index.h("bal-popover", { key: '570c0f670158386819df181079f49d0d534da6c7', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, index.h("div", { key: '121bf963a166d7523954b199bb776accaa84ae7a', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, index.h("div", { key: '0bf2ba2f0ef23aaa222b547df175c5dfc4b3d6c6', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
                 .modifier('clickable')
                 .class(!this.isPopoverOpen && !this.disabled && !this.readonly)), onClick: this.handleInputClick, ref: el => (this.selectionEl = el) }, valuesArray
             .filter(_ => this.multiple)
-            .map((value) => (index.h(Chip, { value: value }))), index.h("input", { type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), 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, "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (index.h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
+            .map((value) => (index.h(Chip, { value: value }))), index.h("input", { key: '45872c26a2889e0dd79851bc8ea6854d9f9fe33e', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), 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, "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (index.h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
                 ? 'grey-light'
                 : this.inverted
                     ? 'white'
                     : this.invalid
                         ? 'danger'
-                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), index.h("bal-popover-content", { class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index$1) => (index.h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
+                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), index.h("bal-popover-content", { key: 'dd84e4a49c36226341c8a064988c8cf4c9b5e828', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index$1) => (index.h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
                 .modifier('selected')
-                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index$1)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index$1), onClick: () => this.optionSelected(option) }, index.h("div", { class: Object.assign({}, optionContentEl.class()) }, index.h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, index.h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: utils.preventDefault })), index.h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), index.h("div", { class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
+                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index$1)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index$1), onClick: () => this.optionSelected(option) }, index.h("div", { class: Object.assign({}, optionContentEl.class()) }, index.h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, index.h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: utils.preventDefault })), index.h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), index.h("div", { key: '824accbd7d97809ed3b91403a959528efaf448ce', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
                 .modifier('hidden')
                 .class(this.noDataLabel === undefined || this.hasOptions() || !this.typeahead || this.selectionOptional)) }, this.noDataLabel)))));
     }
@@ -759,6 +762,24 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], Select.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    listen.ListenTo('click', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Select.prototype, "listenOnClick", null);
+tslib_es6.__decorate([
+    listen.ListenTo('reset', { capture: true, target: 'document' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Select.prototype, "resetHandler", null);
+tslib_es6.__decorate([
+    listen.ListenTo('keydown', { target: 'window' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [KeyboardEvent]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], Select.prototype, "handleKeyDown", null);
 let selectIds = 0;
 Select.style = BalSelectStyle0;
 
@@ -774,7 +795,7 @@ const SelectOption = class {
         this.log = log;
     }
     render() {
-        return (index.h(index.Host, { style: { display: 'none' } }, index.h("slot", null)));
+        return (index.h(index.Host, { key: 'e576fb51e73b23cbfd86911da7b8ddbd337e72a3', style: { display: 'none' } }, index.h("slot", { key: 'e6ad28fa2cd69ebf97968985267fd363097f88f3' })));
     }
 };
 tslib_es6.__decorate([

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const bem = require('./bem-81bc6a2d.js');
-const tokens_esm = require('./tokens.esm-c5d8ed82.js');
+const tokens_esm = require('./tokens.esm-e4edac35.js');
 
 const balShapeCss = ".bal-shape{display:block;overflow:hidden;border-radius:var(--bal-radius-normal);width:66px;height:66px}@media screen and (min-width: 769px),print{.bal-shape{width:120px;height:120px}}@media screen and (min-width: 1024px){.bal-shape{width:198px;height:198px;border-radius:unset}}.bal-shape--is-rotation-0{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.bal-shape--is-rotation-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.bal-shape--is-rotation-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-shape--is-rotation-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}";
 const BalShapeStyle0 = balShapeCss;
@@ -51,11 +51,11 @@ const Shape = class {
     render() {
         const block = bem.BEM.block('shape');
         const shapes = [
-            index.h("g", { id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, index.h("g", { id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, index.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" }))),
-            index.h("g", { id: "b949d602-8478-437e-a171-ad3f26649cb4" }, index.h("g", { id: "ae3574e0-2065-4681-8937-4318b8656147" }, index.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" }))),
-            index.h("g", { id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, index.h("g", { id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, index.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" }))),
+            index.h("g", { key: 'd5eb6f2e514c14102db76e006ac910e10a292a2e', id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, index.h("g", { key: '97523387b4f6285ce5703706cfbdf91758fc2235', id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, index.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" }))),
+            index.h("g", { key: 'b3b9f265a395632430bead0a05cd93e69007c001', id: "b949d602-8478-437e-a171-ad3f26649cb4" }, index.h("g", { key: '7fc20715e27f56ecf346cdf9b2cb2fbca51643f3', id: "ae3574e0-2065-4681-8937-4318b8656147" }, index.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" }))),
+            index.h("g", { key: '386c20e69b6d4bb30c6f7b071059c765d337bbcf', id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, index.h("g", { key: '04334c11d48ec0fa51dea5df6b6b42ce8aefcdde', id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, index.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 (index.h(index.Host, { class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, index.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 (index.h(index.Host, { key: '93f3b67cfef8a01eac7ccd0334a4315ee0c67b25', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, index.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 index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const bem = require('./bem-81bc6a2d.js');
 
 const balSheetCss = ":root{--bal-sheet-radius:var(--bal-radius-large);--bal-sheet-background:var(--bal-color-white);--bal-sheet-shadow:var(--bal-shadow-normal);--bal-sheet-position-bottom:.5rem}.bal-sheet{display:block;position:fixed;bottom:var(--bal-sheet-position-bottom);left:0;right:0;width:100%;z-index:var(--bal-z-index-sticky);font-weight:var(--bal-font-weight-regular);font-family:var(--bal-font-family-text);font-size:var(--bal-text-size-normal)}.bal-sheet__container .bal-sheet__container__inner,.bal-sheet__container.container .bal-sheet__container__inner{border-radius:var(--bal-sheet-radius);background:var(--bal-sheet-background);-webkit-box-shadow:var(--bal-sheet-shadow);box-shadow:var(--bal-sheet-shadow);padding:1rem}@media screen and (min-width: 769px),print{.bal-sheet__container .bal-sheet__container__inner,.bal-sheet__container.container .bal-sheet__container__inner{padding:1rem 1.5rem}}";
@@ -18,7 +18,7 @@ const Sheet = class {
         const container = block.element('container');
         const containerInner = container.element('inner');
         const containerModifier = this.containerSize !== '' ? `is-${this.containerSize}` : '';
-        return (index.h(index.Host, { class: Object.assign({}, block.class()) }, index.h("div", { class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, index.h("div", { class: Object.assign({}, containerInner.class()) }, index.h("slot", null)))));
+        return (index.h(index.Host, { key: '4e3a48a62cf91e0fb73147b7094f241006fdcf53', class: Object.assign({}, block.class()) }, index.h("div", { key: 'be36688a38f49a790ab29065e4770ba36e274509', class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, index.h("div", { key: 'e3b946a97a16b4b84f4c3c37088d9ca76b70463e', class: Object.assign({}, containerInner.class()) }, index.h("slot", { key: '3e821e1e7b313f02508abf5f3b6ddf18aec0f541' })))));
     }
 };
 Sheet.style = BalSheetStyle0;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
-const helpers = require('./helpers-2a8c8333.js');
+const helpers = require('./helpers-393c2183.js');
 const log = require('./log-33398c2a.js');
 const bem = require('./bem-81bc6a2d.js');
 const config_default = require('./config.default-5bdd6e3d.js');
@@ -65,7 +65,7 @@ const Spinner = class {
                     return resolve();
                 }
                 else {
-                    helpers.rIC(async () => {
+                    helpers.rLCP(async () => {
                         Promise.resolve().then(function () { return require(/* @vite-ignore */ './bal-spinner.animation-a81cf10f.js'); })
                             .then(module => {
                             this.animationFunction = module.animate;
@@ -146,7 +146,7 @@ const Spinner = class {
      */
     render() {
         const block = bem.BEM.block('spinner');
-        return (index.h(index.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 (index.h(index.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 index.getElement(this); }
     static get watchers() { return {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const bem = require('./bem-81bc6a2d.js');
 const log = require('./log-33398c2a.js');
@@ -54,7 +54,7 @@ const Stack = class {
         if (alignment) {
             alignValue = this.alignment.split(' ').join('-');
         }
-        return (index.h(index.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)) }, index.h("slot", null)));
+        return (index.h(index.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)) }, index.h("slot", { key: 'd1101bb18f49fb392e3ef7b1949f5ce5d797a204' })));
     }
 };
 tslib_es6.__decorate([

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

@@ -2,9 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const bem = require('./bem-81bc6a2d.js');
 const attributes = require('./attributes-9f366716.js');
+const helpers = require('./helpers-393c2183.js');
+require('./browser-1d542d0f.js');
+require('./icons.constant-7c82086a.js');
+require('./config.utils-e4cd49d6.js');
 
 const balStageCss = ":root{--bal-stage-background-red:var(--bal-color-red);--bal-stage-background-yellow:var(--bal-color-yellow);--bal-stage-background-green:var(--bal-color-green);--bal-stage-background-purple:var(--bal-color-purple);--bal-stage-back-font-family:var(--bal-font-family-title);--bal-stage-back-font-weight:var(--bal-font-weight-bold)}.bal-stage{display:block;position:relative}.bal-stage--is-purple{background:var(--bal-stage-background-purple)}.bal-stage--is-green{background:var(--bal-stage-background-green)}.bal-stage--is-red{background:var(--bal-stage-background-red)}.bal-stage--is-yellow{background:var(--bal-stage-background-yellow)}.bal-stage .bal-stage-content{display:block;position:static}.bal-stage .bal-stage-content .bal-stage-image{overflow:hidden}.bal-stage .bal-stage-content .bal-stage-image img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.bal-stage .bal-stage-content .bal-stage-body{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;padding-top:calc(var(--bal-space-xxxx-large) + 4rem);padding-bottom:var(--bal-space-xxx-large)}@media screen and (min-width: 769px),print{.bal-stage .bal-stage-content .bal-stage-body{padding-top:calc(var(--bal-space-xxxx-large-tablet) + 4rem);padding-bottom:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stage .bal-stage-content .bal-stage-body{padding-top:calc(var(--bal-space-xxxx-large-desktop) + 3rem);padding-bottom:var(--bal-space-xx-large-desktop)}}.bal-stage .bal-stage-content .bal-stage-back-link--shadow{text-shadow:var(--bal-text-shadow-normal)}@media screen and (max-width: 1023px){.bal-stage .bal-stage-content .bal-stage-back-link{display:none}}@media screen and (min-width: 1024px){.bal-stage .bal-stage-content .bal-stage-back-link a{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-family:var(--bal-stage-back-font-family);font-weight:var(--bal-stage-back-font-weight);text-decoration:none}.bal-stage .bal-stage-content .bal-stage-back-link a:hover{text-decoration:underline}.bal-stage .bal-stage-content .bal-stage-back-link a:active{text-decoration:underline}}@media screen and (min-width: 1024px){.bal-stage--is-medium .bal-stage-content .bal-stage-body{min-height:25rem}}.bal-stage--is-large .bal-stage-content .bal-stage-body{min-height:23.438rem}@media screen and (min-width: 769px),print{.bal-stage--is-large .bal-stage-content .bal-stage-body{min-height:35rem}}@media screen and (min-width: 1024px){.bal-stage--is-large .bal-stage-content .bal-stage-body{min-height:52.5rem}}.bal-stage--has-shape .bal-stage-content{margin-bottom:1.375rem}@media screen and (min-width: 769px),print{.bal-stage--has-shape .bal-stage-content{margin-bottom:2.5rem}}@media screen and (min-width: 1024px){.bal-stage--has-shape .bal-stage-content{margin-bottom:4.125rem}}@media screen and (min-width: 769px),print{.bal-stage--has-shape .bal-stage-content .bal-stage-body>*{max-width:calc(100% - 7.5rem)}}@media screen and (min-width: 1024px){.bal-stage--has-shape .bal-stage-content .bal-stage-body>*{max-width:calc(100% - 12.375rem)}}.bal-stage--has-shape .bal-stage-content .bal-shape{position:absolute;bottom:-1.375rem;right:0}@media screen and (min-width: 769px),print{.bal-stage--has-shape .bal-stage-content .bal-shape{bottom:-2.5rem}}@media screen and (min-width: 1024px){.bal-stage--has-shape .bal-stage-content .bal-shape{bottom:-4.125rem}}";
 const BalStageStyle0 = balStageCss;
@@ -51,7 +55,7 @@ const Stage = class {
     render() {
         const block = bem.BEM.block('stage');
         const element = bem.BEM.block('stage-content');
-        return (index.h(index.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() } }, index.h("section", { class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, index.h("slot", null), this.shape && (index.h("div", { class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, index.h("bal-shape", { color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
+        return (index.h(index.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() } }, index.h("section", { key: 'd925080116d60d4891ac4e141e3d6fa68338aaa8', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, index.h("slot", { key: 'f4d2eb4d16600695f336b076c07518d553a93cdf' }), this.shape && (index.h("div", { key: 'cf059b309141555194945d62124437a3d90145f0', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, index.h("bal-shape", { key: '99b25f746ad8858c885b6bf15df6246492b26b84', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
     }
 };
 Stage.style = BalStageStyle0;
@@ -65,10 +69,10 @@ const StageBackLink = class {
     }
     render() {
         const block = bem.BEM.block('stage-back-link');
-        return (index.h(index.Host, { class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, index.h("a", { class: {
+        return (index.h(index.Host, { key: 'bc5906c288b5be99aba87a5c8b24773f8e980fe5', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, index.h("a", { key: 'd3ee0d9c434e58bcfbf6b70355dfd5b96b5a0d4d', class: {
                 'link': true,
                 'is-inverted': this.inverted,
-            }, href: this.href }, index.h("bal-icon", { class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), index.h("slot", null))));
+            }, href: this.href }, index.h("bal-icon", { key: '9ea9ce3b98138878573dd43f43e174da381a5cf2', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), index.h("slot", { key: '95ad39a717f47a0d02940a6b6f609ae90226cd76' }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -79,7 +83,7 @@ const StageBody = class {
     }
     render() {
         const block = bem.BEM.block('stage-body');
-        return (index.h(index.Host, { class: Object.assign({}, block.class()) }, index.h("slot", null)));
+        return (index.h(index.Host, { key: '8d78c9777215c84373e246ae0495512137620d0c', class: Object.assign({}, block.class()) }, index.h("slot", { key: 'e866a1e129ad6c87567018a3538e526cc432bdcc' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -89,7 +93,7 @@ const StageFoot = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { class: "hero-foot" }, index.h("slot", null)));
+        return (index.h(index.Host, { key: '77f405fb5a84be341f5709ea9451fd5b01eae1a5', class: "hero-foot" }, index.h("slot", { key: '7b93751fe0fd796422cdf0d669404bf22f1312c8' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -99,7 +103,7 @@ const StageHead = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { class: "hero-head" }, index.h("slot", null)));
+        return (index.h(index.Host, { key: '1d3ba006d2d6aafe5795cdb2f59d9cb02822c927', class: "hero-head" }, index.h("slot", { key: '2c24fa40d9505b5b7b673d99d7b831161372e35b' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -108,15 +112,22 @@ const StageImage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.imageInheritAttributes = {};
+        this.isLargestContentfulPaintDone = false;
         this.srcSet = undefined;
         this.fallback = undefined;
     }
+    componentDidLoad() {
+        helpers.rLCP(() => {
+            this.isLargestContentfulPaintDone = true;
+        });
+    }
     componentWillLoad() {
         this.imageInheritAttributes = attributes.inheritAttributes(this.el, ['alt']);
     }
     render() {
         const block = bem.BEM.block('stage-image');
-        return (index.h(index.Host, { class: Object.assign({}, block.class()) }, index.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 (index.h(index.Host, { key: '5e50cf626868a688afd1ae52bc4d3bbee8985e6f', class: Object.assign({}, block.class()) }, this.isLargestContentfulPaintDone ? (index.h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/bal-step-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const attributes = require('./attributes-9f366716.js');
 
 const StepItem = class {
@@ -55,10 +55,10 @@ const StepItem = class {
         };
     }
     render() {
-        return (index.h(index.Host, { role: "tabpanel", class: {
+        return (index.h(index.Host, { key: '8ee5cc145653a031dd60e10cd8e15a5cea413ded', role: "tabpanel", class: {
                 'bal-step-item': true,
                 'bal-step-item--active': this.isActive,
-            } }, index.h("slot", null)));
+            } }, index.h("slot", { key: 'e424db22122910323793ae2b93c4dd8dcf9f2c31' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -2,25 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
-const helpers = require('./helpers-2a8c8333.js');
+const helpers = require('./helpers-393c2183.js');
 const bem = require('./bem-81bc6a2d.js');
 const log = require('./log-33398c2a.js');
-const index_esm = require('./index.esm-54a3d84e.js');
-const formInput = require('./form-input-b61eb894.js');
+const array = require('./array-ae164ca3.js');
+const formInput = require('./form-input-35653e8f.js');
 const balStep_util = require('./bal-step.util-3c009db9.js');
-const breakpoints_subject = require('./breakpoints.subject-04e46eae.js');
-const mutation_decorator = require('./mutation.decorator-af043b68.js');
-const breakpoints_decorator = require('./breakpoints.decorator-3e39d424.js');
+const breakpoints_subject = require('./breakpoints.subject-679bdc55.js');
+const mutation_decorator = require('./mutation.decorator-d2ce6c1a.js');
+const breakpoints_decorator = require('./breakpoints.decorator-967c2fd2.js');
 require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
 require('./index-e6a233be.js');
+require('./index-3b7f8988.js');
 require('./_commonjsHelpers-68cdf74f.js');
 require('./device-9f97a845.js');
 require('./listener-52d2e5fd.js');
-require('./tokens.esm-c5d8ed82.js');
+require('./tokens.esm-e4edac35.js');
 
 const StepIcon = ({ item, isMobile }) => {
     const bemEl = bem.BEM.block('steps').element('nav').element('item').element('icon');
@@ -66,7 +67,7 @@ const Steps = class {
             }
         };
         this.updateStore = (newStore) => {
-            if (!index_esm.areArraysEqual(this.store, newStore)) {
+            if (!array.areArraysEqual(this.store, newStore)) {
                 this.store = newStore;
             }
         };

package/dist/cjs/bal-tab-item_2.cjs.entry.js

@@ -2,29 +2,31 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-219b2f52.js');
+const index = require('./index-96c178a6.js');
 const attributes = require('./attributes-9f366716.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
-const index_esm = require('./index.esm-54a3d84e.js');
-const helpers = require('./helpers-2a8c8333.js');
+const array = require('./array-ae164ca3.js');
+const helpers = require('./helpers-393c2183.js');
 const bem = require('./bem-81bc6a2d.js');
 const log = require('./log-33398c2a.js');
 const balTab_util = require('./bal-tab.util-d0785ef4.js');
-const formInput = require('./form-input-b61eb894.js');
+const formInput = require('./form-input-35653e8f.js');
 const browser = require('./browser-1d542d0f.js');
 const style = require('./style-799e9253.js');
-const breakpoints_subject = require('./breakpoints.subject-04e46eae.js');
-const mutation_decorator = require('./mutation.decorator-af043b68.js');
-const breakpoints_decorator = require('./breakpoints.decorator-3e39d424.js');
-const resize_decorator = require('./resize.decorator-ae91ead2.js');
+const listen = require('./listen-b42a4134.js');
+const breakpoints_subject = require('./breakpoints.subject-679bdc55.js');
+const mutation_decorator = require('./mutation.decorator-d2ce6c1a.js');
+const breakpoints_decorator = require('./breakpoints.decorator-967c2fd2.js');
+const resize_decorator = require('./resize.decorator-981b6817.js');
 const config_decorator = require('./config.decorator-b393a72f.js');
 require('./index-e6a233be.js');
+require('./index-3b7f8988.js');
 require('./_commonjsHelpers-68cdf74f.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
 require('./device-9f97a845.js');
 require('./listener-52d2e5fd.js');
-require('./tokens.esm-c5d8ed82.js');
+require('./tokens.esm-e4edac35.js');
 
 const TabItem = class {
     constructor(hostRef) {
@@ -84,10 +86,10 @@ const TabItem = class {
     render() {
         const hasPanel = !this.noPanel;
         const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (index.h(index.Host, { id: this.tabPanelID, class: {
+        return (index.h(index.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 }, index.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 }, index.h("slot", { key: 'ff4a802972dadebf7240c41c03a233cc17dba24c' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -217,7 +219,7 @@ const Tabs = class {
             }
         };
         this.updateStore = (newStore) => {
-            if (!index_esm.areArraysEqual(this.store, newStore)) {
+            if (!array.areArraysEqual(this.store, newStore)) {
                 this.store = newStore;
             }
             else if (!this.optionalTabSelection && !this.accordion && this.value === undefined && this.store.length > 0) {
@@ -417,16 +419,19 @@ const Tabs = class {
          * 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 = helpers.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) => {
@@ -457,6 +462,7 @@ const Tabs = class {
         this.isNavbarOpen = false;
         this.inNavbar = false;
         this.inNavbarLight = false;
+        this.isLargestContentfulPaintDone = false;
         this.isMobile = breakpoints_subject.balBreakpoints.isMobile;
         this.isTablet = breakpoints_subject.balBreakpoints.isTablet;
         this.store = [];
@@ -526,7 +532,10 @@ const Tabs = class {
         }
     }
     componentDidLoad() {
-        this.onOptionChange();
+        helpers.rLCP(() => {
+            this.onOptionChange();
+            this.isLargestContentfulPaintDone = true;
+        });
     }
     mutationListener() {
         this.onOptionChange();
@@ -743,20 +752,20 @@ const Tabs = class {
         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 (index.h(index.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 (index.h(index.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 ? (index.h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (index.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 })), index.h("div", { part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, index.h("div", { id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, index.h("slot", null)))));
+                .join(',') }, isSelect ? (index.h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (index.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 })), index.h("div", { key: '9b07748ace351ce78cd552229f2694e349592d3d', part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, index.h("div", { key: '099b85a0205426e163c8b43320cb007c7ea1afc9', id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, index.h("slot", { key: '6262221556c0f514b4c42138796b7d92097887d0' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -789,6 +798,24 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", []),
     tslib_es6.__metadata("design:returntype", void 0)
 ], Tabs.prototype, "resizeListener", null);
+tslib_es6.__decorate([
+    listen.ListenTo('balWillAnimate', { target: 'window' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Tabs.prototype, "listenToWillAnimate", null);
+tslib_es6.__decorate([
+    listen.ListenTo('balDidAnimate', { target: 'window' }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [UIEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Tabs.prototype, "listenToDidAnimate", null);
+tslib_es6.__decorate([
+    listen.ListenTo('keydown'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [KeyboardEvent]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Tabs.prototype, "listenToKeyDown", null);
 tslib_es6.__decorate([
     config_decorator.ListenToConfig(),
     tslib_es6.__metadata("design:type", Function),