@baloise/ds-core 19.3.0 → 19.4.0-nightly.20250721

package/components/bal-footer.js

@@ -1,14 +1,14 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { l as loadFooterLinks, a as loadSocialMediaLinks, L as Language } from './index.esm.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
+import { e as updateBalLanguage } from './config.utils.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
-import { p as rIC } from './helpers.js';
+import { n as rIC } from './helpers.js';
 import { d as defineCustomElement$3 } from './bal-icon2.js';
 import { d as defineCustomElement$2 } from './bal-logo2.js';
-import { e as updateBalLanguage } from './config.utils.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
 
 const i18nBalFooter = {
     en: {
@@ -44,7 +44,6 @@ const i18nBalFooter = {
 };
 
 const balFooterCss = ":root{--bal-footer-font-family:var(--bal-font-family-text);--bal-footer-background:var(--bal-color-primary);--bal-footer-color:var(--bal-color-text-white);--bal-footer-language-color-hover:var(--bal-color-light-blue-2);--bal-footer-language-background-hover:var(--bal-color-light-blue-2);--bal-footer-language-color-active:var(--bal-color-light-blue-3);--bal-footer-language-background-active:var(--bal-color-light-blue-3)}.bal-footer{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:static;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.bal-footer__slot{color:var(--bal-footer-color)}.bal-footer__inner{position:relative;font-family:var(--bal-footer-font-family);background-color:var(--bal-footer-background);padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-footer__inner{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}}@media screen and (min-width: 1024px){.bal-footer__inner{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}}.bal-footer__inner__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--bal-space-large)}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-footer__inner__wrapper{gap:var(--bal-space-medium-tablet)}}@media screen and (max-width: 768px){.bal-footer__inner__wrapper{gap:var(--bal-space-medium-tablet)}}.bal-footer__inner__wrapper__header-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row}.bal-footer__inner__wrapper__header-container__language{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__header-container__language__wrapper{display:-ms-flexbox;display:flex;gap:1rem;cursor:pointer}.bal-footer__inner__wrapper__header-container__language__wrapper select{padding-left:2px;padding-right:2px;background:rgba(0,0,0,0);-webkit-appearance:none;border:none;color:var(--bal-color-white);font-weight:var(--bal-font-weight-bold);font-family:var(--bal-font-family-title);cursor:pointer}.bal-footer__inner__wrapper__header-container__language__wrapper select option{background:var(--bal-color-white) !important;color:var(--bal-color-primary) !important;font-weight:var(--bal-font-weight-bold) !important;font-family:var(--bal-font-family-text) !important}.bal-footer__inner__wrapper__header-container__language__wrapper:hover svg,.bal-footer__inner__wrapper__header-container__language__wrapper:hover g,.bal-footer__inner__wrapper__header-container__language__wrapper:hover path,.bal-footer__inner__wrapper__header-container__language__wrapper:hover circle{fill:var(--bal-footer-language-background-hover)}.bal-footer__inner__wrapper__header-container__language__wrapper:hover select{color:var(--bal-footer-language-color-hover)}.bal-footer__inner__wrapper__header-container__language__wrapper:active svg,.bal-footer__inner__wrapper__header-container__language__wrapper:active g,.bal-footer__inner__wrapper__header-container__language__wrapper:active path,.bal-footer__inner__wrapper__header-container__language__wrapper:active circle{fill:var(--bal-footer-language-background-active)}.bal-footer__inner__wrapper__header-container__language__wrapper:active select{color:var(--bal-footer-language-color-active)}.bal-footer__inner__wrapper__header-container__logo{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__links-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap}@media screen and (min-width: 769px),print{.bal-footer__inner__wrapper__links-container{-ms-flex-direction:column;flex-direction:column}}@media screen and (min-width: 1024px){.bal-footer__inner__wrapper__links-container{-ms-flex-direction:row;flex-direction:row}}.bal-footer__inner__wrapper__links-container__legal-links{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;gap:var(--bal-space-large-desktop)}.bal-footer__inner__wrapper__links-container__legal-links a{font-size:var(--bal-text-size-small) !important}@media screen and (max-width: 768px){.bal-footer__inner__wrapper__links-container__legal-links{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%;gap:var(--bal-space-normal)}}.bal-footer__inner__wrapper__links-container__social-media-links{-ms-flex-align:center;align-items:center;gap:var(--bal-space-large-desktop);padding:var(--bal-space-normal) var(--bal-space-normal) var(--bal-space-normal) 0}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-footer__inner__wrapper__links-container__social-media-links{padding-bottom:var(--bal-space-large)}}@media screen and (max-width: 768px){.bal-footer__inner__wrapper__links-container__social-media-links{padding-bottom:var(--bal-space-large);-ms-flex-pack:center;justify-content:center;width:100%;padding:var(--bal-space-normal) 0 var(--bal-space-normal) 0}}";
-const BalFooterStyle0 = balFooterCss;
 
 const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
     constructor() {
@@ -55,9 +54,25 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
         this.allowedLanguages = defaultConfig.allowedLanguages;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true` the legal Baloise links will be hidden.
+         */
         this.hideLinks = false;
+        /**
+         * If provided, the footer links will be overridden.
+         */
         this.overrideLinks = undefined;
+        /**
+         * If `true` the social media links will be shown.
+         */
         this.showSocialMedia = false;
+        /**
+         * If `true` the language selection will be hidden.
+         */
         this.hideLanguageSelection = false;
     }
     createLogger(log) {
@@ -144,10 +159,10 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
                 'is-light': true,
             } }, link.label)))))))));
     }
-    static get style() { return BalFooterStyle0; }
+    static get style() { return balFooterCss; }
 }, [4, "bal-footer", {
         "hideLinks": [4, "hide-links"],
-        "overrideLinks": [16],
+        "overrideLinks": [16, "override-links"],
         "showSocialMedia": [4, "show-social-media"],
         "hideLanguageSelection": [4, "hide-language-selection"],
         "links": [32],

package/components/bal-form-grid.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const balFormGridCss = ".bal-form-grid{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:.25rem}@media screen and (min-width: 1024px){.bal-form-grid{-ms-flex-direction:row;flex-direction:row}}.bal-form-grid.columns{margin-top:0 !important;margin-bottom:0 !important}";
-const BalFormGridStyle0 = balFormGridCss;
 
 const FormGrid = /*@__PURE__*/ proxyCustomElement(class FormGrid extends HTMLElement {
     constructor() {
@@ -11,7 +10,7 @@ const FormGrid = /*@__PURE__*/ proxyCustomElement(class FormGrid extends HTMLEle
     render() {
         return (h(Host, { key: '7dd05e54b6f2070956b4630a542c249734981731', class: `bal-form-grid grid is-multiline my-none py-none` }, h("slot", { key: 'd9490a9e4153d985dad9258dc795ea1b092930f4' })));
     }
-    static get style() { return BalFormGridStyle0; }
+    static get style() { return balFormGridCss; }
 }, [4, "bal-form-grid"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/bal-form.js

@@ -1,16 +1,24 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { s as scrollToFirstInvalidField } from './form.js';
-import { e as waitAfterIdleCallback, b as waitAfterFramePaint } from './helpers.js';
+import { b as waitAfterIdleCallback, a as waitAfterFramePaint } from './helpers.js';
 
 const balFormCss = ".bal-form{display:block;position:static}";
-const BalFormStyle0 = balFormCss;
 
 const Form = /*@__PURE__*/ proxyCustomElement(class Form extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * If `true` a native form element is added as a wrapper of the slot.
+         */
         this.native = false;
+        /**
+         * If `true` it adds the novalidate attribute to the native form element.
+         */
         this.novalidate = false;
+        /**
+         * The css class for the inner form element
+         */
         this.formClass = '';
     }
     /**
@@ -32,7 +40,7 @@ const Form = /*@__PURE__*/ proxyCustomElement(class Form extends HTMLElement {
         return (h(Host, { key: 'ed6e199a51186247ccad8e06989ba9819e43bed2' }, h(NativeEl, Object.assign({ key: 'de4a61e1690819e10096cd1c35eecc0371d73aae' }, attrs, { class: this.formClass }), h("slot", { key: 'f35cce725fc54ad822aada77aabaf6f0babd4141' }))));
     }
     get el() { return this; }
-    static get style() { return BalFormStyle0; }
+    static get style() { return balFormCss; }
 }, [4, "bal-form", {
         "native": [4],
         "novalidate": [4],

package/components/bal-heading2.js

@@ -61,21 +61,40 @@ const HEADING_COLORS = {
 };
 
 const balHeadingCss = ":root{--bal-heading-color-white:var(--bal-color-text-white);--bal-heading-color-success:var(--bal-color-text-success);--bal-heading-color-warning:var(--bal-color-text-warning);--bal-heading-color-danger:var(--bal-color-text-danger)}.bal-heading{display:block;position:static;margin:0}.bal-heading:not(:last-child){margin-bottom:var(--bal-space-x-small)}.bal-heading.bal-heading--level-display:not(:last-child){margin-bottom:var(--bal-space-normal)}.bal-heading--space-all,.bal-heading--space-top{margin-top:var(--bal-space-x-small)}.bal-heading--space-all,.bal-heading--space-bottom{margin-bottom:var(--bal-space-x-small)}.bal-heading--level-display.bal-heading--space-all,.bal-heading--level-display.bal-heading--space-top{margin-top:var(--bal-space-normal)}.bal-heading--level-display.bal-heading--space-all,.bal-heading--level-display.bal-heading--space-bottom{margin-bottom:var(--bal-space-normal)}.bal-heading--space-top,.bal-heading--space-top:not(:last-child){margin-bottom:0}.bal-heading--space-none,.bal-heading--space-none:not(:last-child){margin:0}.bal-heading__text{margin:0 !important;padding:0;font-weight:var(--bal-font-weight-bold);font-family:var(--bal-font-family-title)}.bal-heading__text--no-wrap{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bal-heading__text--subtitle{font-weight:var(--bal-font-weight-light)}.bal-heading__text--shadow{text-shadow:var(--bal-text-shadow-normal)}.bal-heading__text--color-white{color:var(--bal-heading-color-white)}.bal-heading__text--color-success{color:var(--bal-heading-color-success)}.bal-heading__text--color-warning{color:var(--bal-heading-color-warning)}.bal-heading__text--color-danger{color:var(--bal-heading-color-danger)}.bal-heading__text--size-normal{font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal)}@media screen and (min-width: 769px),print{.bal-heading__text--size-normal{font-size:var(--bal-text-size-normal-tablet);line-height:var(--bal-line-height-tablet-normal)}}@media screen and (min-width: 1024px){.bal-heading__text--size-normal{font-size:var(--bal-text-size-normal-desktop);line-height:var(--bal-line-height-desktop-normal)}}.bal-heading__text--size-medium{font-size:var(--bal-text-size-medium);line-height:var(--bal-line-height-medium)}@media screen and (min-width: 769px),print{.bal-heading__text--size-medium{font-size:var(--bal-text-size-medium-tablet);line-height:var(--bal-line-height-tablet-medium)}}@media screen and (min-width: 1024px){.bal-heading__text--size-medium{font-size:var(--bal-text-size-medium-desktop);line-height:var(--bal-line-height-desktop-medium)}}.bal-heading__text--size-large{font-size:var(--bal-text-size-large);line-height:var(--bal-line-height-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-large{font-size:var(--bal-text-size-large-tablet);line-height:var(--bal-line-height-tablet-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-large{font-size:var(--bal-text-size-large-desktop);line-height:var(--bal-line-height-desktop-large)}}.bal-heading__text--size-x-large{font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-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-heading__text--size-x-large{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}.bal-heading__text--size-xx-large{font-size:var(--bal-text-size-xx-large);line-height:var(--bal-line-height-xx-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-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-heading__text--size-xx-large{font-size:var(--bal-text-size-xx-large-desktop);line-height:var(--bal-line-height-desktop-xx-large)}}.bal-heading__text--size-xxx-large{font-size:var(--bal-text-size-xxx-large);line-height:var(--bal-line-height-xxx-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-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-heading__text--size-xxx-large{font-size:var(--bal-text-size-xxx-large-desktop);line-height:var(--bal-line-height-desktop-xxx-large)}}.bal-heading__text--size-xxxx-large{font-size:var(--bal-text-size-xxxx-large);line-height:var(--bal-line-height-xxxx-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-xxxx-large{font-size:var(--bal-text-size-xxxx-large-tablet);line-height:var(--bal-line-height-tablet-xxxx-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-xxxx-large{font-size:var(--bal-text-size-xxxx-large-desktop);line-height:var(--bal-line-height-desktop-xxxx-large)}}.bal-heading__text--size-xxxxx-large{font-size:var(--bal-text-size-xxxxx-large);line-height:var(--bal-line-height-xxxxx-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-xxxxx-large{font-size:var(--bal-text-size-xxxxx-large-tablet);line-height:var(--bal-line-height-tablet-xxxxx-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-xxxxx-large{font-size:var(--bal-text-size-xxxxx-large-desktop);line-height:var(--bal-line-height-desktop-xxxxx-large)}}";
-const BalHeadingStyle0 = balHeadingCss;
 
 const Heading = /*@__PURE__*/ proxyCustomElement(class Heading extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.autoFontSize = undefined;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The actual heading level used in the HTML markup.
+         */
         this.level = 'h1';
-        this.visualLevel = undefined;
-        this.autoLevel = undefined;
+        /**
+         * When true, the text will be truncated with a text overflow ellipsis instead of wrapping.
+         * Please note that text overflow can only occur in block or inline-block level elements,
+         * as these elements require a width to overflow.
+         */
         this.noWrap = false;
+        /**
+         * If `true` the heading gets displayed slimmer.
+         */
         this.subtitle = false;
-        this.space = undefined;
+        /**
+         * The theme type of the toast.
+         */
         this.color = '';
+        /**
+         * If `true` the color gets inverted for dark backgrounds
+         */
         this.inverted = false;
+        /**
+         * If `true` adds a text shadow to improve readability on image background
+         * */
         this.shadow = false;
     }
     levelWatcher() {
@@ -151,7 +170,7 @@ const Heading = /*@__PURE__*/ proxyCustomElement(class Heading extends HTMLEleme
         "visualLevel": ["visualLevelWatcher"],
         "autoLevel": ["autoLevelWatcher"]
     }; }
-    static get style() { return BalHeadingStyle0; }
+    static get style() { return balHeadingCss; }
 }, [4, "bal-heading", {
         "level": [1],
         "visualLevel": [1, "visual-level"],

package/components/bal-hint2.js

@@ -1,8 +1,12 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { L as ListenToConfig } from './config.decorator.js';
 import { B as BEM } from './bem.js';
 import { p as preventDefault } from './utils.js';
 import { B as BalScrollHandler } from './scroll.js';
+import { b as balBreakpoints } from './breakpoints.subject.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
+import { i as isEnterKey, a as isSpaceKey } from './keyboard.helpers.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';
@@ -11,13 +15,8 @@ import { d as defineCustomElement$4 } from './bal-icon2.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 .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 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)}.bal-hint__content{background:var(--bal-hint-content-background);width:auto;max-width:30rem;min-width:16.25rem;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 Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
     constructor() {
@@ -25,15 +24,17 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
         this.__registerHost();
         this.bodyScrollHandler = new BalScrollHandler();
         this.componentId = `bal-hint-${hintIds++}`;
-        this.onPopupChange = (ev) => {
-            this.isActive = ev.detail;
-            preventDefault(ev);
-        };
         this.isActive = false;
         this.innerCloseLabel = 'Close';
         this.isMobile = balBreakpoints.isMobile;
-        this.closeLabel = undefined;
+        /**
+         * Disables the close button for tablet and desktop
+         */
         this.small = false;
+        this.onPopupChange = (ev) => {
+            this.isActive = ev.detail;
+            preventDefault(ev);
+        };
     }
     connectedCallback() {
         this.bodyScrollHandler.connect();
@@ -137,7 +138,7 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
         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; }
+    static get style() { return balHintCss; }
 }, [4, "bal-hint", {
         "closeLabel": [1, "close-label"],
         "small": [4],