@baloise/ds-core 17.0.0 → 17.1.0

package/components/bal-accordion-trigger.js

@@ -31,6 +31,7 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
         };
         this.parentAccordionId = undefined;
         this.button = false;
+        this.expanded = true;
         this.openLabel = '';
         this.openIcon = 'caret-down';
         this.closeLabel = '';
@@ -90,12 +91,13 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
                 tabindex: 0,
             };
         }
-        return (h(Host, { key: 'af0ac1bbf7cb49a28ad9e481d3cf41f377c3d434', id: id, class: Object.assign({}, block.class()) }, this.button ? (h("bal-button", { id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: true, icon: icon, iconTurn: turn, color: this.color, size: this.size, onClick: this.onClick }, label)) : (h("button", Object.assign({ class: Object.assign(Object.assign({}, block.element('button').class()), { 'bal-focused': parentSummaryEl && !parentSummaryEl.trigger }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-label": "accordion trigger", part: buttonPart, "data-testid": "bal-accordion-trigger", onClick: this.onClick }, triggerAttributes), h("bal-icon", { turn: turn, name: icon })))));
+        return (h(Host, { key: '891c25716cc93bd97ca9b25fcb512bb1915e8f5d', id: id, class: Object.assign({}, block.class()) }, this.button ? (h("bal-button", { id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: this.expanded, icon: icon, iconTurn: turn, color: this.color, size: this.size, onClick: this.onClick }, label)) : (h("button", Object.assign({ class: Object.assign(Object.assign({}, block.element('button').class()), { 'bal-focused': parentSummaryEl && !parentSummaryEl.trigger }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-label": "accordion trigger", part: buttonPart, "data-testid": "bal-accordion-trigger", onClick: this.onClick }, triggerAttributes), h("bal-icon", { turn: turn, name: icon })))));
     }
     get el() { return this; }
     static get style() { return BalAccordionTriggerStyle0; }
 }, [0, "bal-accordion-trigger", {
         "button": [4],
+        "expanded": [4],
         "openLabel": [1, "open-label"],
         "openIcon": [1, "open-icon"],
         "closeLabel": [1, "close-label"],

package/components/bal-accordion.js

@@ -78,11 +78,11 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             if (this.shouldAnimate()) {
                 raf(() => {
                     this.setState(8 /* AccordionState.Expanding */);
+                    this.balWillAnimate.emit(this.active);
                     this.currentRaf = raf(async () => {
                         const contentHeight = detailsWrapperElement.offsetHeight;
                         const waitForTransition = transitionEndAsync(detailsElement, 300);
                         detailsElement.style.setProperty('max-height', `${contentHeight}px`);
-                        this.balWillAnimate.emit(this.active);
                         await waitForTransition;
                         this.setState(4 /* AccordionState.Expanded */);
                         detailsElement.style.removeProperty('max-height');

package/components/bal-date.js

@@ -108,6 +108,7 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         this.placeholder = undefined;
         this.triggerIcon = false;
         this.closeOnSelect = true;
+        this.autocomplete = 'off';
         this.value = undefined;
         this.min = undefined;
         this.max = undefined;
@@ -291,7 +292,7 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         const block = BEM.block('date');
         const blockIcon = block.element('icon');
         const blockPopup = block.element('popup');
-        return (h(Host, { key: '0e4243022c01b88366ad8f8b750da6de3b9ecfc3', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '86132e01d44f18bbd89efa002117b20bbf754837', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ key: '07737ec9049d123c3966bc00e6ccb918cca23236', name: this.name, required: this.required, placeholder: this.placeholder, value: this.value, min: this.min, max: this.max, invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, allowInvalidValue: this.allowInvalidValue, onClick: this.onInputClick, onBalInput: this.onInputInput, onBalChange: this.onInputChange, onBalFocus: this.onInputFocus, onBalBlur: this.onInputBlur, onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (h("bal-icon", { name: "date", role: "button", tabindex: -1, class: Object.assign(Object.assign({}, blockIcon.class()), blockIcon.modifier('clickable').class(!this.disabled && !this.readonly)), "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', onClick: this.onIconClick, "aria-label": i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? 'true' : 'false' })) : ('')), h("div", { key: 'c2102abdd6b594154520b4df8cb8419c81dfd6f1', role: "dialog", class: Object.assign(Object.assign({}, blockPopup.class()), blockPopup.modifier('visible').class(this.isExpanded)), ref: el => (this.floatingEl = el), "aria-hidden": `${this.isExpanded !== true}`, "aria-presented": `${this.isExpanded === true}` }, h("bal-date-calendar", { key: 'be87d5e2a31943b1661aea0d6012db8dcd7002b2', value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
+        return (h(Host, { key: '71ecc523323aea5b610663af71761730cafdf72d', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: 'fac9940b61f22766e728f2025491f1d743b65a04', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ key: '9ff8ef04e188c3492419029967aedbb47f6cd80d', name: this.name, required: this.required, placeholder: this.placeholder, value: this.value, min: this.min, max: this.max, invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, allowInvalidValue: this.allowInvalidValue, autocomplete: this.autocomplete, onClick: this.onInputClick, onBalInput: this.onInputInput, onBalChange: this.onInputChange, onBalFocus: this.onInputFocus, onBalBlur: this.onInputBlur, onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (h("bal-icon", { name: "date", role: "button", tabindex: -1, class: Object.assign(Object.assign({}, blockIcon.class()), blockIcon.modifier('clickable').class(!this.disabled && !this.readonly)), "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', onClick: this.onIconClick, "aria-label": i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? 'true' : 'false' })) : ('')), h("div", { key: 'a693f4ce01308178268a00e31ef08a052d1972b2', role: "dialog", class: Object.assign(Object.assign({}, blockPopup.class()), blockPopup.modifier('visible').class(this.isExpanded)), ref: el => (this.floatingEl = el), "aria-hidden": `${this.isExpanded !== true}`, "aria-presented": `${this.isExpanded === true}` }, h("bal-date-calendar", { key: '8ac00879f736c54cb7662cd9811c44cdc80859ff', value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -309,6 +310,7 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         "placeholder": [1],
         "triggerIcon": [4, "trigger-icon"],
         "closeOnSelect": [4, "close-on-select"],
+        "autocomplete": [1],
         "value": [1025],
         "min": [1025],
         "max": [1025],

package/components/bal-dropdown2.js

@@ -9,6 +9,7 @@ import { o as rIC, b as waitAfterFramePaint, k as addEventListener, r as removeE
 import { b as balBrowser } from './browser.js';
 import { a as areArraysEqual } from './array.js';
 import { l as lodash_isnil } from './index3.js';
+import { F as FOCUS_KEYS } from './focus-visible.js';
 import { b as balFloatingUi } from './floating-ui.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';
@@ -107,6 +108,14 @@ const i18nBalDropdown = {
 };
 
 class DropdownEventsUtil {
+    constructor() {
+        this.handlePointerDown = () => {
+            this.component.isKeyboardMode = false;
+        };
+        this.handleKeydown = (ev) => {
+            this.component.isKeyboardMode = FOCUS_KEYS.includes(ev.key);
+        };
+    }
     connectedCallback(component) {
         this.component = component;
     }
@@ -140,7 +149,6 @@ class DropdownEventsUtil {
             this.component.popupUtil.toggleList();
         }
     }
-    // @Listen('click', { target: 'document' })
     handleOutsideClick(ev) {
         var _a;
         if (this.component.isExpanded) {
@@ -208,17 +216,20 @@ const DropdownNativeSelect = ({ name, httpFormSubmit, multiple, required, disabl
     return httpFormSubmit ? (h("select", { class: Object.assign({}, block.element('root').element('select').class()), "aria-hidden": "true", name: name, multiple: multiple, required: required, disabled: disabled, tabindex: -1, ref: refSelectEl }, rawValue.map((value) => (h("option", { key: value, value: value, selected: true }, value))))) : ('');
 };
 
-const DropdownIcon = ({ icon, language, loading, clearable, invalid, filled, expanded, disabled, }) => {
+const DropdownIcon = ({ size, theme, icon, language, loading, clearable, invalid, filled, expanded, disabled, }) => {
     const block = BEM.block('dropdown');
     if (loading) {
         return h("bal-spinner", { class: Object.assign({}, block.element('rear').class()), small: true, variation: "circle" });
     }
     else if (clearable && filled && !disabled) {
-        return (h("button", { title: i18nBalDropdown[language].clearable, type: 'button', class: Object.assign(Object.assign(Object.assign({}, block.element('rear').class()), block.element('clear').class()), block.element('clear').modifier('invalid').class(invalid)) },
-            h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: 'close-circle', size: "", color: 'grey' })));
+        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' })));
     }
     else {
-        return (h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: icon, turn: expanded, color: disabled ? 'grey' : invalid ? 'danger' : 'primary' }));
+        return (h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: icon, size: size, turn: expanded, color: disabled ? 'grey' : invalid ? 'danger' : !filled && theme === 'purple' ? 'primary-light' : 'primary' }));
     }
 };
 
@@ -364,14 +375,14 @@ class DropdownValueUtil {
         }
     }
 }
-const DropdownValue = ({ filled, chips, placeholder, choices, invalid, disabled, readonly, onRemoveChip, }) => {
+const DropdownValue = ({ inlineLabel, filled, chips, placeholder, choices, invalid, disabled, readonly, onRemoveChip, }) => {
     const block = BEM.block('dropdown');
     if (filled) {
         if (chips) {
             return (h("div", { class: Object.assign({}, block.element('root').element('content').element('chips').class()) }, choices.map(option => (h("bal-tag", { key: option.value, "data-test": "bal-dropdown-chip", size: "small", invalid: invalid, disabled: disabled || readonly, closable: !(disabled || readonly), onBalCloseClick: () => onRemoveChip(option) }, option.label)))));
         }
         else {
-            return choices.map(option => option.label).join(', ');
+            return (inlineLabel && `${inlineLabel}: `) + choices.map(option => option.label).join(', ');
         }
     }
     else {
@@ -389,7 +400,7 @@ const DropdownInput = ({ name, inputId, httpFormSubmit, ariaForm, rawValue, auto
         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-2);--bal-dropdown-control-input-option-background-hover:var(--bal-color-grey-2);--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-size:var(--bal-weight-regular);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:.5rem;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)}.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:block;visibility:hidden;opacity:0;min-width:100%;width:100%;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)}.bal-dropdown__list--expanded{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__rear{z-index:1}";
+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-2);--bal-dropdown-control-input-option-background-hover:var(--bal-color-grey-2);--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:.5rem;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:block;visibility:hidden;opacity:0;min-width:100%;width:100%;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)}.bal-dropdown__list--expanded{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--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):hover{background:var(--bal-color-purple-1)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner circle{fill:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active{background:var(--bal-color-purple-2)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner g,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner path,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):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):hover{background:var(--bal-color-purple-3)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):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):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):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):active{background:var(--bal-color-purple-3)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner g,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner path,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}}.bal-dropdown__root--theme-purple-expanded,.bal-dropdown__root--theme-purple-expanded:hover,.bal-dropdown__root--theme-purple-expanded:active{border:none;background:var(--bal-color-purple-2)}.bal-dropdown__root--theme-purple-expanded .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded .bal-dropdown__root__content,.bal-dropdown__root--theme-purple-expanded:hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:hover .bal-dropdown__root__content,.bal-dropdown__root--theme-purple-expanded:active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple-expanded .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded .bal-icon__inner circle,.bal-dropdown__root--theme-purple-expanded:hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:hover .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:hover .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:hover .bal-icon__inner circle,.bal-dropdown__root--theme-purple-expanded:active .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:active .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:active .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded: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);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 BalDropdownStyle0 = balDropdownCss;
 
 const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLElement {
@@ -513,6 +524,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         this.hasFocus = false;
         this.isExpanded = false;
         this.isAutoFilled = false;
+        this.isKeyboardMode = false;
         this.inputLabel = '';
         this.ariaForm = defaultBalAriaForm;
         this.language = defaultConfig.language;
@@ -522,7 +534,10 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         this.autocomplete = 'off';
         this.name = this.inputId;
         this.placeholder = '';
+        this.inlineLabel = '';
         this.icon = 'caret-down';
+        this.size = '';
+        this.theme = '';
         this.disabled = false;
         this.readonly = false;
         this.multiple = false;
@@ -558,6 +573,9 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         }
         addEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
         if (balBrowser.hasDocument) {
+            addEventListener(document, 'keydown', this.eventsUtil.handleKeydown);
+            addEventListener(document, 'touchstart', this.eventsUtil.handlePointerDown);
+            addEventListener(document, 'mousedown', this.eventsUtil.handlePointerDown);
             addEventListener(document, 'click', this.listenOnClickOutside);
             addEventListener(document, 'reset', this.resetHandler, {
                 capture: true,
@@ -568,6 +586,9 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
     disconnectedCallback() {
         removeEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
         if (balBrowser.hasDocument) {
+            removeEventListener(document, 'keydown', this.eventsUtil.handleKeydown);
+            removeEventListener(document, 'touchstart', this.eventsUtil.handlePointerDown);
+            removeEventListener(document, 'mousedown', this.eventsUtil.handlePointerDown);
             removeEventListener(document, 'click', this.listenOnClickOutside);
             removeEventListener(document, 'reset', this.resetHandler, {
                 capture: true,
@@ -656,7 +677,19 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
      */
     render() {
         const block = BEM.block('dropdown');
-        return (h(Host, { key: 'fea0abd6ec54fd7724201d2f772a93949932bd44', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: '259704fb0bec9453131bad395e084fba43aa03dd', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(this.hasFocus)), 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)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { key: '7fddec690d760b4c38ea29221468a7d14df18d5d', class: 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())) }, h(DropdownValue, { key: 'e73533861ddd53aac505fdc78bf051a0449cf655', filled: this.valueUtil.isFilled(), 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: '7299e6b670a1b2283b1383040d9a75f29c76fe84', name: this.name, 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: '97da430cab5eef476c4404eb27dcc65edf0b8d6e', 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: 'c2d77ffd50a1062f772123954fd95b44200b04c3', icon: this.icon, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: this.valueUtil.isFilled(), disabled: this.valueUtil.isDisabled() })), h(DropdownOptionList, { key: 'd4c82b91392692aad6a1095fa6b25bad7ecefffa', 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: '1d9732ce6013922a304a7d52b34e79a128fb22d3' }))));
+        const isFilled = this.valueUtil.isFilled();
+        const hasSize = this.size !== '';
+        const size = `size-${this.size}`;
+        const hasTheme = this.theme !== '';
+        const theme = `theme-${this.theme}`;
+        const focused = this.theme === 'purple' ? this.hasFocus && this.isKeyboardMode : this.hasFocus;
+        return (h(Host, { key: '76447733642f7e5cfafaee1d23b7db1d458fea13', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: 'f15d237a0aa27c7bc6d578b107547c2ba7b36ad3', 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: '8cd1f403f473212d52bb1d992e506e0db483ad11', 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: '5e58e0734c37d2827515449e5fe61f3fe489ad01', 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: 'f289ba14f7120bfad09dfdfc2f034bdacaf52d74', name: this.name, 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: 'c32cb85f707db22ed5774d0a6bbd904bc63ea69c', 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: 'b263377bf16e268d3f555242e15325ba36d2b91f', 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: 'cdfb11f2ef449f82ddf32f944cea8faea9027372', 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: '0a281eed8eea22ec5a345d8a1db295ad85b874ed' }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -668,7 +701,10 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         "autocomplete": [1],
         "name": [1],
         "placeholder": [1],
+        "inlineLabel": [1, "inline-label"],
         "icon": [1],
+        "size": [1],
+        "theme": [1],
         "disabled": [4],
         "readonly": [4],
         "multiple": [4],
@@ -688,6 +724,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         "hasFocus": [32],
         "isExpanded": [32],
         "isAutoFilled": [32],
+        "isKeyboardMode": [32],
         "inputLabel": [32],
         "ariaForm": [32],
         "language": [32],

package/components/bal-footer.js

@@ -219,6 +219,7 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
         this.region = defaultConfig.region;
         this.allowedLanguages = defaultConfig.allowedLanguages;
         this.hideLinks = false;
+        this.overrideLinks = undefined;
         this.showSocialMedia = false;
         this.hideLanguageSelection = false;
     }
@@ -257,7 +258,10 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
         updateBalLanguage(language);
     }
     updateFooterLinks() {
-        if (!this.hideLinks && (this.region === 'CH' || this.region === 'DE')) {
+        if (this.overrideLinks) {
+            this.links = this.overrideLinks;
+        }
+        else if (!this.hideLinks && (this.region === 'CH' || this.region === 'DE')) {
             // The following footer links only apply to swiss and german applications
             const region = this.region;
             rIC(() => {
@@ -292,18 +296,18 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
         elLanguage.element('icon');
         const elLegalLinks = elLinksContainer.element('legal-links');
         const elSocialMediaLinks = elLinksContainer.element('social-media-links');
-        return (h(Host, { key: '92247adf5c1f59dd1dd83184368dcf6bd34d7a67', class: Object.assign({}, block.class()) }, h("footer", { key: '41a39bb0693ff7d61d6cf331dbd91d1923feed24', class: Object.assign({}, elInner.class()) }, h("div", { key: 'd68120abd008a0a2746c00a055037bc4e2b21865', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: 'b61b0e9cc643139dfeb7f935b8a29beb50e9dda6', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: '41a5007f0e8a4069d540c34cf3603b732ab1f2e4', class: Object.assign({}, elLogo.class()) }, h("bal-logo", { key: '97df5a202cd54287a97343b304e895b096c6c454', color: "white" })), h("div", { key: 'e93ac339f277de74477fc598eb6a1628dd9d70d4', class: Object.assign({}, elLanguage.class()), style: {
+        return (h(Host, { key: 'ae55946ea2a65fc9e92bd7e5c3be4fc3f3fa75d6', class: Object.assign({}, block.class()) }, h("footer", { key: '13ab5d638fb4f9009cb2e93d77a9ac70bc08622e', class: Object.assign({}, elInner.class()) }, h("div", { key: '9554e06e86b94ce2fd49e9c129207f04f8e95bbb', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: 'd1aac84f5621a9fbae86b9fdb9f8a0ad55988efc', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: 'b809f53a3e85e806930d14cbffde39fb58ed6ea3', class: Object.assign({}, elLogo.class()) }, h("bal-logo", { key: 'e85736ba7525e7545e2bd58a72e9b35971696647', color: "white" })), h("div", { key: '176ea2f04f5458307d0b823b122ef79764f138d8', class: Object.assign({}, elLanguage.class()), style: {
                 display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
-            } }, h("div", { key: 'c9dede4f4cd0d9e62a533632422e07e912df22e1', class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", { key: '7666a59e6f1a78b5c6c77c2e4f97cfc698ad59cc' }, h("bal-icon", { key: 'fd170603ffd0c8ba4debdf9cad85bfce0741a444', class: 'bal-dropdown__rear', name: "web", color: "white", onClick: el => {
+            } }, h("div", { key: '2df7d00cb622575dfa5484bceb44a99b90c2a736', class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", { key: '5cc4baee54d1d8f44f2c836788f7739fa16e468d' }, h("bal-icon", { key: 'ebbfd79b91aa01b97707e763b7fbf869eb61b925', 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-dropdown", { key: '4fcc14f8473e4a35b1fd0f5df6ce550b611c5d84', 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", { key: '16878b31dfaec22a49c3dbd7369a6527f0890e42', class: Object.assign({}, elSlot.class()) }, h("slot", { key: 'e4855a9897a36f4bdb6759e29337e234658eb3dc' })), h("div", { key: '4ce76b3d2c4b1bb672a0c059f773d30beffdbd4b', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '4a1f975285422c0fce884e087416053830b73d57', class: Object.assign({}, elSocialMediaLinks.class()), style: {
+            } }), h("bal-dropdown", { key: '23540be5a9fddcc7c1e5368dfa4858ab1da720f5', 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", { key: '2580651725f59eb95ff734f9499f80635580ecd9', class: Object.assign({}, elSlot.class()) }, h("slot", { key: 'f6fef80d09d9d7213c975957b917019ce3299d73' })), h("div", { key: 'eefbce7897b7935f18b61e53d4dc19ded1806bc7', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '0eee61cb3cbdaaf2af5c135ef472b9579e77b1a9', 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,
                 'is-inverted': true,
-            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { key: '3cd4ce1eb946f2de35ebd6683f127c17f669e92c', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
+            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { key: '5ba9f15559377a56212e51fa6166d09225ba4a40', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-light': true,
             } }, link.label)))))))));
@@ -311,6 +315,7 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
     static get style() { return BalFooterStyle0; }
 }, [4, "bal-footer", {
         "hideLinks": [4, "hide-links"],
+        "overrideLinks": [16],
         "showSocialMedia": [4, "show-social-media"],
         "hideLanguageSelection": [4, "hide-language-selection"],
         "links": [32],

package/components/bal-segment.js

@@ -4,7 +4,7 @@ import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { F as FOCUS_KEYS } from './focus-visible.js';
-import { m as raf } from './helpers.js';
+import { i as isDescendant, m as raf } from './helpers.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { L as ListenTo } from './listen.js';
 import { a as isSpaceKey, i as isEnterKey, c as isArrowUpKey, f as isArrowLeftKey, b as isArrowDownKey, g as isArrowRightKey, h as isHomeKey, j as isEndKey } from './keyboard.helpers.js';
@@ -141,6 +141,13 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     focusOutListener(ev) {
         this.balBlur.emit(ev);
     }
+    listenToDidAnimate(ev) {
+        if (ev && ev.target && isDescendant(ev.target, this.el)) {
+            const childRect = this.el.getBoundingClientRect();
+            this.maxWidth = childRect.width;
+            this.windowResizeListener();
+        }
+    }
     breakpointListener(breakpoints) {
         this.isMobile = breakpoints.mobile;
     }
@@ -309,7 +316,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, { key: 'f5cf0a37669b14db14104214dd142b8bed5266d6', 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", { key: '9952482b6bec65e4a7ed05b4cd34d58331805b4e', onSlotchange: this.onSlottedItemsChange })));
+        return (h(Host, { key: '3554d8bc4b44417e273a935a70ae89ff87e26d45', 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", { key: '9271b42436f9c30077a60bcef7847ac04d093052', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -353,6 +360,12 @@ __decorate([
     __metadata("design:paramtypes", [FocusEvent]),
     __metadata("design:returntype", void 0)
 ], Segment.prototype, "focusOutListener", null);
+__decorate([
+    ListenTo('balWillAnimate', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "listenToDidAnimate", null);
 __decorate([
     ListenToBreakpoints(),
     __metadata("design:type", Function),

package/components/bal-tab-item.js

@@ -21,6 +21,8 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
         this.icon = undefined;
         this.noPanel = false;
         this.aria = undefined;
+        this.subLabel = '';
+        this.svg = '';
     }
     componentWillLoad() {
         this.inheritAttributes = inheritTrackingAttributes(this.el);
@@ -55,15 +57,17 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
             trackingData: this.inheritAttributes,
             noPanel: this.noPanel,
             aria: this.aria,
+            subLabel: this.subLabel,
+            svg: this.svg,
         };
     }
     render() {
         const hasPanel = !this.noPanel;
         const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (h(Host, { key: '403ef9c6f4195a72139922232b759847a698a5d8', id: this.tabPanelID, class: {
+        return (h(Host, { key: '73cd7faf737780486e58b71b4c51508e0311e277', id: this.tabPanelID, class: {
                 'bal-tab-item': true,
                 'bal-tab-item--active': this.isActive,
-            }, role: hasPanel ? 'tabpanel' : undefined, "aria-label": hasPanel ? this.label : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: 'ff4a802972dadebf7240c41c03a233cc17dba24c' })));
+            }, role: hasPanel ? 'tabpanel' : undefined, "aria-label": hasPanel ? this.label : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: 'd533d087306ee17ba5b78c9b756db6cf923ef1a5' })));
     }
     get el() { return this; }
 }, [4, "bal-tab-item", {
@@ -79,6 +83,8 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
         "icon": [513],
         "noPanel": [4, "no-panel"],
         "aria": [16],
+        "subLabel": [513, "sub-label"],
+        "svg": [1],
         "isActive": [32],
         "getOptions": [64],
         "setActive": [64]