@baloise/ds-core 16.5.1-nightly.20240927 → 16.5.2

package/components/bal-field.js

@@ -119,8 +119,8 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
             'bal-field-control bal-dropdown',
             'bal-field-control bal-checkbox',
             'bal-field-control bal-radio',
-            'bal-field-control bal-segment-item',
             'bal-field-control bal-segment',
+            'bal-field-control bal-segment-item',
             'bal-field-control bal-checkbox-group',
             'bal-field-control bal-radio-group',
             'bal-field-control bal-number-input',

package/components/bal-footer.js

@@ -5,21 +5,18 @@ import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { k as rIC } from './helpers.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { d as defineCustomElement$b } from './bal-checkbox2.js';
-import { d as defineCustomElement$a } from './bal-close2.js';
-import { d as defineCustomElement$9 } from './bal-icon2.js';
-import { d as defineCustomElement$8 } from './bal-input-group2.js';
-import { d as defineCustomElement$7 } from './bal-logo2.js';
-import { d as defineCustomElement$6 } from './bal-popover2.js';
-import { d as defineCustomElement$5 } from './bal-popover-content2.js';
-import { d as defineCustomElement$4 } from './bal-select2.js';
-import { d as defineCustomElement$3 } from './bal-select-option2.js';
-import { d as defineCustomElement$2 } from './bal-tag2.js';
+import { d as defineCustomElement$8 } from './bal-checkbox2.js';
+import { d as defineCustomElement$7 } from './bal-dropdown2.js';
+import { d as defineCustomElement$6 } from './bal-icon2.js';
+import { d as defineCustomElement$5 } from './bal-input-group2.js';
+import { d as defineCustomElement$4 } from './bal-logo2.js';
+import { d as defineCustomElement$3 } from './bal-option2.js';
+import { d as defineCustomElement$2 } from './bal-stack2.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 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__inner{position:relative;font-family:var(--bal-footer-font-family);background-color:var(--bal-footer-background);color:var(--bal-footer-color);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,.bal-footer__inner p{color:var(--bal-footer-color)}.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 bal-icon,.bal-footer__inner__wrapper__header-container__language .input{cursor:pointer}.bal-footer__inner__wrapper__header-container__language:hover bal-icon svg,.bal-footer__inner__wrapper__header-container__language:hover bal-icon g,.bal-footer__inner__wrapper__header-container__language:hover bal-icon path,.bal-footer__inner__wrapper__header-container__language:hover bal-icon circle{fill:var(--bal-footer-language-background-hover)}.bal-footer__inner__wrapper__header-container__language:hover .input{color:var(--bal-footer-language-color-hover)}.bal-footer__inner__wrapper__header-container__language:active bal-icon svg,.bal-footer__inner__wrapper__header-container__language:active bal-icon g,.bal-footer__inner__wrapper__header-container__language:active bal-icon path,.bal-footer__inner__wrapper__header-container__language:active bal-icon circle{fill:var(--bal-footer-language-background-active)}.bal-footer__inner__wrapper__header-container__language:active .input{color:var(--bal-footer-language-color-active)}.bal-footer__inner__wrapper__header-container__language__wrapper{width:5rem}.bal-footer__inner__wrapper__header-container__language__wrapper bal-input-group{background:rgba(0,0,0,0);border:none}.bal-footer__inner__wrapper__header-container__language__wrapper bal-input-group:hover{background:rgba(0,0,0,0) !important}.bal-footer__inner__wrapper__header-container__language__wrapper bal-input-group bal-icon{min-width:.75rem !important}.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-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{--bal-dropdown-control-background:transparent;--bal-dropdown-control-input-background:transparent;--bal-dropdown-control-border-color:transparent;--bal-dropdown-popover-empty-text-color:var(--bal-color-white);--bal-dropdown-control-text-color:var(--bal-color-white);--bal-dropdown-control-text-color-focused:var(---bal-color-white)}.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 .bal-dropdown__list{min-width:105%;right:0 !important;left:auto !important}.bal-footer__inner__wrapper__header-container__language bal-icon,.bal-footer__inner__wrapper__header-container__language .input{cursor:pointer;min-width:auto !important}.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear svg,.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear g,.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear path,.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear circle{fill:var(--bal-color-white)}.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__rear svg,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__rear g,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__rear path,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__rear circle{fill:var(--bal-footer-language-background-hover)}.bal-footer__inner__wrapper__header-container__language:hover .input,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__root__content{color:var(--bal-footer-language-color-hover)}.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__rear svg,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__rear g,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__rear path,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__rear circle{fill:var(--bal-footer-language-background-active)}.bal-footer__inner__wrapper__header-container__language:active .input,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__root__content{color:var(--bal-footer-language-color-active)}.bal-footer__inner__wrapper__header-container__language__wrapper .bal-input-group{background:rgba(0,0,0,0);border:none;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__header-container__language__wrapper .bal-input-group:hover{background:rgba(0,0,0,0) !important}.bal-footer__inner__wrapper__header-container__language__wrapper .bal-input-group bal-dropdown{min-width:5rem}.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 {
@@ -93,6 +90,7 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
      */
     render() {
         const block = BEM.block('footer');
+        const elSlot = block.element('slot');
         const elInner = block.element('inner');
         const elInnerWrapper = elInner.element('wrapper');
         const elContainer = elInnerWrapper.element('container');
@@ -101,16 +99,16 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
         const elLogo = elHeaderContainer.element('logo');
         const elLanguage = elHeaderContainer.element('language');
         const elWrapper = elLanguage.element('wrapper');
-        const elIcon = elLanguage.element('icon');
+        elLanguage.element('icon');
         const elLegalLinks = elLinksContainer.element('legal-links');
         const elSocialMediaLinks = elLinksContainer.element('social-media-links');
         return (h(Host, { class: Object.assign({}, block.class()) }, h("footer", { class: Object.assign({}, elInner.class()) }, h("div", { class: Object.assign({}, elInnerWrapper.class()) }, h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { class: Object.assign({}, elLogo.class()) }, h("bal-logo", { color: "white" })), h("div", { class: Object.assign({}, elLanguage.class()), style: {
                 display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
-            } }, h("div", { class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", null, h("bal-icon", { class: Object.assign({}, elIcon.class()), name: "web", color: "white", onClick: el => {
+            } }, h("div", { class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", null, h("bal-icon", { class: 'bal-dropdown__rear', name: "web", color: "white", onClick: el => {
                 var _a;
                 stopEventBubbling(el);
                 (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.open();
-            } }), h("bal-select", { ref: el => (this.selectEl = el), value: this.language, onBalChange: event => this.changeLanguage(event.detail), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("bal-select-option", { key: language, label: language.toLocaleUpperCase(), value: language }, language.toLocaleUpperCase())))))))), h("slot", null), h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { class: Object.assign({}, elSocialMediaLinks.class()), style: {
+            } }), h("bal-dropdown", { ref: el => (this.selectEl = el), value: this.language, onBalChange: event => this.changeLanguage(event.detail), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("bal-option", { key: language, label: language.toLocaleUpperCase(), value: language }, language.toLocaleUpperCase())))))))), h("div", { class: Object.assign({}, elSlot.class()) }, h("slot", null)), h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { class: Object.assign({}, elSocialMediaLinks.class()), style: {
                 display: !this.showSocialMedia ? 'none' : 'flex',
             } }, this.socialMediaLinks.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
@@ -148,7 +146,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-footer", "bal-checkbox", "bal-close", "bal-icon", "bal-input-group", "bal-logo", "bal-popover", "bal-popover-content", "bal-select", "bal-select-option", "bal-tag"];
+    const components = ["bal-footer", "bal-checkbox", "bal-dropdown", "bal-icon", "bal-input-group", "bal-logo", "bal-option", "bal-stack"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-footer":
             if (!customElements.get(tagName)) {
@@ -156,51 +154,36 @@ function defineCustomElement$1() {
             }
             break;
         case "bal-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "bal-close":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "bal-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "bal-input-group":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "bal-logo":
+        case "bal-dropdown":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "bal-popover":
+        case "bal-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "bal-popover-content":
+        case "bal-input-group":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "bal-select":
+        case "bal-logo":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "bal-select-option":
+        case "bal-option":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "bal-tag":
+        case "bal-stack":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/components/bal-input-stepper.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { c as commonjsGlobal } from './_commonjsHelpers.js';
-import { x as formatLocaleNumber } from './index.esm.js';
+import { w as formatLocaleNumber } from './index.esm.js';
 import { k as rIC, m as debounceEvent } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 import { s as stopEventBubbling, d as inputListenOnClick } from './form-input.js';

package/components/bal-number-input.js

@@ -3,7 +3,7 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { j as inputHandleClick, c as inputHandleHostClick, b as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, l as getNativeInputValue, m as getUpcomingValue, s as stopEventBubbling, d as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
 import { m as debounceEvent } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
-import { y as getDecimalSeparator$1, z as getThousandSeparator$1, x as formatLocaleNumber$1 } from './index.esm.js';
+import { y as getDecimalSeparator$1, z as getThousandSeparator$1, w as formatLocaleNumber$1 } from './index.esm.js';
 import { a as defaultLocale, d as defaultConfig } from './config.default.js';
 import { g as useBalConfig } from './config.utils.js';
 import { B as BEM } from './bem.js';

package/components/bal-option.js

@@ -1,169 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { B as BEM } from './bem.js';
-import { L as Logger } from './log.js';
-import { a as ariaBooleanToString } from './aria.js';
-import { s as stopEventBubbling } from './form-input.js';
-import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator.js';
-import { d as defineCustomElement$4 } from './bal-checkbox2.js';
-import { d as defineCustomElement$3 } from './bal-icon2.js';
-import { d as defineCustomElement$2 } from './bal-stack2.js';
-
-const balOptionCss = ":root{--bal-option-padding-x:var(--bal-space-small);--bal-option-min-height:1.5rem;--bal-option-background:var(--bal-color-white);--bal-option-background-hovered:var(--bal-color-grey-2);--bal-option-background-selected:var(--bal-color-primary-1);--bal-option-background-selected-hovered:#dddfeb;--bal-option-background-invalid:var(--bal-color-danger-1);--bal-option-background-invalid-hovered:#fbe0de;--bal-option-border-width:var(--bal-border-width-normal);--bal-option-border-color:var(--bal-color-grey-2);--bal-option-font-family:var(--bal-font-family-text);--bal-option-font-weight:var(--bal-font-weight-regular);--bal-option-line-height:1.125rem;--bal-option-text-hovered:var(--bal-color-text-primary-hovered);--bal-option-text-pressed:var(--bal-color-text-primary-pressed);--bal-option-text-disabled:var(--bal-color-text-grey-light)}.bal-option{font-size:16px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;list-style:none;cursor:pointer;border-bottom-width:var(--bal-option-border-width);border-bottom-color:var(--bal-option-border-color);border-bottom-style:solid;background:var(--bal-option-background);padding-left:var(--bal-option-padding-x);padding-right:var(--bal-option-padding-x);min-height:var(--bal-option-min-height)}.bal-option>bal-stack{min-height:var(--bal-option-min-height)}.bal-option:last-child{border-bottom:none}.bal-option::-moz-focus-inner{border:none}.bal-option--hidden{display:none;visibility:hidden}.bal-option__inner{font-family:var(--bal-option-font-family);font-weight:var(--bal-option-font-weight);line-height:var(--bal-option-line-height);word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-ms-flex:1;flex:1}.bal-option__inner--multiline{white-space:normal}.bal-option--focused{background:var(--bal-option-background-hovered)}@media (hover: hover)and (pointer: fine){.bal-option:hover{background:var(--bal-option-background-hovered);color:var(--bal-option-text-hovered)}}.bal-option:active{background:var(--bal-option-background-hovered);color:var(--bal-option-text-pressed)}.bal-option--selected{background:var(--bal-option-background-selected)}@media (hover: hover)and (pointer: fine){.bal-option--selected:hover{background:var(--bal-option-background-selected-hovered)}}.bal-option--selected:active{background:var(--bal-option-background-selected-hovered)}.bal-option--selected .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--selected.bal-option--focused{background:var(--bal-option-background-selected-hovered)}.bal-option--selected.bal-option--focused .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--invalid{background:var(--bal-option-background-invalid)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover{background:var(--bal-option-background-invalid-hovered)}}.bal-option--invalid:active{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid.bal-option--focused{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid .bal-option__inner{color:var(--bal-color-text-danger-hovered)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover .bal-option__inner{color:var(--bal-color-text-danger-hovered)}}.bal-option--invalid:active .bal-option__inner{color:var(--bal-color-text-danger-pressed)}.bal-option--disabled,.bal-option--disabled.bal-option--focused{background:var(--bal-option-background) !important;color:var(--bal-option-text-disabled) !important;cursor:default !important}.bal-option--disabled:hover,.bal-option--disabled.bal-option--focused:hover{background:var(--bal-option-background) !important}.bal-option{--bal-radio-checkbox-symbol-size:1.125rem;--bal-radio-checkbox-symbol-width:calc(0.375rem - 1px);--bal-radio-checkbox-symbol-height:calc(0.656rem - 1px);--bal-radio-checkbox-symbol-left:calc(0.375rem + 1px);--bal-radio-checkbox-symbol-margin-top:0.188rem;--bal-radio-checkbox-label-min-height:1.125rem}";
-const BalOptionStyle0 = balOptionCss;
-
-const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.balOptionChange = createEvent(this, "balOptionChange", 7);
-        this.balOptionFocus = createEvent(this, "balOptionFocus", 7);
-        this.inputId = `bal-option-${balOptionIds++}`;
-        /**
-         * EVENT BINDING
-         * ------------------------------------------------------
-         */
-        this.onClick = (ev) => {
-            const listEl = this.el.closest('bal-option-list');
-            if (this.disabled || (listEl && listEl.disabled)) {
-                stopEventBubbling(ev);
-            }
-            else {
-                if (listEl && listEl.required && !listEl.multiple) {
-                    if (!this.selected) {
-                        this.select(true);
-                    }
-                }
-                else {
-                    this.select(!this.selected);
-                }
-            }
-        };
-        this.checkbox = false;
-        this.interactionState = BalElementStateListener.DefaultState;
-        this.label = '';
-        this.value = '';
-        this.disabled = false;
-        this.multiline = false;
-        this.invalid = false;
-        this.selected = false;
-        this.focused = false;
-        this.hidden = false;
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    componentWillRender() {
-        if (this.el) {
-            const optionListEl = this.el.closest('bal-option-list');
-            if (optionListEl) {
-                this.checkbox = !!optionListEl.multiple;
-            }
-        }
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    listenToMouseEnter() {
-        const { label, value, selected, disabled, hidden } = this;
-        if (!hidden && !disabled) {
-            this.balOptionFocus.emit({ label, value, selected });
-        }
-    }
-    elementStateListener(info) {
-        this.interactionChildElements.forEach(element => {
-            element.hovered = info.hovered;
-            element.pressed = info.pressed;
-        });
-    }
-    /**
-     * PUBLIC METHODS
-     * ------------------------------------------------------
-     */
-    /**
-     * Selects or deselects the option and informs other components
-     */
-    async select(selected = true) {
-        this.selected = selected;
-        const { label, value } = this;
-        this.balOptionChange.emit({ label, value, selected });
-    }
-    /**
-     * PRIVATE METHODS
-     * ------------------------------------------------------
-     */
-    get interactionChildElements() {
-        return Array.from(this.el.querySelectorAll('bal-checkbox'));
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = BEM.block('option');
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", null)), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
-    }
-    get el() { return this; }
-    static get style() { return BalOptionStyle0; }
-}, [4, "bal-option", {
-        "label": [1],
-        "value": [1],
-        "disabled": [4],
-        "multiline": [4],
-        "invalid": [4],
-        "selected": [1028],
-        "focused": [1028],
-        "hidden": [4],
-        "checkbox": [32],
-        "interactionState": [32],
-        "select": [64]
-    }, [[1, "mouseenter", "listenToMouseEnter"]]]);
-__decorate([
-    Logger('bal-option'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], Option.prototype, "createLogger", null);
-__decorate([
-    ListenToElementStates(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], Option.prototype, "elementStateListener", null);
-let balOptionIds = 0;
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-option", "bal-checkbox", "bal-icon", "bal-stack"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-option":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Option);
-            }
-            break;
-        case "bal-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "bal-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "bal-stack":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { O as Option, d as defineCustomElement$1 } from './bal-option2.js';
 
 const BalOption = Option;
 const defineCustomElement = defineCustomElement$1;

package/components/bal-option2.js

@@ -0,0 +1,168 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { B as BEM } from './bem.js';
+import { L as Logger } from './log.js';
+import { a as ariaBooleanToString } from './aria.js';
+import { s as stopEventBubbling } from './form-input.js';
+import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator.js';
+import { d as defineCustomElement$3 } from './bal-checkbox2.js';
+import { d as defineCustomElement$2 } from './bal-icon2.js';
+import { d as defineCustomElement$1 } from './bal-stack2.js';
+
+const balOptionCss = ":root{--bal-option-padding-x:var(--bal-space-small);--bal-option-min-height:1.5rem;--bal-option-background:var(--bal-color-white);--bal-option-background-hovered:var(--bal-color-grey-2);--bal-option-background-selected:var(--bal-color-primary-1);--bal-option-background-selected-hovered:#dddfeb;--bal-option-background-invalid:var(--bal-color-danger-1);--bal-option-background-invalid-hovered:#fbe0de;--bal-option-border-width:var(--bal-border-width-normal);--bal-option-border-color:var(--bal-color-grey-2);--bal-option-font-family:var(--bal-font-family-text);--bal-option-font-weight:var(--bal-font-weight-regular);--bal-option-line-height:1.125rem;--bal-option-text-hovered:var(--bal-color-text-primary-hovered);--bal-option-text-pressed:var(--bal-color-text-primary-pressed);--bal-option-text-disabled:var(--bal-color-text-grey-light)}.bal-option{font-size:16px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;list-style:none;cursor:pointer;border-bottom-width:var(--bal-option-border-width);border-bottom-color:var(--bal-option-border-color);border-bottom-style:solid;background:var(--bal-option-background);padding-left:var(--bal-option-padding-x);padding-right:var(--bal-option-padding-x);min-height:var(--bal-option-min-height)}.bal-option>bal-stack{min-height:var(--bal-option-min-height)}.bal-option:last-child{border-bottom:none}.bal-option::-moz-focus-inner{border:none}.bal-option--hidden{display:none;visibility:hidden}.bal-option__inner{font-family:var(--bal-option-font-family);font-weight:var(--bal-option-font-weight);line-height:var(--bal-option-line-height);word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-ms-flex:1;flex:1}.bal-option__inner--multiline{white-space:normal}.bal-option--focused{background:var(--bal-option-background-hovered)}@media (hover: hover)and (pointer: fine){.bal-option:hover{background:var(--bal-option-background-hovered);color:var(--bal-option-text-hovered)}}.bal-option:active{background:var(--bal-option-background-hovered);color:var(--bal-option-text-pressed)}.bal-option--selected{background:var(--bal-option-background-selected)}@media (hover: hover)and (pointer: fine){.bal-option--selected:hover{background:var(--bal-option-background-selected-hovered)}}.bal-option--selected:active{background:var(--bal-option-background-selected-hovered)}.bal-option--selected .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--selected.bal-option--focused{background:var(--bal-option-background-selected-hovered)}.bal-option--selected.bal-option--focused .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--invalid{background:var(--bal-option-background-invalid)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover{background:var(--bal-option-background-invalid-hovered)}}.bal-option--invalid:active{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid.bal-option--focused{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid .bal-option__inner{color:var(--bal-color-text-danger-hovered)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover .bal-option__inner{color:var(--bal-color-text-danger-hovered)}}.bal-option--invalid:active .bal-option__inner{color:var(--bal-color-text-danger-pressed)}.bal-option--disabled,.bal-option--disabled.bal-option--focused{background:var(--bal-option-background) !important;color:var(--bal-option-text-disabled) !important;cursor:default !important}.bal-option--disabled:hover,.bal-option--disabled.bal-option--focused:hover{background:var(--bal-option-background) !important}.bal-option{--bal-radio-checkbox-symbol-size:1.125rem;--bal-radio-checkbox-symbol-width:calc(0.375rem - 1px);--bal-radio-checkbox-symbol-height:calc(0.656rem - 1px);--bal-radio-checkbox-symbol-left:calc(0.375rem + 1px);--bal-radio-checkbox-symbol-margin-top:0.188rem;--bal-radio-checkbox-label-min-height:1.125rem}";
+const BalOptionStyle0 = balOptionCss;
+
+const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.balOptionChange = createEvent(this, "balOptionChange", 7);
+        this.balOptionFocus = createEvent(this, "balOptionFocus", 7);
+        this.inputId = `bal-option-${balOptionIds++}`;
+        /**
+         * EVENT BINDING
+         * ------------------------------------------------------
+         */
+        this.onClick = (ev) => {
+            const listEl = this.el.closest('bal-option-list');
+            if (this.disabled || (listEl && listEl.disabled)) {
+                stopEventBubbling(ev);
+            }
+            else {
+                if (listEl && listEl.required && !listEl.multiple) {
+                    if (!this.selected) {
+                        this.select(true);
+                    }
+                }
+                else {
+                    this.select(!this.selected);
+                }
+            }
+        };
+        this.checkbox = false;
+        this.interactionState = BalElementStateListener.DefaultState;
+        this.label = '';
+        this.value = '';
+        this.disabled = false;
+        this.multiline = false;
+        this.invalid = false;
+        this.selected = false;
+        this.focused = false;
+        this.hidden = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentWillRender() {
+        if (this.el) {
+            const optionListEl = this.el.closest('bal-option-list');
+            if (optionListEl) {
+                this.checkbox = !!optionListEl.multiple;
+            }
+        }
+    }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToMouseEnter() {
+        const { label, value, selected, disabled, hidden } = this;
+        if (!hidden && !disabled) {
+            this.balOptionFocus.emit({ label, value, selected });
+        }
+    }
+    elementStateListener(info) {
+        this.interactionChildElements.forEach(element => {
+            element.hovered = info.hovered;
+            element.pressed = info.pressed;
+        });
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * Selects or deselects the option and informs other components
+     */
+    async select(selected = true) {
+        this.selected = selected;
+        const { label, value } = this;
+        this.balOptionChange.emit({ label, value, selected });
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    get interactionChildElements() {
+        return Array.from(this.el.querySelectorAll('bal-checkbox'));
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = BEM.block('option');
+        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", null)), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
+    }
+    get el() { return this; }
+    static get style() { return BalOptionStyle0; }
+}, [4, "bal-option", {
+        "label": [1],
+        "value": [1],
+        "disabled": [4],
+        "multiline": [4],
+        "invalid": [4],
+        "selected": [1028],
+        "focused": [1028],
+        "hidden": [4],
+        "checkbox": [32],
+        "interactionState": [32],
+        "select": [64]
+    }, [[1, "mouseenter", "listenToMouseEnter"]]]);
+__decorate([
+    Logger('bal-option'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Option.prototype, "createLogger", null);
+__decorate([
+    ListenToElementStates(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Option.prototype, "elementStateListener", null);
+let balOptionIds = 0;
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-option", "bal-checkbox", "bal-icon", "bal-stack"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-option":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Option);
+            }
+            break;
+        case "bal-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bal-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "bal-stack":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Option as O, defineCustomElement as d };

package/components/bal-segment-item.js

@@ -147,10 +147,8 @@ const SegmentItem = /*@__PURE__*/ proxyCustomElement(class SegmentItem extends H
         const id = (hasTabindex && this.ariaForm.controlId) || this.inputId;
         let buttonAttributes = {};
         if (hasTabindex) {
-            let labelId = this.ariaForm.labelId || null;
-            labelId = `${labelId || ''} ${id}-lbl`.trim();
             buttonAttributes = {
-                'aria-labelledby': labelId,
+                'aria-labelledby': this.ariaForm.labelId,
                 'aria-describedby': this.ariaForm.messageId,
             };
         }

package/components/bal-segment.js

@@ -305,7 +305,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     render() {
         const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
         const block = BEM.block('segment');
-        return (h(Host, { role: "radiogroup", "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { onSlotchange: this.onSlottedItemsChange })));
+        return (h(Host, { role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-select2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { l as lodash_isnil } from './index2.js';
 import { k as rIC, d as waitAfterIdleCallback, e as deepReady, i as isDescendant, h as debounce } from './helpers.js';
-import { a as isSpaceKey, b as areArraysEqual, o as isArrowDownKey, q as isArrowUpKey, i as isEnterKey, s as isEscapeKey, w as isBackspaceKey } from './index.esm.js';
+import { a as isSpaceKey, b as areArraysEqual, o as isArrowDownKey, q as isArrowUpKey, i as isEnterKey, s as isEscapeKey, x as isBackspaceKey } from './index.esm.js';
 import { r as removeValue, p as preventDefault, l as length, g as getValues, i as includes, s as startsWith, a as addValue, f as findLabelByValue, b as findOptionByLabel, v as validateAfterBlur } from './utils.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { B as BEM } from './bem.js';

package/components/index.esm.js

@@ -7394,4 +7394,4 @@ const loadSocialMediaLinks = (lang, region = 'CH') => {
         .then(res => res);
 };
 
-export { isArrowLeftKey as A, isArrowRightKey as B, isHomeKey as C, isEndKey as D, Language as L, isSpaceKey as a, areArraysEqual as b, toInteger$1 as c, dateSeparator as d, isValidIsoString as e, formatDateString as f, getDefaultOptions as g, format as h, isEnterKey as i, getYear as j, getMonth as k, lodash_padstart as l, getDate as m, now as n, isArrowDownKey as o, parse as p, isArrowUpKey as q, requiredArgs as r, isEscapeKey as s, toDate as t, loadFooterLinks as u, loadSocialMediaLinks as v, isBackspaceKey as w, formatLocaleNumber as x, getDecimalSeparator as y, getThousandSeparator as z };
+export { isArrowLeftKey as A, isArrowRightKey as B, isHomeKey as C, isEndKey as D, Language as L, isSpaceKey as a, areArraysEqual as b, toInteger$1 as c, dateSeparator as d, isValidIsoString as e, formatDateString as f, getDefaultOptions as g, format as h, isEnterKey as i, getYear as j, getMonth as k, lodash_padstart as l, getDate as m, now as n, isArrowDownKey as o, parse as p, isArrowUpKey as q, requiredArgs as r, isEscapeKey as s, toDate as t, loadFooterLinks as u, loadSocialMediaLinks as v, formatLocaleNumber as w, isBackspaceKey as x, getDecimalSeparator as y, getThousandSeparator as z };