@baloise/ds-core 19.8.2 → 19.8.3-nightly.20251107

package/components/bal-dropdown.js

@@ -3,19 +3,19 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
 import { b as balBrowser } from './browser.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
-import { a as areArraysEqual } from './array.js';
+import { d as defaultBalAriaForm } from './form.js';
 import { s as stopEventBubbling } from './form-input.js';
+import { n as rIC, a as waitAfterFramePaint, o as addEventListener, p as removeEventListener, b as waitAfterIdleCallback } from './helpers.js';
+import { L as Logger } from './log.js';
+import { a as areArraysEqual } from './array.js';
+import { i as isNil } from './index2.js';
 import { F as FOCUS_KEYS } from './focus-visible.js';
-import { m as rIC, a as waitAfterFramePaint, p as addEventListener, q as removeEventListener, b as waitAfterIdleCallback } from './helpers.js';
-import { D as DropdownOptionUtil } from './option.js';
 import { b as balFloatingUi } from './floating-ui.js';
-import { i as isNil } from './index2.js';
-import { a as ariaBooleanToString } from './aria.js';
-import { d as defaultBalAriaForm } from './form.js';
+import { D as DropdownOptionUtil } from './option.js';
 import { b as isArrowDownKey, c as isArrowUpKey, i as isEnterKey, d as isEscapeKey, a as isSpaceKey } from './keyboard.helpers.js';
-import { L as Logger } from './log.js';
+import { a as ariaBooleanToString } from './aria.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
 
 class DropdownAutoFillUtil {
     constructor() {
@@ -225,8 +225,7 @@ const DropdownIcon = ({ size, theme, icon, language, loading, clearable, invalid
         return (h("button", { title: i18nBalDropdown[language].clearable, type: 'button', tabIndex: -1, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('rear').class()), block.element('clear').class()), block.element('clear').modifier('invalid').class(invalid)), block
                 .element('clear')
                 .modifier('theme-purple')
-                .class(theme === 'purple')) },
-            h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: theme === 'purple' ? 'close' : 'close-circle', size: size, color: theme === 'purple' ? 'primary' : 'grey' })));
+                .class(theme === 'purple')) }, h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: theme === 'purple' ? 'close' : 'close-circle', size: size, color: theme === 'purple' ? 'primary' : 'grey' })));
     }
     else {
         return (h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: icon, size: size, turn: expanded, color: disabled ? 'grey' : invalid ? 'danger' : 'primary' }));
@@ -235,12 +234,9 @@ const DropdownIcon = ({ size, theme, icon, language, loading, clearable, invalid
 
 const DropdownOptionList = ({ inputId, isExpanded, rawOptions, isDisabled, hasPropOptions, required, filter, multiple, contentHeight, refPanelEl, refListEl, }) => {
     const block = BEM.block('dropdown');
-    return (h("div", { id: `${inputId}-menu`, class: Object.assign(Object.assign({}, block.element('list').class()), block.element('list').modifier('expanded').class(isExpanded)), ref: refPanelEl },
-        h("bal-option-list", { multiple: multiple, disabled: isDisabled, filter: filter, required: required, contentHeight: contentHeight, ref: refListEl },
-            h("slot", null),
-            hasPropOptions
-                ? rawOptions.map(option => (h("bal-option", { key: option.value, value: option.value, label: option.label, disabled: option.disabled, multiline: option.multiline, invalid: option.invalid, hidden: option.hidden, selected: option.selected, focused: option.focused }, option.label)))
-                : '')));
+    return (h("div", { id: `${inputId}-menu`, class: Object.assign(Object.assign({}, block.element('list').class()), block.element('list').modifier('expanded').class(isExpanded)), ref: refPanelEl }, h("bal-option-list", { multiple: multiple, disabled: isDisabled, filter: filter, required: required, contentHeight: contentHeight, ref: refListEl }, h("slot", null), hasPropOptions
+        ? rawOptions.map(option => (h("bal-option", { key: option.value, value: option.value, label: option.label, disabled: option.disabled, multiline: option.multiline, invalid: option.invalid, hidden: option.hidden, selected: option.selected, focused: option.focused }, option.label)))
+        : '')));
 };
 
 class DropdownPopupUtil {
@@ -396,16 +392,17 @@ const DropdownInput = ({ inputId, httpFormSubmit, ariaForm, rawValue, autocomple
     if (httpFormSubmit) {
         return h(Input, null);
     }
-    return (h("form", { novalidate: true },
-        h(Input, null)));
+    return (h("form", { novalidate: true }, h(Input, null)));
 };
 
 const balDropdownCss = ":root{--bal-dropdown-control-background:var(--bal-color-white);--bal-dropdown-control-background-hover:var(--bal-form-field-control-background-hover);--bal-dropdown-control-background-invalid:var(--bal-form-field-control-danger-background);--bal-dropdown-control-background-disabled:var(--bal-form-field-control-disabled-background);--bal-dropdown-control-input-background:var(--bal-color-grey-1);--bal-dropdown-control-native-input-background:transparent;--bal-dropdown-control-native-input-background-hover:transparent;--bal-dropdown-control-input-inverted-footer-background:transparent;--bal-dropdown-control-input-inverted-footer-background-hover:transparent;--bal-dropdown-control-input-multiple-background:transparent;--bal-dropdown-control-input-multiple-background-read-only-selection:transparent;--bal-dropdown-control-input-option-background:transparent;--bal-dropdown-control-input-option-background-selected:var(--bal-color-primary-1);--bal-dropdown-control-input-option-background-focused:var(--bal-color-grey-3);--bal-dropdown-control-input-option-background-hover:var(--bal-color-grey-3);--bal-dropdown-control-border-radius:var(--bal-form-field-control-radius);--bal-dropdown-popover-border-color:var(--bal-color-grey-2);--bal-dropdown-control-border-color:var(--bal-form-field-control-border-color);--bal-dropdown-control-border-color-focused:var(--bal-color-primary);--bal-dropdown-control-border-color-hover:var(--bal-form-field-control-border-color-hover);--bal-dropdown-control-border-color-invalid:var(--bal-form-field-control-danger-border-color);--bal-dropdown-control-border-color-disabled:var(--bal-form-field-control-disabled-border-color);--bal-dropdown-control-border-color-focus-within:var(--bal-color-primary);--bal-dropdown-option-border-top-color:var(--bal-color-grey-2);--bal-dropdown-popover-empty-text-color:var(--bal-form-field-control-color);--bal-dropdown-control-text-color:var(--bal-form-field-control-color);--bal-dropdown-control-text-color-focused:var(--bal-color-primary);--bal-dropdown-input-text-color-disabled:var(--bal-form-field-label-disabled-color);--bal-dropdown-control-inverted-footer-native-input-text-color:var(--bal-color-text-white);--bal-dropdown-option-content-label-text-color:var(--bal-form-field-control-color)}.bal-dropdown{display:block;position:relative;-ms-flex:1;flex:1;width:100%}.bal-dropdown__root{border-width:.125rem;border-style:solid;border-color:var(--bal-dropdown-control-border-color);border-radius:var(--bal-dropdown-control-border-radius);background:var(--bal-dropdown-control-background);font-weight:var(--bal-font-weight-regular);font-size:var(--bal-text-size-normal);font-family:var(--bal-font-family-text);color:var(--bal-dropdown-control-text-color);outline:none;-webkit-box-shadow:var(--bal-shadow-none);box-shadow:var(--bal-shadow-none);padding-right:1rem;height:auto;min-height:3rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:-ms-flexbox;display:flex;width:100%;text-align:left;gap:1rem;padding-left:calc(.75em - var(--bal-border-width-normal));padding-right:calc(.75em - var(--bal-border-width-normal));-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.bal-dropdown__root--autofill{background:#faffbd !important;background:light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important}.bal-dropdown__root>span{-ms-flex:1;flex:1;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bal-dropdown__root--focused{border-color:var(--bal-dropdown-control-border-color-focused)}.bal-dropdown__root--invalid{border-color:var(--bal-dropdown-control-border-color-invalid);background:var(--bal-dropdown-control-background-invalid)}.bal-dropdown__root--disabled{border-color:var(--bal-dropdown-control-border-color-disabled);background:var(--bal-dropdown-control-background-disabled)}.bal-dropdown__root__content--placeholder{color:var(--bal-form-field-control-placeholder-color)}.bal-dropdown__root__content--disabled{color:var(--bal-dropdown-input-text-color-disabled)}@media (hover: hover)and (pointer: fine){.bal-dropdown__root:not(.bal-dropdown__root--disabled):not(.bal-dropdown__root--invalid):not(.bal-dropdown__root--theme-purple):not(.bal-dropdown__root--theme-purple-expanded):hover{background:var(--bal-dropdown-control-background-hover)}}.bal-dropdown__root__content__chips{--bal-tag-size-small-font-size:var(--bal-text-size-normal);display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--bal-space-xx-small);padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-x-small)}.bal-dropdown__root__content__chips>bal-tag{z-index:1}.bal-dropdown__root__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:rgba(0,0,0,0);position:absolute;right:var(--bal-border-width-normal);left:var(--bal-border-width-normal);top:var(--bal-border-width-normal);bottom:var(--bal-border-width-normal);opacity:0;padding-left:calc(.75em - var(--bal-border-width-normal));padding-right:calc(.75em - var(--bal-border-width-normal));cursor:pointer}.bal-dropdown__root__input:disabled{cursor:default}.bal-dropdown__root__input:-webkit-autofill{opacity:1}.bal-dropdown__root__input:autofill{opacity:1}.bal-dropdown__root__input:-internal-autofill-selected{opacity:0}.bal-dropdown__root__select{position:absolute !important;left:0;top:0;margin:0;padding:0;opacity:0;outline:0;border:none;width:1px;height:1px;clip:rect(1px, 1px, 1px, 1px);overflow:hidden}.bal-dropdown__root--autofill .bal-dropdown__root__input{opacity:0}.bal-dropdown__list{display:none;visibility:hidden;opacity:0;width:100vw;position:absolute;top:0;left:0;will-change:left,top,opacity;background:var(--bal-color-white);border-radius:var(--bal-radius-normal);-webkit-box-shadow:var(--bal-shadow-normal);box-shadow:var(--bal-shadow-normal);z-index:var(--bal-z-index-popup)}@media screen and (min-width: 769px),print{.bal-dropdown__list{max-width:100vw;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-width:100%}}.bal-dropdown__list--expanded{display:block;visibility:visible;opacity:1}.bal-dropdown__native{bottom:0;left:0;position:absolute;opacity:0;pointer-events:none;width:100%}.bal-dropdown__clear{background:rgba(0,0,0,0);border:none;padding:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}.bal-dropdown__clear--theme-purple{height:2rem;width:2rem;border-top-right-radius:2px;border-bottom-right-radius:2px;margin-right:-10px}.bal-dropdown__clear--theme-purple::before{content:\"\";position:absolute;right:32px;background:var(--bal-color-white);width:2px;height:100%}.bal-dropdown__rear{z-index:1}.bal-dropdown__root--size-small{min-height:2rem}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--disabled) .bal-dropdown__root__content--placeholder{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded){border:none;background:var(--bal-color-background-grey-light)}@media (hover: hover)and (pointer: fine){.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover{background:var(--bal-color-purple-1)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner circle{fill:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active{background:var(--bal-color-purple-2)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner g,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner path,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded){border:none;background:var(--bal-color-purple-2)}@media (hover: hover)and (pointer: fine){.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover{background:var(--bal-color-purple-3)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__content{color:var(--bal-color-text-primary-pressed)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner circle{fill:var(--bal-color-text-primary-pressed)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active{background:var(--bal-color-purple-3)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner g,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner path,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}}.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled),.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active{border:none;background:var(--bal-color-purple-2)}.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-dropdown__root__content,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__content,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-icon__inner circle,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-icon__inner circle,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}.bal-dropdown__root--focused.bal-dropdown__root--theme-purple:before{content:\"\";border-width:var(--bal-border-width-normal);border-style:solid;border-color:var(--bal-focus-shadow-end-color);position:absolute;background:rgba(0,0,0,0);border-radius:var(--bal-radius-normal);top:-0.25rem;bottom:-0.25rem;left:-0.25rem;right:-0.25rem}.bal-dropdown__root__content--size-small{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-bold)}.bal-dropdown__clear--theme-purple{height:2rem;width:2rem;border-top-right-radius:2px;border-bottom-right-radius:2px;margin-right:-10px}.bal-dropdown__clear--theme-purple::before{content:\"\";position:absolute;right:32px;background:var(--bal-color-white);width:2px;height:100%}";
 
 const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.balChange = createEvent(this, "balChange", 7);
         this.balFocus = createEvent(this, "balFocus", 7);
         this.balBlur = createEvent(this, "balBlur", 7);
@@ -747,13 +744,13 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         const hasTheme = this.theme !== '';
         const theme = `theme-${this.theme}`;
         const focused = this.theme === 'purple' ? this.hasFocus && this.isKeyboardMode : this.hasFocus;
-        return (h(Host, { key: '713d45fe75018e22e55109784c914cbf41161d66', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: 'd846ee95ba439528691fc58c483b84ebc54e1b20', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(focused)), block.element('root').modifier('invalid').class(this.invalid)), block.element('root').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').modifier('autofill').class(this.isAutoFilled)), block.element('root').modifier(size).class(hasSize)), block.element('root').modifier(theme).class(hasTheme)), block
+        return (h(Host, { key: 'bbe24bccd7ec89cadd6928abbe42bc80a4838242', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: 'c4affbe59c4d38b281b28edef4510bf7f3432485', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(focused)), block.element('root').modifier('invalid').class(this.invalid)), block.element('root').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').modifier('autofill').class(this.isAutoFilled)), block.element('root').modifier(size).class(hasSize)), block.element('root').modifier(theme).class(hasTheme)), block
                 .element('root')
                 .modifier(theme + '-filled')
                 .class(isFilled && hasTheme)), block
                 .element('root')
                 .modifier(theme + '-expanded')
-                .class(this.isExpanded && hasTheme)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { key: '2b385d34110fffd8272b19083601121a2520381a', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').element('content').class()), block.element('root').element('content').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').element('content').modifier('placeholder').class(!this.valueUtil.isFilled())), block.element('root').element('content').modifier(size).class(hasSize)) }, h(DropdownValue, { key: '65df8cac6931a0a9ac49b01a93e88971e2afedf8', filled: this.valueUtil.isFilled(), inlineLabel: this.inlineLabel, chips: this.chips, placeholder: this.placeholder, choices: this.choices, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, onRemoveChip: option => this.valueUtil.removeOption(option) })), h(DropdownInput, { key: '0a97b36e6b72f4c559403d21a368a1021537bc85', inputId: this.inputId, httpFormSubmit: this.httpFormSubmit, ariaForm: this.ariaForm, rawValue: this.rawValue, autocomplete: this.autocomplete, required: this.required, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, expanded: this.isExpanded, invalid: this.invalid, language: this.language, inputLabel: this.inputLabel, inheritedAttributes: this.inheritedAttributes, refInputEl: el => (this.nativeEl = el), onChange: ev => this.handleAutoFill(ev), onFocus: ev => this.eventsUtil.handleFocus(ev), onBlur: ev => this.eventsUtil.handleBlur(ev), onKeyDown: ev => this.handleKeyDown(ev) }), h(DropdownNativeSelect, { key: '7f05f0d7538b6f82e54d184beaa86298e7d683c9', name: this.name, httpFormSubmit: this.httpFormSubmit, multiple: this.multiple, required: this.required, disabled: this.valueUtil.isDisabled(), rawValue: this.rawValue, refSelectEl: el => (this.selectEl = el) }), h(DropdownIcon, { key: '9ef218710b2e80ad73b382094074d7249a63c632', icon: this.icon, size: this.size, theme: this.theme, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: isFilled, disabled: this.valueUtil.isDisabled() })), h(DropdownOptionList, { key: '58cd4f3169991ea56176c3ae69bf808e0c81d663', inputId: this.inputId, block: this.inputId, filter: this.filter, required: this.required, isExpanded: this.isExpanded, isDisabled: this.valueUtil.isDisabled(), hasPropOptions: this.optionUtil.hasPropOptions(), multiple: this.multiple, contentHeight: this.contentHeight, rawOptions: this.rawOptions, refPanelEl: el => (this.panelEl = el), refListEl: el => (this.listEl = el) }, h("slot", { key: '6196a395badb4b3f2a4caaee2490d68a7cf9a36c' }))));
+                .class(this.isExpanded && hasTheme)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { key: 'f99ffede973516ae00abca3596a2a60ed50d0cbe', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').element('content').class()), block.element('root').element('content').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').element('content').modifier('placeholder').class(!this.valueUtil.isFilled())), block.element('root').element('content').modifier(size).class(hasSize)) }, h(DropdownValue, { key: '50dd5893ff6cf84616d662c04d4a247c5ea4b5c2', filled: this.valueUtil.isFilled(), inlineLabel: this.inlineLabel, chips: this.chips, placeholder: this.placeholder, choices: this.choices, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, onRemoveChip: option => this.valueUtil.removeOption(option) })), h(DropdownInput, { key: 'ea346543eb9cea2bb66d6a9c7005bbf53b722aaf', inputId: this.inputId, httpFormSubmit: this.httpFormSubmit, ariaForm: this.ariaForm, rawValue: this.rawValue, autocomplete: this.autocomplete, required: this.required, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, expanded: this.isExpanded, invalid: this.invalid, language: this.language, inputLabel: this.inputLabel, inheritedAttributes: this.inheritedAttributes, refInputEl: el => (this.nativeEl = el), onChange: ev => this.handleAutoFill(ev), onFocus: ev => this.eventsUtil.handleFocus(ev), onBlur: ev => this.eventsUtil.handleBlur(ev), onKeyDown: ev => this.handleKeyDown(ev) }), h(DropdownNativeSelect, { key: 'b97890097df0ee23ba9b87fff0da40fc2ebdf7c6', name: this.name, httpFormSubmit: this.httpFormSubmit, multiple: this.multiple, required: this.required, disabled: this.valueUtil.isDisabled(), rawValue: this.rawValue, refSelectEl: el => (this.selectEl = el) }), h(DropdownIcon, { key: 'ef7da17a95ef45376fd43f8d5208fecf2b2c4e4f', icon: this.icon, size: this.size, theme: this.theme, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: isFilled, disabled: this.valueUtil.isDisabled() })), h(DropdownOptionList, { key: '9d7912639575048cecd19745c6d5a463499544ca', inputId: this.inputId, block: this.inputId, filter: this.filter, required: this.required, isExpanded: this.isExpanded, isDisabled: this.valueUtil.isDisabled(), hasPropOptions: this.optionUtil.hasPropOptions(), multiple: this.multiple, contentHeight: this.contentHeight, rawOptions: this.rawOptions, refPanelEl: el => (this.panelEl = el), refListEl: el => (this.listEl = el) }, h("slot", { key: '32b6a77941ec1b9eae24bd761244ecb726194aa5' }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -761,7 +758,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         "value": ["valueChanged"]
     }; }
     static get style() { return balDropdownCss; }
-}, [4, "bal-dropdown", {
+}, [260, "bal-dropdown", {
         "autocomplete": [1],
         "name": [1],
         "placeholder": [1],

package/components/bal-field-control.js

@@ -2,9 +2,11 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 
 const FieldControl = /*@__PURE__*/ proxyCustomElement(class FieldControl extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * @deprecated
          * Baloise icon for the right side of the input
@@ -46,7 +48,7 @@ const FieldControl = /*@__PURE__*/ proxyCustomElement(class FieldControl extends
                 'bal-field-control--expanded-on-mobile': !!this.expandedOnMobile,
             } }, h("slot", { key: 'b1d4c61b4ba0cbd96c11d5540e12dafcc4b2518e' }), this.buildIconLeftTemplate, this.buildIconRightTemplate));
     }
-}, [6, "bal-field-control", {
+}, [262, "bal-field-control", {
         "iconRight": [1, "icon-right"],
         "iconLeft": [1, "icon-left"],
         "expandedOnMobile": [4, "expanded-on-mobile"],

package/components/bal-field-hint.js

@@ -1,12 +1,6 @@
 import { proxyCustomElement, HTMLElement, 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 './bal-file-upload.type.js';
-import './bal-toast.controller.js';
-import { b as balBreakpoints } from './breakpoints.subject.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
-import './date.js';
-import './window-resize.subject.js';
 import { d as defineCustomElement$c } from './bal-button2.js';
 import { d as defineCustomElement$b } from './bal-button-group2.js';
 import { d as defineCustomElement$a } from './bal-close2.js';
@@ -18,11 +12,15 @@ import { d as defineCustomElement$5 } from './bal-icon2.js';
 import { d as defineCustomElement$4 } from './bal-popup2.js';
 import { d as defineCustomElement$3 } from './bal-spinner2.js';
 import { d as defineCustomElement$2 } from './bal-stack2.js';
+import { b as balBreakpoints } from './breakpoints.subject.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
 
 const FieldHint = /*@__PURE__*/ proxyCustomElement(class FieldHint extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * Hide the title on desktop.
          */
@@ -48,7 +46,7 @@ const FieldHint = /*@__PURE__*/ proxyCustomElement(class FieldHint extends HTMLE
         const block = BEM.block('field-hint');
         return (h(Host, { key: 'a5f895c418c0dfa249da93d3bc39f5563d31b547', class: Object.assign({}, block.class()) }, h("bal-hint", { key: '83d9c59c6fce044b361fbd471bf83780314c62e9', class: Object.assign({}, block.element('hint').class()), "data-testid": "bal-field-hint", closeLabel: this.closeLabel, small: this.small }, this.subject && !(this.hideTitleOnDesktop && this.isDesktop) ? (h("bal-hint-title", null, this.subject)) : (''), h("bal-hint-text", { key: '38b6ef5120c8b5adef31a05ad54f474ed55305f5' }, h("slot", { key: '040d24c305badac88e0bb64d21e513a067f6e177' })))));
     }
-}, [6, "bal-field-hint", {
+}, [262, "bal-field-hint", {
         "hideTitleOnDesktop": [4, "hide-title-on-desktop"],
         "subject": [1],
         "closeLabel": [1, "close-label"],

package/components/bal-field-label.js

@@ -2,9 +2,11 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as defineCustomElement$2 } from './bal-label2.js';
 
 const FieldLabel = /*@__PURE__*/ proxyCustomElement(class FieldLabel extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -71,7 +73,7 @@ const FieldLabel = /*@__PURE__*/ proxyCustomElement(class FieldLabel extends HTM
         return (h(Host, { key: '049f3e7c80126a7ffbc005e6c69a1bdc8203979b', class: "bal-field-label" }, h("bal-label", { key: '269ecb6de6a5daf2f4d4504b37f3980d05b1a121', multiline: true, size: this.size, htmlFor: this.htmlFor, required: this.required, valid: this.valid, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, weight: this.weight }, h("slot", { key: 'd832133cb85456ec6b7b1a999b5459044579e783' }))));
     }
     get element() { return this; }
-}, [6, "bal-field-label", {
+}, [262, "bal-field-label", {
         "htmlFor": [1, "html-for"],
         "required": [4],
         "valid": [4],

package/components/bal-field-message.js

@@ -2,9 +2,11 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as defaultBalAriaForm } from './form.js';
 
 const FieldMessage = /*@__PURE__*/ proxyCustomElement(class FieldMessage extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.ariaForm = defaultBalAriaForm;
         /**
          * Defines the color of the message.
@@ -47,7 +49,7 @@ const FieldMessage = /*@__PURE__*/ proxyCustomElement(class FieldMessage extends
                 [`is-${this.color}`]: !!this.color,
             }, style: { minHeight: this.noReservedSpace ? '0' : undefined } }, h("slot", { key: 'c693909e5e98a82db73d2884a4f804cf20e24ab3' })));
     }
-}, [4, "bal-field-message", {
+}, [260, "bal-field-message", {
         "color": [1],
         "invalid": [4],
         "valid": [4],

package/components/bal-field.js

@@ -1,15 +1,17 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { L as ListenToMutation } from './mutation.decorator.js';
-import { d as deepReady, a as waitAfterFramePaint } from './helpers.js';
 import { d as defaultBalAriaForm } from './form.js';
+import { d as deepReady, a as waitAfterFramePaint } from './helpers.js';
+import { L as ListenToMutation } from './mutation.decorator.js';
 
 const balFieldCss = ":root{--bal-field-label-horizontal-width:33.3333%;--bal-field-label-column-gap:.5rem}.bal-field,.bal-field-label,.bal-field-control,.bal-field-message,.bal-field-hint{display:block;position:relative;font-family:var(--bal-font-family-text)}.bal-field-label{display:inline}.bal-field-label~.bal-field-control{margin-top:.25rem}.bal-field-hint{display:inline-block;margin-left:.25rem;height:1rem;width:1rem}.bal-field-hint__hint{position:absolute;top:2px;left:0}.bal-field-message{line-height:var(--bal-line-height-normal)}.bal-field-hidden{display:none !important;visibility:hidden !important}.bal-field-control{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;gap:.5rem}.bal-field-control .bal-input{-ms-flex:1;flex:1}@media screen and (max-width: 768px){.bal-field-control--expanded-on-mobile{-ms-flex-direction:column;flex-direction:column}.bal-field-control--expanded-on-mobile .bal-button,.bal-field-control--expanded-on-mobile .bal-button .button{width:100%}}.bal-field-message{margin-top:0 !important}.bal-field-control+.bal-field-message{min-height:1.375rem;line-height:1.375rem}.bal-field-control:not(:has(+.bal-field-message)){padding-bottom:1.375rem}.bal-field--horizontal{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:var(--bal-field-label-column-gap);-moz-column-gap:var(--bal-field-label-column-gap);column-gap:var(--bal-field-label-column-gap);-ms-flex-align:center;align-items:center}.bal-field--horizontal .bal-field-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-width:var(--bal-field-label-horizontal-width);max-width:var(--bal-field-label-horizontal-width);-ms-flex-pack:end;justify-content:flex-end;text-align:right;margin-bottom:0}.bal-field--horizontal .bal-field-control{-ms-flex:1;flex:1;padding-bottom:0;-ms-flex-item-align:end;align-self:flex-end}.bal-field--horizontal .bal-field-message{-ms-flex-preferred-size:100%;flex-basis:100%;margin-top:0 !important;margin-left:calc(var(--bal-field-label-horizontal-width) + var(--bal-field-label-column-gap))}.bal-field--horizontal .bal-field-hint{margin-left:0}.bal-field--horizontal .bal-field-hint .bal-hint{top:0}.bal-field--horizontal .bal-field-hint~.bal-field-message{margin-left:calc(var(--bal-field-label-horizontal-width) + var(--bal-field-label-column-gap)*2 + 1.125rem)}.bal-field--horizontal .bal-field-label~.bal-field-control{margin-top:0}";
 
 const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.balFormControlDidLoad = createEvent(this, "balFormControlDidLoad", 7);
         this.fieldId = `bal-field-${FieldIds++}`;
         this.formControlElement = ['bal-field-control'];
@@ -194,12 +196,12 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
         components.forEach(c => callback(c));
     }
     render() {
-        return (h(Host, { key: '2d5f00847eed504077334ab0a99e7d8ec2d5e933', id: this.fieldId, class: {
+        return (h(Host, { key: 'ce893d29bd46dbe6b7646c28410a86b9171661b9', id: this.fieldId, class: {
                 'bal-field': true,
                 'field': true,
                 'bal-field--invalid': this.invalid === true,
                 'bal-field--horizontal': this.horizontal === true,
-            } }, h("slot", { key: '7e84f2c3b7a5070c3d44616d4f61c798ed201708' }), h("span", { key: 'b7999bd90707cf04144c23ee94cf6ef5e8605ba1', class: "bal-field-hidden" })));
+            } }, h("slot", { key: '9ed0398262848664e0b6e4491bb7c0af45da341d' }), h("span", { key: '6cddb052cb69b66ccb29f3c9e2f70723557da014', class: "bal-field-hidden" })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -211,7 +213,7 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
         "loading": ["loadingHandler"]
     }; }
     static get style() { return balFieldCss; }
-}, [4, "bal-field", {
+}, [260, "bal-field", {
         "required": [4],
         "horizontal": [4],
         "invalid": [4],

package/components/bal-file-upload.js

@@ -1,13 +1,13 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { a as ariaBooleanToString } from './aria.js';
 import { a as areArraysEqual } from './array.js';
+import { d as defaultBalAriaForm } from './form.js';
 import { s as stopEventBubbling, b as inputHandleHostClick, c as inputHandleFocus, d as inputHandleBlur, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
 import { L as Logger } from './log.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers.js';
 import { B as BEM } from './bem.js';
 import { F as FileUploadRejectionReason } from './bal-file-upload.type.js';
-import { d as defaultBalAriaForm } from './form.js';
-import { a as ariaBooleanToString } from './aria.js';
 import { d as defineCustomElement$b } from './bal-card2.js';
 import { d as defineCustomElement$a } from './bal-heading2.js';
 import { d as defineCustomElement$9 } from './bal-icon2.js';
@@ -76,18 +76,9 @@ var fileSize = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 
 const bemListEl = BEM.block('file-upload').element('list');
 const FileListComponent = ({ files, disabled, subTitle, onRemoveFile, }) => {
-    return (h("bal-card", { class: Object.assign({}, bemListEl.class()), flat: true },
-        h("bal-list", { disabled: disabled, border: true, size: "large" }, files.map((file, index) => (h("bal-list-item", { key: file.name, disabled: disabled },
-            h("bal-list-item-icon", null,
-                h("bal-icon", { name: "document" })),
-            h("bal-list-item-content", null,
-                h("bal-list-item-title", null, file.name),
-                h("bal-list-item-subtitle", null, subTitle ? subTitle(file) : fileSize(file.size))),
-            h("bal-list-item-icon", { right: true, class: {
-                    'file-remove': true,
-                } },
-                h("button", { class: "button is-square is-danger", disabled: disabled, onClick: event => onRemoveFile(event, index) },
-                    h("bal-icon", { name: "trash", color: disabled ? 'grey' : 'danger' })))))))));
+    return (h("bal-card", { class: Object.assign({}, bemListEl.class()), flat: true }, h("bal-list", { disabled: disabled, border: true, size: "large" }, files.map((file, index) => (h("bal-list-item", { key: file.name, disabled: disabled }, h("bal-list-item-icon", null, h("bal-icon", { name: "document" })), h("bal-list-item-content", null, h("bal-list-item-title", null, file.name), h("bal-list-item-subtitle", null, subTitle ? subTitle(file) : fileSize(file.size))), h("bal-list-item-icon", { right: true, class: {
+            'file-remove': true,
+        } }, h("button", { class: "button is-square is-danger", disabled: disabled, onClick: event => onRemoveFile(event, index) }, h("bal-icon", { name: "trash", color: disabled ? 'grey' : 'danger' })))))))));
 };
 
 /**
@@ -157,9 +148,11 @@ const validateFileArray = (state, files, fileOptions) => {
 const balFileUploadCss = ".bal-file-upload{display:block;position:static;width:100%}.bal-file-upload .file-label{word-break:break-word;white-space:normal}.bal-file-upload .bal-heading{word-break:break-all}.bal-file-upload__card{margin-top:var(--bal-space-normal)}.bal-file-upload__list{padding:0 !important}";
 
 const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.balChange = createEvent(this, "balChange", 7);
         this.balFilesAdded = createEvent(this, "balFilesAdded", 7);
         this.balFilesRemoved = createEvent(this, "balFilesRemoved", 7);
@@ -391,23 +384,23 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
      */
     render() {
         const id = this.ariaForm.controlId || this.fileUploadId;
-        return (h(Host, { key: 'dc5b0ffa01094b304728a6bd20e8364ee410c877', onClick: this.onHostClick, "aria-disabled": ariaBooleanToString(this.disabled), class: {
+        return (h(Host, { key: '438044d74c8a20cee269a65e7492a19c800c8f60', onClick: this.onHostClick, "aria-disabled": ariaBooleanToString(this.disabled), class: {
                 'bal-file-upload': true,
-            } }, h("div", { key: 'fa20226a3185331523ede065a729410b7a1469d6', class: {
+            } }, h("div", { key: 'ea6316e2f4765d3385c0fc38d1dd6e9b55d711d0', class: {
                 'file': true,
                 'is-disabled': this.disabled || this.readonly || this.loading,
                 'is-danger': this.invalid,
-            } }, h("label", { key: 'a27ba82c67898305a907a24c1a5101c78d4c0859', htmlFor: id, ref: el => (this.labelEl = el), class: {
+            } }, h("label", { key: 'a75f2f2f116c6c9f7672ddbbfe2d4636039d2c64', htmlFor: id, ref: el => (this.labelEl = el), class: {
                 'file-label': true,
                 'is-disabled': this.disabled || this.loading || this.readonly,
-            } }, h("input", { key: '7ee35dcb15d921f92a7055a4234d710253282f03', class: "file-input", type: "file", id: id, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), name: this.name, multiple: this.multiple, disabled: this.disabled || this.loading || this.readonly, readonly: this.readonly, required: this.required, accept: this.accept, onClick: this.onInputClick, onChange: this.onInputChange, onFocus: this.onInputFocus, onBlur: this.onInputBlur, ref: el => (this.nativeInput = el), "data-testid": "bal-file-upload-input" }), this.loading ? (h("span", { class: "file-cta" }, h("bal-spinner", null))) : (h("span", { class: "file-cta" }, h("span", { class: "file-icon" }, h("bal-icon", { name: "upload", size: "medium", color: this.disabled || this.loading || this.readonly ? 'grey-light' : this.invalid ? 'danger' : 'blue' })), h("span", { class: "file-label", "data-testid": "bal-file-upload-label" }, this.label))))), this.hasFileList && this.files.length > 0 ? (h(FileListComponent, { files: this.files, disabled: this.disabled || this.readonly || this.loading, subTitle: this.subTitle, onRemoveFile: this.onRemoveFile })) : ('')));
+            } }, h("input", { key: '2ab53c147961166e12b4cab0fa0e0862557a325f', class: "file-input", type: "file", id: id, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), name: this.name, multiple: this.multiple, disabled: this.disabled || this.loading || this.readonly, readonly: this.readonly, required: this.required, accept: this.accept, onClick: this.onInputClick, onChange: this.onInputChange, onFocus: this.onInputFocus, onBlur: this.onInputBlur, ref: el => (this.nativeInput = el), "data-testid": "bal-file-upload-input" }), this.loading ? (h("span", { class: "file-cta" }, h("bal-spinner", null))) : (h("span", { class: "file-cta" }, h("span", { class: "file-icon" }, h("bal-icon", { name: "upload", size: "medium", color: this.disabled || this.loading || this.readonly ? 'grey-light' : this.invalid ? 'danger' : 'blue' })), h("span", { class: "file-label", "data-testid": "bal-file-upload-label" }, this.label))))), this.hasFileList && this.files.length > 0 ? (h(FileListComponent, { files: this.files, disabled: this.disabled || this.readonly || this.loading, subTitle: this.subTitle, onRemoveFile: this.onRemoveFile })) : ('')));
     }
     get el() { return this; }
     static get watchers() { return {
         "value": ["onValueChange"]
     }; }
     static get style() { return balFileUploadCss; }
-}, [0, "bal-file-upload", {
+}, [256, "bal-file-upload", {
         "name": [1],
         "value": [16],
         "label": [1],
@@ -422,7 +415,7 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
         "maxBundleSize": [2, "max-bundle-size"],
         "hasFileList": [4, "has-file-list"],
         "invalid": [4],
-        "subTitle": [16, "sub-title"],
+        "subTitle": [16],
         "autoInvalidOff": [516, "auto-invalid-off"],
         "files": [32],
         "focused": [32],

package/components/bal-footer.js

@@ -2,14 +2,14 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { l as loadFooterLinks, a as loadSocialMediaLinks, L as Language } from './index.esm.js';
 import { B as BEM } from './bem.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
-import { e as updateBalLanguage } from './config.utils.js';
-import { m as rIC } from './helpers.js';
+import { n as rIC } from './helpers.js';
 import { L as Logger } from './log.js';
 import { s as sanitizeSvg } from './svg.js';
 import { d as defineCustomElement$3 } from './bal-icon2.js';
 import { d as defineCustomElement$2 } from './bal-logo2.js';
+import { e as updateBalLanguage } from './config.utils.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
 
 const i18nBalFooter = {
     en: {
@@ -47,9 +47,11 @@ 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: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 = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.logoSvgContent = '';
         this.links = [];
         this.socialMediaLinks = [];
@@ -178,11 +180,11 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
         "logoSvg": ["logoSvgChanged"]
     }; }
     static get style() { return balFooterCss; }
-}, [4, "bal-footer", {
+}, [260, "bal-footer", {
         "logoHref": [1, "logo-href"],
         "logoSvg": [1, "logo-svg"],
         "hideLinks": [4, "hide-links"],
-        "overrideLinks": [16, "override-links"],
+        "overrideLinks": [16],
         "showSocialMedia": [4, "show-social-media"],
         "hideLanguageSelection": [4, "hide-language-selection"],
         "logoSvgContent": [32],

package/components/bal-form-col.js

@@ -1,14 +1,16 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const FormCol = /*@__PURE__*/ proxyCustomElement(class FormCol extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.colClass = 'col';
         this.size = 'full';
     }
     render() {
-        return (h(Host, { key: 'dcafe25da97b6d53f8c70cb13ba63be2dc9214ef', class: {
+        return (h(Host, { key: 'd2157c5ff125226d4d2825f97302196de41483fd', class: {
                 [`${this.colClass}`]: true,
                 'py-none': true,
                 'touch:is-12': true,
@@ -18,10 +20,10 @@ const FormCol = /*@__PURE__*/ proxyCustomElement(class FormCol extends HTMLEleme
                 'is-8': this.size === 'two-thirds',
                 'is-3': this.size === 'one-quarter',
                 'is-9': this.size === 'three-quarters',
-            } }, h("slot", { key: '153dee19ecee905bd5bc7cf624a4e26ff883d50c' })));
+            } }, h("slot", { key: '25c2e4928d8aee7a28bb4dd554b3fb2090dd29e2' })));
     }
     get el() { return this; }
-}, [4, "bal-form-col", {
+}, [260, "bal-form-col", {
         "size": [1]
     }]);
 function defineCustomElement$1() {

package/components/bal-form-grid.js

@@ -3,15 +3,17 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const balFormGridCss = ".bal-form-grid{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:.25rem}@media screen and (min-width: 1024px){.bal-form-grid{-ms-flex-direction:row;flex-direction:row}}.bal-form-grid.columns{margin-top:0 !important;margin-bottom:0 !important}";
 
 const FormGrid = /*@__PURE__*/ proxyCustomElement(class FormGrid extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     render() {
         return (h(Host, { key: '164b3b6f4a81dacf2f53d5005ec64752a7aba56d', class: `bal-form-grid grid is-multiline my-none py-none` }, h("slot", { key: 'dac6ae11535688ca5b0958366137edc226dc584f' })));
     }
     static get style() { return balFormGridCss; }
-}, [4, "bal-form-grid"]);
+}, [260, "bal-form-grid"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/components/bal-form.js

@@ -5,9 +5,11 @@ import { b as waitAfterIdleCallback, a as waitAfterFramePaint } from './helpers.
 const balFormCss = ".bal-form{display:block;position:static}";
 
 const Form = /*@__PURE__*/ proxyCustomElement(class Form extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * If `true` a native form element is added as a wrapper of the slot.
          */
@@ -37,11 +39,11 @@ const Form = /*@__PURE__*/ proxyCustomElement(class Form extends HTMLElement {
                 novalidate: this.novalidate,
             };
         }
-        return (h(Host, { key: '1598e29d7763c06aeebe9ae70e4ad27695c9796d' }, h(NativeEl, Object.assign({ key: '140fa29ca7900623d52da99ffc5f9bd6db72cd97' }, attrs, { class: this.formClass }), h("slot", { key: '1797bdbc8f4f70b50c5d193acea0569e977d8a81' }))));
+        return (h(Host, { key: 'd25c1b6664e41d72f2d2c5b2ad6532fa184d66bf' }, h(NativeEl, Object.assign({ key: '37eefa8920cf3fb639d235d7b21cb7a44be6bd06' }, attrs, { class: this.formClass }), h("slot", { key: '7eff7f47f3fd4732988e17944be73373e6133e32' }))));
     }
     get el() { return this; }
     static get style() { return balFormCss; }
-}, [4, "bal-form", {
+}, [260, "bal-form", {
         "native": [4],
         "novalidate": [4],
         "formClass": [1, "form-class"],

package/components/bal-heading2.js

@@ -63,9 +63,11 @@ const HEADING_COLORS = {
 const balHeadingCss = ":root{--bal-heading-color-white:var(--bal-color-text-white);--bal-heading-color-success:var(--bal-color-text-success);--bal-heading-color-warning:var(--bal-color-text-warning);--bal-heading-color-danger:var(--bal-color-text-danger)}.bal-heading{display:block;position:static;margin:0}.bal-heading:not(:last-child){margin-bottom:var(--bal-space-x-small)}.bal-heading.bal-heading--level-display:not(:last-child){margin-bottom:var(--bal-space-normal)}.bal-heading--space-all,.bal-heading--space-top{margin-top:var(--bal-space-x-small)}.bal-heading--space-all,.bal-heading--space-bottom{margin-bottom:var(--bal-space-x-small)}.bal-heading--level-display.bal-heading--space-all,.bal-heading--level-display.bal-heading--space-top{margin-top:var(--bal-space-normal)}.bal-heading--level-display.bal-heading--space-all,.bal-heading--level-display.bal-heading--space-bottom{margin-bottom:var(--bal-space-normal)}.bal-heading--space-top,.bal-heading--space-top:not(:last-child){margin-bottom:0}.bal-heading--space-none,.bal-heading--space-none:not(:last-child){margin:0}.bal-heading__text{margin:0 !important;padding:0;font-weight:var(--bal-font-weight-bold);font-family:var(--bal-font-family-title)}.bal-heading__text--no-wrap{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bal-heading__text--subtitle{font-weight:var(--bal-font-weight-light)}.bal-heading__text--shadow{text-shadow:var(--bal-text-shadow-normal)}.bal-heading__text--color-white{color:var(--bal-heading-color-white)}.bal-heading__text--color-success{color:var(--bal-heading-color-success)}.bal-heading__text--color-warning{color:var(--bal-heading-color-warning)}.bal-heading__text--color-danger{color:var(--bal-heading-color-danger)}.bal-heading__text--size-normal{font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal)}@media screen and (min-width: 769px),print{.bal-heading__text--size-normal{font-size:var(--bal-text-size-normal-tablet);line-height:var(--bal-line-height-tablet-normal)}}@media screen and (min-width: 1024px){.bal-heading__text--size-normal{font-size:var(--bal-text-size-normal-desktop);line-height:var(--bal-line-height-desktop-normal)}}.bal-heading__text--size-medium{font-size:var(--bal-text-size-medium);line-height:var(--bal-line-height-medium)}@media screen and (min-width: 769px),print{.bal-heading__text--size-medium{font-size:var(--bal-text-size-medium-tablet);line-height:var(--bal-line-height-tablet-medium)}}@media screen and (min-width: 1024px){.bal-heading__text--size-medium{font-size:var(--bal-text-size-medium-desktop);line-height:var(--bal-line-height-desktop-medium)}}.bal-heading__text--size-large{font-size:var(--bal-text-size-large);line-height:var(--bal-line-height-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-large{font-size:var(--bal-text-size-large-tablet);line-height:var(--bal-line-height-tablet-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-large{font-size:var(--bal-text-size-large-desktop);line-height:var(--bal-line-height-desktop-large)}}.bal-heading__text--size-x-large{font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-x-large{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-x-large{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}.bal-heading__text--size-xx-large{font-size:var(--bal-text-size-xx-large);line-height:var(--bal-line-height-xx-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-xx-large{font-size:var(--bal-text-size-xx-large-tablet);line-height:var(--bal-line-height-tablet-xx-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-xx-large{font-size:var(--bal-text-size-xx-large-desktop);line-height:var(--bal-line-height-desktop-xx-large)}}.bal-heading__text--size-xxx-large{font-size:var(--bal-text-size-xxx-large);line-height:var(--bal-line-height-xxx-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-xxx-large{font-size:var(--bal-text-size-xxx-large-tablet);line-height:var(--bal-line-height-tablet-xxx-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-xxx-large{font-size:var(--bal-text-size-xxx-large-desktop);line-height:var(--bal-line-height-desktop-xxx-large)}}.bal-heading__text--size-xxxx-large{font-size:var(--bal-text-size-xxxx-large);line-height:var(--bal-line-height-xxxx-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-xxxx-large{font-size:var(--bal-text-size-xxxx-large-tablet);line-height:var(--bal-line-height-tablet-xxxx-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-xxxx-large{font-size:var(--bal-text-size-xxxx-large-desktop);line-height:var(--bal-line-height-desktop-xxxx-large)}}.bal-heading__text--size-xxxxx-large{font-size:var(--bal-text-size-xxxxx-large);line-height:var(--bal-line-height-xxxxx-large)}@media screen and (min-width: 769px),print{.bal-heading__text--size-xxxxx-large{font-size:var(--bal-text-size-xxxxx-large-tablet);line-height:var(--bal-line-height-tablet-xxxxx-large)}}@media screen and (min-width: 1024px){.bal-heading__text--size-xxxxx-large{font-size:var(--bal-text-size-xxxxx-large-desktop);line-height:var(--bal-line-height-desktop-xxxxx-large)}}";
 
 const Heading = /*@__PURE__*/ proxyCustomElement(class Heading extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -162,7 +164,7 @@ const Heading = /*@__PURE__*/ proxyCustomElement(class Heading extends HTMLEleme
         const bemTextEl = block.element('text');
         const Heading = this.tag;
         const fontColor = this.fontColor;
-        return (h(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()) }, 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" }, h("slot", { key: '1206631dcf9af8e2f785c6829fc033a570924943' }))));
+        return (h(Host, { key: '3c9251d3a1d15a8470baa6e930fe902d322ca281', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, h(Heading, { key: 'f0d7a82d43789b991e52881e7962fbf7ee6b8b2a', 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" }, h("slot", { key: '9e6893fe656db354b740c3b1d040ec1c7a137883' }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -171,7 +173,7 @@ const Heading = /*@__PURE__*/ proxyCustomElement(class Heading extends HTMLEleme
         "autoLevel": ["autoLevelWatcher"]
     }; }
     static get style() { return balHeadingCss; }
-}, [4, "bal-heading", {
+}, [260, "bal-heading", {
         "level": [1],
         "visualLevel": [1, "visual-level"],
         "autoLevel": [1, "auto-level"],