@baloise/ds-core 19.7.1 → 19.8.0

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

@@ -3,8 +3,9 @@
 var index = require('./index-CP3lGz14.js');
 var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
 var index_esm = require('./index.esm-CKDqUwIC.js');
-var config_decorator = require('./config.decorator-CAhT6DB_.js');
 var bem = require('./bem-p0PWVN8n.js');
+var config_decorator = require('./config.decorator-CAhT6DB_.js');
+var svg = require('./svg-Bw61tXih.js');
 require('./index-BZ67Dcnb.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
 require('./index-BobQkZjn.js');
@@ -44,11 +45,12 @@ 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 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:var(--bal-color-text-white);--bal-footer-language-color-hover:var(--bal-color-light-blue-2);--bal-footer-language-color-active:var(--bal-color-light-blue-3);--bal-footer-language-background:var(--bal-color-text-white);--bal-footer-language-background-hover:var(--bal-color-light-blue-2);--bal-footer-language-background-active:var(--bal-color-light-blue-3);--bal-footer-logo-image-max-height:64px}.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 svg,.bal-footer__inner__wrapper__header-container__language__wrapper g,.bal-footer__inner__wrapper__header-container__language__wrapper path,.bal-footer__inner__wrapper__header-container__language__wrapper circle{fill:var(--bal-footer-language-background) !important}.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-footer-language-color);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) !important}.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) !important}.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__header-container__logo img{max-height:var(--bal-footer-logo-image-max-height)}.bal-footer__inner__wrapper__header-container__logo div{height:var(--bal-footer-logo-image-max-height);min-width:var(--bal-footer-logo-image-max-height)}.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 Footer = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.logoSvgContent = '';
         this.links = [];
         this.socialMediaLinks = [];
         this.language = index.defaultConfig.language;
@@ -58,6 +60,14 @@ const Footer = class {
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
          */
+        /**
+         * Image address for the logo.
+         */
+        this.logoHref = '';
+        /**
+         * Svg content for the logo.
+         */
+        this.logoSvg = '';
         /**
          * If `true` the legal Baloise links will be hidden.
          */
@@ -78,6 +88,10 @@ const Footer = class {
     createLogger(log) {
         this.log = log;
     }
+    logoSvgChanged() {
+        this.logoSvgContent = svg.sanitizeSvg(this.logoSvg);
+        console.log('SVG content updated:', this.logoSvgContent);
+    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
@@ -85,6 +99,7 @@ const Footer = class {
     connectedCallback() {
         this.updateFooterLinks();
         this.updateSocialMediaLinks();
+        this.logoSvgChanged();
     }
     /**
      * LISTENERS
@@ -147,19 +162,22 @@ const Footer = class {
         const elWrapper = elLanguage.element('wrapper');
         const elLegalLinks = elLinksContainer.element('legal-links');
         const elSocialMediaLinks = elLinksContainer.element('social-media-links');
-        return (index.h(index.Host, { key: 'dbb10b62df792021f3ee814990225a5141906dcf', class: Object.assign({}, block.class()) }, index.h("footer", { key: '9bb866cae3936c2caf1cc7e63879c4681d2ee1a8', class: Object.assign({}, elInner.class()) }, index.h("div", { key: 'aee0462f8b07cf1c546647b67434bbbd0b0ce582', class: Object.assign({}, elInnerWrapper.class()) }, index.h("div", { key: '5b9b7a54156c1eb5dba8096c7a6add4939d0626d', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, index.h("div", { key: '632b26b347fe91b95d72e725db22bebcb303facf', class: Object.assign({}, elLogo.class()) }, index.h("bal-logo", { key: 'e91b5cd73918ff9fbd7910e563b29a1396299942', color: "white" })), index.h("div", { key: '25a3bc1c711f33114df091fe4ed4de5f2e4298f6', class: Object.assign({}, elLanguage.class()), style: {
+        return (index.h(index.Host, { key: '0f28887c73645c037cbd7037c81f48aaf56a24b6', class: Object.assign({}, block.class()) }, index.h("footer", { key: 'e20ddb6f42be2b77cd11e4645df009d885fa0a9a', class: Object.assign({}, elInner.class()) }, index.h("div", { key: '8c1813f2faeca425f322c50598e6c296aa999af9', class: Object.assign({}, elInnerWrapper.class()) }, index.h("div", { key: '31edd56ff2c1c7d37ed9896d319908736ccb62bb', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, index.h("div", { key: '909ad494a1d0325dc4c58ed7c3ac36039e7ff964', class: Object.assign({}, elLogo.class()) }, this.logoHref ? (index.h("img", { src: this.logoHref, alt: "Logo" })) : this.logoSvgContent ? (index.h("div", { innerHTML: this.logoSvgContent })) : (index.h("bal-logo", { color: "white" }))), index.h("div", { key: '8046b0219db8c586acd80614aafbcb2d6d2c306b', class: Object.assign({}, elLanguage.class()), style: {
                 display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
-            } }, index.h("div", { key: '0d6f3a4ef5db0a8973c2baa293d02badbf25ab8c', class: Object.assign({}, elWrapper.class()) }, index.h("bal-icon", { key: 'ffa4e67aa6d2210f5739c5114127e46f50e2f31b', class: Object.assign({}, elWrapper.element('icon').class()), name: "web", color: "white" }), index.h("select", { key: '0d3061a89a4fe04aecbb5498fa03ce263e8447ab', class: Object.assign({}, elWrapper.element('select').class()), onChange: event => this.changeLanguage(event.target.value), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (index.h("option", { key: language, value: language, selected: language === this.language }, language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name))))))), index.h("div", { key: 'ca5e0091909a9c8fd92ca69f3d8937d0b976bee2', class: Object.assign({}, elSlot.class()) }, index.h("slot", { key: '42575b0eb8ecc7e12679b28786ed27484088d01d' })), index.h("div", { key: '3600fe32dfeeea73ff2afac7ce8549d5e52bfb04', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, index.h("div", { key: '697a4f34081dbc8255b02425b2f2fcd0285670bf', class: Object.assign({}, elSocialMediaLinks.class()), style: {
+            } }, index.h("div", { key: 'd0696f7722e7f608120a68fabbbcf5a63194992c', class: Object.assign({}, elWrapper.class()) }, index.h("bal-icon", { key: '1f4b3fe0976c592ad7d1291950050f75e1e42a44', class: Object.assign({}, elWrapper.element('icon').class()), name: "web", color: "white" }), index.h("select", { key: 'd864fb1f49e1adb815f3065ff3eac2a0ac48698d', class: Object.assign({}, elWrapper.element('select').class()), onChange: event => this.changeLanguage(event.target.value), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (index.h("option", { key: language, value: language, selected: language === this.language }, language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name))))))), index.h("div", { key: '60f23f4422055ec4a5c2f5ec813837dd18ce4913', class: Object.assign({}, elSlot.class()) }, index.h("slot", { key: '4d4de8f40a1465304977baafb8ddf3d8dcffc8e3' })), index.h("div", { key: 'd50ec236e3bc2ff9bffd8e2fada22e8830112f6b', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, index.h("div", { key: 'ea8154f9cb85418017c0e8189c5a1ba4d0de8756', class: Object.assign({}, elSocialMediaLinks.class()), style: {
                 display: !this.showSocialMedia ? 'none' : 'flex',
             } }, this.socialMediaLinks.map(link => (index.h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-inverted': true,
-            } }, index.h("bal-icon", { name: link.label.toLowerCase() }))))), index.h("div", { key: '3b91222ee07a7c7d5e1995f5180398272fd6d92e', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links &&
+            } }, index.h("bal-icon", { name: link.label.toLowerCase() }))))), index.h("div", { key: '737e60a24473de1ef2d07651bbb88bf72896b958', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links &&
             this.links.map(link => (index.h("a", { key: link.link, href: link.link, target: "_blank", class: {
                     'link': true,
                     'is-light': true,
                 } }, link.label)))))))));
     }
+    static get watchers() { return {
+        "logoSvg": ["logoSvgChanged"]
+    }; }
 };
 tslib_es6.__decorate([
     index.Logger('bal-footer'),

package/dist/cjs/bal-form-col_2.cjs.entry.js

@@ -9,7 +9,7 @@ const FormCol = class {
         this.size = 'full';
     }
     render() {
-        return (index.h(index.Host, { key: '5ee1da91eaa100771f43f5ca80e01ac5a47a5d5f', class: {
+        return (index.h(index.Host, { key: 'dcafe25da97b6d53f8c70cb13ba63be2dc9214ef', class: {
                 [`${this.colClass}`]: true,
                 'py-none': true,
                 'touch:is-12': true,
@@ -19,7 +19,7 @@ const FormCol = class {
                 'is-8': this.size === 'two-thirds',
                 'is-3': this.size === 'one-quarter',
                 'is-9': this.size === 'three-quarters',
-            } }, index.h("slot", { key: '498c7e5a0b163c2cb3e465cb43087db432f92650' })));
+            } }, index.h("slot", { key: '153dee19ecee905bd5bc7cf624a4e26ff883d50c' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -31,7 +31,7 @@ const FormGrid = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '7dd05e54b6f2070956b4630a542c249734981731', class: `bal-form-grid grid is-multiline my-none py-none` }, index.h("slot", { key: 'd9490a9e4153d985dad9258dc795ea1b092930f4' })));
+        return (index.h(index.Host, { key: '164b3b6f4a81dacf2f53d5005ec64752a7aba56d', class: `bal-form-grid grid is-multiline my-none py-none` }, index.h("slot", { key: 'dac6ae11535688ca5b0958366137edc226dc584f' })));
     }
 };
 FormGrid.style = balFormGridCss;

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

@@ -37,7 +37,7 @@ const Form = class {
                 novalidate: this.novalidate,
             };
         }
-        return (index.h(index.Host, { key: 'ed6e199a51186247ccad8e06989ba9819e43bed2' }, index.h(NativeEl, Object.assign({ key: 'de4a61e1690819e10096cd1c35eecc0371d73aae' }, attrs, { class: this.formClass }), index.h("slot", { key: 'f35cce725fc54ad822aada77aabaf6f0babd4141' }))));
+        return (index.h(index.Host, { key: '1598e29d7763c06aeebe9ae70e4ad27695c9796d' }, index.h(NativeEl, Object.assign({ key: '140fa29ca7900623d52da99ffc5f9bd6db72cd97' }, attrs, { class: this.formClass }), index.h("slot", { key: '1797bdbc8f4f70b50c5d193acea0569e977d8a81' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -162,7 +162,7 @@ const Heading = class {
         const bemTextEl = block.element('text');
         const Heading = this.tag;
         const fontColor = this.fontColor;
-        return (index.h(index.Host, { key: '0a723b1f41cbd6af93aecd84ce5ee39ef6c29d24', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, index.h(Heading, { key: '16e782645408fb537c1f466ee547301f61b71b24', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemTextEl.class()), bemTextEl.modifier('no-wrap').class(this.noWrap)), bemTextEl.modifier('subtitle').class(this.subtitle)), bemTextEl.modifier('shadow').class(this.shadow)), bemTextEl.modifier(`color-${fontColor}`).class()), bemTextEl.modifier(`size-${this.autoFontSize}`).class()), ref: (headingEl) => (this.headingEl = headingEl), "data-testid": "bal-heading" }, index.h("slot", { key: 'c9a7f343eada2e03fe4b58f70ffb9856842b1137' }))));
+        return (index.h(index.Host, { key: 'a15674339cf53229872974b00187c69a63f03829', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, index.h(Heading, { key: '1fa6d0b91dba606912d6f438727391c3524b1950', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemTextEl.class()), bemTextEl.modifier('no-wrap').class(this.noWrap)), bemTextEl.modifier('subtitle').class(this.subtitle)), bemTextEl.modifier('shadow').class(this.shadow)), bemTextEl.modifier(`color-${fontColor}`).class()), bemTextEl.modifier(`size-${this.autoFontSize}`).class()), ref: (headingEl) => (this.headingEl = headingEl), "data-testid": "bal-heading" }, index.h("slot", { key: '1206631dcf9af8e2f785c6829fc033a570924943' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -271,10 +271,10 @@ const Text = class {
         const Text = this.inline ? 'span' : 'p';
         const color = this.parseColor();
         const block = bem.BEM.block('text');
-        return (index.h(index.Host, { key: '8aceb26482ae28d7004f4bb81bdbad288dbbea71', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, index.h(Text, { key: 'efbe450accfb6df4813866cf7f64649c08ad2f07', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
+        return (index.h(index.Host, { key: 'c3bdd081cc6545ea36b6e935a204deea17fa3c4e', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, index.h(Text, { key: '1adac0420b875b03f4d42a631e0f0efb0df25b91', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
                 .element('text')
                 .modifier(`size-${this.size}`)
-                .class(this.size !== '')), "data-testid": "bal-text" }, index.h("slot", { key: '33ad603fa81fe33512f02b5ed716bd4ec8e675cd' }))));
+                .class(this.size !== '')), "data-testid": "bal-text" }, index.h("slot", { key: '1f827979acdbee7f9dda89bb9d0bd06a5cbaaaf6' }))));
     }
 };
 Text.style = balTextCss;

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

@@ -3,19 +3,19 @@
 var index = require('./index-CP3lGz14.js');
 var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
 var bem = require('./bem-p0PWVN8n.js');
-var breakpoints_subject = require('./breakpoints.subject-Cezf6Hiu.js');
-var breakpoints_decorator = require('./breakpoints.decorator-D5xcljb0.js');
+var breakpoints_subject = require('./breakpoints.subject-Bd3caIq4.js');
+var breakpoints_decorator = require('./breakpoints.decorator-CsgYjV5e.js');
 var config_decorator = require('./config.decorator-CAhT6DB_.js');
 var keyboard_helpers = require('./keyboard.helpers-BkZpVT-9.js');
 var scroll = require('./scroll-BSWnN3b6.js');
 var utils = require('./utils-Bl0u6rg1.js');
 require('./device-D_5TdgdC.js');
 require('./listener-eTGFjyDz.js');
-require('./tokens.esm-DM_5VKOq.js');
+require('./tokens.esm-BUAnNwkp.js');
 require('./index-BZ67Dcnb.js');
 require('./_commonjsHelpers-BJu3ubxk.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)}.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 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-content-border-color:var(--bal-color-grey-2);--bal-hint-icon-color-hover:var(--bal-color-light-blue-5)}.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-hint-icon-color-hover)}.bal-hint .bal-popup__container{z-index:var(--bal-z-index-popup);background:var(--bal-hint-content-background);border:8px solid var(--bal-hint-content-border-color)}.bal-hint__content{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 = class {
     constructor(hostRef) {
@@ -133,7 +133,7 @@ const Hint = class {
             return (index.h("div", { class: Object.assign({}, elContent.class()), "data-testid": "bal-hint-content" }, index.h("div", { ref: el => (this.hintContentEl = el) }), index.h("bal-button-group", { class: Object.assign(Object.assign({}, elButtons.class()), elButtons.modifier('is-hidden-desktop').class(this.small)) }, index.h("bal-button", { "data-testid": "bal-hint-close", color: "info", onClick: () => this.dismiss() }, this.closeLabel ? this.closeLabel : this.innerCloseLabel))));
         };
         const Popup = () => {
-            return (index.h("div", { class: Object.assign({}, block.element('popup').class()) }, index.h(TriggerIcon, null), index.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 }, index.h("bal-popup-content", null, index.h(HintContent, null)))));
+            return (index.h("div", { class: Object.assign({}, block.element('popup').class()) }, index.h(TriggerIcon, null), index.h("bal-popup", { id: this.componentId, placement: "right", closable: true, ref: el => (this.popupElement = el), onBalChange: this.onPopupChange, variant: this.isMobile ? 'fullscreen' : 'popover', offset: this.isMobile ? 0 : 16 }, index.h("bal-popup-content", null, index.h(HintContent, null)))));
         };
         return (index.h(index.Host, { class: Object.assign({}, block.class()) }, index.h(Popup, null), index.h("div", { ref: el => (this.slotWrapperEl = el), style: { display: 'none' } }, index.h("slot", null))));
     }
@@ -163,7 +163,7 @@ const HintText = class {
         const elContent = block.element('content');
         const elText = elContent.element('text');
         const elTextField = elText.element('field');
-        return (index.h(index.Host, { key: '24898db6c3c51d19a7df6552a2e0f370c8812f95', class: Object.assign({}, elText.class()) }, index.h("p", { key: '2ff7501b81213d1a553f2a9a9c98df6d9577e5e8', class: Object.assign({}, elTextField.class()) }, index.h("slot", { key: 'e2f5ecd78ad99fc53713576807011f39884ad7fb' }))));
+        return (index.h(index.Host, { key: '37d17b229f86f236fe7ddaadd42fc91f611c6d05', class: Object.assign({}, elText.class()) }, index.h("p", { key: '3fb5e40a5c38c89842a63c08dcd249ae626c8f14', class: Object.assign({}, elTextField.class()) }, index.h("slot", { key: 'ffd2db1c493980e60f352d6d0f25deb0a5516b49' }))));
     }
 };
 
@@ -176,7 +176,7 @@ const HintTitle = class {
         const elContent = block.element('content');
         const elTitle = elContent.element('title');
         const elHeading = elTitle.element('heading');
-        return (index.h(index.Host, { key: '6304fd03629ecdbaeff48777da6e9950a02e02bf', class: Object.assign({}, elTitle.class()) }, index.h("h3", { key: '5cdfc4c2319f7b8b17f23d02aeae7cbc534134af', class: Object.assign({}, elHeading.class()) }, index.h("span", { key: '6e5ce498f0574fe356778d87fb98f59b446bd8e3' }, index.h("slot", { key: '9604fad3ee38908e2a51ab295e7d17dad7b3d7fc' })))));
+        return (index.h(index.Host, { key: '334f645b02c2c685b596139d58bf5ad980a48138', class: Object.assign({}, elTitle.class()) }, index.h("h3", { key: 'f886724a8db46d3faf6c17ada13a9712cb5b1f5b', class: Object.assign({}, elHeading.class()) }, index.h("span", { key: 'b6c6d4d61f8f7e0e11941e4ebc9b2004b153167d' }, index.h("slot", { key: 'c23c7caf0d57c3456341ca2fa5c08233baa881b1' })))));
     }
 };
 
@@ -2358,7 +2358,7 @@ const PopoverContent = class {
     }
     render() {
         const block = bem.BEM.block('popover').element('content');
-        return (index.h(index.Host, { key: '8c5281cc1fe731c729e6fb2859451b9872254f57', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, index.h("div", { key: '10fa564b011b3f0a0e1bd0c338d09970f3ce809e', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, index.h("slot", { key: 'cddf8ead7a7a6028a54b2d0a152f68a7dbeb9462' })), index.h("div", { key: 'acaa433bb6c396d86d927f95013fae818e694ab3', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
+        return (index.h(index.Host, { key: 'ae764840239d3f9021044f5643785c29e348e949', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, index.h("div", { key: '60c73ce1c4d003b0a3a78ec6a38e9676f806e11d', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, index.h("slot", { key: 'd0810231279ce91786fcfccc22eb0d13a65f3b57' })), index.h("div", { key: '6d9f8e916ec085cd938dbcddfcbd316e131be0b5', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -925,7 +925,7 @@ function requireLodash_upperfirst () {
 var lodash_upperfirstExports = requireLodash_upperfirst();
 var upperFirst = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lodash_upperfirstExports);
 
-const balIconCss = ":root,:host{--bal-icon-color-grey:var(--bal-color-grey-5);--bal-icon-color-grey-light:var(--bal-color-border-grey-dark);--bal-icon-color-grey-dark:var(--bal-color-grey-6);--bal-icon-color-success:var(--bal-color-success);--bal-icon-color-success-dark:var(--bal-color-success-5);--bal-icon-color-success-darker:var(--bal-color-success-6);--bal-icon-color-warning:var(--bal-color-warning);--bal-icon-color-warning-dark:var(--bal-color-warning-5);--bal-icon-color-warning-darker:var(--bal-color-warning-6);--bal-icon-color-danger:var(--bal-color-danger);--bal-icon-color-danger-dark:var(--bal-color-danger-5);--bal-icon-color-danger-darker:var(--bal-color-danger-6);--bal-icon-color-primary:var(--bal-color-primary);--bal-icon-color-primary-dark:var(--bal-color-primary-6);--bal-icon-color-blue:var(--bal-color-primary);--bal-icon-color-light-blue:var(--bal-color-light-blue-5);--bal-icon-color-primary-light:var(--bal-color-primary-3);--bal-icon-color-white:var(--bal-color-white)}.bal-icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:static;pointer-events:visible;width:1.125rem;max-height:1.125rem}.bal-icon--shadow svg{-webkit-filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5));filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5))}.bal-icon--is-inline{display:-ms-inline-flexbox;display:inline-flex}.bal-icon__inner{display:block;position:static;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out, -webkit-transform .2s ease-in-out;padding:.063rem;width:1.125rem;max-height:1.125rem}.bal-icon__inner--turn-plus{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.bal-icon__inner--turn-caret-down,.bal-icon__inner--turn-caret-up{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-icon__inner--turn-nav-go-down{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-icon__inner>svg{vertical-align:top}.bal-icon--is-xsmall{width:.75rem;max-height:.75rem}.bal-icon--is-x-small{width:.75rem;max-height:.75rem}.bal-icon--is-small{width:.875rem;max-height:.875rem}.bal-icon--is-medium{width:1.625rem;max-height:1.625rem}.bal-icon--is-large{width:2.5rem;max-height:2.5rem;padding:0}.bal-icon--is-x-large{width:5rem;max-height:5rem;padding:0}.bal-icon--is-xx-large{width:11rem;max-height:11rem;padding:0}.bal-icon--tile{background:var(--bal-color-purple-1);border-radius:var(--bal-radius-normal);height:2rem;width:2rem;max-height:2rem}@media screen and (min-width: 769px),print{.bal-icon--tile{height:3.5rem;width:3.5rem;max-height:3.5rem}}.bal-icon--tile-color-green{background:var(--bal-color-green-1)}.bal-icon--tile-color-red{background:var(--bal-color-red-1)}.bal-icon--tile-color-yellow{background:var(--bal-color-yellow-1)}.bal-icon__inner--tile{width:2rem;max-height:2rem}@media screen and (min-width: 769px),print{.bal-icon__inner--tile{width:3rem;max-height:3rem}}.bal-icon--is-grey svg,.bal-icon--is-grey g,.bal-icon--is-grey path,.bal-icon--is-grey circle{fill:var(--bal-icon-color-grey)}.bal-icon--is-grey-light svg,.bal-icon--is-grey-light g,.bal-icon--is-grey-light path,.bal-icon--is-grey-light circle{fill:var(--bal-icon-color-grey-light)}.bal-icon--is-grey-dark svg,.bal-icon--is-grey-dark g,.bal-icon--is-grey-dark path,.bal-icon--is-grey-dark circle{fill:var(--bal-icon-color-grey-dark)}.bal-icon--is-success svg,.bal-icon--is-success g,.bal-icon--is-success path,.bal-icon--is-success circle{fill:var(--bal-icon-color-success)}.bal-icon--is-success-dark svg,.bal-icon--is-success-dark g,.bal-icon--is-success-dark path,.bal-icon--is-success-dark circle{fill:var(--bal-icon-color-success-dark)}.bal-icon--is-success-darker svg,.bal-icon--is-success-darker g,.bal-icon--is-success-darker path,.bal-icon--is-success-darker circle{fill:var(--bal-icon-color-success-darker)}.bal-icon--is-warning svg,.bal-icon--is-warning g,.bal-icon--is-warning path,.bal-icon--is-warning circle{fill:var(--bal-icon-color-warning)}.bal-icon--is-warning-dark svg,.bal-icon--is-warning-dark g,.bal-icon--is-warning-dark path,.bal-icon--is-warning-dark circle{fill:var(--bal-icon-color-warning-dark)}.bal-icon--is-warning-darker svg,.bal-icon--is-warning-darker g,.bal-icon--is-warning-darker path,.bal-icon--is-warning-darker circle{fill:var(--bal-icon-color-warning-darker)}.bal-icon--is-danger svg,.bal-icon--is-danger g,.bal-icon--is-danger path,.bal-icon--is-danger circle{fill:var(--bal-icon-color-danger)}.bal-icon--is-danger-dark svg,.bal-icon--is-danger-dark g,.bal-icon--is-danger-dark path,.bal-icon--is-danger-dark circle{fill:var(--bal-icon-color-danger-dark)}.bal-icon--is-danger-darker svg,.bal-icon--is-danger-darker g,.bal-icon--is-danger-darker path,.bal-icon--is-danger-darker circle{fill:var(--bal-icon-color-danger-darker)}.bal-icon--is-primary svg,.bal-icon--is-primary g,.bal-icon--is-primary path,.bal-icon--is-primary circle{fill:var(--bal-icon-color-primary)}.bal-icon--is-primary-dark svg,.bal-icon--is-primary-dark g,.bal-icon--is-primary-dark path,.bal-icon--is-primary-dark circle{fill:var(--bal-icon-color-primary-dark)}.bal-icon--is-blue svg,.bal-icon--is-blue g,.bal-icon--is-blue path,.bal-icon--is-blue circle{fill:var(--bal-icon-color-blue)}.bal-icon--is-light-blue svg,.bal-icon--is-light-blue g,.bal-icon--is-light-blue path,.bal-icon--is-light-blue circle{fill:var(--bal-icon-color-light-blue)}.bal-icon--is-primary-light svg,.bal-icon--is-primary-light g,.bal-icon--is-primary-light path,.bal-icon--is-primary-light circle{fill:var(--bal-icon-color-primary-light)}.bal-icon--is-white svg,.bal-icon--is-white g,.bal-icon--is-white path,.bal-icon--is-white circle,.bal-icon--is-inverted svg,.bal-icon--is-inverted g,.bal-icon--is-inverted path,.bal-icon--is-inverted circle{fill:var(--bal-icon-color-white)}.icon-text{-ms-flex-align:center;align-items:center;color:inherit;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top;-ms-flex-wrap:nowrap;flex-wrap:nowrap;word-break:break-word;line-height:1.5rem}.icon-text.is-small{line-height:1.75rem}.icon-text.is-medium{line-height:1.5rem}.icon-text.is-large{line-height:3rem}.icon-text.is-x-large{line-height:4rem}.icon-text.is-xlarge{line-height:4rem}.icon-text .icon{-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0}.icon-text .icon:not(:last-child){margin-right:.5rem}.icon-text .icon:not(:first-child){margin-right:.5rem}div.icon-text{display:-ms-flexbox;display:flex}";
+const balIconCss = ":root,:host{--bal-icon-color-grey:var(--bal-color-grey-5);--bal-icon-color-grey-light:var(--bal-color-border-grey-dark);--bal-icon-color-grey-dark:var(--bal-color-grey-6);--bal-icon-color-success:var(--bal-color-success);--bal-icon-color-success-dark:var(--bal-color-success-5);--bal-icon-color-success-darker:var(--bal-color-success-6);--bal-icon-color-warning:var(--bal-color-warning);--bal-icon-color-warning-dark:var(--bal-color-warning-5);--bal-icon-color-warning-darker:var(--bal-color-warning-6);--bal-icon-color-danger:var(--bal-color-danger);--bal-icon-color-danger-dark:var(--bal-color-danger-5);--bal-icon-color-danger-darker:var(--bal-color-danger-6);--bal-icon-color-primary:var(--bal-color-primary);--bal-icon-color-primary-dark:var(--bal-color-primary-6);--bal-icon-color-blue:var(--bal-color-primary);--bal-icon-color-light-blue:var(--bal-color-light-blue-5);--bal-icon-color-primary-light:var(--bal-color-primary-3);--bal-icon-color-white:var(--bal-color-white);--bal-icon-tile-background:var(--bal-color-purple-1);--bal-icon-tile-radius:var(--bal-radius-normal)}.bal-icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:static;pointer-events:visible;width:1.125rem;max-height:1.125rem}.bal-icon--shadow svg{-webkit-filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5));filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5))}.bal-icon--is-inline{display:-ms-inline-flexbox;display:inline-flex}.bal-icon__inner{display:block;position:static;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out, -webkit-transform .2s ease-in-out;padding:.063rem;width:1.125rem;max-height:1.125rem}.bal-icon__inner--turn-plus{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.bal-icon__inner--turn-caret-down,.bal-icon__inner--turn-caret-up{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-icon__inner--turn-nav-go-down{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-icon__inner>svg{vertical-align:top}.bal-icon--is-xsmall{width:.75rem;max-height:.75rem}.bal-icon--is-x-small{width:.75rem;max-height:.75rem}.bal-icon--is-small{width:.875rem;max-height:.875rem}.bal-icon--is-medium{width:1.625rem;max-height:1.625rem}.bal-icon--is-large{width:2.5rem;max-height:2.5rem;padding:0}.bal-icon--is-x-large{width:5rem;max-height:5rem;padding:0}.bal-icon--is-xx-large{width:11rem;max-height:11rem;padding:0}.bal-icon--tile{background:var(--bal-icon-tile-background);border-radius:var(--bal-icon-tile-radius);height:2rem;width:2rem;max-height:2rem}@media screen and (min-width: 769px),print{.bal-icon--tile{height:3.5rem;width:3.5rem;max-height:3.5rem}}.bal-icon--tile-color-green{background:var(--bal-color-green-1)}.bal-icon--tile-color-red{background:var(--bal-color-red-1)}.bal-icon--tile-color-yellow{background:var(--bal-color-yellow-1)}.bal-icon__inner--tile{width:2rem;max-height:2rem}@media screen and (min-width: 769px),print{.bal-icon__inner--tile{width:3rem;max-height:3rem}}.bal-icon--is-grey svg,.bal-icon--is-grey g,.bal-icon--is-grey path,.bal-icon--is-grey circle{fill:var(--bal-icon-color-grey)}.bal-icon--is-grey-light svg,.bal-icon--is-grey-light g,.bal-icon--is-grey-light path,.bal-icon--is-grey-light circle{fill:var(--bal-icon-color-grey-light)}.bal-icon--is-grey-dark svg,.bal-icon--is-grey-dark g,.bal-icon--is-grey-dark path,.bal-icon--is-grey-dark circle{fill:var(--bal-icon-color-grey-dark)}.bal-icon--is-success svg,.bal-icon--is-success g,.bal-icon--is-success path,.bal-icon--is-success circle{fill:var(--bal-icon-color-success)}.bal-icon--is-success-dark svg,.bal-icon--is-success-dark g,.bal-icon--is-success-dark path,.bal-icon--is-success-dark circle{fill:var(--bal-icon-color-success-dark)}.bal-icon--is-success-darker svg,.bal-icon--is-success-darker g,.bal-icon--is-success-darker path,.bal-icon--is-success-darker circle{fill:var(--bal-icon-color-success-darker)}.bal-icon--is-warning svg,.bal-icon--is-warning g,.bal-icon--is-warning path,.bal-icon--is-warning circle{fill:var(--bal-icon-color-warning)}.bal-icon--is-warning-dark svg,.bal-icon--is-warning-dark g,.bal-icon--is-warning-dark path,.bal-icon--is-warning-dark circle{fill:var(--bal-icon-color-warning-dark)}.bal-icon--is-warning-darker svg,.bal-icon--is-warning-darker g,.bal-icon--is-warning-darker path,.bal-icon--is-warning-darker circle{fill:var(--bal-icon-color-warning-darker)}.bal-icon--is-danger svg,.bal-icon--is-danger g,.bal-icon--is-danger path,.bal-icon--is-danger circle{fill:var(--bal-icon-color-danger)}.bal-icon--is-danger-dark svg,.bal-icon--is-danger-dark g,.bal-icon--is-danger-dark path,.bal-icon--is-danger-dark circle{fill:var(--bal-icon-color-danger-dark)}.bal-icon--is-danger-darker svg,.bal-icon--is-danger-darker g,.bal-icon--is-danger-darker path,.bal-icon--is-danger-darker circle{fill:var(--bal-icon-color-danger-darker)}.bal-icon--is-primary svg,.bal-icon--is-primary g,.bal-icon--is-primary path,.bal-icon--is-primary circle{fill:var(--bal-icon-color-primary)}.bal-icon--is-primary-dark svg,.bal-icon--is-primary-dark g,.bal-icon--is-primary-dark path,.bal-icon--is-primary-dark circle{fill:var(--bal-icon-color-primary-dark)}.bal-icon--is-blue svg,.bal-icon--is-blue g,.bal-icon--is-blue path,.bal-icon--is-blue circle{fill:var(--bal-icon-color-blue)}.bal-icon--is-light-blue svg,.bal-icon--is-light-blue g,.bal-icon--is-light-blue path,.bal-icon--is-light-blue circle{fill:var(--bal-icon-color-light-blue)}.bal-icon--is-primary-light svg,.bal-icon--is-primary-light g,.bal-icon--is-primary-light path,.bal-icon--is-primary-light circle{fill:var(--bal-icon-color-primary-light)}.bal-icon--is-white svg,.bal-icon--is-white g,.bal-icon--is-white path,.bal-icon--is-white circle,.bal-icon--is-inverted svg,.bal-icon--is-inverted g,.bal-icon--is-inverted path,.bal-icon--is-inverted circle{fill:var(--bal-icon-color-white)}.icon-text{-ms-flex-align:center;align-items:center;color:inherit;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top;-ms-flex-wrap:nowrap;flex-wrap:nowrap;word-break:break-word;line-height:1.5rem}.icon-text.is-small{line-height:1.75rem}.icon-text.is-medium{line-height:1.5rem}.icon-text.is-large{line-height:3rem}.icon-text.is-x-large{line-height:4rem}.icon-text.is-xlarge{line-height:4rem}.icon-text .icon{-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0}.icon-text .icon:not(:last-child){margin-right:.5rem}.icon-text .icon:not(:first-child){margin-right:.5rem}div.icon-text{display:-ms-flexbox;display:flex}";
 
 const Icon = class {
     constructor(hostRef) {
@@ -941,7 +941,7 @@ const Icon = class {
         /**
          * Name of the baloise icon.
          */
-        this.name = '';
+        this.name = undefined;
         /**
          * Svg content.
          */
@@ -1022,12 +1022,6 @@ const Icon = class {
             this.svgContent = svg.sanitizeSvg(this.svg);
         };
     }
-    nameChanged() {
-        this.generateSvgContent(this.name);
-    }
-    svgChanged() {
-        this.generateSvgContent(this.name);
-    }
     /**
      * LIFE CYCLE
      * ------------------------------------------------------
@@ -1035,6 +1029,9 @@ const Icon = class {
     connectedCallback() {
         this.generateSvgContent(this.name);
     }
+    componentWillRender() {
+        this.generateSvgContent(this.name);
+    }
     /**
      * LISTENERS
      * ------------------------------------------------------
@@ -1108,12 +1105,8 @@ const Icon = class {
     render() {
         const color = this.parseColor();
         const block = bem.BEM.block('icon');
-        return (index.h(index.Host, { key: 'aa053e73ee9d1ca6a8561a07652c22186de57fe8', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('tile').class(this.tile)), block.modifier(`tile-color-${this.tileColor}`).class(this.tile && !!this.tileColor)), block.modifier('is-inverted').class(this.inverted)), block.modifier('is-inline').class(this.inline)), block.modifier('is-disabled').class(this.disabled)), block.modifier('shadow').class(this.shadow)), block.modifier(`is-${this.size}`).class(!!this.size)), block.modifier(`is-${color}`).class()) }, index.h("div", { key: '0daa15eab991d9675a7014ecd51af13c48ec8343', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier(`turn-${this.name}`).class(this.turn)), block.element('inner').modifier('tile').class(this.tile)), block.modifier(`is-${this.size}`).class(!!this.size)), innerHTML: this.svgContent })));
+        return (index.h(index.Host, { key: '2476f8105bacbacdc93c5df13bcd2332786178f7', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('tile').class(this.tile)), block.modifier(`tile-color-${this.tileColor}`).class(this.tile && !!this.tileColor)), block.modifier('is-inverted').class(this.inverted)), block.modifier('is-inline').class(this.inline)), block.modifier('is-disabled').class(this.disabled)), block.modifier('shadow').class(this.shadow)), block.modifier(`is-${this.size}`).class(!!this.size)), block.modifier(`is-${color}`).class()) }, index.h("div", { key: 'b9e5656133e200500d1425a3df2897eeeda462dc', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier(`turn-${this.name}`).class(this.turn)), block.element('inner').modifier('tile').class(this.tile)), block.modifier(`is-${this.size}`).class(!!this.size)), innerHTML: this.svgContent })));
     }
-    static get watchers() { return {
-        "name": ["nameChanged"],
-        "svg": ["svgChanged"]
-    }; }
 };
 tslib_es6.__decorate([
     config_decorator.ListenToConfig(),

package/dist/cjs/bal-input-group.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-CP3lGz14.js');
 var bem = require('./bem-p0PWVN8n.js');
 
-const balInputGroupCss = ".bal-input-group{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;min-height:3rem;gap:.25rem;border:var(--bal-border-width-normal) solid var(--bal-color-border);border-radius:var(--bal-radius-normal);background:var(--bal-color-white)}.bal-input-group .input{min-height:2.75rem;height:2.75rem;border:none;border-radius:0;background:none !important;padding-left:0;padding-right:0;padding-bottom:calc(.5em - .313rem);padding-top:calc(.5em - .313rem)}.bal-input-group .bal-select__control{border:none;min-height:2.75rem}.bal-input-group .bal-select__control__input{padding-left:0 !important;padding-right:0 !important}.bal-input-group .bal-icon{min-width:3rem}.bal-input-group .bal-tag .bal-icon{min-width:unset}.bal-input-group>*:first-child.bal-select .bal-select__control{padding-left:.625rem}.bal-input-group>*:first-child.bal-input .input{padding-left:.625rem}.bal-input-group>*:last-child.bal-input .input{padding-right:.625rem}.bal-input-group>*:first-child.bal-input-date .input{padding-left:.625rem}.bal-input-group>*:last-child.bal-input-date .input{padding-right:.625rem}.bal-input-group>*:first-child.input{padding-left:.625rem}.bal-input-group>*:last-child.input{padding-right:.625rem}.bal-input-group>*:last-child.bal-tag{margin-right:.625rem}.bal-input-group>*:first-child.bal-tag{margin-left:.625rem}.bal-input-group.is-hovered,.bal-input-group.is-hovered .input,.bal-input-group.is-hovered .bal-select__control,.bal-input-group:hover,.bal-input-group:hover .input,.bal-input-group:hover .bal-select__control{background:var(--bal-color-grey-1)}.bal-input-group--is-danger,.bal-input-group--is-danger .input{border-color:var(--bal-color-border-danger);background:var(--bal-color-danger-1)}.bal-input-group--is-danger svg g,.bal-input-group--is-danger svg path,.bal-input-group--is-danger svg circle{fill:var(--bal-color-border-danger)}.bal-input-group.bal-input-group--is-danger,.bal-input-group.bal-input-group--is-danger .input{border-color:var(--bal-color-border-danger);background:var(--bal-color-danger-1)}.bal-input-group.bal-input-group--is-danger svg,.bal-input-group.bal-input-group--is-danger svg g,.bal-input-group.bal-input-group--is-danger svg path,.bal-input-group.bal-input-group--is-danger svg circle{fill:var(--bal-color-border-danger)}.bal-input-group.bal-input-group--is-success,.bal-input-group.bal-input-group--is-success .input{border-color:var(--bal-color-border-success);background:var(--bal-color-success-1)}.bal-input-group.bal-input-group--is-success svg,.bal-input-group.bal-input-group--is-success svg g,.bal-input-group.bal-input-group--is-success svg path,.bal-input-group.bal-input-group--is-success svg circle{fill:var(--bal-color-border-success)}.bal-input-group.bal-input-group--is-warning,.bal-input-group.bal-input-group--is-warning .input{border-color:var(--bal-color-border-warning);background:var(--bal-color-warning-1)}.bal-input-group.bal-input-group--is-warning svg,.bal-input-group.bal-input-group--is-warning svg g,.bal-input-group.bal-input-group--is-warning svg path,.bal-input-group.bal-input-group--is-warning svg circle{fill:var(--bal-color-border-warning)}.bal-input-group.bal-input-group--is-disabled,.bal-input-group.bal-input-group--is-disabled .input{border-color:var(--bal-color-border-grey-dark);background:var(--bal-color-grey-2)}.bal-input-group.bal-input-group--is-disabled svg,.bal-input-group.bal-input-group--is-disabled svg g,.bal-input-group.bal-input-group--is-disabled svg path,.bal-input-group.bal-input-group--is-disabled svg circle{fill:var(--bal-color-border-grey-dark)}.bal-input-group--is-disabled,.bal-input-group--is-disabled .input{cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-color-text-grey-dark)}.bal-input-group--is-disabled ::-webkit-input-placeholder,.bal-input-group--is-disabled .input ::-webkit-input-placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled ::-moz-placeholder,.bal-input-group--is-disabled .input ::-moz-placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled :-ms-input-placeholder,.bal-input-group--is-disabled .input :-ms-input-placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled ::-ms-input-placeholder,.bal-input-group--is-disabled .input ::-ms-input-placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled ::placeholder,.bal-input-group--is-disabled .input ::placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled .tag{background-color:var(--bal-color-grey-5)}.bal-input-group--is-disabled .tag span{color:var(--bal-color-text-white)}.bal-input-group--is-disabled .tag .delete{display:none}.bal-input-group:not(.bal-input-group--is-disabled):focus-within{border-color:var(--bal-color-primary)}";
+const balInputGroupCss = ".bal-input-group{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;min-height:3rem;gap:.25rem;border:var(--bal-border-width-normal) solid var(--bal-color-border);border-radius:var(--bal-radius-normal);background:var(--bal-color-white)}.bal-input-group .input{min-height:2.75rem;height:2.75rem;border:none;border-radius:0;background:none !important;padding-left:0;padding-right:0;padding-bottom:calc(.5em - .313rem);padding-top:calc(.5em - .313rem)}.bal-input-group .bal-select__control{border:none;min-height:2.75rem}.bal-input-group .bal-select__control__input{padding-left:0 !important;padding-right:0 !important}.bal-input-group .bal-icon{min-width:3rem}.bal-input-group .bal-tag .bal-icon{min-width:unset}.bal-input-group>*:first-child.bal-select .bal-select__control{padding-left:.625rem}.bal-input-group>*:first-child.bal-input .input{padding-left:.625rem}.bal-input-group>*:last-child.bal-input .input{padding-right:.625rem}.bal-input-group>*:first-child.bal-input-date .input{padding-left:.625rem}.bal-input-group>*:last-child.bal-input-date .input{padding-right:.625rem}.bal-input-group>*:first-child.input{padding-left:.625rem}.bal-input-group>*:last-child.input{padding-right:.625rem}.bal-input-group>*:last-child.bal-tag{margin-right:.625rem}.bal-input-group>*:first-child.bal-tag{margin-left:.625rem}.bal-input-group.is-hovered,.bal-input-group.is-hovered .input,.bal-input-group.is-hovered .bal-select__control,.bal-input-group:hover,.bal-input-group:hover .input,.bal-input-group:hover .bal-select__control{background:var(--bal-form-field-control-background-hover)}.bal-input-group--is-danger,.bal-input-group--is-danger .input{border-color:var(--bal-color-border-danger);background:var(--bal-color-danger-1)}.bal-input-group--is-danger svg g,.bal-input-group--is-danger svg path,.bal-input-group--is-danger svg circle{fill:var(--bal-color-border-danger)}.bal-input-group.bal-input-group--is-danger,.bal-input-group.bal-input-group--is-danger .input{border-color:var(--bal-color-border-danger);background:var(--bal-color-danger-1)}.bal-input-group.bal-input-group--is-danger svg,.bal-input-group.bal-input-group--is-danger svg g,.bal-input-group.bal-input-group--is-danger svg path,.bal-input-group.bal-input-group--is-danger svg circle{fill:var(--bal-color-border-danger)}.bal-input-group.bal-input-group--is-success,.bal-input-group.bal-input-group--is-success .input{border-color:var(--bal-color-border-success);background:var(--bal-color-success-1)}.bal-input-group.bal-input-group--is-success svg,.bal-input-group.bal-input-group--is-success svg g,.bal-input-group.bal-input-group--is-success svg path,.bal-input-group.bal-input-group--is-success svg circle{fill:var(--bal-color-border-success)}.bal-input-group.bal-input-group--is-warning,.bal-input-group.bal-input-group--is-warning .input{border-color:var(--bal-color-border-warning);background:var(--bal-color-warning-1)}.bal-input-group.bal-input-group--is-warning svg,.bal-input-group.bal-input-group--is-warning svg g,.bal-input-group.bal-input-group--is-warning svg path,.bal-input-group.bal-input-group--is-warning svg circle{fill:var(--bal-color-border-warning)}.bal-input-group.bal-input-group--is-disabled,.bal-input-group.bal-input-group--is-disabled .input{border-color:var(--bal-color-border-grey-dark);background:var(--bal-color-grey-2)}.bal-input-group.bal-input-group--is-disabled svg,.bal-input-group.bal-input-group--is-disabled svg g,.bal-input-group.bal-input-group--is-disabled svg path,.bal-input-group.bal-input-group--is-disabled svg circle{fill:var(--bal-color-border-grey-dark)}.bal-input-group--is-disabled,.bal-input-group--is-disabled .input{cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-color-text-grey-dark)}.bal-input-group--is-disabled ::-webkit-input-placeholder,.bal-input-group--is-disabled .input ::-webkit-input-placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled ::-moz-placeholder,.bal-input-group--is-disabled .input ::-moz-placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled :-ms-input-placeholder,.bal-input-group--is-disabled .input :-ms-input-placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled ::-ms-input-placeholder,.bal-input-group--is-disabled .input ::-ms-input-placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled ::placeholder,.bal-input-group--is-disabled .input ::placeholder{color:var(--bal-color-text-grey)}.bal-input-group--is-disabled .tag{background-color:var(--bal-color-grey-5)}.bal-input-group--is-disabled .tag span{color:var(--bal-color-text-white)}.bal-input-group--is-disabled .tag .delete{display:none}.bal-input-group:not(.bal-input-group--is-disabled):focus-within{border-color:var(--bal-color-primary)}";
 
 const InputGroup = class {
     constructor(hostRef) {
@@ -27,7 +27,7 @@ const InputGroup = class {
         const hasDanger = this.invalid;
         const disabledClass = 'is-disabled';
         const hasDisabled = this.disabled || this.readonly;
-        return (index.h(index.Host, { key: '8f4dbc85cf4f85478b35d74e150a0776ede42446', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(dangerClass).class(hasDanger)), block.modifier(disabledClass).class(hasDisabled)) }, index.h("slot", { key: 'd3060925b6928994bebeb78791a0028ffc6ac5ac' })));
+        return (index.h(index.Host, { key: '4e70d05568802c062f5b9574eac4ec92d97ac802', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(dangerClass).class(hasDanger)), block.modifier(disabledClass).class(hasDisabled)) }, index.h("slot", { key: '66341e0036de49d244c8d6350d46c9c6c3920d35' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -196,11 +196,11 @@ const InputSlider = class {
         const inputValueRightEl = inputValueEl.modifier('right');
         const stepsEl = block.element('steps');
         const stepsItemEl = stepsEl.element('item');
-        return (index.h(index.Host, { key: 'ced88f04a8412d9c00f64f4a588259083d9986b2', class: Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), onClick: this.handleClick, "aria-disabled": aria.ariaBooleanToString(this.disabled || this.readonly) }, index.h("div", { key: 'ec99e4442438f51fb47e6ee7da080649c4ec9ebb', class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, index.h("div", { key: '4afda06efc6af4a027ef6291b4ad5cc3af3a1c70', class: Object.assign({}, backgroundUpperEl.class()), style: {
+        return (index.h(index.Host, { key: '02570c5b17b36fdc3e5ce197eac6270b628bac69', class: Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), onClick: this.handleClick, "aria-disabled": aria.ariaBooleanToString(this.disabled || this.readonly) }, index.h("div", { key: 'e1740a8a9cb0332401824c3c036231641a9d9e43', class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, index.h("div", { key: 'b930f0a3e5a7eb74c8b3b658827715df9c4ed75f', class: Object.assign({}, backgroundUpperEl.class()), style: {
                 width: this.cssWidth(),
-            } }, index.h("div", { key: '1cdfcacd60179c9b7cb2a4cb2f8cc265b9ff3bf9', class: Object.assign({}, backgroundUpperInnerEl.class()) })), index.h("div", { key: 'b78eb2d0286cccd8394bcb460f7fd9cbc66124fc', class: Object.assign({}, backgroundLowerEl.class()), style: {
+            } }, index.h("div", { key: '71934f7b3ec4e3305f6bee6e1ac9c9da0e1e217e', class: Object.assign({}, backgroundUpperInnerEl.class()) })), index.h("div", { key: '8d34702fe9de1678db528d2bb87e73b937f7668b', class: Object.assign({}, backgroundLowerEl.class()), style: {
                 width: this.cssWidth(true),
-            } }, index.h("div", { key: 'bf7c89eeeb25df825521a0462e070dccd65df7dc', class: Object.assign({}, backgroundLowerInnerEl.class()) }))), index.h("div", { key: 'f3d7033c33b696170c85a1bc6a4f0557eed2a45f', class: Object.assign({}, inputEl.class()) }, index.h("div", { key: '237300025fdb1ea927bf9ba2d79f908735b7b0d5', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), index.h("input", { key: '7437e049efcf5cac5fb2d1d107b9696afd745ed8', type: "range", class: Object.assign(Object.assign({}, inputNativeEl.class()), inputNativeEl.modifier('disabled').class(this.disabled || this.readonly)), ref: inputEl => (this.nativeInput = inputEl), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, name: this.name, required: this.required, tabIndex: this.balTabindex, step: this.step, min: this.min, max: this.max, value: this.value !== '' && this.value !== undefined ? this.value : 0, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyPress: e => this.balKeyPress.emit(e), "data-testid": "bal-input-slider" }), index.h("div", { key: '17bdbd21ccb347ab53f9fb117156a0b1cc881791', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), index.h("div", { key: 'd4f74ee7793bf63c96bd272774bcbbdef0bdcaeb', class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (index.h("div", { key: step, class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
+            } }, index.h("div", { key: '19f9c2662a5a4f9b46bcd469f81049380436c29d', class: Object.assign({}, backgroundLowerInnerEl.class()) }))), index.h("div", { key: 'ff48c0def1e78af0f92cf266d3ad92884813f6b5', class: Object.assign({}, inputEl.class()) }, index.h("div", { key: '9efa82e623ce2295c5bd47f08ced92f6c50d5b84', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), index.h("input", { key: 'af08d09d8e3e5469bd87e5349240a794f77f76be', type: "range", class: Object.assign(Object.assign({}, inputNativeEl.class()), inputNativeEl.modifier('disabled').class(this.disabled || this.readonly)), ref: inputEl => (this.nativeInput = inputEl), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, name: this.name, required: this.required, tabIndex: this.balTabindex, step: this.step, min: this.min, max: this.max, value: this.value !== '' && this.value !== undefined ? this.value : 0, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyPress: e => this.balKeyPress.emit(e), "data-testid": "bal-input-slider" }), index.h("div", { key: '625faf29b5d671bf40319fbb152386ee5abebbfb', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), index.h("div", { key: '20aa70b6cd9864b1caa18aa376ef33b5d074eb31', class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (index.h("div", { key: step, class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1225,7 +1225,7 @@ const InputStepper = class {
         const elText = elInner.element('text');
         const increaseLabel = balInputStepper_i18n.i18nBalInputStepper[this.language].increase;
         const decreaseLabel = balInputStepper_i18n.i18nBalInputStepper[this.language].decrease;
-        return (index.h(index.Host, { key: 'cfa84687c890114f02d591a21a46a07661469a48', "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-focused": this.focused ? 'true' : null, class: Object.assign({}, block.class()) }, index.h("div", { key: '5335fcef9736cd54bc837ec55ab8431aac73ad49', class: Object.assign({}, elInner.class()) }, index.h("bal-button", { key: 'a55658ae806919db98ad1b388f0bf7314c7a744f', a11yTitle: decreaseLabel, a11yLabel: decreaseLabel, a11yControls: this.ariaForm.controlId || this.inputId, size: "small", square: true, "data-testid": "bal-input-stepper-decrease", outlined: !this.invalid, icon: "minus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value <= this.min, onClick: _ => this.decrease(), onBalFocus: ev => this.onFocusDecrease(ev), onBalBlur: ev => this.onBlurDecrease(ev) }), index.h("span", { key: '0a30ea1ba1435fe86b090d9aff393cb7520939aa', "data-testid": "bal-input-stepper-text", class: Object.assign(Object.assign(Object.assign({}, elText.class()), elText.modifier('invalid').class(this.invalid)), elText.modifier('disabled').class(this.disabled || this.readonly)) }, number.formatLocaleNumber(this.value)), index.h("bal-button", { key: '06004c24961ea016ef35fd0e1d029d08588b12e8', a11yTitle: increaseLabel, a11yLabel: increaseLabel, a11yControls: this.ariaForm.controlId || this.inputId, size: "small", "data-testid": "bal-input-stepper-increase", square: true, outlined: !this.invalid, icon: "plus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value >= this.max, onClick: _ => this.increase(), onBalFocus: ev => this.onFocusIncrease(ev), onBalBlur: ev => this.onBlurIncrease(ev) })), index.h("input", Object.assign({ key: '4b6c8ec2e19eb957d080fa79aef07667dc79a2ad', class: Object.assign({}, elInput.class()), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": aria.ariaBooleanToString(this.disabled), "data-testid": "bal-input-stepper", type: "text", value: this.value, name: this.name, tabindex: "-1", ref: inputEl => (this.nativeInput = inputEl), readonly: this.readonly, disabled: this.disabled }, this.inheritedAttributes))));
+        return (index.h(index.Host, { key: '642192eee6d75e8a73622ecd3b781446163b3b4f', "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-focused": this.focused ? 'true' : null, class: Object.assign({}, block.class()) }, index.h("div", { key: 'ee2d5f46f8fc4c49b70042964b2b0ad34a6d4e9f', class: Object.assign({}, elInner.class()) }, index.h("bal-button", { key: '26c6dcca2d4c065daf88f2d119d05477292c424c', a11yTitle: decreaseLabel, a11yLabel: decreaseLabel, a11yControls: this.ariaForm.controlId || this.inputId, size: "small", square: true, "data-testid": "bal-input-stepper-decrease", outlined: !this.invalid, icon: "minus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value <= this.min, onClick: _ => this.decrease(), onBalFocus: ev => this.onFocusDecrease(ev), onBalBlur: ev => this.onBlurDecrease(ev) }), index.h("span", { key: 'c2364d701f929bc318f4097284dbe52226c6b46a', "data-testid": "bal-input-stepper-text", class: Object.assign(Object.assign(Object.assign({}, elText.class()), elText.modifier('invalid').class(this.invalid)), elText.modifier('disabled').class(this.disabled || this.readonly)) }, number.formatLocaleNumber(this.value)), index.h("bal-button", { key: '2cb3693ef78f6a7ac36126d5c37d1424cb5235f2', a11yTitle: increaseLabel, a11yLabel: increaseLabel, a11yControls: this.ariaForm.controlId || this.inputId, size: "small", "data-testid": "bal-input-stepper-increase", square: true, outlined: !this.invalid, icon: "plus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value >= this.max, onClick: _ => this.increase(), onBalFocus: ev => this.onFocusIncrease(ev), onBalBlur: ev => this.onBlurIncrease(ev) })), index.h("input", Object.assign({ key: '9866c51ffe35d16677f6b23816a7aacc2dcfb3ad', class: Object.assign({}, elInput.class()), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": aria.ariaBooleanToString(this.disabled), "data-testid": "bal-input-stepper", type: "text", value: this.value, name: this.name, tabindex: "-1", ref: inputEl => (this.nativeInput = inputEl), readonly: this.readonly, disabled: this.disabled }, this.inheritedAttributes))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -480,7 +480,7 @@ const Input = class {
         this.initialValue = this.value || '';
     }
     componentWillLoad() {
-        this.inheritedAttributes = attributes.inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
+        this.inheritedAttributes = attributes.inheritAttributes(this.el, ['aria-label', 'tabindex', 'title', 'data-hj-allow']);
     }
     componentDidLoad() {
         this.inputValue = this.value;
@@ -555,7 +555,7 @@ const Input = class {
         }
         const block = bem.BEM.block('input');
         const id = this.ariaForm.controlId || this.inputId;
-        return (index.h(index.Host, { key: '4305dd33ab7a921626c9fb9832efd1d98e2467b5', onClick: this.handleClick, "aria-disabled": aria.ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, index.h("input", Object.assign({ key: '393e47564e6bd87ee67a98a8d023c2f82e36b0dd', class: {
+        return (index.h(index.Host, { key: 'df1fdc17d1cdfcd0d7053deaab872d649a9aa3cb', onClick: this.handleClick, "aria-disabled": aria.ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, index.h("input", Object.assign({ key: 'e7b35786a60c06b7eee7b82e22af9cd590f6c261', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,

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

@@ -7,7 +7,7 @@ var config_decorator = require('./config.decorator-CAhT6DB_.js');
 var balLabel_i18n = require('./bal-label.i18n-BcNNm9Es.js');
 var form = require('./form-BSlIiqcR.js');
 
-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 balLabelCss = ":root,:host{--bal-label-font-family:var(--bal-form-field-label-font-family);--bal-label-font-weight:var(--bal-form-field-label-font-weight);--bal-label-small-font-family:var(--bal-form-field-label-font-family);--bal-label-small-font-weight:var(--bal-form-field-label-font-weight);--bal-label-small-font-size:var(--bal-text-size-small);--bal-label-small-font-size-tablet:var(--bal-text-size-small-tablet);--bal-label-small-font-size-desktop:var(--bal-text-size-small-desktop);--bal-label-small-line-height:var(--bal-line-height-small);--bal-label-small-line-height-tablet:var(--bal-line-height-tablet-small);--bal-label-small-line-height-desktop:var(--bal-line-height-desktop-small)}.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-label-font-family);font-weight:var(--bal-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-label-small-font-family);font-size:var(--bal-label-small-font-size);line-height:var(--bal-label-small-line-height)}@media screen and (min-width: 769px),print{.bal-label__native--small{font-size:var(--bal-label-small-font-size-tablet);line-height:var(--bal-label-small-line-height-tablet)}}@media screen and (min-width: 1024px){.bal-label__native--small{font-size:var(--bal-label-small-font-size-desktop);line-height:var(--bal-label-small-line-height-desktop)}}.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 Label = class {
     constructor(hostRef) {
@@ -120,7 +120,7 @@ const Label = class {
         const xxxLarge = this.size === 'xxx-large';
         const id = this.ariaForm.labelId || this.htmlId;
         const htmlFor = this.htmlFor || this.ariaForm.controlId;
-        return (index.h(index.Host, { key: 'e37870aea60fa79ccd0ed4c451168dc2d652cec5', class: Object.assign({}, block.class()) }, index.h("label", { key: '6c910f7122615d7308dd3825c18d1864aec939f8', id: id, htmlFor: htmlFor, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('multiline').class(this.multiline)), block.element('native').modifier('no-wrap').class(this.noWrap)), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('danger').class(danger)), block.element('native').modifier('success').class(success)), block.element('native').modifier('regular').class(regular)), block.element('native').modifier('small').class(small)), block.element('native').modifier('large').class(large)), block.element('native').modifier('x-large').class(xLarge)), block.element('native').modifier('xx-large').class(xxLarge)), block.element('native').modifier('xxx-large').class(xxxLarge)), block.element('native').modifier('hovered').class(this.hovered)), block.element('native').modifier('pressed').class(this.pressed)) }, index.h("slot", { key: '761ec8b3d47ea0822216af9e93cee3a1bdbb67bd' }), suffix)));
+        return (index.h(index.Host, { key: '0fe607cc7952863906e22d2f684ec7a92ee9c48a', class: Object.assign({}, block.class()) }, index.h("label", { key: '61d3f5ed4eac70ae2cd5b94242563ca4f2404efb', id: id, htmlFor: htmlFor, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('multiline').class(this.multiline)), block.element('native').modifier('no-wrap').class(this.noWrap)), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('danger').class(danger)), block.element('native').modifier('success').class(success)), block.element('native').modifier('regular').class(regular)), block.element('native').modifier('small').class(small)), block.element('native').modifier('large').class(large)), block.element('native').modifier('x-large').class(xLarge)), block.element('native').modifier('xx-large').class(xxLarge)), block.element('native').modifier('xxx-large').class(xxxLarge)), block.element('native').modifier('hovered').class(this.hovered)), block.element('native').modifier('pressed').class(this.pressed)) }, index.h("slot", { key: '2e4d3b6e54d0661520f1d6fbebddd7efdfa22258' }), suffix)));
     }
     get el() { return index.getElement(this); }
 };