@baloise/ds-core 16.5.0 → 16.5.1

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

@@ -4,8 +4,8 @@ import { l as raf, t as transitionEndAsync, m as debounceEvent, w as waitForComp
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
-import { s as stopEventBubbling } from './form-input-28a08ec5.js';
-import { h as isEnterKey, e as isSpaceKey } from './index.esm-76abd8e3.js';
+import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
+import { h as isEnterKey, e as isSpaceKey } from './index.esm-cc299511.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';

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

@@ -2,13 +2,13 @@ import { h, r as registerInstance, c as createEvent, H as Host, g as getElement
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.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-f2ac9963.js';
+import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-8a50482f.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-3605e395.js';
+import { b as balBreakpoints } from './breakpoints.subject-e3538fe7.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,7 +18,7 @@ import './config.utils-6ac6c9bd.js';
 import './listener-04842ae9.js';
 import './swipe.subject-f1d64e8d.js';
 import './device-8c6d2881.js';
-import './tokens.esm-337782ae.js';
+import './tokens.esm-7cf87670.js';
 import './log-dfd1c19f.js';
 
 const TabControl = ({ value, items, containerId, onControlChange }) => {

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

@@ -1,7 +1,7 @@
 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 { B as BEM } from './bem-8c7d2eb0.js';
-import { s as stopEventBubbling } from './form-input-28a08ec5.js';
+import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { F as FOCUS_KEYS } from './focus-visible-f0cdd043.js';
 import { i as isDescendant } from './helpers-c201154e.js';

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

@@ -1,10 +1,10 @@
 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 { s as stopEventBubbling, c as inputSetFocus, d as inputSetBlur } from './form-input-28a08ec5.js';
+import { s as stopEventBubbling, c as inputSetFocus, d as inputSetBlur } from './form-input-a8fdaaef.js';
 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-76abd8e3.js';
+import { e as isSpaceKey, o as areArraysEqual } from './index.esm-cc299511.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';

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

@@ -0,0 +1,52 @@
+import { r as registerInstance, h, H as Host } from './index-b6003bc7.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
+import { B as BEM } from './bem-8c7d2eb0.js';
+import { L as Logger } from './log-dfd1c19f.js';
+import './browser-a8073d92.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;
+
+export { Content as bal_content };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b6003bc7.js';
-import { s as stopEventBubbling } from './form-input-28a08ec5.js';
+import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import './helpers-c201154e.js';
 import './browser-a8073d92.js';

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 { D as lodash_padstart, d as dateSeparator } from './index.esm-76abd8e3.js';
+import { D as lodash_padstart, d as dateSeparator } from './index.esm-cc299511.js';
 import { l as lodash_isnil } from './index-82aff103.js';
-import { B as BalDate, i as i18nBalDate } from './date-aba2d404.js';
+import { B as BalDate, i as i18nBalDate } from './date-6e8f5617.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';
@@ -10,7 +10,7 @@ import { d as defaultConfig } from './config.default-7efdc82d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import { L as ListenToSwipe } from './swipe.decorator-9d904794.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
-import { c as inputSetFocus, d as inputSetBlur } from './form-input-28a08ec5.js';
+import { m as hasValueChanged, c as inputSetFocus, d as inputSetBlur } from './form-input-a8fdaaef.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
 import { N as NUMBER_KEYS } from './keys.constant-0eb059e0.js';
 import { I as INVALID_VALUE } from './mask-util-71edc2b8.js';
@@ -591,8 +591,7 @@ class MaskContext {
                     this._options.component.balInput.emit(this.value);
                 }
                 if ((eventType === 'change' || eventType === 'blur') && parsedValue !== undefined) {
-                    const valueChanged = this._options.component.value !== parsedValue;
-                    if (valueChanged) {
+                    if (hasValueChanged(this._options.component.value, parsedValue)) {
                         this._options.component.value = parsedValue;
                         this._options.component.balChange.emit(parsedValue);
                     }

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

@@ -1,12 +1,12 @@
 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-76abd8e3.js';
+import { e as isSpaceKey } from './index.esm-cc299511.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-aba2d404.js';
+import { B as BalDate, i as i18nBalDate } from './date-6e8f5617.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';
-import { s as stopEventBubbling } from './form-input-28a08ec5.js';
+import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
 import { m as debounceEvent } from './helpers-c201154e.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';

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

@@ -2,26 +2,26 @@ 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-76abd8e3.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-cc299511.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';
-import { s as stopEventBubbling, g as getInputTarget, i as inputHandleFocus, a as inputHandleHostClick, b as inputListenOnClick, c as inputSetFocus, d as inputSetBlur } from './form-input-28a08ec5.js';
+import { s as stopEventBubbling, g as getInputTarget, i as inputHandleFocus, a as inputHandleHostClick, b as inputListenOnClick, c as inputSetFocus, d as inputSetBlur } from './form-input-a8fdaaef.js';
 import { p as preventDefault } from './utils-9fbab1d3.js';
 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-3605e395.js';
+import { b as balBreakpoints } from './breakpoints.subject-e3538fe7.js';
 import { g as useBalConfig } from './config.utils-6ac6c9bd.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f2ac9963.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-8a50482f.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-337782ae.js';
+import './tokens.esm-7cf87670.js';
 
 /**
  * @name addDays

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

@@ -1,9 +1,9 @@
 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 { o as areArraysEqual, q as isArrowDownKey, s as isArrowUpKey, h as isEnterKey, u as isEscapeKey, e as isSpaceKey } from './index.esm-76abd8e3.js';
+import { o as areArraysEqual, q as isArrowDownKey, s as isArrowUpKey, h as isEnterKey, u as isEscapeKey, e as isSpaceKey } from './index.esm-cc299511.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
-import { s as stopEventBubbling } from './form-input-28a08ec5.js';
+import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
 import { k as rIC, b as waitAfterFramePaint, d as waitAfterIdleCallback } from './helpers-c201154e.js';

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

@@ -33,6 +33,7 @@ const Field = class {
             'bal-input-slider',
             'bal-file-upload',
             'bal-dropdown',
+            'bal-segment',
         ];
         this.formElements = [...this.formControlElement, 'bal-field-label', 'bal-field-message'];
         this.isDirectChild = (el) => {
@@ -122,6 +123,8 @@ const Field = class {
             'bal-field-control bal-dropdown',
             'bal-field-control bal-checkbox',
             'bal-field-control bal-radio',
+            'bal-field-control bal-segment-item',
+            'bal-field-control bal-segment',
             'bal-field-control bal-checkbox-group',
             'bal-field-control bal-radio-group',
             'bal-field-control bal-number-input',

package/dist/esm/bal-file-upload.entry.js

@@ -1,7 +1,7 @@
 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 { o as areArraysEqual } from './index.esm-76abd8e3.js';
-import { s as stopEventBubbling, a as inputHandleHostClick, i as inputHandleFocus, e as inputHandleBlur, c as inputSetFocus, d as inputSetBlur } from './form-input-28a08ec5.js';
+import { o as areArraysEqual } from './index.esm-cc299511.js';
+import { s as stopEventBubbling, a as inputHandleHostClick, i as inputHandleFocus, e as inputHandleBlur, c as inputSetFocus, d as inputSetBlur } from './form-input-a8fdaaef.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { F as FileUploadRejectionReason } from './bal-file-upload.type-2a70f4ec.js';

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

@@ -1,10 +1,10 @@
 import { r as registerInstance, h, H as Host } from './index-b6003bc7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { l as loadFooterLinks, a as loadSocialMediaLinks, L as Language } from './index.esm-76abd8e3.js';
+import { l as loadFooterLinks, a as loadSocialMediaLinks, L as Language } from './index.esm-cc299511.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { k as rIC } from './helpers-c201154e.js';
-import { s as stopEventBubbling } from './form-input-28a08ec5.js';
+import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
 import { e as updateBalLanguage } from './config.utils-6ac6c9bd.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';

package/dist/esm/{bal-popover_2.entry.js → bal-hint_5.entry.js}

@@ -1,16 +1,182 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-b6003bc7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
+import { p as preventDefault } from './utils-9fbab1d3.js';
+import { B as BalScrollHandler } from './scroll-f4b20848.js';
+import { b as balBreakpoints } from './breakpoints.subject-e3538fe7.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-8a50482f.js';
+import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import { b as balBrowser } from './browser-a8073d92.js';
 import { L as Logger } from './log-dfd1c19f.js';
-import { b as balBreakpoints } from './breakpoints.subject-3605e395.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f2ac9963.js';
+import './index-82aff103.js';
 import './helpers-c201154e.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-337782ae.js';
+import './tokens.esm-7cf87670.js';
+
+const balHintCss = ":root{--bal-hint-content-background:var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}@media (hover: hover)and (pointer: fine){.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle,.bal-hint__icon:focus svg,.bal-hint__icon:focus g,.bal-hint__icon:focus path,.bal-hint__icon:focus circle{fill:var(--bal-color-light-blue-5)}}.bal-hint__content{background:var(--bal-hint-content-background);display:-ms-flexbox;display:flex;gap:1.5rem;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{-ms-flex:1;flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{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-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}";
+const BalHintStyle0 = balHintCss;
+
+const Hint = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bodyScrollHandler = new BalScrollHandler();
+        this.onPopoverChange = (ev) => {
+            this.isActive = ev.detail;
+            preventDefault(ev);
+        };
+        this.isActive = false;
+        this.innerCloseLabel = 'Close';
+        this.isMobile = balBreakpoints.isMobile;
+        this.closeLabel = undefined;
+        this.small = false;
+    }
+    connectedCallback() {
+        this.bodyScrollHandler.connect();
+    }
+    componentDidRender() {
+        this.updateContent();
+    }
+    disconnectedCallback() {
+        this.bodyScrollHandler.disconnect();
+    }
+    breakpointListener(breakpoints) {
+        const isCurrentMobile = breakpoints.mobile;
+        if (isCurrentMobile !== this.isMobile) {
+            this.isActive = false;
+        }
+        this.isMobile = isCurrentMobile;
+    }
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        if (!this.closeLabel) {
+            switch (state.language) {
+                case 'de':
+                    this.innerCloseLabel = 'Schliessen';
+                    break;
+                case 'fr':
+                    this.innerCloseLabel = 'Fermer';
+                    break;
+                case 'it':
+                    this.innerCloseLabel = 'Chiudere';
+                    break;
+                case 'nl':
+                    this.innerCloseLabel = 'Sluiten';
+                    break;
+                default:
+                    this.innerCloseLabel = 'Close';
+                    break;
+            }
+        }
+    }
+    /**
+     * Toggles the hint box.
+     */
+    async toggle() {
+        if (this.isActive) {
+            this.dismiss();
+        }
+        else {
+            this.present();
+        }
+    }
+    /**
+     * Opens the hint box.
+     */
+    async present() {
+        if (this.popoverElement) {
+            this.popoverElement.present();
+        }
+        if (this.isMobile) {
+            this.bodyScrollHandler.disable();
+        }
+        this.isActive = true;
+    }
+    /**
+     * Closes the hint box.
+     */
+    async dismiss() {
+        if (this.popoverElement) {
+            this.popoverElement.dismiss();
+        }
+        if (this.isMobile) {
+            this.bodyScrollHandler.enable();
+        }
+        this.isActive = false;
+    }
+    updateContent() {
+        if (this.hintContentEl && this.slotWrapperEl) {
+            this.hintContentEl.innerHTML = this.slotWrapperEl.innerHTML;
+        }
+    }
+    render() {
+        const block = BEM.block('hint');
+        const elIcon = block.element('icon');
+        const elContent = block.element('content');
+        const elButtons = elContent.element('buttons');
+        const padding = this.isMobile ? 0 : 8;
+        const offsetY = this.isMobile ? 0 : 16;
+        const TriggerIcon = () => {
+            return (h("bal-icon", { class: Object.assign({}, elIcon.class()), "data-testid": "bal-hint-trigger", "bal-popover-trigger": true, "aria-haspopup": "true", role: "button", name: "info-circle", onClick: () => this.toggle() }));
+        };
+        const HintContent = () => {
+            return (h("div", { class: Object.assign({}, elContent.class()), "data-testid": "bal-hint-content" }, h("div", { ref: el => (this.hintContentEl = el) }), h("bal-button-group", { class: Object.assign(Object.assign({}, elButtons.class()), elButtons.modifier('is-hidden-desktop').class(this.small)) }, h("bal-button", { "data-testid": "bal-hint-close", color: "info", onClick: () => this.dismiss() }, this.closeLabel ? this.closeLabel : this.innerCloseLabel))));
+        };
+        const MobileOverlay = () => {
+            const elOverlay = block.element('overlay');
+            return (h("div", { class: Object.assign({}, elOverlay.class()) }, h(TriggerIcon, null), h("div", { class: Object.assign(Object.assign({}, elOverlay.element('content').class()), elOverlay.element('content').modifier('active').class(this.isActive)) }, h(HintContent, null))));
+        };
+        const Popover = () => {
+            return (h("div", { class: Object.assign({}, block.element('popover').class()) }, h("bal-popover", { hint: true, position: "right", offsetX: 0, offsetY: offsetY, padding: padding, ref: el => (this.popoverElement = el), onBalChange: this.onPopoverChange }, h(TriggerIcon, null), h("bal-popover-content", { color: "grey" }, h(HintContent, null)))));
+        };
+        const HintElement = this.isMobile ? MobileOverlay : Popover;
+        return (h(Host, { class: Object.assign({}, block.class()) }, h(HintElement, null), h("div", { ref: el => (this.slotWrapperEl = el), style: { display: 'none' } }, h("slot", null))));
+    }
+    get element() { return getElement(this); }
+};
+__decorate([
+    ListenToBreakpoints(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Hint.prototype, "breakpointListener", null);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Hint.prototype, "configChanged", null);
+Hint.style = BalHintStyle0;
+
+const HintText = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        const block = BEM.block('hint');
+        const elContent = block.element('content');
+        const elText = elContent.element('text');
+        const elTextField = elText.element('field');
+        return (h(Host, { class: Object.assign({}, elText.class()) }, h("p", { class: Object.assign({}, elTextField.class()) }, h("slot", null))));
+    }
+};
+
+const HintTitle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        const block = BEM.block('hint');
+        const elContent = block.element('content');
+        const elTitle = elContent.element('title');
+        const elHeading = elTitle.element('heading');
+        return (h(Host, { class: Object.assign({}, elTitle.class()) }, h("h3", { class: Object.assign({}, elHeading.class()) }, h("span", null, h("slot", null)))));
+    }
+};
 
 var top = 'top';
 var bottom = 'bottom';
@@ -2136,4 +2302,4 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], PopoverContent.prototype, "breakpointListener", null);
 
-export { Popover as bal_popover, PopoverContent as bal_popover_content };
+export { Hint as bal_hint, HintText as bal_hint_text, HintTitle as bal_hint_title, Popover as bal_popover, PopoverContent as bal_popover_content };

package/dist/esm/bal-input-slider.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
 import { l as lodash_isnil } from './index-82aff103.js';
 import { m as debounceEvent } from './helpers-c201154e.js';
-import { s as stopEventBubbling } from './form-input-28a08ec5.js';
+import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
 import './browser-a8073d92.js';

package/dist/esm/bal-input-stepper.entry.js

@@ -1,10 +1,10 @@
 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 { c as commonjsGlobal } from './_commonjsHelpers-1c8beb5f.js';
-import { v as formatLocaleNumber } from './index.esm-76abd8e3.js';
+import { v as formatLocaleNumber } from './index.esm-cc299511.js';
 import { k as rIC, m as debounceEvent } from './helpers-c201154e.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
-import { s as stopEventBubbling, b as inputListenOnClick } from './form-input-28a08ec5.js';
+import { s as stopEventBubbling, b as inputListenOnClick } from './form-input-a8fdaaef.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
 import { i as i18nBalInputStepper } from './bal-input-stepper.i18n-aaa4a009.js';

package/dist/esm/bal-input.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 { m as debounceEvent } from './helpers-c201154e.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
-import { g as getInputTarget, i as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, s as stopEventBubbling, h as inputHandleClick, a as inputHandleHostClick, b as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-28a08ec5.js';
+import { g as getInputTarget, i as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, s as stopEventBubbling, h as inputHandleClick, a as inputHandleHostClick, b as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-a8fdaaef.js';
 import { l as lodash_isnil } from './index-82aff103.js';
 import { i as isCtrlOrCommandKey, A as ACTION_KEYS, N as NUMBER_KEYS } from './keys.constant-0eb059e0.js';
 import { B as BEM } from './bem-8c7d2eb0.js';

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

@@ -10,51 +10,6 @@ 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;
 
@@ -139,4 +94,4 @@ __decorate([
 let labelIds = 0;
 Label.style = BalLabelStyle0;
 
-export { Content as bal_content, Label as bal_label };
+export { Label as bal_label };

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

@@ -4,16 +4,16 @@ import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { l as raf, t as transitionEndAsync, h as debounce } from './helpers-c201154e.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
-import { b as balBreakpoints } from './breakpoints.subject-3605e395.js';
+import { b as balBreakpoints } from './breakpoints.subject-e3538fe7.js';
 import { L as ListenToResize } from './resize.decorator-f70563b5.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f2ac9963.js';
-import { e as isSpaceKey, h as isEnterKey } from './index.esm-76abd8e3.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-8a50482f.js';
+import { e as isSpaceKey, h as isEnterKey } from './index.esm-cc299511.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-337782ae.js';
+import './tokens.esm-7cf87670.js';
 import './index-82aff103.js';
 import './_commonjsHelpers-1c8beb5f.js';
 

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

@@ -3,15 +3,15 @@ import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { k as rIC } from './helpers-c201154e.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f2ac9963.js';
-import { b as balBreakpoints } from './breakpoints.subject-3605e395.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-8a50482f.js';
+import { b as balBreakpoints } from './breakpoints.subject-e3538fe7.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-337782ae.js';
+import './tokens.esm-7cf87670.js';
 
 const balLogoCss = ".bal-logo{position:static;display:block;height:22px}.bal-logo svg{-webkit-transform:unset !important;transform:unset !important}.bal-logo svg svg,.bal-logo svg g,.bal-logo svg path,.bal-logo svg circle{fill:#000d6e}.bal-logo>div{height:22px}@media screen and (min-width: 1024px){.bal-logo--animated{margin-left:-7px}}.bal-logo--white svg svg,.bal-logo--white svg g,.bal-logo--white svg path,.bal-logo--white svg circle{fill:#fff}@media screen and (min-width: 1024px){.bal-logo{height:32px}.bal-logo>div{height:32px}}.bal-logo--size-small{height:22px}.bal-logo--size-small>div{height:22px}";
 const BalLogoStyle0 = balLogoCss;

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

@@ -5,17 +5,17 @@ import { L as Logger } from './log-dfd1c19f.js';
 import { b as balBrowser } from './browser-a8073d92.js';
 import { B as BalScrollHandler } from './scroll-f4b20848.js';
 import { w as waitForComponent, d as waitAfterIdleCallback } from './helpers-c201154e.js';
-import { b as balBreakpoints } from './breakpoints.subject-3605e395.js';
+import { b as balBreakpoints } from './breakpoints.subject-e3538fe7.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
 import { L as ListenToMutation } from './mutation.decorator-c7b24839.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f2ac9963.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-8a50482f.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import { L as ListenToResize } from './resize.decorator-f70563b5.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-337782ae.js';
+import './tokens.esm-7cf87670.js';
 
 class NavLinkItem {
     constructor(item, observer) {