@baloise/ds-core 16.3.0 → 16.4.0-nightly.20240916

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

@@ -1,14 +1,14 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-b6003bc7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { l as raf } from './helpers-c201154e.js';
+import { l as raf, b as waitAfterFramePaint } from './helpers-c201154e.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { s as stopEventBubbling } from './form-input-28a08ec5.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f979fe5c.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-35deac22.js';
 import { g as getComputedWidth } from './style-ca1bd202.js';
 import { L as ListenToMutation } from './mutation.decorator-c7b24839.js';
 import { L as ListenToSwipe } from './swipe.decorator-9d904794.js';
 import { L as ListenToResize } from './resize.decorator-f70563b5.js';
-import { b as balBreakpoints } from './breakpoints.subject-9ea7074e.js';
+import { b as balBreakpoints } from './breakpoints.subject-23463a68.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
@@ -18,18 +18,18 @@ import './config.utils-6ac6c9bd.js';
 import './listener-04842ae9.js';
 import './swipe.subject-f1d64e8d.js';
 import './device-8c6d2881.js';
-import './tokens.esm-7d2734e1.js';
+import './tokens.esm-225678ae.js';
 import './log-dfd1c19f.js';
 
-const TabControl = ({ value, items, onControlChange }) => {
+const TabControl = ({ value, items, containerId, onControlChange }) => {
     const block = BEM.block('carousel');
     const controls = block.element('controls');
     return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('tabs').class()) },
         h("bal-card", null,
-            h("bal-card-content", null, items.map(item => (h("bal-button", { key: item.value, expanded: true, color: value === item.value ? 'primary' : 'light', onClick: () => onControlChange(item) }, item.label)))))));
+            h("bal-card-content", null, items.map(item => (h("bal-button", { "aria-controls": containerId, key: item.value, expanded: true, color: value === item.value ? 'primary' : 'light', onClick: () => onControlChange(item) }, item.label)))))));
 };
 
-const DotControl = ({ value, items, onControlChange }) => {
+const DotControl = ({ value, items, containerId, onControlChange }) => {
     const block = BEM.block('carousel');
     const controls = block.element('controls');
     const onChange = (ev) => {
@@ -43,25 +43,25 @@ const DotControl = ({ value, items, onControlChange }) => {
         onControlChange(items[selectedValue]);
     };
     return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('tabs').class()) },
-        h("bal-pagination", { interface: "small", value: value + 1, totalPages: items.length, onBalChange: onChange })));
+        h("bal-pagination", { "aria-controls": containerId, interface: "small", value: value + 1, totalPages: items.length, onBalChange: onChange })));
 };
 
-const LargeControl = ({ isFirst, isLast, inverted, areControlsHidden, onNextClick, onPreviousClick, leftControlTitle, rightControlTitle, }) => {
+const LargeControl = ({ isFirst, isLast, inverted, areControlsHidden, onNextClick, onPreviousClick, containerId, leftControlTitle, rightControlTitle, }) => {
     const block = BEM.block('carousel');
     const controls = block.element('controls');
     const button = controls.element('button');
     return (h("div", { "data-mutation": "false", class: Object.assign(Object.assign({}, controls.class()), controls.modifier('large').class()) },
-        h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst && areControlsHidden)), square: true, icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), disabled: isFirst, "aria-hidden": isFirst && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-left", title: leftControlTitle }),
-        h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast && areControlsHidden)), square: true, icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), disabled: isLast, "aria-hidden": isLast && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
+        h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst && areControlsHidden)), "aria-controls": containerId, square: true, icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), disabled: isFirst, "aria-hidden": isFirst && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-left", title: leftControlTitle }),
+        h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast && areControlsHidden)), "aria-controls": containerId, square: true, icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), disabled: isLast, "aria-hidden": isLast && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
 };
 
-const SmallControl = ({ isFirst, isLast, inverted, leftControlTitle, rightControlTitle, onNextClick, onPreviousClick, }) => {
+const SmallControl = ({ isFirst, isLast, inverted, leftControlTitle, rightControlTitle, containerId, onNextClick, onPreviousClick, }) => {
     const block = BEM.block('carousel');
     const controls = block.element('controls');
     const button = controls.element('button');
     return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('small').class()) },
-        h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst)), square: true, size: "small", icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), disabled: isFirst, "aria-hidden": isFirst ? 'true' : null, tabindex: "-1", "data-testid": "bal-carousel-control-left", title: leftControlTitle }),
-        h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast)), square: true, size: "small", icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), disabled: isLast, "aria-hidden": isLast ? 'true' : null, tabindex: "-1", "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
+        h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst)), "aria-controls": containerId, square: true, size: "small", icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), disabled: isFirst, "aria-hidden": isFirst ? 'true' : null, tabindex: "-1", "data-testid": "bal-carousel-control-left", title: leftControlTitle }),
+        h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast)), "aria-controls": containerId, square: true, size: "small", icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), disabled: isLast, "aria-hidden": isLast ? 'true' : null, tabindex: "-1", "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
 };
 
 const i18nControlLabel = {
@@ -116,6 +116,7 @@ const Carousel = class {
         this.balChange = createEvent(this, "balChange", 7);
         this.previousTransformValue = 0;
         this.carouselId = `bal-carousel-${CarouselIds++}`;
+        this.carouselContainerId = `bal-carousel-${CarouselIds++}-container`;
         this.mutationObserverActive = true;
         /**
          * EVENT BINDING
@@ -141,6 +142,7 @@ const Carousel = class {
         this.steps = 1;
         this.itemsPerView = 1;
         this.controls = 'none';
+        this.htmlRole = 'list';
         this.controlsOverflow = false;
         this.inverted = false;
         this.fullHeight = false;
@@ -182,6 +184,18 @@ const Carousel = class {
     resizeListener() {
         this.itemsChanged();
     }
+    listenToKeyDown(ev) {
+        if (this.htmlRole !== 'tablist') {
+            if (ev.code === 'Tab') {
+                if (ev.shiftKey) {
+                    this.focusPreviousItem(ev);
+                }
+                else {
+                    this.focusNextItem(ev);
+                }
+            }
+        }
+    }
     /**
      * @internal define config for the component
      */
@@ -200,16 +214,12 @@ const Carousel = class {
         const activeSlide = await this.buildSlide(previousValue);
         if (activeSlide) {
             const didAnimate = await this.animate(activeSlide.transformActive, true);
-            if (this.value > 0) {
+            if (didAnimate || this.value !== previousValue) {
                 this.value = previousValue;
-                if (!didAnimate) {
-                    this.previous();
-                }
-                else {
-                    this.balChange.emit(this.value);
-                }
+                this.balChange.emit(this.value);
             }
         }
+        return activeSlide;
     }
     async next(steps = this.steps) {
         const items = this.getAllItemElements();
@@ -221,11 +231,12 @@ const Carousel = class {
         const activeSlide = await this.buildSlide(nextValue);
         if (activeSlide) {
             const didAnimate = await this.animate(activeSlide.transformActive, true);
-            if (didAnimate) {
+            if (didAnimate || this.value !== nextValue) {
                 this.value = nextValue;
                 this.balChange.emit(this.value);
             }
         }
+        return activeSlide;
     }
     /**
      * PRIVATE METHODS
@@ -308,6 +319,24 @@ const Carousel = class {
             this.animate(activeSlide.transformActive, false);
         }
     }
+    async focusNextItem(ev) {
+        if (!this.isLast) {
+            const slide = await this.next(1);
+            if (slide && slide.el) {
+                stopEventBubbling(ev);
+                await slide.el.setFocus();
+            }
+        }
+    }
+    async focusPreviousItem(ev) {
+        if (!this.isFirst) {
+            const slide = await this.previous(1);
+            if (slide && slide.el) {
+                stopEventBubbling(ev);
+                await slide.el.setFocus();
+            }
+        }
+    }
     /**
      * GETTERS
      * ------------------------------------------------------
@@ -349,7 +378,7 @@ const Carousel = class {
         const leftControlTitle = i18nControlLabel[this.language].left;
         const rightControlTitle = i18nControlLabel[this.language].right;
         const controlItems = this.getAllControlItems();
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-${this.controls}`).class()) }, this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: controlItems, onControlChange: item => this.onControlChange(item.value) })) : (''), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, inner.class()), inner.modifier(`items-per-view-${this.itemsPerView}`).class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), inner.modifier(`shadow-left`).class(this.hasShadowLeft())), inner.modifier(`shadow-right`).class(this.hasShadowRight())), ref: el => (this.innerEl = el) }, h("div", { class: Object.assign(Object.assign(Object.assign({}, container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.containerEl = el) }, h("slot", null), this.border ? (h("div", { id: `${this.carouselId}-border`, class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.borderEl = el) })) : (''))), this.controls === 'dots' ? (h(DotControl, { value: this.value, items: controlItems, onControlChange: item => this.onControlChange(item.value) })) : (''), this.controls === 'large' ? (h(LargeControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, areControlsHidden: !this.isMobile, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : (''), this.controls === 'small' ? (h(SmallControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : ('')));
+        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-${this.controls}`).class()) }, this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, inner.class()), inner.modifier(`items-per-view-${this.itemsPerView}`).class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), inner.modifier(`shadow-left`).class(this.hasShadowLeft())), inner.modifier(`shadow-right`).class(this.hasShadowRight())), ref: el => (this.innerEl = el) }, h("div", { role: this.htmlRole, "aria-live": this.htmlRole !== '' ? 'polite' : undefined, id: this.carouselContainerId, class: Object.assign(Object.assign(Object.assign({}, container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.containerEl = el) }, h("slot", null), this.border ? (h("div", { id: `${this.carouselId}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.borderEl = el) })) : (''))), this.controls === 'dots' ? (h(DotControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), this.controls === 'large' ? (h(LargeControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, areControlsHidden: !this.isMobile, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : (''), this.controls === 'small' ? (h(SmallControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : ('')));
     }
     get el() { return getElement(this); }
 };
@@ -406,6 +435,7 @@ const CarouselItem = class {
         };
         this.src = undefined;
         this.label = '';
+        this.htmlRole = 'listitem';
         this.elementType = 'button';
         this.name = '';
         this.value = '';
@@ -424,12 +454,18 @@ const CarouselItem = class {
             label: this.label,
         };
     }
+    async setFocus() {
+        await waitAfterFramePaint();
+        if (this.buttonEl) {
+            this.buttonEl.focus();
+        }
+    }
     render() {
         const block = BEM.block('carousel');
         const itemEl = block.element('item');
         const isProduct = !!this.color && !!this.label;
         if (!isProduct) {
-            return (h(Host, { class: Object.assign({}, itemEl.class()) }, this.src !== undefined ? (h("img", Object.assign({ draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), h("slot", null)));
+            return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, this.src !== undefined ? (h("img", Object.assign({ draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), h("slot", null)));
         }
         const button = itemEl.element('button');
         const image = button.element('image');
@@ -444,7 +480,7 @@ const CarouselItem = class {
                 rel,
                 target,
             };
-        return (h(Host, { class: Object.assign({}, itemEl.class()) }, h(TagType, Object.assign({}, attrs, { class: Object.assign(Object.assign({}, button.class()), button.modifier(`color-${this.color}`).class()), part: "native", onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }), this.src !== undefined ? (h("img", Object.assign({ class: Object.assign({}, image.class()), loading: "lazy", draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), this.label !== undefined ? h("span", { class: Object.assign({}, label.class()) }, this.label) : '', h("slot", null))));
+        return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, h(TagType, Object.assign({}, attrs, { class: Object.assign(Object.assign({}, button.class()), button.modifier(`color-${this.color}`).class()), part: "native", onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, ref: el => (this.buttonEl = el) }), this.src !== undefined ? (h("img", Object.assign({ class: Object.assign({}, image.class()), loading: "lazy", draggable: false, onDragStart: () => false, "aria-hidden": "true", src: this.src }, this.imageInheritAttributes))) : (''), this.label !== undefined ? h("span", { class: Object.assign({}, label.class()) }, this.label) : '', h("slot", null))));
     }
     get el() { return getElement(this); }
 };

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

@@ -4,7 +4,7 @@ import { s as stopEventBubbling, c as inputSetFocus, d as inputSetBlur } from '.
 import { i as isDescendant, p as hasTagName } from './helpers-c201154e.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
-import { e as isSpaceKey, o as areArraysEqual } from './index.esm-83b1f9c4.js';
+import { e as isSpaceKey, o as areArraysEqual } from './index.esm-76abd8e3.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { F as FOCUS_KEYS } from './focus-visible-f0cdd043.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
@@ -52,6 +52,9 @@ const Checkbox = class {
             if (element.href) {
                 return;
             }
+            if (this.wasFocused) {
+                this.focused = true;
+            }
             if (element.nodeName !== 'INPUT' && !this.disabled && !this.readonly) {
                 this.toggleChecked();
                 (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
@@ -69,6 +72,7 @@ const Checkbox = class {
             this.balFocus.emit(ev);
             if (this.keyboardMode) {
                 this.focused = true;
+                this.wasFocused = true;
             }
         };
         this.onBlur = (ev) => {
@@ -79,11 +83,17 @@ const Checkbox = class {
             this.focused = false;
         };
         this.onPointerDown = () => (this.keyboardMode = false);
-        this.onKeydown = (ev) => (this.keyboardMode = FOCUS_KEYS.includes(ev.key));
+        this.onKeydown = (ev) => {
+            if (!isSpaceKey(ev)) {
+                this.wasFocused = false;
+            }
+            this.keyboardMode = FOCUS_KEYS.includes(ev.key);
+        };
         this.hasLabel = true;
         this.focused = false;
         this.buttonTabindex = undefined;
         this.ariaForm = defaultBalAriaForm;
+        this.wasFocused = false;
         this.name = this.inputId;
         this.label = '';
         this.invisible = false;

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

@@ -1,6 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-b6003bc7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { i as i18nBalClose } from './bal-close.i18n-f2daa707.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
@@ -16,15 +15,11 @@ const BalCloseStyle0 = balCloseCss;
 const Close = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.inheritedAttributes = {};
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
         this.size = '';
         this.inverted = false;
     }
-    componentWillRender() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['tabindex']);
-    }
     /**
      * @internal define config for the component
      */
@@ -37,7 +32,7 @@ const Close = class {
         const buttonEl = blockEl.element('button');
         const iconEl = buttonEl.element('icon');
         const label = i18nBalClose[this.language].close;
-        return (h(Host, { class: Object.assign({}, blockEl.class()) }, h("button", Object.assign({ type: "button", "aria-label": label, title: label, tabindex: -1, 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" }, this.inheritedAttributes), h("bal-icon", { name: "close", size: this.size === 'small' ? 'x-small' : this.size === 'medium' ? 'medium' : 'small', inverted: this.inverted, class: Object.assign({}, iconEl.class()) }))));
+        return (h(Host, { class: Object.assign({}, blockEl.class()) }, h("button", { type: "button", "aria-label": label, title: label, tabindex: "0", class: Object.assign(Object.assign(Object.assign({}, buttonEl.class()), buttonEl.modifier('inverted').class(this.inverted)), buttonEl.modifier(`size-${this.size}`).class(this.size !== '')), "data-testid": "bal-close" }, h("bal-icon", { name: "close", size: this.size === 'small' ? 'x-small' : this.size === 'medium' ? 'medium' : 'small', inverted: this.inverted, class: Object.assign({}, iconEl.class()) }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/{bal-label.entry.js → bal-content_2.entry.js}

@@ -10,17 +10,62 @@ import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 
+const balContentCss = ".bal-content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;text-align:left;gap:.25rem}.bal-content--align-center{-ms-flex-align:center;align-items:center;text-align:center}.bal-content--align-end{-ms-flex-align:end;align-items:flex-end;text-align:right}.bal-content--layout-horizontal{-ms-flex-direction:row;flex-direction:row}.bal-content--layout-vertical{-ms-flex-direction:column;flex-direction:column}.bal-content--space-none{gap:0rem}.bal-content--space-xxx-small{gap:.125rem}.bal-content--space-xx-small{gap:.25rem}.bal-content--space-x-small{gap:.5rem}.bal-content--space-small{gap:.75rem}.bal-content--space-normal{gap:1rem}.bal-content>.bal-text{margin:0}";
+const BalContentStyle0 = balContentCss;
+
+const Content = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.layout = 'vertical';
+        this.align = 'start';
+        this.space = 'xx-small';
+        this.direction = '';
+        this.alignment = '';
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = BEM.block('content');
+        const direction = !!this.direction;
+        const layout = !!this.layout;
+        const alignment = !!this.alignment;
+        const align = !!this.align;
+        const space = !!this.space;
+        let layoutValue = this.layout;
+        if (direction) {
+            layoutValue = this.direction === 'row' ? 'horizontal' : 'vertical';
+        }
+        let alignValue = this.align.split(' ').join('-');
+        if (alignment) {
+            alignValue = this.alignment.split(' ').join('-');
+        }
+        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)) }, h("slot", null)));
+    }
+};
+__decorate([
+    Logger('bal-content'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Content.prototype, "createLogger", null);
+Content.style = BalContentStyle0;
+
 const balLabelCss = ".bal-label{display:inline;-webkit-box-sizing:content-box;box-sizing:content-box;position:static;word-break:break-word}.bal-label__native{display:inline;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:pre;min-width:0;font-family:var(--bal-form-field-label-font-family);font-weight:var(--bal-form-field-label-font-weight);font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal)}.bal-label__native--multiline{white-space:normal}.bal-label__native--no-wrap{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bal-label__native--small{font-family:var(--bal-font-family-text);font-size:var(--bal-text-size-small);line-height:var(--bal-line-height-small)}@media screen and (min-width: 769px),print{.bal-label__native--small{font-size:var(--bal-text-size-small-tablet);line-height:var(--bal-line-height-tablet-small)}}@media screen and (min-width: 1024px){.bal-label__native--small{font-size:var(--bal-text-size-small-desktop);line-height:var(--bal-line-height-desktop-small)}}.bal-label__native--large{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-large);line-height:var(--bal-line-height-large)}@media screen and (min-width: 769px),print{.bal-label__native--large{font-size:var(--bal-text-size-large-tablet);line-height:var(--bal-line-height-tablet-large)}}@media screen and (min-width: 1024px){.bal-label__native--large{font-size:var(--bal-text-size-large-desktop);line-height:var(--bal-line-height-desktop-large)}}.bal-label__native--x-large{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-label__native--x-large{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-label__native--x-large{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}.bal-label__native--xx-large{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-xx-large);line-height:var(--bal-line-height-xx-large)}@media screen and (min-width: 769px),print{.bal-label__native--xx-large{font-size:var(--bal-text-size-xx-large-tablet);line-height:var(--bal-line-height-tablet-xx-large)}}@media screen and (min-width: 1024px){.bal-label__native--xx-large{font-size:var(--bal-text-size-xx-large-desktop);line-height:var(--bal-line-height-desktop-xx-large)}}.bal-label__native--xxx-large{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-xxx-large);line-height:var(--bal-line-height-xxx-large)}@media screen and (min-width: 769px),print{.bal-label__native--xxx-large{font-size:var(--bal-text-size-xxx-large-tablet);line-height:var(--bal-line-height-tablet-xxx-large)}}@media screen and (min-width: 1024px){.bal-label__native--xxx-large{font-size:var(--bal-text-size-xxx-large-desktop);line-height:var(--bal-line-height-desktop-xxx-large)}}.bal-label__native--success{color:var(--bal-form-field-label-success-color)}.bal-label__native--danger{color:var(--bal-form-field-label-danger-color)}.bal-label__native--disabled{color:var(--bal-form-field-label-disabled-color) !important}.bal-label__native--regular{font-weight:var(--bal-font-weight-regular)}.bal-label__native--hovered{color:var(--bal-form-field-label-color-hover)}.bal-label__native--pressed{color:var(--bal-form-field-label-color-active)}.bal-label__native--danger.bal-label__native--hovered{color:var(--bal-form-field-label-danger-color-hover)}.bal-label__native--danger.bal-label__native--pressed{color:var(--bal-form-field-label-danger-color-active)}";
 const BalLabelStyle0 = balLabelCss;
 
 const Label = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.inputId = `bal-lbl-${labelIds++}`;
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
         this.ariaForm = defaultBalAriaForm;
         this.htmlFor = undefined;
+        this.htmlId = `bal-lbl-${labelIds++}`;
         this.required = true;
         this.noWrap = false;
         this.multiline = false;
@@ -73,7 +118,7 @@ const Label = class {
         const xLarge = this.size === 'x-large';
         const xxLarge = this.size === 'xx-large';
         const xxxLarge = this.size === 'xxx-large';
-        const id = this.ariaForm.labelId || this.inputId;
+        const id = this.ariaForm.labelId || this.htmlId;
         const htmlFor = this.htmlFor || this.ariaForm.controlId;
         return (h(Host, { class: Object.assign({}, block.class()) }, h("label", { id: id, htmlFor: htmlFor, 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(Object.assign({}, block.element('native').class()), block.element('native').modifier('multiline').class(this.multiline)), block.element('native').modifier('no-wrap').class(this.noWrap)), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('danger').class(danger)), block.element('native').modifier('success').class(success)), block.element('native').modifier('regular').class(regular)), block.element('native').modifier('small').class(small)), block.element('native').modifier('large').class(large)), block.element('native').modifier('x-large').class(xLarge)), block.element('native').modifier('xx-large').class(xxLarge)), block.element('native').modifier('xxx-large').class(xxxLarge)), block.element('native').modifier('hovered').class(this.hovered)), block.element('native').modifier('pressed').class(this.pressed)) }, h("slot", null), suffix)));
     }
@@ -94,4 +139,4 @@ __decorate([
 let labelIds = 0;
 Label.style = BalLabelStyle0;
 
-export { Label as bal_label };
+export { Content as bal_content, Label as bal_label };

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

@@ -1,8 +1,8 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-b6003bc7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { z as lodash_padstart, d as dateSeparator } from './index.esm-83b1f9c4.js';
+import { D as lodash_padstart, d as dateSeparator } from './index.esm-76abd8e3.js';
 import { l as lodash_isnil } from './index-82aff103.js';
-import { B as BalDate, i as i18nBalDate } from './date-38a0b208.js';
+import { B as BalDate, i as i18nBalDate } from './date-aba2d404.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { b as waitAfterFramePaint, n as hasParent } from './helpers-c201154e.js';
 import { B as BEM } from './bem-8c7d2eb0.js';

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { e as isSpaceKey } from './index.esm-83b1f9c4.js';
+import { e as isSpaceKey } from './index.esm-76abd8e3.js';
 import { a as autoUpdate, c as computePosition, o as offset, f as flip } from './floating-ui.dom.esm-f1cf1077.js';
-import { B as BalDate, i as i18nBalDate } from './date-38a0b208.js';
+import { B as BalDate, i as i18nBalDate } from './date-aba2d404.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';

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

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { k as rIC, m as debounceEvent } from './helpers-c201154e.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
-import { r as requiredArgs, t as toDate, b as toInteger, g as getDefaultOptions, p as parse, f as formatDateString, i as isValidIsoString, c as format, e as isSpaceKey, h as isEnterKey, d as dateSeparator, j as getYear, n as now, k as getMonth, m as getDate } from './index.esm-83b1f9c4.js';
+import { r as requiredArgs, t as toDate, b as toInteger, g as getDefaultOptions, p as parse, f as formatDateString, i as isValidIsoString, c as format, e as isSpaceKey, h as isEnterKey, d as dateSeparator, j as getYear, n as now, k as getMonth, m as getDate } from './index.esm-76abd8e3.js';
 import { l as lodash_isnil } from './index-82aff103.js';
 import { N as NUMBER_KEYS, A as ACTION_KEYS, i as isCtrlOrCommandKey } from './keys.constant-0eb059e0.js';
 import { i as i18nBalDatepicker } from './bal-datepicker.i18n-63a3cb67.js';
@@ -12,16 +12,16 @@ import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
 import { d as defaultConfig, a as defaultLocale } from './config.default-7efdc82d.js';
-import { b as balBreakpoints } from './breakpoints.subject-9ea7074e.js';
+import { b as balBreakpoints } from './breakpoints.subject-23463a68.js';
 import { g as useBalConfig } from './config.utils-6ac6c9bd.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f979fe5c.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-35deac22.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './_commonjsHelpers-1c8beb5f.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-7d2734e1.js';
+import './tokens.esm-225678ae.js';
 
 /**
  * @name addDays