@baloise/ds-core 19.0.1 → 19.1.0

package/components/bal-button2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { i as inheritAttributes } from './attributes.js';
 import { a as ariaBooleanToString } from './aria.js';
+import { i as inheritAttributes } from './attributes.js';
 import { m as rOnLoad } from './helpers.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { d as defineCustomElement$1 } from './bal-spinner2.js';
@@ -12,6 +12,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     constructor() {
         super();
         this.__registerHost();
+        this.balClick = createEvent(this, "balClick", 7);
         this.balNavigate = createEvent(this, "balNavigate", 7);
         this.balFocus = createEvent(this, "balFocus", 7);
         this.balBlur = createEvent(this, "balBlur", 7);
@@ -24,8 +25,11 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
             this.balBlur.emit();
         };
         this.onClick = (ev) => {
-            if (this.href !== undefined) {
-                this.balNavigate.emit(ev);
+            if (!this.disabled) {
+                this.balClick.emit(ev);
+                if (this.href !== undefined) {
+                    this.balNavigate.emit(ev);
+                }
             }
         };
         this.isLargestContentPaintDone = false;
@@ -62,15 +66,10 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         }
     }
     componentDidLoad() {
-        var _a;
         rOnLoad(() => (this.isLargestContentPaintDone = true));
-        if (this.el.getAttribute('bal-popup') && !((_a = this.aria) === null || _a === void 0 ? void 0 : _a.haspopup)) {
-            this.aria = {
-                haspopup: 'true',
-            };
-        }
     }
     componentWillLoad() {
+        var _a;
         this.inheritAttributes = inheritAttributes(this.el, [
             'title',
             'aria-label',
@@ -79,6 +78,11 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
             'tabindex',
             'aria-haspopup',
         ]);
+        if (this.el.hasAttribute('bal-popup') && !((_a = this.aria) === null || _a === void 0 ? void 0 : _a.haspopup)) {
+            this.aria = {
+                haspopup: 'true',
+            };
+        }
     }
     componentDidRender() {
         this.balDidRender.emit();
@@ -205,7 +209,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         "noWrap": [4, "no-wrap"],
         "name": [1],
         "value": [8],
-        "aria": [16],
+        "aria": [1040],
         "isLargestContentPaintDone": [32]
     }, [[6, "click", "listenOnClick"]]]);
 function defineCustomElement() {

package/components/bal-date.js

@@ -1,14 +1,17 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { i as i18nBalDate } from './bal-date.i18n.js';
-import { B as BEM } from './bem.js';
-import { L as Logger } from './log.js';
+import { i as isEscapeKey } from './index.esm.js';
+import { a as ariaBooleanToString } from './aria.js';
 import { i as inheritAttributes } from './attributes.js';
-import { s as stopEventBubbling } from './form-input.js';
-import { o as debounceEvent } from './helpers.js';
-import { d as defaultBalAriaForm } from './form.js';
+import { B as BEM } from './bem.js';
+import { b as balBrowser } from './browser.js';
 import { b as balFloatingUi } from './floating-ui.js';
-import { a as ariaBooleanToString } from './aria.js';
+import { F as FOCUS_KEYS } from './focus-visible.js';
+import { d as defaultBalAriaForm } from './form.js';
+import { s as stopEventBubbling } from './form-input.js';
+import { p as rIC, o as debounceEvent, l as addEventListener, r as removeEventListener, d as waitAfterIdleCallback } from './helpers.js';
+import { L as Logger } from './log.js';
+import { i as i18nBalDate } from './bal-date.i18n.js';
 import { d as defineCustomElement$6 } from './bal-date-calendar2.js';
 import { d as defineCustomElement$5 } from './bal-date-calendar-cell2.js';
 import { d as defineCustomElement$4 } from './bal-icon2.js';
@@ -34,9 +37,44 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         this.balFocus = createEvent(this, "balFocus", 7);
         this.balInputClick = createEvent(this, "balInputClick", 7);
         this.balIconClick = createEvent(this, "balIconClick", 7);
-        this.balPopoverPrepare = createEvent(this, "balPopoverPrepare", 7);
         this.inputId = `bal-da-${dateIds++}`;
         this.inheritedAttributes = {};
+        /**
+         * LIFECYCLE
+         * ------------------------------------------------------
+         */
+        this.hasConnected = false;
+        /**
+         * PRIVATE METHOD
+         * ------------------------------------------------------
+         */
+        this.handleKeydown = (ev) => {
+            this.isKeyboardMode = FOCUS_KEYS.includes(ev.key);
+        };
+        this.handlePointerDown = () => {
+            this.isKeyboardMode = false;
+        };
+        this.handleOutsideClick = (ev) => {
+            if (this.isExpanded) {
+                if (!this.el.contains(ev.target)) {
+                    this.isExpanded = false;
+                    this.hasFocus = false;
+                    rIC(() => this.balBlur.emit(ev));
+                }
+            }
+        };
+        this.handleFocus = (ev) => {
+            stopEventBubbling(ev);
+            this.hasFocus = true;
+            this.balFocus.emit(ev.detail);
+        };
+        this.handleBlur = (ev) => {
+            stopEventBubbling(ev);
+            if (!this.isExpanded) {
+                this.hasFocus = false;
+                rIC(() => this.balBlur.emit(ev.detail));
+            }
+        };
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -60,6 +98,8 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
             this.balChange.emit(this.value);
             if (this.closeOnSelect) {
                 this.close();
+                this.hasFocus = false;
+                rIC(() => this.balBlur.emit());
             }
         };
         this.onInputInput = (ev) => {
@@ -77,24 +117,22 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
             this.value = ev.detail;
             this.balChange.emit(this.value);
         };
-        this.onInputFocus = (ev) => {
-            stopEventBubbling(ev);
-            this.balFocus.emit(ev.detail);
-        };
-        this.onInputBlur = (ev) => {
-            stopEventBubbling(ev);
-            this.balBlur.emit(ev.detail);
-        };
         this.onKeyPress = async ({ detail }) => {
-            if (isSpaceKey(detail) && !this.triggerIcon) {
+            if (detail && detail.key) {
                 if (this.isExpanded) {
-                    await this.close();
+                    if (detail.key === 'Tab' || isEscapeKey(detail) || isSpaceKey(detail)) {
+                        await this.close();
+                    }
                 }
                 else {
-                    await this.open();
+                    if (isSpaceKey(detail)) {
+                        await this.open();
+                    }
                 }
             }
         };
+        this.isKeyboardMode = false;
+        this.hasFocus = false;
         this.isExpanded = false;
         this.language = defaultConfig.language;
         this.calendarValue = undefined;
@@ -129,43 +167,26 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
     debounceChanged() {
         this.balChange = debounceEvent(this.balChange, this.debounce);
     }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
     connectedCallback() {
-        this.valueChanged();
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    async listenToKeydown(ev) {
-        if (this.isExpanded && (ev.key === 'Escape' || ev.key === 'Esc')) {
-            ev.preventDefault();
-            await this.close();
-        }
-    }
-    async listenOnKeyup(ev) {
-        // dismiss popup when focus next form control
-        if (ev.key === 'Tab' && !this.el.contains(document.activeElement) && this.isExpanded) {
-            await this.close();
+        if (balBrowser.hasDocument) {
+            addEventListener(document, 'keydown', this.handleKeydown);
+            addEventListener(document, 'touchstart', this.handlePointerDown);
+            addEventListener(document, 'mousedown', this.handlePointerDown);
+            addEventListener(document, 'click', this.handleOutsideClick);
         }
+        this.hasConnected = true;
+        this.valueChanged();
     }
-    async listenOnclick(ev) {
-        // when clicked outside dismiss popup
-        if (this.isExpanded && !this.el.contains(ev.target)) {
-            await this.close();
+    disconnectedCallback() {
+        if (balBrowser.hasDocument) {
+            removeEventListener(document, 'keydown', this.handleKeydown);
+            removeEventListener(document, 'touchstart', this.handlePointerDown);
+            removeEventListener(document, 'mousedown', this.handlePointerDown);
+            removeEventListener(document, 'click', this.handleOutsideClick);
         }
     }
-    async listenOnPopoverPrepare(ev) {
-        // dismiss this popover, because another will open
-        if (this.inputId !== ev.detail) {
-            await this.close();
-        }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
     }
     /**
      * @internal define config for the component
@@ -215,8 +236,10 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
      * `input.focus()`.
      */
     async setFocus() {
-        var _a;
-        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+        if (this.inputEl && !this.disabled && !this.readonly) {
+            await waitAfterIdleCallback();
+            this.inputEl.focus();
+        }
     }
     /**
      * Sets blur on the native `input` in `bal-input`. Use this method instead of the global
@@ -225,7 +248,10 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
      */
     async setBlur() {
         var _a;
-        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setBlur();
+        if (this.inputEl && !this.disabled && !this.readonly) {
+            await waitAfterIdleCallback();
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setBlur();
+        }
     }
     /**
      * Returns the native `<input>` element used under the hood.
@@ -242,14 +268,9 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         this.ariaForm = Object.assign({}, ariaForm);
         (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAriaForm(ariaForm);
     }
-    /**
-     * PRIVATE METHOD
-     * ------------------------------------------------------
-     */
     async expand() {
         if (this.referenceEl && this.floatingEl) {
             const lib = await balFloatingUi.load();
-            this.balPopoverPrepare.emit(this.inputId);
             this.balWillAnimate.emit();
             this.isExpanded = true;
             this.popupCleanup = lib.autoUpdate(this.referenceEl, this.floatingEl, () => {
@@ -292,7 +313,7 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         const block = BEM.block('date');
         const blockIcon = block.element('icon');
         const blockPopup = block.element('popup');
-        return (h(Host, { key: 'f6b28c8faba40da040e139ec92757837c643bc44', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '8474544891624bc816606bcbca7a9589f2740acb', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ key: '04609fd4beddc284e8c132864cdbff1cd76e0328', 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 ? (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": i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": ariaBooleanToString(this.isExpanded) })) : ('')), h("div", { key: '4d167de602c3a6e48f6f35d7fade4e5d5b6d4706', 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}` }, h("bal-date-calendar", { key: 'b0abca943beea5a541eead43d050a0c5add16216', 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 (h(Host, { key: 'df763339a5267bc106d30ca6cc3d62bc75c8f05f', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '55d4f91e6b77f56f38274bb984be9dc21a54a5a4', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ key: 'bf2b5f66aaf62f45f01e42cdd3e236707094d9dd', 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: ev => this.handleFocus(ev), onBalBlur: ev => this.handleBlur(ev), onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (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": i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": ariaBooleanToString(this.isExpanded) })) : ('')), h("div", { key: '828597483d6ccc05c8fa9059b7d64941d8edc3d8', 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}` }, h("bal-date-calendar", { key: '781a4f0d0b8ebc2c8b05a883e9441f4483e25820', 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 this; }
     static get watchers() { return {
@@ -321,6 +342,8 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         "allowInvalidValue": [4, "allow-invalid-value"],
         "debounce": [2],
         "autoInvalidOff": [516, "auto-invalid-off"],
+        "isKeyboardMode": [32],
+        "hasFocus": [32],
         "isExpanded": [32],
         "language": [32],
         "calendarValue": [32],
@@ -334,7 +357,7 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         "setBlur": [64],
         "getInputElement": [64],
         "setAriaForm": [64]
-    }, [[8, "keydown", "listenToKeydown"], [8, "keyup", "listenOnKeyup"], [4, "click", "listenOnclick"], [4, "balPopoverPrepare", "listenOnPopoverPrepare"]], {
+    }, undefined, {
         "value": ["valueChanged"],
         "debounce": ["debounceChanged"]
     }]);

package/components/bal-field-hint.js

@@ -1,14 +1,16 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { B as BEM } from './bem.js';
-import { d as defineCustomElement$a } from './bal-button2.js';
-import { d as defineCustomElement$9 } from './bal-button-group2.js';
+import { d as defineCustomElement$c } from './bal-button2.js';
+import { d as defineCustomElement$b } from './bal-button-group2.js';
+import { d as defineCustomElement$a } from './bal-close2.js';
+import { d as defineCustomElement$9 } from './bal-heading2.js';
 import { d as defineCustomElement$8 } from './bal-hint2.js';
 import { d as defineCustomElement$7 } from './bal-hint-text2.js';
 import { d as defineCustomElement$6 } from './bal-hint-title2.js';
 import { d as defineCustomElement$5 } from './bal-icon2.js';
-import { d as defineCustomElement$4 } from './bal-popover2.js';
-import { d as defineCustomElement$3 } from './bal-popover-content2.js';
-import { d as defineCustomElement$2 } from './bal-spinner2.js';
+import { d as defineCustomElement$4 } from './bal-popup2.js';
+import { d as defineCustomElement$3 } from './bal-spinner2.js';
+import { d as defineCustomElement$2 } from './bal-stack2.js';
 
 const FieldHint = /*@__PURE__*/ proxyCustomElement(class FieldHint extends HTMLElement {
     constructor() {
@@ -31,7 +33,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-field-hint", "bal-button", "bal-button-group", "bal-hint", "bal-hint-text", "bal-hint-title", "bal-icon", "bal-popover", "bal-popover-content", "bal-spinner"];
+    const components = ["bal-field-hint", "bal-button", "bal-button-group", "bal-close", "bal-heading", "bal-hint", "bal-hint-text", "bal-hint-title", "bal-icon", "bal-popup", "bal-spinner", "bal-stack"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-field-hint":
             if (!customElements.get(tagName)) {
@@ -40,10 +42,20 @@ function defineCustomElement$1() {
             break;
         case "bal-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$c();
             }
             break;
         case "bal-button-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "bal-close":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "bal-heading":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
@@ -68,17 +80,17 @@ function defineCustomElement$1() {
                 defineCustomElement$5();
             }
             break;
-        case "bal-popover":
+        case "bal-popup":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "bal-popover-content":
+        case "bal-spinner":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "bal-spinner":
+        case "bal-stack":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/components/bal-hint2.js

@@ -3,18 +3,20 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { p as preventDefault } from './utils.js';
 import { B as BalScrollHandler } from './scroll.js';
-import { d as defineCustomElement$6 } from './bal-button2.js';
-import { d as defineCustomElement$5 } from './bal-button-group2.js';
+import { d as defineCustomElement$8 } from './bal-button2.js';
+import { d as defineCustomElement$7 } from './bal-button-group2.js';
+import { d as defineCustomElement$6 } from './bal-close2.js';
+import { d as defineCustomElement$5 } from './bal-heading2.js';
 import { d as defineCustomElement$4 } from './bal-icon2.js';
-import { d as defineCustomElement$3 } from './bal-popover2.js';
-import { d as defineCustomElement$2 } from './bal-popover-content2.js';
-import { d as defineCustomElement$1 } from './bal-spinner2.js';
-import { b as balBreakpoints } from './breakpoints.subject.js';
+import { d as defineCustomElement$3 } from './bal-popup2.js';
+import { d as defineCustomElement$2 } from './bal-spinner2.js';
+import { d as defineCustomElement$1 } from './bal-stack2.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
+import { b as balBreakpoints } from './breakpoints.subject.js';
 import { L as ListenToConfig } from './config.decorator.js';
 import { i as isEnterKey, a as isSpaceKey } from './keyboard.helpers.js';
 
-const balHintCss = "@media (hover: hover)and (pointer: fine){.bal-hint__icon:focus-visible:not(:active){-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}: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}.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover 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__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.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 balHintCss = "@media (hover: hover)and (pointer: fine){.bal-hint__icon:focus-visible:not(:active){-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}: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}.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle{fill:var(--bal-color-light-blue-5)}.bal-hint .bal-popup__container{z-index:var(--bal-z-index-popup);background:var(--bal-hint-content-background);width:auto;max-width:30rem;min-width:16.25rem}.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__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.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 = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
@@ -22,7 +24,8 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
         super();
         this.__registerHost();
         this.bodyScrollHandler = new BalScrollHandler();
-        this.onPopoverChange = (ev) => {
+        this.componentId = `bal-hint-${hintIds++}`;
+        this.onPopupChange = (ev) => {
             this.isActive = ev.detail;
             preventDefault(ev);
         };
@@ -87,8 +90,8 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
      * Opens the hint box.
      */
     async present() {
-        if (this.popoverElement) {
-            this.popoverElement.present();
+        if (this.popupElement) {
+            this.popupElement.present();
         }
         if (this.isMobile) {
             this.bodyScrollHandler.disable();
@@ -99,8 +102,8 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
      * Closes the hint box.
      */
     async dismiss() {
-        if (this.popoverElement) {
-            this.popoverElement.dismiss();
+        if (this.popupElement) {
+            this.popupElement.dismiss();
         }
         if (this.isMobile) {
             this.bodyScrollHandler.enable();
@@ -117,10 +120,8 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
         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", tabindex: 0, onClick: () => this.toggle(), onKeyDown: event => {
+            return (h("bal-icon", { class: Object.assign({}, elIcon.class()), "bal-popup": this.componentId, "data-testid": "bal-hint-trigger", "aria-haspopup": "true", role: "button", name: "info-circle", tabindex: 0, onKeyDown: event => {
                     if (isEnterKey(event) || isSpaceKey(event)) {
                         event.preventDefault();
                         this.toggle();
@@ -130,15 +131,10 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
         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 Popup = () => {
+            return (h("div", { class: Object.assign({}, block.element('popup').class()) }, h(TriggerIcon, null), h("bal-popup", { id: this.componentId, placement: "right", ref: el => (this.popupElement = el), onBalChange: this.onPopupChange, variant: this.isMobile ? 'fullscreen' : 'popover', offset: this.isMobile ? 0 : 16 }, h("bal-popup-content", null, 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))));
+        return (h(Host, { class: Object.assign({}, block.class()) }, h(Popup, null), h("div", { ref: el => (this.slotWrapperEl = el), style: { display: 'none' } }, h("slot", null))));
     }
     get element() { return this; }
     static get style() { return BalHintStyle0; }
@@ -165,11 +161,12 @@ __decorate([
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
 ], Hint.prototype, "configChanged", null);
+let hintIds = 0;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-hint", "bal-button", "bal-button-group", "bal-icon", "bal-popover", "bal-popover-content", "bal-spinner"];
+    const components = ["bal-hint", "bal-button", "bal-button-group", "bal-close", "bal-heading", "bal-icon", "bal-popup", "bal-spinner", "bal-stack"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-hint":
             if (!customElements.get(tagName)) {
@@ -178,10 +175,20 @@ function defineCustomElement() {
             break;
         case "bal-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$8();
             }
             break;
         case "bal-button-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "bal-close":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "bal-heading":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
@@ -191,17 +198,17 @@ function defineCustomElement() {
                 defineCustomElement$4();
             }
             break;
-        case "bal-popover":
+        case "bal-popup":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "bal-popover-content":
+        case "bal-spinner":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "bal-spinner":
+        case "bal-stack":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }