@baloise/ds-core 18.2.0 → 18.3.0-nightly.20250401

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

@@ -466,48 +466,48 @@ AccordionSummary.style = BalAccordionSummaryStyle0;
 
 const i18nBalAccordion = {
     de: {
-        open: 'Öffnen',
-        close: 'Schließen',
+        open: 'Mehr anzeigen',
+        close: 'Weniger anzeigen',
     },
     en: {
-        open: 'Open',
-        close: 'Close',
+        open: 'Show more',
+        close: 'Show less',
     },
     fr: {
-        open: 'Ouvrir',
-        close: 'Fermer',
+        open: 'Afficher plus',
+        close: 'Afficher moins',
     },
     it: {
-        open: 'Apri',
-        close: 'Chiudi',
+        open: 'Mostra di più',
+        close: 'Mostra di meno',
     },
     nl: {
-        open: 'Open',
-        close: 'Sluiten',
+        open: 'Meer weergeven',
+        close: 'Minder weergeven',
     },
     es: {
-        open: 'Abrir',
-        close: 'Cerrar',
+        open: 'Mostrar más',
+        close: 'Mostrar menos',
     },
     pl: {
-        open: 'Otwórz',
-        close: 'Zamknij',
+        open: 'Pokaż więcej',
+        close: 'Pokaż mniej',
     },
     pt: {
-        open: 'Abrir',
-        close: 'Fechar',
+        open: 'Mostrar mais',
+        close: 'Mostrar menos',
     },
     sv: {
-        open: 'Öppna',
-        close: 'Stäng',
+        open: 'Visa mer',
+        close: 'Visa mindre',
     },
     fi: {
-        open: 'Avaa',
-        close: 'Sulje',
+        open: 'Näytä lisää',
+        close: 'Näytä vähemmän',
     },
 };
 
-const balAccordionTriggerCss = "@media (hover: hover)and (pointer: fine){.bal-accordion__trigger__button.bal-focused:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}.bal-accordion__trigger{position:static;display:block}.bal-accordion__trigger__button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background:rgba(0,0,0,0);border:none;height:3rem;width:3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}";
+const balAccordionTriggerCss = "@media (hover: hover)and (pointer: fine){.bal-accordion__trigger__button.bal-focused:focus-visible,.bal-accordion__trigger__text.bal-focused:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}.bal-accordion__trigger{position:static;display:block}.bal-accordion__trigger__button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background:rgba(0,0,0,0);border:none;border-radius:var(--bal-border-radius-normal);height:3rem;width:3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.bal-accordion__trigger__text{display:inline;background:rgba(0,0,0,0);border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;padding:0;margin:0;border-radius:var(--bal-radius-normal);font-size:var(--bal-text-size-small);color:var(--bal-text-color-primary-light);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-accordion__trigger__text:hover{color:var(--bal-text-color-primary-hovered)}}.bal-accordion__trigger__text:active{color:var(--bal-text-color-primary-pressed)}";
 const BalAccordionTriggerStyle0 = balAccordionTriggerCss;
 
 const AccordionTrigger = class {
@@ -528,9 +528,15 @@ const AccordionTrigger = class {
             formInput.stopEventBubbling(ev);
             (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.humanToggle();
         };
+        /**
+         * RENDER
+         * ------------------------------------------------------
+         */
+        this.block = bem.BEM.block('accordion').element('trigger');
         this.parentAccordionId = undefined;
         this.language = config_default.defaultConfig.language;
         this.button = false;
+        this.variant = undefined;
         this.expanded = true;
         this.openLabel = '';
         this.openIcon = 'caret-down';
@@ -544,12 +550,16 @@ const AccordionTrigger = class {
     createLogger(log) {
         this.log = log;
     }
+    buttonChanged() {
+        this.variant = this.button ? 'button' : this.variant;
+    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
     connectedCallback() {
         this.updateAccordionId();
+        this.buttonChanged();
     }
     componentWillRender() {
         this.updateAccordionId();
@@ -576,12 +586,7 @@ const AccordionTrigger = class {
         var _a;
         return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('bal-accordion-summary')) || null;
     }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
     render() {
-        const block = bem.BEM.block('accordion').element('trigger');
         const id = this.parentAccordionId ? `${this.parentAccordionId}-trigger` : this.componentId;
         const label = this.active ? this.closeLabel : this.openLabel;
         let turn = false;
@@ -601,9 +606,39 @@ const AccordionTrigger = class {
                 tabindex: 0,
             };
         }
-        return (index.h(index.Host, { key: '6aafc18d3f16cdfeea6c74024d4468eb52cb6c9c', id: id, class: Object.assign({}, block.class()) }, this.button ? (index.h("bal-button", { id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: this.expanded, icon: icon, iconTurn: turn, color: this.color, size: this.size, title: this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, "aria-label": this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, "aria-expanded": aria.ariaBooleanToString(this.active), onClick: this.onClick }, label)) : (index.h("button", Object.assign({ class: Object.assign(Object.assign({}, block.element('button').class()), { 'bal-focused': parentSummaryEl && !parentSummaryEl.trigger }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-expanded": aria.ariaBooleanToString(this.active), part: buttonPart, "data-testid": "bal-accordion-trigger", title: this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, "aria-label": this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, onClick: this.onClick }, triggerAttributes), index.h("bal-icon", { turn: turn, name: icon })))));
+        const Trigger = (props) => {
+            switch (props.variant) {
+                case 'button':
+                    return this.renderButton(props);
+                case 'text':
+                    return this.renderText(props);
+                default:
+                    return this.renderIcon(props);
+            }
+        };
+        return (index.h(index.Host, { id: id, class: Object.assign({}, this.block.class()) }, index.h(Trigger, { variant: this.variant, id,
+            label,
+            icon,
+            turn,
+            expanded,
+            buttonPart,
+            triggerAttributes })));
+    }
+    renderButton({ id, buttonPart, icon, turn, label }) {
+        return (index.h("bal-button", { id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: this.expanded, icon: icon, iconTurn: turn, color: this.color, size: this.size, title: this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, "aria-label": this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, "aria-expanded": aria.ariaBooleanToString(this.active), onClick: this.onClick }, label));
+    }
+    renderIcon({ buttonPart, triggerAttributes, turn, icon, id }) {
+        return (index.h("button", Object.assign({ class: Object.assign(Object.assign({}, this.block.element('button').class()), { 'bal-focused': triggerAttributes.tabindex === 0 }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-expanded": aria.ariaBooleanToString(this.active), part: buttonPart, "data-testid": "bal-accordion-trigger", title: this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, "aria-label": this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, onClick: this.onClick }, triggerAttributes), index.h("bal-icon", { turn: turn, name: icon })));
+    }
+    renderText({ buttonPart, triggerAttributes, turn, icon, id }) {
+        const openLabel = this.openLabel || i18nBalAccordion[this.language].open;
+        const closeLabel = this.closeLabel || i18nBalAccordion[this.language].close;
+        return (index.h("button", Object.assign({ class: Object.assign(Object.assign({}, this.block.element('text').class()), { 'bal-focused': triggerAttributes.tabindex === 0 }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-expanded": aria.ariaBooleanToString(this.active), part: buttonPart, "data-testid": "bal-accordion-trigger", onClick: this.onClick }, triggerAttributes), this.active ? closeLabel : openLabel));
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "button": ["buttonChanged"]
+    }; }
 };
 tslib_es6.__decorate([
     log.Logger('bal-accordion-trigger'),

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

@@ -62,11 +62,11 @@ const App = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'e062237a5407e1f20d5ba64329e264fc0ae41f4e', class: {
+        return (index.h(index.Host, { key: '8aa3c989125e06e500597db9773fca378e4b7467', class: {
                 'bal-app': true,
                 'bal-app--safari': browser.balBrowser.isSafari,
                 'bal-app--touch': device.balDevice.hasTouchScreen,
-            } }, index.h("slot", { key: '0fdf270bb2737933ba48a2181e98897de19f66ed' })));
+            } }, index.h("slot", { key: 'c0e432a988e29f653198ed4eeead7f18fa447035' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -24,7 +24,7 @@ const Badge = class {
         const size = this.size !== '';
         const position = this.position !== '';
         const labelHidden = !!this.icon || this.size === 'small';
-        return (index.h(index.Host, { key: '0c065379dc9c282d71779193f357ddc2062009d9', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.color}`).class(color)), block.modifier(`position-${this.position}`).class(position)), block.modifier(`size-${this.size}`).class(size)) }, index.h("span", { key: 'c23e1622df7a9fc30cd9f077be4bafcd1a80d6e0', class: Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier(`color-${this.color}`).class(color)), labelEl.modifier(`hidden`).class(labelHidden)), "data-testid": "bal-badge-label" }, index.h("slot", { key: 'e01fa5ade4be45474abf0316f3a47b12776a2ae7' })), this.size !== 'small' ? (index.h("bal-icon", { class: Object.assign(Object.assign({}, iconEl.class()), iconEl.modifier(`hidden`).class(!labelHidden)), size: this.size === '' ? 'small' : '', name: this.icon, color: this.color === 'grey' ? 'grey' : 'primary' })) : ('')));
+        return (index.h(index.Host, { key: '811cf1c81df29b916af366fa68f3af34e3c7c13e', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.color}`).class(color)), block.modifier(`position-${this.position}`).class(position)), block.modifier(`size-${this.size}`).class(size)) }, index.h("span", { key: 'fe39cc5bd17ec12ba43b10af15e5200020d3a15e', class: Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier(`color-${this.color}`).class(color)), labelEl.modifier(`hidden`).class(labelHidden)), "data-testid": "bal-badge-label" }, index.h("slot", { key: '8160cdc9d7adc06c360d9cfb9ebad0e5ca785758' })), this.size !== 'small' ? (index.h("bal-icon", { class: Object.assign(Object.assign({}, iconEl.class()), iconEl.modifier(`hidden`).class(!labelHidden)), size: this.size === '' ? 'small' : '', name: this.icon, color: this.color === 'grey' ? 'grey' : 'primary' })) : ('')));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -195,12 +195,12 @@ const ButtonGroup = class {
     }
     render() {
         const block = bem.BEM.block('button-group');
-        return (index.h(index.Host, { key: 'bd88bb4d967d745bdbbf825bd43bc3c75eea4f75', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`position-${this.position}`).class()), block.modifier(`direction-${this.direction}`).class()) }, index.h("div", { key: '3aaa6d2c14336ffb08469d00246169d72ed916dc', class: {
+        return (index.h(index.Host, { key: 'a41720ea16a458ae915bece1adf109d2f20ea8ec', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`position-${this.position}`).class()), block.modifier(`direction-${this.direction}`).class()) }, index.h("div", { key: '03f0d65f12c0ac0e14f4854ef85e845fe51f9e62', class: {
                 'field': true,
                 'is-grouped': true,
                 'is-reverse': this.reverse,
                 [`has-direction-${this.direction}`]: true,
-            } }, index.h("slot", { key: '8d980bc54adcae84174fecc1d331b37a2662ec0b' }))));
+            } }, index.h("slot", { key: 'a65f6a5a52b522c600c4df6c0963cdd59ad07462' }))));
     }
 };
 

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

@@ -26,7 +26,7 @@ const Card = class {
         return index$1.isEmpty(this.color) ? '' : `is-${this.inverted ? 'blue' : this.color}`;
     }
     render() {
-        return (index.h(index.Host, { key: '60405d26b29d82993d5853b66126448c24da76de', class: {
+        return (index.h(index.Host, { key: 'c96cc43fa0044fd8ac34cd617a90ed88ec7073c5', class: {
                 'bal-card': true,
                 [`bal-card--${this.colorTypeClass}`]: !index$1.isEmpty(this.color),
                 [`bal-card--is-${this.space}`]: this.space !== '',
@@ -36,7 +36,7 @@ const Card = class {
                 'bal-card--is-selected': this.selected,
                 'bal-card--is-square': this.square,
                 'bal-card--has-fullheight': this.fullheight,
-            } }, index.h("slot", { key: 'a196556a24c3847732c405aa7f811403b7b25474' })));
+            } }, index.h("slot", { key: '50ade35417dafda765c509bd8f97157d7932a0b4' })));
     }
 };
 Card.style = BalCardStyle0;
@@ -47,7 +47,7 @@ const CardActions = class {
         this.position = '';
     }
     render() {
-        return (index.h(index.Host, { key: '0ddde50f0b230e34ec5808381cee4512b3c819cf', class: "bal-card-actions" }, index.h("bal-button-group", { key: '55e2c1c888eb0a1c818565ae3d0e6d564a1320b1', class: "m-none", position: this.position }, index.h("slot", { key: 'c41d4ff9870e800acb34d11a0de30769f960ad02' }))));
+        return (index.h(index.Host, { key: 'a7cfd2bf8e431e2bd0fb357e11ab28391f3a76c1', class: "bal-card-actions" }, index.h("bal-button-group", { key: '15606e2e6831e3d3e7977b948bd9b14582c71d5d', class: "m-none", position: this.position }, index.h("slot", { key: '384f7646c468defca583a7ef7cbe2edf93ea74fa' }))));
     }
 };
 
@@ -63,7 +63,7 @@ const CardButton = class {
         this.loading = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'e10a38993a05b081e6963578ca58394ffed6b85c', class: "bal-card-button" }, index.h("bal-button", { key: '8d6a175f3ada4e3f3327cdb1bfc766ccef081a8a', color: "info", expanded: true, "bottom-rounded": true, icon: this.icon, iconRight: this.iconRight, elementType: this.elementType, disabled: this.disabled, href: this.href, target: this.target, loading: this.loading }, index.h("slot", { key: '7c0dd79bcbafccfbdf696fe95b209a8343080ddc' }))));
+        return (index.h(index.Host, { key: '2571a681907e53e8496930e90e42b7c83d8f772b', class: "bal-card-button" }, index.h("bal-button", { key: 'abb149ebb28f13a448cec0fff003feb7efd43e16', color: "info", expanded: true, "bottom-rounded": true, icon: this.icon, iconRight: this.iconRight, elementType: this.elementType, disabled: this.disabled, href: this.href, target: this.target, loading: this.loading }, index.h("slot", { key: 'b51a474d03b133ab2174004d08b8129032344ecb' }))));
     }
 };
 
@@ -72,7 +72,7 @@ const CardContent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '45545a634067cee8d1d28d05291d8cef0299d416', class: "bal-card-content" }, index.h("slot", { key: '2d647c7e9bc7a95f9aa0f0d0b16fec7f6eb3383c' })));
+        return (index.h(index.Host, { key: '63fb6b5e72ad6c3fa30ba68f6d9bdf0e1833df76', class: "bal-card-content" }, index.h("slot", { key: '851ba08103e95a1c0536523a449d1f317543092c' })));
     }
 };
 
@@ -84,7 +84,7 @@ const CardSubtitle = class {
         this.color = '';
     }
     render() {
-        return (index.h(index.Host, { key: '3926fde414f565f08d192a020366edf1757c6922', class: "bal-card-subtitle" }, index.h("bal-text", { key: 'a04132e568b034e371f6805e77dbcfe21d9e9489', bold: this.bold, space: "none", color: this.inverted ? 'white' : this.color }, index.h("slot", { key: '037e237cdaced982f0b3ba0074016aa4777ffbde' }))));
+        return (index.h(index.Host, { key: '2a1250f5456d84296fa7280216852cef5913d2ca', class: "bal-card-subtitle" }, index.h("bal-text", { key: 'b92d1f51cfa1df3e69b9c96fe64267223d100c74', bold: this.bold, space: "none", color: this.inverted ? 'white' : this.color }, index.h("slot", { key: '4d53171704d63d9e5c6bd0bc58a32ddeb74fa02a' }))));
     }
 };
 
@@ -94,7 +94,7 @@ const CardTitle = class {
         this.inverted = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'b12a4f08d1a78e31aa306b20ee59a8826249b5b0', class: "bal-card-title" }, index.h("bal-heading", { key: 'a22c6af75f714e70f1efd36f0671a6e623a9ef31', level: "h3", space: "none", inverted: this.inverted }, index.h("slot", { key: '11483681e586eac535db5244f4c85a87d0ddce42' }))));
+        return (index.h(index.Host, { key: '480825eb5bb7479126da292aaa53a4fa74a8cd95', class: "bal-card-title" }, index.h("bal-heading", { key: 'c193388a8ade59840457b375b4a8715bef3e2328', level: "h3", space: "none", inverted: this.inverted }, index.h("slot", { key: '8c01ab5b70d5aabef47a5693b827fa8e23192c92' }))));
     }
 };
 

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

@@ -8,11 +8,11 @@ const bem = require('./bem-81bc6a2d.js');
 const aria = require('./aria-7672033f.js');
 const swiper_util = require('./swiper.util-f1c856f3.js');
 const formInput = require('./form-input-e9974433.js');
-const breakpoints_decorator = require('./breakpoints.decorator-90762be4.js');
+const breakpoints_decorator = require('./breakpoints.decorator-d3231bd0.js');
 const mutation_decorator = require('./mutation.decorator-485e250e.js');
 const swipe_decorator = require('./swipe.decorator-9c105f90.js');
 const resize_decorator = require('./resize.decorator-e4a92322.js');
-const breakpoints_subject = require('./breakpoints.subject-7ee9fb88.js');
+const breakpoints_subject = require('./breakpoints.subject-13aeda38.js');
 const config_default = require('./config.default-7e96eb95.js');
 const visibility_decorator = require('./visibility.decorator-a218aab9.js');
 const config_decorator = require('./config.decorator-de244188.js');
@@ -23,7 +23,7 @@ require('./listener-52d2e5fd.js');
 require('./browser-1d542d0f.js');
 require('./swipe.subject-191f7d8a.js');
 require('./device-9f97a845.js');
-require('./tokens.esm-aa5d038b.js');
+require('./tokens.esm-c7d8932a.js');
 require('./log-33398c2a.js');
 require('./config.utils-df30e424.js');
 
@@ -178,7 +178,7 @@ const Carousel = class {
         const block = bem.BEM.block('carousel');
         const inner = block.element('inner');
         const container = inner.element('container');
-        return (index.h(index.Host, { key: '045f46d215e6655af8a04cc992ccb0c0d2ace7b1', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiper()), block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-tabs`).class(this.controls === 'tabs')) }, this.controls === 'tabs' ? (index.h(TabControl, { value: this.value, items: this.swiper.getAllControlItems(), containerId: this.swiper.containerId, onControlChange: item => this.swiper.onControlChange(item.value) })) : (''), index.h("div", { key: '9b3a26e262678685c62bfca9b47748312548b9ae', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssInnerSwiper()), inner.class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), ref: el => (this.swiper.innerEl = el) }, index.h("div", { key: '3cd4f36061c3ea702ac26cad019e4b11e39f8750', id: this.swiper.containerId, role: this.controls === 'tabs' ? '' : 'list', class: Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiperContainer()), container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.swiper.containerEl = el) }, index.h("slot", { key: 'e45dad1eddb06ec65c8eceeccf67969fe92b24cb' }), this.border ? (index.h("div", { id: `${this.swiper.id}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.swiper.borderEl = el) })) : (''))), this.swiper.renderControls()));
+        return (index.h(index.Host, { key: '8d3018d668a5ee7d7f6db4f2c2546e720ad48577', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiper()), block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-tabs`).class(this.controls === 'tabs')) }, this.controls === 'tabs' ? (index.h(TabControl, { value: this.value, items: this.swiper.getAllControlItems(), containerId: this.swiper.containerId, onControlChange: item => this.swiper.onControlChange(item.value) })) : (''), index.h("div", { key: 'd4fdd5af148e4fdcb1c4f0c49966398a8fa0fcd2', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssInnerSwiper()), inner.class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), ref: el => (this.swiper.innerEl = el) }, index.h("div", { key: 'acb3aa06b89dcb97bd3c3a489f5143752cd35568', id: this.swiper.containerId, role: this.controls === 'tabs' ? '' : 'list', class: Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiperContainer()), container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.swiper.containerEl = el) }, index.h("slot", { key: '73052ff64fa0423cb88bf96aaa771064ca3aadea' }), this.border ? (index.h("div", { id: `${this.swiper.id}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.swiper.borderEl = el) })) : (''))), this.swiper.renderControls()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -184,7 +184,7 @@ const CheckboxButton = class {
         const invalid = !!this.invalid;
         const color = !!this.color;
         const colored = this.checked && color;
-        return (index.h(index.Host, { key: 'df8642a22032a8ffd1a7c7db3e378027a1b926e8', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, index.h("button", { key: '9c6c1334a44190f5d6987c32ebf45be35ff00cf9', role: "checkbox", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, index.h("slot", { key: '288d784a482e32dba9e4a46f1806ef35a51a76c0' }))));
+        return (index.h(index.Host, { key: 'f8a1bb7fe4001ebf045aef1ccb3e618448a4d216', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, index.h("button", { key: '4a2f2be8dac7e4a2f344ee8d9dedb494a8666b3c', role: "checkbox", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, index.h("slot", { key: '08c9131a641ab8198746ec93c02e4ad16e6b1adc' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -288,7 +288,7 @@ const Checkbox = class {
             labelAttributes.id = `${id}-lbl`;
             labelAttributes.htmlFor = id;
         }
-        return (index.h(index.Host, { key: 'c76b5ff66a33d98280bcb8168d12284561c4ef23', "aria-checked": `${this.checked}`, "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-hidden": aria.ariaBooleanToString(this.disabled || this.nonSubmit), "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('checkbox').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('switch').class(this.interface === 'switch')), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('invisible').class(this.invisible)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('inline').class(this.inline)), onKeypress: this.onKeypress, onClick: this.onClick }, index.h("input", Object.assign({ key: '11958df47ddff46268cf931dd13d0d7a671e9964', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-checkbox-input", type: "checkbox", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, "aria-hidden": aria.ariaBooleanToString(this.nonSubmit), name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (index.h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('checkbox').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)), labelEl.modifier('switch').class(this.interface === 'switch')) }, labelAttributes, { "data-testid": "bal-checkbox-label" }), this.interface === 'switch' ? (index.h("bal-icon", { class: Object.assign({}, iconEl.class()), name: "check", color: "white", size: "x-small", "aria-hidden": "true" })) : (''), index.h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-checkbox-text" }, this.label, index.h("slot", null)))) : ('')));
+        return (index.h(index.Host, { key: 'b60b510c06d3318f39acd764e65732a792271f26', "aria-checked": `${this.checked}`, "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-hidden": aria.ariaBooleanToString(this.disabled || this.nonSubmit), "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('checkbox').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('switch').class(this.interface === 'switch')), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('invisible').class(this.invisible)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('inline').class(this.inline)), onKeypress: this.onKeypress, onClick: this.onClick }, index.h("input", Object.assign({ key: 'f147f86e34a36c270faccb1c95fdf69d2a2a4eed', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-checkbox-input", type: "checkbox", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, "aria-hidden": aria.ariaBooleanToString(this.nonSubmit), name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (index.h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('checkbox').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)), labelEl.modifier('switch').class(this.interface === 'switch')) }, labelAttributes, { "data-testid": "bal-checkbox-label" }), this.interface === 'switch' ? (index.h("bal-icon", { class: Object.assign({}, iconEl.class()), name: "check", color: "white", size: "x-small", "aria-hidden": "true" })) : (''), index.h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-checkbox-text" }, this.label, index.h("slot", null)))) : ('')));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -35,7 +35,7 @@ const Close = class {
         const buttonEl = blockEl.element('button');
         const iconEl = buttonEl.element('icon');
         const label = balClose_i18n.i18nBalClose[this.language].close;
-        return (index.h(index.Host, { key: '4da9fd82693b0182a807919dd7b9194325924b0a', class: Object.assign({}, blockEl.class()) }, index.h("button", { key: 'ece31e634305fa395157b498ae99ca5bb0f6ea88', type: "button", "aria-label": label, title: label, tabindex: "0", class: Object.assign(Object.assign(Object.assign({}, buttonEl.class()), buttonEl.modifier('inverted').class(this.inverted)), buttonEl.modifier(`size-${this.size}`).class(this.size !== '')), "data-testid": "bal-close" }, index.h("bal-icon", { key: '28e3924e14e5314ed1c7a6613b2c72fb8cab1f18', name: "close", size: this.size === 'small' ? 'x-small' : this.size === 'medium' ? 'medium' : 'small', inverted: this.inverted, class: Object.assign({}, iconEl.class()) }))));
+        return (index.h(index.Host, { key: 'a1188dd719c155244c9248852b47b6308445c7e8', class: Object.assign({}, blockEl.class()) }, index.h("button", { key: '4e5e500a7ef209e58a415c79241a610ec9e072e7', type: "button", "aria-label": label, title: label, tabindex: "0", class: Object.assign(Object.assign(Object.assign({}, buttonEl.class()), buttonEl.modifier('inverted').class(this.inverted)), buttonEl.modifier(`size-${this.size}`).class(this.size !== '')), "data-testid": "bal-close" }, index.h("bal-icon", { key: 'c1386b6639da47ddcdd198d3abcbea110c1edc68', name: "close", size: this.size === 'small' ? 'x-small' : this.size === 'medium' ? 'medium' : 'small', inverted: this.inverted, class: Object.assign({}, iconEl.class()) }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -42,7 +42,7 @@ const Content = class {
         if (alignment) {
             alignValue = this.alignment.split(' ').join('-');
         }
-        return (index.h(index.Host, { key: '24b18681a7c127ebd58e27f2823482dfd5621cdd', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)) }, index.h("slot", { key: '8e4b8d0b5a6ecf7f04f514ec6e9b26bcceed70c8' })));
+        return (index.h(index.Host, { key: 'b256d6d65dd7524c7a4eda9f939cb85c1c561362', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)) }, index.h("slot", { key: '19ddbdd34078c10e4abd24fcdf55d89a8e06a13a' })));
     }
 };
 tslib_es6.__decorate([

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

@@ -34,7 +34,7 @@ const Data = class {
     }
     render() {
         const block = bem.BEM.block('data');
-        return (index.h(index.Host, { key: '9bdc9220125ff24bbcab99d72bf9018524989a8e', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('has-border').class(this.border)), block.modifier('is-horizontal').class(this.horizontal)) }, index.h("slot", { key: 'a75c460214454acad179a1141b1e44dcbeeaf200' })));
+        return (index.h(index.Host, { key: 'e30b81fa59a7c0307096cac83ffcb9a252f2a48a', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('has-border').class(this.border)), block.modifier('is-horizontal').class(this.horizontal)) }, index.h("slot", { key: '6f5d92953c3b6b0f0a04a2ccf79ebdda28be93e1' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -51,7 +51,7 @@ const DataItem = class {
     }
     render() {
         const element = bem.BEM.block('data-item');
-        return (index.h(index.Host, { key: '24c06c3548592591c65dc69655730d6e03d321ab', class: Object.assign(Object.assign(Object.assign({}, element.class()), element.modifier('is-disabled').class(this.disabled)), element.modifier('has-border').class(this.border)) }, index.h("slot", { key: '7a50f83aa8460be4acd5b0026d6986a43ff38f1f' })));
+        return (index.h(index.Host, { key: '6e89ce9ba7c11d28186c5515161d90a10c932876', class: Object.assign(Object.assign(Object.assign({}, element.class()), element.modifier('is-disabled').class(this.disabled)), element.modifier('has-border').class(this.border)) }, index.h("slot", { key: '97fba77127fd9e4f707251fc0c64bc360ff54baf' })));
     }
 };
 
@@ -61,7 +61,7 @@ const DataLabel = class {
         this.required = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'b7ee494c4547012e9e65cd1843904e7c62622ee9', class: Object.assign({}, bem.BEM.block('data-label').class()) }, index.h("slot", { key: '0543ceb399a3fac8da806ee36a0688851d189307' }), this.required ? '*' : ''));
+        return (index.h(index.Host, { key: 'fab3592ac51a609566b2c3743fa9a1a6d45de770', class: Object.assign({}, bem.BEM.block('data-label').class()) }, index.h("slot", { key: 'b76f0eef5d401046ee637948e9f9aa0cbf1fc856' }), this.required ? '*' : ''));
     }
 };
 
@@ -85,7 +85,7 @@ const DataValue = class {
     render() {
         const block = bem.BEM.block('data-value');
         const buttonEl = block.element('button');
-        return (index.h(index.Host, { key: '10c0d223260009cbcfb3454f573ed72231fd5dbe', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('is-editable').class(this.editable)), block.modifier('is-multiline').class(this.multiline)) }, index.h("div", { key: 'cf9488e4c65fb7b7ad7f0fae106cb90b10c49125' }, index.h("slot", { key: '0ae1c2e3cb8b9466b55f82ea9946774468d370ae' })), index.h("bal-button", { key: 'ac74fa86de3c53de60c4c82b6f48480cdb5c3ed8', class: Object.assign({}, buttonEl.class()), "data-testid": "bal-data-value-button", square: true, outlined: true, color: "text", size: "small", icon: "edit", disabled: this.disabled, onBalBlur: _ => this.balBlur.emit(), onBalFocus: _ => this.balFocus.emit(), onClick: ev => this.onClickHandler(ev) })));
+        return (index.h(index.Host, { key: 'bdc1abbe6bd3025c1492ec5270259ea899afabee', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('is-editable').class(this.editable)), block.modifier('is-multiline').class(this.multiline)) }, index.h("div", { key: '8e5521c8d2f750dc2f8bc6860188884f4bacfaf3' }, index.h("slot", { key: '31d37fec63af21c9e0fc6a64807e1a760b6b676f' })), index.h("bal-button", { key: '7f52ca131674700ce0020f96614a954e9e5896f8', class: Object.assign({}, buttonEl.class()), "data-testid": "bal-data-value-button", square: true, outlined: true, color: "text", size: "small", icon: "edit", disabled: this.disabled, onBalBlur: _ => this.balBlur.emit(), onBalFocus: _ => this.balFocus.emit(), onClick: ev => this.onClickHandler(ev) })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -41,7 +41,7 @@ const DateCalendarCell = class {
      */
     render() {
         const block = bem.BEM.block('date-calendar-cell');
-        return (index.h(index.Host, { key: 'f1423c65e711698622eb7e3bcc05bf2d585eb96f', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('today').class(!this.disabled && this.today)), block.modifier('selected').class(!this.disabled && this.selected)), block.modifier('disabled').class(this.disabled === true)), tabIndex: -1, type: "button", role: "button", "aria-label": this.fullDate, "aria-selected": aria.ariaBooleanToString(this.selected), "aria-disabled": aria.ariaBooleanToString(this.disabled), title: this.fullDate, onClick: (ev) => this.onClick(ev, this.isoDate) }, index.h("time", { key: '379ceff0e82c46073f60ad0cd30bbe9d0cf580d1', dateTime: this.isoDate }, this.day)));
+        return (index.h(index.Host, { key: '842cdcd6256c4ee8c37eb8643acc7fb7938384ca', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('today').class(!this.disabled && this.today)), block.modifier('selected').class(!this.disabled && this.selected)), block.modifier('disabled').class(this.disabled === true)), tabIndex: -1, type: "button", role: "button", "aria-label": this.fullDate, "aria-selected": aria.ariaBooleanToString(this.selected), "aria-disabled": aria.ariaBooleanToString(this.disabled), title: this.fullDate, onClick: (ev) => this.onClick(ev, this.isoDate) }, index.h("time", { key: 'ac2ad50412436932aaecbe933085b85e5fae1939', dateTime: this.isoDate }, this.day)));
     }
 };
 

package/dist/cjs/bal-date-calendar_2.cjs.entry.js

@@ -448,7 +448,7 @@ const DateCalendar = class {
         const block = bem.BEM.block('date-calendar');
         const blockBody = block.element('body');
         const blockFoot = block.element('foot');
-        return (index$2.h(index$2.Host, { key: '2d3c53228071c0a19b7195a60f655bffec5fcfc0', class: Object.assign({}, block.class()) }, index$2.h(CalendarNav, { key: '4722788040473eb1c25f3446658d7b958e874291', language: this.language, monthFullNames: this.monthFullNames, month: this.month, year: this.year, isCalendarVisible: this.isCalendarVisible, isListVisible: this.isMonthListVisible || this.isYearListVisible, onClickSelectMonthAndYear: this.onClickSelectMonthAndYear, onClickPreviousMonth: this.onClickPreviousMonth, onClickNextMonth: this.onClickNextMonth }), index$2.h("div", { key: '02dcfdf4f715f41c59e2a9df96a290c27cf08ae1', class: Object.assign({}, blockBody.class()) }, index$2.h(CalendarGrid, { key: '4c46752a54d57421757d861233960d03f5ba699e', isVisible: this.isCalendarVisible, grid: this.calendarGrid, weekdays: this.weekdays, firstDayOfWeek: this.firstDayOfWeek, selectedDate: this.selectedDate, ref: el => (this.gridEl = el), onSelectDay: isoDate => this.onSelectDay(isoDate) }), index$2.h(CalendarList, { key: '30104d40aa8929886651789d7c06ad87f3e6378f', name: "year", isVisible: this.isYearListVisible, girdHeight: girdHeight, list: this.years, ref: el => (this.yearListEl = el), onSelect: item => this.onClickYear(item.value) }), index$2.h(CalendarList, { key: '0e2fa6041ac31f0144086d1b8026af06e3008251', name: "month", isVisible: this.isMonthListVisible, girdHeight: girdHeight, list: this.months, onSelect: item => this.onClickMonth(item.value) })), index$2.h("div", { key: '21a7d0cc3c36217f69fb4b07b42b065c3c82299d', class: Object.assign({}, blockFoot.class()) }, index$2.h("slot", { key: '8aafbfd98fd66b25e313c15864831d4538c56487' }))));
+        return (index$2.h(index$2.Host, { key: 'eaefb77fdf97dfe4bcbb09b2caf3684f31c1a4d9', class: Object.assign({}, block.class()) }, index$2.h(CalendarNav, { key: '712b86dbbf4dbedf593b51cf10400aa0437efe1d', language: this.language, monthFullNames: this.monthFullNames, month: this.month, year: this.year, isCalendarVisible: this.isCalendarVisible, isListVisible: this.isMonthListVisible || this.isYearListVisible, onClickSelectMonthAndYear: this.onClickSelectMonthAndYear, onClickPreviousMonth: this.onClickPreviousMonth, onClickNextMonth: this.onClickNextMonth }), index$2.h("div", { key: '7d587de561a4b24918ceaf54c5e22d407e2728b3', class: Object.assign({}, blockBody.class()) }, index$2.h(CalendarGrid, { key: 'b4b17a94e92013da775269113ced4b9140cb37d9', isVisible: this.isCalendarVisible, grid: this.calendarGrid, weekdays: this.weekdays, firstDayOfWeek: this.firstDayOfWeek, selectedDate: this.selectedDate, ref: el => (this.gridEl = el), onSelectDay: isoDate => this.onSelectDay(isoDate) }), index$2.h(CalendarList, { key: '5068789acc4252cbc3d15757b26a989448ed7cec', name: "year", isVisible: this.isYearListVisible, girdHeight: girdHeight, list: this.years, ref: el => (this.yearListEl = el), onSelect: item => this.onClickYear(item.value) }), index$2.h(CalendarList, { key: '5821497bc9fdecde1a1348e707f423053142caf6', name: "month", isVisible: this.isMonthListVisible, girdHeight: girdHeight, list: this.months, onSelect: item => this.onClickMonth(item.value) })), index$2.h("div", { key: '9298445573b3e3b193260cd65d53a2d4b531f71c', class: Object.assign({}, blockFoot.class()) }, index$2.h("slot", { key: '15fab7aa2e780d7b3f5aff2ad866ddcc3a4665c4' }))));
     }
     get el() { return index$2.getElement(this); }
     static get watchers() { return {
@@ -1455,14 +1455,14 @@ const InputDate = class {
     render() {
         const block = bem.BEM.block('input-date');
         const native = block.element('native');
-        return (index$2.h(index$2.Host, { key: '38b2bfc91f2249540a9f5d2536d34b917070e903', onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, index$2.h("input", Object.assign({ key: 'b689f1780889807f91d776f903712cd3e6341283', class: {
+        return (index$2.h(index$2.Host, { key: '17c98f2fa3a240bebc7ef5e766fe40602e4b1b58', onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, index$2.h("input", Object.assign({ key: 'dadfc0a5ea369ef70820cea9ed13f38c373db197', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
                 'is-clickable': this.clickable && !(this.disabled || this.readonly),
                 'bal-focusable': !this.disabled,
                 'has-icon-right': this.hasIconRight,
-            }, "data-testid": "bal-date-input", ref: el => (this.nativeInput = el), 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": aria.ariaBooleanToString(this.disabled), required: this.required, disabled: this.disabled, readonly: this.readonly, autoComplete: this.autocomplete }, this.maskAdapter.attributes, this.inheritedAttributes, { placeholder: this.placeholder, value: this.inputValue, onKeyDown: event => this.maskAdapter.bindKeyDown(event), onClick: event => this.maskAdapter.bindClick(event), onFocus: event => this.maskAdapter.bindFocus(event), onBlur: event => this.maskAdapter.bindBlur(event), onPaste: event => this.maskAdapter.bindPaste(event) })), index$2.h("input", { key: '80414fe198d63903a23853e603053771c50448d3', type: "date", class: Object.assign({}, native.class()), name: this.name, min: this.min, max: this.max, value: this.value, tabindex: -1, "aria-hidden": "true" })));
+            }, "data-testid": "bal-date-input", ref: el => (this.nativeInput = el), 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": aria.ariaBooleanToString(this.disabled), required: this.required, disabled: this.disabled, readonly: this.readonly, autoComplete: this.autocomplete }, this.maskAdapter.attributes, this.inheritedAttributes, { placeholder: this.placeholder, value: this.inputValue, onKeyDown: event => this.maskAdapter.bindKeyDown(event), onClick: event => this.maskAdapter.bindClick(event), onFocus: event => this.maskAdapter.bindFocus(event), onBlur: event => this.maskAdapter.bindBlur(event), onPaste: event => this.maskAdapter.bindPaste(event) })), index$2.h("input", { key: '67cb4386326e64333af807af28f9161b5537d9f9', type: "date", class: Object.assign({}, native.class()), name: this.name, min: this.min, max: this.max, value: this.value, tabindex: -1, "aria-hidden": "true" })));
     }
     get el() { return index$2.getElement(this); }
     static get watchers() { return {

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

@@ -291,7 +291,7 @@ const Date = class {
         const block = bem.BEM.block('date');
         const blockIcon = block.element('icon');
         const blockPopup = block.element('popup');
-        return (index.h(index.Host, { key: '05aca7ed04b08027762c5ef57508d5db38b0ccc6', id: this.inputId, class: Object.assign({}, block.class()) }, index.h("bal-input-group", { key: '4be9f4b1261ed958e71959721e254b0eaae2d11b', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, index.h("bal-input-date", Object.assign({ key: '26af250c551879cc6018f0c7105ef149fb5e1df9', name: this.name, required: this.required, placeholder: this.placeholder, value: this.value, min: this.min, max: this.max, invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, allowInvalidValue: this.allowInvalidValue, autocomplete: this.autocomplete, onClick: this.onInputClick, onBalInput: this.onInputInput, onBalChange: this.onInputChange, onBalFocus: this.onInputFocus, onBalBlur: this.onInputBlur, onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (index.h("bal-icon", { name: "date", role: "button", tabindex: -1, class: Object.assign(Object.assign({}, blockIcon.class()), blockIcon.modifier('clickable').class(!this.disabled && !this.readonly)), "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', onClick: this.onIconClick, "aria-label": date.i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": aria.ariaBooleanToString(this.isExpanded) })) : ('')), index.h("div", { key: 'bd3a743349853f2d02cd6eab24a0f4cf8bb66896', role: "dialog", class: Object.assign(Object.assign({}, blockPopup.class()), blockPopup.modifier('visible').class(this.isExpanded)), ref: el => (this.floatingEl = el), "aria-hidden": `${this.isExpanded !== true}`, "aria-presented": `${this.isExpanded === true}` }, index.h("bal-date-calendar", { key: '562fe8d5b1dadc617fe1e5de53a636fc5cdd5b01', value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
+        return (index.h(index.Host, { key: 'c5e83ababf39d1ae281d5c4431e1f85d4bef5a5c', id: this.inputId, class: Object.assign({}, block.class()) }, index.h("bal-input-group", { key: '519bd01f611ab9b629a8fac99946b7d8214970bd', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, index.h("bal-input-date", Object.assign({ key: '564e29d2af3a0a67c6e7fa11d7349f2c225f9d08', name: this.name, required: this.required, placeholder: this.placeholder, value: this.value, min: this.min, max: this.max, invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, allowInvalidValue: this.allowInvalidValue, autocomplete: this.autocomplete, onClick: this.onInputClick, onBalInput: this.onInputInput, onBalChange: this.onInputChange, onBalFocus: this.onInputFocus, onBalBlur: this.onInputBlur, onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (index.h("bal-icon", { name: "date", role: "button", tabindex: -1, class: Object.assign(Object.assign({}, blockIcon.class()), blockIcon.modifier('clickable').class(!this.disabled && !this.readonly)), "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', onClick: this.onIconClick, "aria-label": date.i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": aria.ariaBooleanToString(this.isExpanded) })) : ('')), index.h("div", { key: '1488dceb9ac13271c5f32568a6b5ac283d778ddc', role: "dialog", class: Object.assign(Object.assign({}, blockPopup.class()), blockPopup.modifier('visible').class(this.isExpanded)), ref: el => (this.floatingEl = el), "aria-hidden": `${this.isExpanded !== true}`, "aria-presented": `${this.isExpanded === true}` }, index.h("bal-date-calendar", { key: '71d92c077111c858413a164796fb1beb296e1e36', value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -32,7 +32,7 @@ const Divider = class {
         const space = !!this.space;
         const color = !!this.color;
         const borderStyle = !!this.borderStyle;
-        return (index.h(index.Host, { key: '21f73f3c69f25be339fbd8cdd02a65690d4e36a9', role: "separator", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${this.layout}`).class(layout)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`color-${this.color}`).class(color)), block.modifier(`border-style-${this.borderStyle}`).class(borderStyle)) }, index.h("slot", { key: '133fd38632e8361528ce8ade456196a8384ddc95' })));
+        return (index.h(index.Host, { key: 'a30a0bffab73e52c2ffc3c2e9c40cb5982a6cb3e', role: "separator", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${this.layout}`).class(layout)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`color-${this.color}`).class(color)), block.modifier(`border-style-${this.borderStyle}`).class(borderStyle)) }, index.h("slot", { key: '7e5c590639624403dcfecad33353f5638538089d' })));
     }
 };
 tslib_es6.__decorate([