@baloise/ds-core 19.7.1 → 19.8.0-snapshot.1820-04df76e73

package/components/bal-accordion-trigger.js

@@ -129,16 +129,12 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
     createLogger(log) {
         this.log = log;
     }
-    buttonChanged() {
-        this.variant = this.button ? 'button' : this.variant;
-    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
     connectedCallback() {
         this.updateAccordionId();
-        this.buttonChanged();
     }
     componentWillRender() {
         this.updateAccordionId();
@@ -157,6 +153,12 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
      * GETTERS
      * ------------------------------------------------------
      */
+    get realVariant() {
+        if (this.button) {
+            return 'button';
+        }
+        return this.variant;
+    }
     get parentAccordionElement() {
         var _a;
         return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('bal-accordion')) || null;
@@ -195,7 +197,7 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
                     return this.renderIcon(props);
             }
         };
-        return (h(Host, { id: id, class: Object.assign({}, this.block.class()) }, h(Trigger, { variant: this.variant, id,
+        return (h(Host, { id: id, class: Object.assign({}, this.block.class()) }, h(Trigger, { variant: this.realVariant, id,
             label,
             icon,
             turn,
@@ -215,9 +217,6 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
         return (h("button", Object.assign({ class: Object.assign(Object.assign({}, this.block.element('text').class()), { 'bal-focused': triggerAttributes.tabindex === 0 }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-expanded": ariaBooleanToString(this.active), part: buttonPart, "data-testid": "bal-accordion-trigger", onClick: this.onClick }, triggerAttributes), this.active ? closeLabel : openLabel));
     }
     get el() { return this; }
-    static get watchers() { return {
-        "button": ["buttonChanged"]
-    }; }
     static get style() { return balAccordionTriggerCss; }
 }, [0, "bal-accordion-trigger", {
         "button": [4],
@@ -234,8 +233,6 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
         "parentAccordionId": [32],
         "language": [32],
         "configChanged": [64]
-    }, undefined, {
-        "button": ["buttonChanged"]
     }]);
 __decorate([
     Logger('bal-accordion-trigger'),

package/components/bal-card-button.js

@@ -34,7 +34,7 @@ const CardButton = /*@__PURE__*/ proxyCustomElement(class CardButton extends HTM
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: '2571a681907e53e8496930e90e42b7c83d8f772b', class: "bal-card-button" }, h("bal-button", { key: 'abb149ebb28f13a448cec0fff003feb7efd43e16', color: "info", expanded: true, "bottom-rounded": true, icon: this.icon, iconRight: this.iconRight, elementType: this.elementType, disabled: this.disabled, href: this.href, target: this.target, loading: this.loading }, h("slot", { key: 'b51a474d03b133ab2174004d08b8129032344ecb' }))));
+        return (h(Host, { key: '3088f94353d94bf69767bcae3e714d5e3b3928d6', class: "bal-card-button" }, h("bal-button", { key: '8684146c87ae36da730bd7934d6a16e0ec00fda5', color: "info", expanded: true, "bottom-rounded": true, icon: this.icon, rel: this.rel, iconRight: this.iconRight, elementType: this.elementType, disabled: this.disabled, href: this.href, target: this.target, loading: this.loading }, h("slot", { key: 'e325e51c8d30285fc03b6991f8d42d957721a8e1' }))));
     }
 }, [4, "bal-card-button", {
         "icon": [1],
@@ -42,6 +42,7 @@ const CardButton = /*@__PURE__*/ proxyCustomElement(class CardButton extends HTM
         "disabled": [516],
         "href": [1],
         "target": [1],
+        "rel": [1],
         "iconRight": [1, "icon-right"],
         "loading": [4]
     }]);

package/components/bal-date-calendar2.js

@@ -1,14 +1,14 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { p as padStart } from './index3.js';
-import { i as isNil } from './index2.js';
-import { B as BalDate } from './date.js';
-import { L as Logger } from './log.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 { B as BalDate } from './date.js';
 import { a as waitAfterFramePaint } from './helpers.js';
-import { B as BEM } from './bem.js';
+import { L as Logger } from './log.js';
 import { L as ListenToSwipe } from './swipe.decorator.js';
+import { p as padStart } from './index3.js';
+import { i as isNil } from './index2.js';
 import { i as i18nBalDate } from './bal-date.i18n.js';
 import { d as defineCustomElement$2 } from './bal-date-calendar-cell2.js';
 import { d as defineCustomElement$1 } from './bal-icon2.js';
@@ -154,6 +154,15 @@ function getFirstDayOfMonth(year, month) {
     return new Date(year, month - 1, 1);
 }
 
+const CalendarGrid = ({ isVisible, ref, grid, weekdays, selectedDate, firstDayOfWeek, onSelectDay, }) => {
+    const block = BEM.block('date-calendar');
+    const blockBody = block.element('body');
+    const blockBodyGrid = blockBody.element('grid');
+    return (h("div", { role: "grid", class: Object.assign(Object.assign({}, blockBodyGrid.class()), blockBodyGrid.modifier('visible').class(isVisible)), "aria-hidden": isVisible ? 'false' : 'true', ref: el => ref(el) },
+        h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('head').class()) }, weekdays.map(weekday => (h("span", { key: weekday.textContent, role: "columnheader", "aria-label": weekday.ariaLabel, title: weekday.ariaLabel }, weekday.textContent)))),
+        h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('body').class()), style: { '--bal-date-first-week-day': `${firstDayOfWeek}` } }, grid.map(cell => (h("bal-date-calendar-cell", Object.assign({ key: cell.isoDate }, cell, { selected: cell.isoDate === selectedDate, onBalSelectDay: ({ detail }) => onSelectDay(detail) })))))));
+};
+
 const CalendarList = ({ name, isVisible, girdHeight, list, onSelect, ref, }) => {
     const block = BEM.block('date-calendar');
     const blockBody = block.element('body');
@@ -168,15 +177,6 @@ const CalendarList = ({ name, isVisible, girdHeight, list, onSelect, ref, }) =>
             } }, item.label))))));
 };
 
-const CalendarGrid = ({ isVisible, ref, grid, weekdays, selectedDate, firstDayOfWeek, onSelectDay, }) => {
-    const block = BEM.block('date-calendar');
-    const blockBody = block.element('body');
-    const blockBodyGrid = blockBody.element('grid');
-    return (h("div", { role: "grid", class: Object.assign(Object.assign({}, blockBodyGrid.class()), blockBodyGrid.modifier('visible').class(isVisible)), "aria-hidden": isVisible ? 'false' : 'true', ref: el => ref(el) },
-        h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('head').class()) }, weekdays.map(weekday => (h("span", { key: weekday.textContent, role: "columnheader", "aria-label": weekday.ariaLabel, title: weekday.ariaLabel }, weekday.textContent)))),
-        h("div", { role: "row", class: Object.assign({}, blockBodyGrid.element('body').class()), style: { '--bal-date-first-week-day': `${firstDayOfWeek}` } }, grid.map(cell => (h("bal-date-calendar-cell", Object.assign({ key: cell.isoDate }, cell, { selected: cell.isoDate === selectedDate, onBalSelectDay: ({ detail }) => onSelectDay(detail) })))))));
-};
-
 const CalendarNav = ({ language, onClickSelectMonthAndYear, monthFullNames, month, year, isCalendarVisible, isListVisible, onClickPreviousMonth, onClickNextMonth, }) => {
     const block = BEM.block('date-calendar');
     const blockNav = block.element('nav');
@@ -200,7 +200,7 @@ const CalendarNav = ({ language, onClickSelectMonthAndYear, monthFullNames, mont
                 h("bal-icon", { name: "caret-right", color: "primary", size: "small" })))));
 };
 
-const balDateCalendarCss = ":host{--bal-date-first-week-day:0;--bal-date-calendar-background:var(--bal-color-red-3)}:host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;background:var(--bal-color-white);border-radius:var(--bal-radius-normal)}.bal-date-calendar__nav{display:-ms-flexbox;display:flex;width:calc(100% - 1rem);-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;padding:.5rem;gap:.5rem}.bal-date-calendar__nav--start>button{display:-ms-flexbox;display:flex;gap:.5rem}.bal-date-calendar__nav--end{display:-ms-flexbox;display:flex;gap:.5rem}.bal-date-calendar__nav button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-color-text-primary);border:none;background:rgba(0,0,0,0);text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;min-height:2rem;min-width:2rem;padding:.25rem;border-radius:var(--bal-button-radius);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__nav button:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):hover{background:var(--bal-color-light-blue-1)}}.bal-date-calendar__nav button:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):active{background:var(--bal-color-light-blue-2)}.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled){color:var(--bal-color-light-blue-3);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):hover{color:var(--bal-color-text-primary)}}.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):active{color:var(--bal-color-text-primary)}.bal-date-calendar__nav button--selected{background:var(--bal-color-primary);color:var(--bal-color-text-white);font-weight:var(--bal-font-weight-bold)}.bal-date-calendar__nav button--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}.bal-date-calendar__body{display:block}.bal-date-calendar__body__grid{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:.5rem;height:0;padding-top:0;padding-bottom:0;visibility:hidden}.bal-date-calendar__body__grid--visible{height:auto;padding-top:.5rem;padding-bottom:.5rem;visibility:visible}.bal-date-calendar__body__grid__head{position:relative;display:grid;grid-template-columns:repeat(7, 1fr);-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-date-calendar__body__grid__head::after{position:absolute;content:\"\";height:2px;width:calc(100% + 1rem);bottom:0;left:-0.5rem;right:-0.5rem;background:var(--bal-color-border)}.bal-date-calendar__body__grid__head span{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:2rem;width:2rem;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;text-wrap:nowrap}.bal-date-calendar__body__grid__body{display:grid;grid-template-columns:repeat(7, 1fr);-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding-top:.5rem}.bal-date-calendar__body__grid__body>.bal-date-calendar-cell{width:2rem;height:2rem;text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-date-calendar__body__grid__body>.bal-date-calendar-cell:first-child{grid-column:var(--bal-date-first-week-day)}.bal-date-calendar__body__list{display:none;list-style:none;margin:0;padding:0;-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:calc(100% - 1rem);overflow-y:auto;max-height:18rem;position:relative;padding:.5rem;border-top:2px solid var(--bal-color-border)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-color-text-primary);border:none;background:rgba(0,0,0,0);text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;width:100%}@media (hover: hover)and (pointer: fine){.bal-date-calendar__body__list .bal-date-calendar__body__list__item:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):hover{background:var(--bal-color-light-blue-1)}}.bal-date-calendar__body__list .bal-date-calendar__body__list__item:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):active{background:var(--bal-color-light-blue-2)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled){color:var(--bal-color-light-blue-3);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):hover{color:var(--bal-color-text-primary)}}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):active{color:var(--bal-color-text-primary)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected{background:var(--bal-color-primary);color:var(--bal-color-text-white);font-weight:var(--bal-font-weight-bold)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}.bal-date-calendar__body__list--visible{display:grid}.bal-date-calendar__body__list--year{grid-template-columns:repeat(4, 1fr)}.bal-date-calendar__body__list--month{grid-template-columns:repeat(2, 1fr)}.bal-date-calendar-cell{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-color-text-primary);border:none;background:rgba(0,0,0,0);text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;width:2rem;height:2rem}@media (hover: hover)and (pointer: fine){.bal-date-calendar-cell:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):hover{background:var(--bal-color-light-blue-1)}}.bal-date-calendar-cell:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):active{background:var(--bal-color-light-blue-2)}.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled){color:var(--bal-color-light-blue-3);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):hover{color:var(--bal-color-text-primary)}}.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):active{color:var(--bal-color-text-primary)}.bal-date-calendar-cell--selected{background:var(--bal-color-primary);color:var(--bal-color-text-white);font-weight:var(--bal-font-weight-bold)}.bal-date-calendar-cell--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}";
+const balDateCalendarCss = ":host{--bal-date-first-week-day:0;--bal-date-calendar-button-background:transparent;--bal-date-calendar-button-background-hover:var(--bal-color-light-blue-1);--bal-date-calendar-button-background-active:var(--bal-color-light-blue-2);--bal-date-calendar-button-color:var(--bal-color-text-primary);--bal-date-calendar-button-today-color:var(--bal-color-light-blue-3);--bal-date-calendar-button-today-color-hover:var(--bal-color-text-primary);--bal-date-calendar-button-today-color-active:var(--bal-color-text-primary);--bal-date-calendar-button-selected-background:var(--bal-color-primary);--bal-date-calendar-button-selected-color:var(--bal-color-text-white)}:host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;background:var(--bal-color-white);border-radius:var(--bal-radius-normal)}.bal-date-calendar__nav{display:-ms-flexbox;display:flex;width:calc(100% - 1rem);-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;padding:.5rem;gap:.5rem}.bal-date-calendar__nav--start>button{display:-ms-flexbox;display:flex;gap:.5rem}.bal-date-calendar__nav--end{display:-ms-flexbox;display:flex;gap:.5rem}.bal-date-calendar__nav button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-date-calendar-button-color);border:none;background:var(--bal-date-calendar-button-background);text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;min-height:2rem;min-width:2rem;padding:.25rem;border-radius:var(--bal-button-radius);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__nav button:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):hover{background:var(--bal-date-calendar-button-background-hover)}}.bal-date-calendar__nav button:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):active{background:var(--bal-date-calendar-button-background-active)}.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled){color:var(--bal-date-calendar-button-today-color);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):hover{color:var(--bal-date-calendar-button-today-color-hover)}}.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):active{color:var(--bal-date-calendar-button-today-color-active)}.bal-date-calendar__nav button--selected{background:var(--bal-date-calendar-button-selected-background);color:var(--bal-date-calendar-button-selected-color);font-weight:var(--bal-font-weight-bold)}.bal-date-calendar__nav button--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}.bal-date-calendar__body{display:block}.bal-date-calendar__body__grid{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:.5rem;height:0;padding-top:0;padding-bottom:0;visibility:hidden}.bal-date-calendar__body__grid--visible{height:auto;padding-top:.5rem;padding-bottom:.5rem;visibility:visible}.bal-date-calendar__body__grid__head{position:relative;display:grid;grid-template-columns:repeat(7, 1fr);-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-date-calendar__body__grid__head::after{position:absolute;content:\"\";height:2px;width:calc(100% + 1rem);bottom:0;left:-0.5rem;right:-0.5rem;background:var(--bal-color-border)}.bal-date-calendar__body__grid__head span{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:2rem;width:2rem;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;text-wrap:nowrap}.bal-date-calendar__body__grid__body{display:grid;grid-template-columns:repeat(7, 1fr);-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding-top:.5rem}.bal-date-calendar__body__grid__body>.bal-date-calendar-cell{width:2rem;height:2rem;text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-date-calendar__body__grid__body>.bal-date-calendar-cell:first-child{grid-column:var(--bal-date-first-week-day)}.bal-date-calendar__body__list{display:none;list-style:none;margin:0;padding:0;-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:calc(100% - 1rem);overflow-y:auto;max-height:18rem;position:relative;padding:.5rem;border-top:2px solid var(--bal-color-border)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-date-calendar-button-color);border:none;background:var(--bal-date-calendar-button-background);text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;width:100%}@media (hover: hover)and (pointer: fine){.bal-date-calendar__body__list .bal-date-calendar__body__list__item:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):hover{background:var(--bal-date-calendar-button-background-hover)}}.bal-date-calendar__body__list .bal-date-calendar__body__list__item:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):active{background:var(--bal-date-calendar-button-background-active)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled){color:var(--bal-date-calendar-button-today-color);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):hover{color:var(--bal-date-calendar-button-today-color-hover)}}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):active{color:var(--bal-date-calendar-button-today-color-active)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected{background:var(--bal-date-calendar-button-selected-background);color:var(--bal-date-calendar-button-selected-color);font-weight:var(--bal-font-weight-bold)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}.bal-date-calendar__body__list--visible{display:grid}.bal-date-calendar__body__list--year{grid-template-columns:repeat(4, 1fr)}.bal-date-calendar__body__list--month{grid-template-columns:repeat(2, 1fr)}.bal-date-calendar-cell{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-date-calendar-button-color);border:none;background:var(--bal-date-calendar-button-background);text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;width:2rem;height:2rem}@media (hover: hover)and (pointer: fine){.bal-date-calendar-cell:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):hover{background:var(--bal-date-calendar-button-background-hover)}}.bal-date-calendar-cell:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):active{background:var(--bal-date-calendar-button-background-active)}.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled){color:var(--bal-date-calendar-button-today-color);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):hover{color:var(--bal-date-calendar-button-today-color-hover)}}.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):active{color:var(--bal-date-calendar-button-today-color-active)}.bal-date-calendar-cell--selected{background:var(--bal-date-calendar-button-selected-background);color:var(--bal-date-calendar-button-selected-color);font-weight:var(--bal-font-weight-bold)}.bal-date-calendar-cell--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}";
 
 const DateCalendar = /*@__PURE__*/ proxyCustomElement(class DateCalendar extends HTMLElement {
     constructor() {

package/components/bal-date.js

@@ -224,7 +224,7 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         }
     }
     componentWillLoad() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title', 'data-hj-allow']);
     }
     /**
      * @internal define config for the component
@@ -351,7 +351,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: 'df763339a5267bc106d30ca6cc3d62bc75c8f05f', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '55d4f91e6b77f56f38274bb984be9dc21a54a5a4', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ key: 'bf2b5f66aaf62f45f01e42cdd3e236707094d9dd', 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: ev => this.handleFocus(ev), onBalBlur: ev => this.handleBlur(ev), 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": ariaBooleanToString(this.isExpanded) })) : ('')), h("div", { key: '828597483d6ccc05c8fa9059b7d64941d8edc3d8', 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: '781a4f0d0b8ebc2c8b05a883e9441f4483e25820', 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: 'ab5a0811c70c06da56ad80dda612dc7873cab7a0', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '6b56dd808d410d94a9ee6f7e999e26c0ca280b60', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ key: '37672165bd12ac741e084e74214ac9fab568ed02', 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: ev => this.handleFocus(ev), onBalBlur: ev => this.handleBlur(ev), 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": ariaBooleanToString(this.isExpanded) })) : ('')), h("div", { key: 'd72d058ba97876b877a9b7e18ce7ccf89646310d', 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: 'c4f4f3876ea782d4af605e9f761558ab59864db1', 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 {

package/components/bal-dropdown.js

@@ -1,21 +1,21 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { m as rIC, a as waitAfterFramePaint, p as addEventListener, q as removeEventListener, b as waitAfterIdleCallback } from './helpers.js';
-import { b as balBrowser } from './browser.js';
-import { b as isArrowDownKey, c as isArrowUpKey, i as isEnterKey, d as isEscapeKey, a as isSpaceKey } from './keyboard.helpers.js';
-import { B as BEM } from './bem.js';
-import { L as Logger } from './log.js';
-import { s as stopEventBubbling } from './form-input.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 { s as stopEventBubbling } from './form-input.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 defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
 import { d as defaultBalAriaForm } from './form.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';
 
 class DropdownAutoFillUtil {
     constructor() {
@@ -400,7 +400,7 @@ const DropdownInput = ({ inputId, httpFormSubmit, ariaForm, rawValue, autocomple
         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);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 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() {
@@ -660,7 +660,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         }
     }
     async componentWillRender() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['tabindex']);
+        this.inheritedAttributes = inheritAttributes(this.el, ['tabindex', 'data-hj-allow']);
         await this.optionUtil.componentWillRender();
     }
     componentDidRender() {
@@ -747,13 +747,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: '1b075647fbe8923e1d12974c621e391e6557cc48', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: 'a71a4bd3a2c803b6890f89a78fdfb611fbde8f5a', 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: '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
                 .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: 'a65ae5081e4c747a9c16fe8b499c67b23763d806', 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: '174ce02d638806795cccbc8dc9990d07f4cfe630', 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: 'e7b31122122f29e7f9dd52b4caeb797ae5584c38', 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: '86c3712230c6610e8b96280f91d5b6069d82edbf', 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: '36fdd2af649f0ccc5f7d30df90c6a1cce14eda2e', 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: 'ba4a9e84148ea1431033da83477e7563a61e0826', 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: '046f4677bcf864dcd9f6d8e5e55ff95276cd9166' }))));
+                .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' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-footer.js

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { l as loadFooterLinks, a as loadSocialMediaLinks, L as Language } from './index.esm.js';
+import { 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 { B as BEM } from './bem.js';
-import { L as Logger } from './log.js';
 import { m 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';
 
@@ -43,12 +44,13 @@ const i18nBalFooter = {
     },
 };
 
-const balFooterCss = ":root{--bal-footer-font-family:var(--bal-font-family-text);--bal-footer-background:var(--bal-color-primary);--bal-footer-color:var(--bal-color-text-white);--bal-footer-language-color-hover:var(--bal-color-light-blue-2);--bal-footer-language-background-hover:var(--bal-color-light-blue-2);--bal-footer-language-color-active:var(--bal-color-light-blue-3);--bal-footer-language-background-active:var(--bal-color-light-blue-3)}.bal-footer{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:static;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.bal-footer__slot{color:var(--bal-footer-color)}.bal-footer__inner{position:relative;font-family:var(--bal-footer-font-family);background-color:var(--bal-footer-background);padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-footer__inner{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}}@media screen and (min-width: 1024px){.bal-footer__inner{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}}.bal-footer__inner__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--bal-space-large)}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-footer__inner__wrapper{gap:var(--bal-space-medium-tablet)}}@media screen and (max-width: 768px){.bal-footer__inner__wrapper{gap:var(--bal-space-medium-tablet)}}.bal-footer__inner__wrapper__header-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row}.bal-footer__inner__wrapper__header-container__language{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__header-container__language__wrapper{display:-ms-flexbox;display:flex;gap:1rem;cursor:pointer}.bal-footer__inner__wrapper__header-container__language__wrapper select{padding-left:2px;padding-right:2px;background:rgba(0,0,0,0);-webkit-appearance:none;border:none;color:var(--bal-color-white);font-weight:var(--bal-font-weight-bold);font-family:var(--bal-font-family-title);cursor:pointer}.bal-footer__inner__wrapper__header-container__language__wrapper select option{background:var(--bal-color-white) !important;color:var(--bal-color-primary) !important;font-weight:var(--bal-font-weight-bold) !important;font-family:var(--bal-font-family-text) !important}.bal-footer__inner__wrapper__header-container__language__wrapper:hover svg,.bal-footer__inner__wrapper__header-container__language__wrapper:hover g,.bal-footer__inner__wrapper__header-container__language__wrapper:hover path,.bal-footer__inner__wrapper__header-container__language__wrapper:hover circle{fill:var(--bal-footer-language-background-hover)}.bal-footer__inner__wrapper__header-container__language__wrapper:hover select{color:var(--bal-footer-language-color-hover)}.bal-footer__inner__wrapper__header-container__language__wrapper:active svg,.bal-footer__inner__wrapper__header-container__language__wrapper:active g,.bal-footer__inner__wrapper__header-container__language__wrapper:active path,.bal-footer__inner__wrapper__header-container__language__wrapper:active circle{fill:var(--bal-footer-language-background-active)}.bal-footer__inner__wrapper__header-container__language__wrapper:active select{color:var(--bal-footer-language-color-active)}.bal-footer__inner__wrapper__header-container__logo{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__links-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap}@media screen and (min-width: 769px),print{.bal-footer__inner__wrapper__links-container{-ms-flex-direction:column;flex-direction:column}}@media screen and (min-width: 1024px){.bal-footer__inner__wrapper__links-container{-ms-flex-direction:row;flex-direction:row}}.bal-footer__inner__wrapper__links-container__legal-links{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;gap:var(--bal-space-large-desktop)}.bal-footer__inner__wrapper__links-container__legal-links a{font-size:var(--bal-text-size-small) !important}@media screen and (max-width: 768px){.bal-footer__inner__wrapper__links-container__legal-links{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%;gap:var(--bal-space-normal)}}.bal-footer__inner__wrapper__links-container__social-media-links{-ms-flex-align:center;align-items:center;gap:var(--bal-space-large-desktop);padding:var(--bal-space-normal) var(--bal-space-normal) var(--bal-space-normal) 0}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-footer__inner__wrapper__links-container__social-media-links{padding-bottom:var(--bal-space-large)}}@media screen and (max-width: 768px){.bal-footer__inner__wrapper__links-container__social-media-links{padding-bottom:var(--bal-space-large);-ms-flex-pack:center;justify-content:center;width:100%;padding:var(--bal-space-normal) 0 var(--bal-space-normal) 0}}";
+const balFooterCss = ":root{--bal-footer-font-family:var(--bal-font-family-text);--bal-footer-background:var(--bal-color-primary);--bal-footer-color:var(--bal-color-text-white);--bal-footer-language-color:var(--bal-color-text-white);--bal-footer-language-color-hover:var(--bal-color-light-blue-2);--bal-footer-language-color-active:var(--bal-color-light-blue-3);--bal-footer-language-background:var(--bal-color-text-white);--bal-footer-language-background-hover:var(--bal-color-light-blue-2);--bal-footer-language-background-active:var(--bal-color-light-blue-3);--bal-footer-logo-image-max-height:64px}.bal-footer{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:static;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.bal-footer__slot{color:var(--bal-footer-color)}.bal-footer__inner{position:relative;font-family:var(--bal-footer-font-family);background-color:var(--bal-footer-background);padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-footer__inner{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}}@media screen and (min-width: 1024px){.bal-footer__inner{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}}.bal-footer__inner__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--bal-space-large)}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-footer__inner__wrapper{gap:var(--bal-space-medium-tablet)}}@media screen and (max-width: 768px){.bal-footer__inner__wrapper{gap:var(--bal-space-medium-tablet)}}.bal-footer__inner__wrapper__header-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row}.bal-footer__inner__wrapper__header-container__language{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__header-container__language__wrapper{display:-ms-flexbox;display:flex;gap:1rem;cursor:pointer}.bal-footer__inner__wrapper__header-container__language__wrapper svg,.bal-footer__inner__wrapper__header-container__language__wrapper g,.bal-footer__inner__wrapper__header-container__language__wrapper path,.bal-footer__inner__wrapper__header-container__language__wrapper circle{fill:var(--bal-footer-language-background) !important}.bal-footer__inner__wrapper__header-container__language__wrapper select{padding-left:2px;padding-right:2px;background:rgba(0,0,0,0);-webkit-appearance:none;border:none;color:var(--bal-footer-language-color);font-weight:var(--bal-font-weight-bold);font-family:var(--bal-font-family-title);cursor:pointer}.bal-footer__inner__wrapper__header-container__language__wrapper select option{background:var(--bal-color-white) !important;color:var(--bal-color-primary) !important;font-weight:var(--bal-font-weight-bold) !important;font-family:var(--bal-font-family-text) !important}.bal-footer__inner__wrapper__header-container__language__wrapper:hover svg,.bal-footer__inner__wrapper__header-container__language__wrapper:hover g,.bal-footer__inner__wrapper__header-container__language__wrapper:hover path,.bal-footer__inner__wrapper__header-container__language__wrapper:hover circle{fill:var(--bal-footer-language-background-hover) !important}.bal-footer__inner__wrapper__header-container__language__wrapper:hover select{color:var(--bal-footer-language-color-hover)}.bal-footer__inner__wrapper__header-container__language__wrapper:active svg,.bal-footer__inner__wrapper__header-container__language__wrapper:active g,.bal-footer__inner__wrapper__header-container__language__wrapper:active path,.bal-footer__inner__wrapper__header-container__language__wrapper:active circle{fill:var(--bal-footer-language-background-active) !important}.bal-footer__inner__wrapper__header-container__language__wrapper:active select{color:var(--bal-footer-language-color-active)}.bal-footer__inner__wrapper__header-container__logo{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__header-container__logo img{max-height:var(--bal-footer-logo-image-max-height)}.bal-footer__inner__wrapper__header-container__logo div{height:var(--bal-footer-logo-image-max-height);min-width:var(--bal-footer-logo-image-max-height)}.bal-footer__inner__wrapper__links-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap}@media screen and (min-width: 769px),print{.bal-footer__inner__wrapper__links-container{-ms-flex-direction:column;flex-direction:column}}@media screen and (min-width: 1024px){.bal-footer__inner__wrapper__links-container{-ms-flex-direction:row;flex-direction:row}}.bal-footer__inner__wrapper__links-container__legal-links{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;gap:var(--bal-space-large-desktop)}.bal-footer__inner__wrapper__links-container__legal-links a{font-size:var(--bal-text-size-small) !important}@media screen and (max-width: 768px){.bal-footer__inner__wrapper__links-container__legal-links{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%;gap:var(--bal-space-normal)}}.bal-footer__inner__wrapper__links-container__social-media-links{-ms-flex-align:center;align-items:center;gap:var(--bal-space-large-desktop);padding:var(--bal-space-normal) var(--bal-space-normal) var(--bal-space-normal) 0}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-footer__inner__wrapper__links-container__social-media-links{padding-bottom:var(--bal-space-large)}}@media screen and (max-width: 768px){.bal-footer__inner__wrapper__links-container__social-media-links{padding-bottom:var(--bal-space-large);-ms-flex-pack:center;justify-content:center;width:100%;padding:var(--bal-space-normal) 0 var(--bal-space-normal) 0}}";
 
 const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.logoSvgContent = '';
         this.links = [];
         this.socialMediaLinks = [];
         this.language = defaultConfig.language;
@@ -58,6 +60,14 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
          */
+        /**
+         * Image address for the logo.
+         */
+        this.logoHref = '';
+        /**
+         * Svg content for the logo.
+         */
+        this.logoSvg = '';
         /**
          * If `true` the legal Baloise links will be hidden.
          */
@@ -78,6 +88,9 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
     createLogger(log) {
         this.log = log;
     }
+    logoSvgChanged() {
+        this.logoSvgContent = sanitizeSvg(this.logoSvg);
+    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
@@ -85,6 +98,7 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
     connectedCallback() {
         this.updateFooterLinks();
         this.updateSocialMediaLinks();
+        this.logoSvgChanged();
     }
     /**
      * LISTENERS
@@ -147,31 +161,39 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
         const elWrapper = elLanguage.element('wrapper');
         const elLegalLinks = elLinksContainer.element('legal-links');
         const elSocialMediaLinks = elLinksContainer.element('social-media-links');
-        return (h(Host, { key: 'dbb10b62df792021f3ee814990225a5141906dcf', class: Object.assign({}, block.class()) }, h("footer", { key: '9bb866cae3936c2caf1cc7e63879c4681d2ee1a8', class: Object.assign({}, elInner.class()) }, h("div", { key: 'aee0462f8b07cf1c546647b67434bbbd0b0ce582', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: '5b9b7a54156c1eb5dba8096c7a6add4939d0626d', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: '632b26b347fe91b95d72e725db22bebcb303facf', class: Object.assign({}, elLogo.class()) }, h("bal-logo", { key: 'e91b5cd73918ff9fbd7910e563b29a1396299942', color: "white" })), h("div", { key: '25a3bc1c711f33114df091fe4ed4de5f2e4298f6', class: Object.assign({}, elLanguage.class()), style: {
+        return (h(Host, { key: '04ec38780841ea9902e3f465b8fd4e3561a9092e', class: Object.assign({}, block.class()) }, h("footer", { key: 'dc1fa3c156ad78d3d05d3f5d219c81801bca5044', class: Object.assign({}, elInner.class()) }, h("div", { key: 'e8f1144c09a1b52fb956bc03438671086e801895', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: 'b6d1e0c4deed43eec0e0889cc4011cc5465db527', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: '6102cc926e8542a0a2802b1fa8914b054a9391b4', class: Object.assign({}, elLogo.class()) }, this.logoHref ? (h("img", { src: this.logoHref, alt: "Logo" })) : this.logoSvgContent ? (h("div", { innerHTML: this.logoSvgContent })) : (h("bal-logo", { color: "white" }))), h("div", { key: '5cd3a29dd8d40a4704f85635e32bcca1d0af0546', class: Object.assign({}, elLanguage.class()), style: {
                 display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
-            } }, h("div", { key: '0d6f3a4ef5db0a8973c2baa293d02badbf25ab8c', class: Object.assign({}, elWrapper.class()) }, h("bal-icon", { key: 'ffa4e67aa6d2210f5739c5114127e46f50e2f31b', class: Object.assign({}, elWrapper.element('icon').class()), name: "web", color: "white" }), h("select", { key: '0d3061a89a4fe04aecbb5498fa03ce263e8447ab', class: Object.assign({}, elWrapper.element('select').class()), onChange: event => this.changeLanguage(event.target.value), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("option", { key: language, value: language, selected: language === this.language }, language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name))))))), h("div", { key: 'ca5e0091909a9c8fd92ca69f3d8937d0b976bee2', class: Object.assign({}, elSlot.class()) }, h("slot", { key: '42575b0eb8ecc7e12679b28786ed27484088d01d' })), h("div", { key: '3600fe32dfeeea73ff2afac7ce8549d5e52bfb04', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '697a4f34081dbc8255b02425b2f2fcd0285670bf', class: Object.assign({}, elSocialMediaLinks.class()), style: {
+            } }, h("div", { key: '023ba95e77cc80681af23b8a0ed50b49a94b81fd', class: Object.assign({}, elWrapper.class()) }, h("bal-icon", { key: '3c5ce093f139a07def8c73fdfbcf6060de8893b3', class: Object.assign({}, elWrapper.element('icon').class()), name: "web", color: "white" }), h("select", { key: '7cd8af0cb134b8b8a9733333df37a1c9f909e9fb', class: Object.assign({}, elWrapper.element('select').class()), onChange: event => this.changeLanguage(event.target.value), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("option", { key: language, value: language, selected: language === this.language }, language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name))))))), h("div", { key: '017b017c8d5714e5b8568cf10e12a96a468b722e', class: Object.assign({}, elSlot.class()) }, h("slot", { key: 'e09a963ac71e749cecfe38751ae330759e626080' })), h("div", { key: '993161e25ae9c3fccc18fd7f2b032b74b3120106', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: 'eee88e5f349aebf4d16333462f7e18a029bfe82e', 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: '3b91222ee07a7c7d5e1995f5180398272fd6d92e', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links &&
+            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { key: 'fdd8006cd0d1ec2f6e3fa6ee418705a7d607f9c8', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links &&
             this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                     'link': true,
                     'is-light': true,
                 } }, link.label)))))))));
     }
+    static get watchers() { return {
+        "logoSvg": ["logoSvgChanged"]
+    }; }
     static get style() { return balFooterCss; }
 }, [4, "bal-footer", {
+        "logoHref": [1, "logo-href"],
+        "logoSvg": [1, "logo-svg"],
         "hideLinks": [4, "hide-links"],
         "overrideLinks": [16, "override-links"],
         "showSocialMedia": [4, "show-social-media"],
         "hideLanguageSelection": [4, "hide-language-selection"],
+        "logoSvgContent": [32],
         "links": [32],
         "socialMediaLinks": [32],
         "language": [32],
         "region": [32],
         "allowedLanguages": [32],
         "configChanged": [64]
+    }, undefined, {
+        "logoSvg": ["logoSvgChanged"]
     }]);
 __decorate([
     Logger('bal-footer'),

package/components/bal-form-col.js

@@ -8,7 +8,7 @@ const FormCol = /*@__PURE__*/ proxyCustomElement(class FormCol extends HTMLEleme
         this.size = 'full';
     }
     render() {
-        return (h(Host, { key: '5ee1da91eaa100771f43f5ca80e01ac5a47a5d5f', class: {
+        return (h(Host, { key: 'dcafe25da97b6d53f8c70cb13ba63be2dc9214ef', class: {
                 [`${this.colClass}`]: true,
                 'py-none': true,
                 'touch:is-12': true,
@@ -18,7 +18,7 @@ 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: '498c7e5a0b163c2cb3e465cb43087db432f92650' })));
+            } }, h("slot", { key: '153dee19ecee905bd5bc7cf624a4e26ff883d50c' })));
     }
     get el() { return this; }
 }, [4, "bal-form-col", {

package/components/bal-form-grid.js

@@ -8,7 +8,7 @@ const FormGrid = /*@__PURE__*/ proxyCustomElement(class FormGrid extends HTMLEle
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '7dd05e54b6f2070956b4630a542c249734981731', class: `bal-form-grid grid is-multiline my-none py-none` }, h("slot", { key: 'd9490a9e4153d985dad9258dc795ea1b092930f4' })));
+        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"]);

package/components/bal-form.js

@@ -37,7 +37,7 @@ const Form = /*@__PURE__*/ proxyCustomElement(class Form extends HTMLElement {
                 novalidate: this.novalidate,
             };
         }
-        return (h(Host, { key: 'ed6e199a51186247ccad8e06989ba9819e43bed2' }, h(NativeEl, Object.assign({ key: 'de4a61e1690819e10096cd1c35eecc0371d73aae' }, attrs, { class: this.formClass }), h("slot", { key: 'f35cce725fc54ad822aada77aabaf6f0babd4141' }))));
+        return (h(Host, { key: '1598e29d7763c06aeebe9ae70e4ad27695c9796d' }, h(NativeEl, Object.assign({ key: '140fa29ca7900623d52da99ffc5f9bd6db72cd97' }, attrs, { class: this.formClass }), h("slot", { key: '1797bdbc8f4f70b50c5d193acea0569e977d8a81' }))));
     }
     get el() { return this; }
     static get style() { return balFormCss; }

package/components/bal-heading2.js

@@ -162,7 +162,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: '0a723b1f41cbd6af93aecd84ce5ee39ef6c29d24', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, h(Heading, { key: '16e782645408fb537c1f466ee547301f61b71b24', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemTextEl.class()), bemTextEl.modifier('no-wrap').class(this.noWrap)), bemTextEl.modifier('subtitle').class(this.subtitle)), bemTextEl.modifier('shadow').class(this.shadow)), bemTextEl.modifier(`color-${fontColor}`).class()), bemTextEl.modifier(`size-${this.autoFontSize}`).class()), ref: (headingEl) => (this.headingEl = headingEl), "data-testid": "bal-heading" }, h("slot", { key: 'c9a7f343eada2e03fe4b58f70ffb9856842b1137' }))));
+        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' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-hint-text2.js

@@ -11,7 +11,7 @@ const HintText = /*@__PURE__*/ proxyCustomElement(class HintText extends HTMLEle
         const elContent = block.element('content');
         const elText = elContent.element('text');
         const elTextField = elText.element('field');
-        return (h(Host, { key: '24898db6c3c51d19a7df6552a2e0f370c8812f95', class: Object.assign({}, elText.class()) }, h("p", { key: '2ff7501b81213d1a553f2a9a9c98df6d9577e5e8', class: Object.assign({}, elTextField.class()) }, h("slot", { key: 'e2f5ecd78ad99fc53713576807011f39884ad7fb' }))));
+        return (h(Host, { key: '37d17b229f86f236fe7ddaadd42fc91f611c6d05', class: Object.assign({}, elText.class()) }, h("p", { key: '3fb5e40a5c38c89842a63c08dcd249ae626c8f14', class: Object.assign({}, elTextField.class()) }, h("slot", { key: 'ffd2db1c493980e60f352d6d0f25deb0a5516b49' }))));
     }
 }, [4, "bal-hint-text"]);
 function defineCustomElement() {

package/components/bal-hint-title2.js

@@ -11,7 +11,7 @@ const HintTitle = /*@__PURE__*/ proxyCustomElement(class HintTitle extends HTMLE
         const elContent = block.element('content');
         const elTitle = elContent.element('title');
         const elHeading = elTitle.element('heading');
-        return (h(Host, { key: '6304fd03629ecdbaeff48777da6e9950a02e02bf', class: Object.assign({}, elTitle.class()) }, h("h3", { key: '5cdfc4c2319f7b8b17f23d02aeae7cbc534134af', class: Object.assign({}, elHeading.class()) }, h("span", { key: '6e5ce498f0574fe356778d87fb98f59b446bd8e3' }, h("slot", { key: '9604fad3ee38908e2a51ab295e7d17dad7b3d7fc' })))));
+        return (h(Host, { key: '334f645b02c2c685b596139d58bf5ad980a48138', class: Object.assign({}, elTitle.class()) }, h("h3", { key: 'f886724a8db46d3faf6c17ada13a9712cb5b1f5b', class: Object.assign({}, elHeading.class()) }, h("span", { key: 'b6c6d4d61f8f7e0e11941e4ebc9b2004b153167d' }, h("slot", { key: 'c23c7caf0d57c3456341ca2fa5c08233baa881b1' })))));
     }
 }, [4, "bal-hint-title"]);
 function defineCustomElement() {

package/components/bal-hint2.js

@@ -16,7 +16,7 @@ import { d as defineCustomElement$3 } from './bal-popup2.js';
 import { d as defineCustomElement$2 } from './bal-spinner2.js';
 import { d as defineCustomElement$1 } from './bal-stack2.js';
 
-const balHintCss = "@media (hover: hover)and (pointer: fine){.bal-hint__icon:focus-visible:not(:active){-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-hint-content-background:var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle{fill:var(--bal-color-light-blue-5)}.bal-hint .bal-popup__container{z-index:var(--bal-z-index-popup);background:var(--bal-hint-content-background)}.bal-hint__content{background:var(--bal-hint-content-background);width:auto;max-width:30rem;min-width:16.25rem;display:-ms-flexbox;display:flex;gap:1.5rem;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{-ms-flex:1;flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}";
+const balHintCss = "@media (hover: hover)and (pointer: fine){.bal-hint__icon:focus-visible:not(:active){-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-hint-content-background:var(--bal-color-grey-2);--bal-hint-content-border-color:var(--bal-color-grey-2);--bal-hint-icon-color-hover:var(--bal-color-light-blue-5)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle{fill:var(--bal-hint-icon-color-hover)}.bal-hint .bal-popup__container{z-index:var(--bal-z-index-popup);background:var(--bal-hint-content-background);border:8px solid var(--bal-hint-content-border-color)}.bal-hint__content{width:auto;max-width:30rem;min-width:16.25rem;display:-ms-flexbox;display:flex;gap:1.5rem;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{-ms-flex:1;flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}";
 
 const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
     constructor() {
@@ -135,7 +135,7 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
             return (h("div", { class: Object.assign({}, elContent.class()), "data-testid": "bal-hint-content" }, h("div", { ref: el => (this.hintContentEl = el) }), h("bal-button-group", { class: Object.assign(Object.assign({}, elButtons.class()), elButtons.modifier('is-hidden-desktop').class(this.small)) }, h("bal-button", { "data-testid": "bal-hint-close", color: "info", onClick: () => this.dismiss() }, this.closeLabel ? this.closeLabel : this.innerCloseLabel))));
         };
         const Popup = () => {
-            return (h("div", { class: Object.assign({}, block.element('popup').class()) }, h(TriggerIcon, null), h("bal-popup", { id: this.componentId, placement: "right", ref: el => (this.popupElement = el), onBalChange: this.onPopupChange, variant: this.isMobile ? 'fullscreen' : 'popover', offset: this.isMobile ? 0 : 16 }, h("bal-popup-content", null, h(HintContent, null)))));
+            return (h("div", { class: Object.assign({}, block.element('popup').class()) }, h(TriggerIcon, null), h("bal-popup", { id: this.componentId, placement: "right", closable: true, ref: el => (this.popupElement = el), onBalChange: this.onPopupChange, variant: this.isMobile ? 'fullscreen' : 'popover', offset: this.isMobile ? 0 : 16 }, h("bal-popup-content", null, h(HintContent, null)))));
         };
         return (h(Host, { class: Object.assign({}, block.class()) }, h(Popup, null), h("div", { ref: el => (this.slotWrapperEl = el), style: { display: 'none' } }, h("slot", null))));
     }