@baloise/ds-core 19.7.1 → 19.8.0

package/dist/collection/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.js

@@ -78,16 +78,12 @@ export class AccordionTrigger {
     createLogger(log) {
         this.log = log;
     }
-    buttonChanged() {
-        this.variant = this.button ? 'button' : this.variant;
-    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
     connectedCallback() {
         this.updateAccordionId();
-        this.buttonChanged();
     }
     componentWillRender() {
         this.updateAccordionId();
@@ -106,6 +102,12 @@ export 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;
@@ -144,7 +146,7 @@ export 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,
@@ -467,12 +469,6 @@ export class AccordionTrigger {
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "button",
-                "methodName": "buttonChanged"
-            }];
-    }
 }
 __decorate([
     Logger('bal-accordion-trigger'),

package/dist/collection/components/bal-card/bal-card-button/bal-card-button.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class CardButton {
     constructor() {
         /**
@@ -28,7 +28,7 @@ export class CardButton {
         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' }))));
     }
     static get is() { return "bal-card-button"; }
     static get properties() {
@@ -142,6 +142,25 @@ export class CardButton {
                 "reflect": false,
                 "defaultValue": "'_self'"
             },
+            "rel": {
+                "type": "string",
+                "attribute": "rel",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "iconRight": {
                 "type": "string",
                 "attribute": "icon-right",

package/dist/collection/components/bal-date/bal-date-calendar/bal-date-calendar.css

@@ -1 +1 @@
-: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:flex;width:calc(100% - 1rem);justify-content:space-between;align-items:center;padding:.5rem;gap:.5rem}.bal-date-calendar__nav--start>button{display:flex;gap:.5rem}.bal-date-calendar__nav--end{display:flex;gap:.5rem}.bal-date-calendar__nav button{display:flex;justify-content: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);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: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);column-gap:.5rem;row-gap:.5rem;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:flex;justify-content: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);hyphens:auto;text-wrap:nowrap}.bal-date-calendar__body__grid__body{display:grid;grid-template-columns:repeat(7, 1fr);column-gap:.5rem;row-gap:.5rem;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);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;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:flex;justify-content: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);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:flex;justify-content: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);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)}
+: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:flex;width:calc(100% - 1rem);justify-content:space-between;align-items:center;padding:.5rem;gap:.5rem}.bal-date-calendar__nav--start>button{display:flex;gap:.5rem}.bal-date-calendar__nav--end{display:flex;gap:.5rem}.bal-date-calendar__nav button{display:flex;justify-content: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);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: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);column-gap:.5rem;row-gap:.5rem;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:flex;justify-content: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);hyphens:auto;text-wrap:nowrap}.bal-date-calendar__body__grid__body{display:grid;grid-template-columns:repeat(7, 1fr);column-gap:.5rem;row-gap:.5rem;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);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;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:flex;justify-content: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);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:flex;justify-content: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);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)}

package/dist/collection/components/bal-date/bal-date-calendar/bal-date-calendar.js

@@ -1,14 +1,14 @@
 import { __decorate, __metadata } from "tslib";
-import { h, Host, } from "@stencil/core";
-import { generateCalendarGrid, generateMonths, generateWeekDays, generateYears, getFirstWeekdayOfMonth, } from "../utils/calendar";
-import { BalDate } from "../../../utils/date";
-import { Logger } from "../../../utils/log";
+import { Host, h, } from "@stencil/core";
+import { BEM } from "../../../utils/bem";
 import { ListenToConfig, defaultConfig } from "../../../utils/config";
+import { BalDate } from "../../../utils/date";
 import { waitAfterFramePaint } from "../../../utils/helpers";
-import { BEM } from "../../../utils/bem";
-import { CalendarList } from "./components/bal-date-calendar__list";
-import { CalendarGrid } from "./components/bal-date-calendar__gird";
+import { Logger } from "../../../utils/log";
 import { ListenToSwipe } from "../../../utils/swipe";
+import { generateCalendarGrid, generateMonths, generateWeekDays, generateYears, getFirstWeekdayOfMonth, } from "../utils/calendar";
+import { CalendarGrid } from "./components/bal-date-calendar__gird";
+import { CalendarList } from "./components/bal-date-calendar__list";
 import { CalendarNav } from "./components/bal-date-calendar__nav";
 export class DateCalendar {
     constructor() {

package/dist/collection/components/bal-date/bal-date.js

@@ -205,7 +205,7 @@ export class Date {
         }
     }
     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
@@ -332,7 +332,7 @@ export class Date {
         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 }))));
     }
     static get is() { return "bal-date"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-dropdown/bal-dropdown.css

@@ -1 +1 @@
-: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;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;box-shadow:var(--bal-shadow-none);padding-right:1rem;height:auto;min-height:3rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;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));justify-content: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{flex:1;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:flex;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{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: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);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: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:flex;justify-content: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%}
+: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;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;box-shadow:var(--bal-shadow-none);padding-right:1rem;height:auto;min-height:3rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;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));justify-content: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{flex:1;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:flex;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{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: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);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: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:flex;justify-content: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%}

package/dist/collection/components/bal-dropdown/bal-dropdown.js

@@ -1,15 +1,15 @@
 import { __decorate, __metadata } from "tslib";
-import { h, Host, } from "@stencil/core";
-import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isSpaceKey } from "../../utils/keyboard";
-import { BEM } from "../../utils/bem";
-import { Logger } from "../../utils/log";
-import { stopEventBubbling } from "../../utils/form-input";
+import { Host, h, } from "@stencil/core";
 import { inheritAttributes } from "../../utils/attributes";
-import { DropdownEventsUtil, DropdownFormSubmitUtil, DropdownOptionUtil, DropdownPopupUtil, DropdownValueUtil, DropdownOptionList, DropdownFocusUtil, DropdownIcon, DropdownNativeSelect, DropdownInput, DropdownValue, DropdownAutoFillUtil, } from "../../utils/dropdown";
+import { BEM } from "../../utils/bem";
+import { balBrowser } from "../../utils/browser";
 import { ListenToConfig, defaultConfig, } from "../../utils/config";
+import { DropdownAutoFillUtil, DropdownEventsUtil, DropdownFocusUtil, DropdownFormSubmitUtil, DropdownIcon, DropdownInput, DropdownNativeSelect, DropdownOptionList, DropdownOptionUtil, DropdownPopupUtil, DropdownValue, DropdownValueUtil, } from "../../utils/dropdown";
 import { defaultBalAriaForm } from "../../utils/form";
+import { stopEventBubbling } from "../../utils/form-input";
 import { addEventListener, removeEventListener, waitAfterIdleCallback } from "../../utils/helpers";
-import { balBrowser } from "../../utils/browser";
+import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isSpaceKey } from "../../utils/keyboard";
+import { Logger } from "../../utils/log";
 export class Dropdown {
     constructor() {
         this.inputId = `bal-dropdown-${balDropdownIds++}`;
@@ -263,7 +263,7 @@ export class Dropdown {
         }
     }
     async componentWillRender() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['tabindex']);
+        this.inheritedAttributes = inheritAttributes(this.el, ['tabindex', 'data-hj-allow']);
         await this.optionUtil.componentWillRender();
     }
     componentDidRender() {
@@ -350,13 +350,13 @@ export class Dropdown {
         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' }))));
     }
     static get is() { return "bal-dropdown"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-footer/bal-footer.css

@@ -1 +1 @@
-: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;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:flex;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:flex;justify-content:space-between;flex-wrap:nowrap;flex-direction:row}.bal-footer__inner__wrapper__header-container__language{display:flex;flex-wrap:nowrap;align-items:center}.bal-footer__inner__wrapper__header-container__language__wrapper{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:flex;align-items:center}.bal-footer__inner__wrapper__links-container{display:flex;justify-content:space-between;flex-wrap:wrap}@media screen and (min-width: 769px),print{.bal-footer__inner__wrapper__links-container{flex-direction:column}}@media screen and (min-width: 1024px){.bal-footer__inner__wrapper__links-container{flex-direction:row}}.bal-footer__inner__wrapper__links-container__legal-links{display:flex;flex-wrap:wrap;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{flex-direction:column;justify-content:center;width:100%;gap:var(--bal-space-normal)}}.bal-footer__inner__wrapper__links-container__social-media-links{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);justify-content:center;width:100%;padding:var(--bal-space-normal) 0 var(--bal-space-normal) 0}}
+: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;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:flex;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:flex;justify-content:space-between;flex-wrap:nowrap;flex-direction:row}.bal-footer__inner__wrapper__header-container__language{display:flex;flex-wrap:nowrap;align-items:center}.bal-footer__inner__wrapper__header-container__language__wrapper{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:flex;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:flex;justify-content:space-between;flex-wrap:wrap}@media screen and (min-width: 769px),print{.bal-footer__inner__wrapper__links-container{flex-direction:column}}@media screen and (min-width: 1024px){.bal-footer__inner__wrapper__links-container{flex-direction:row}}.bal-footer__inner__wrapper__links-container__legal-links{display:flex;flex-wrap:wrap;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{flex-direction:column;justify-content:center;width:100%;gap:var(--bal-space-normal)}}.bal-footer__inner__wrapper__links-container__social-media-links{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);justify-content:center;width:100%;padding:var(--bal-space-normal) 0 var(--bal-space-normal) 0}}

package/dist/collection/components/bal-footer/bal-footer.js

@@ -1,13 +1,15 @@
 import { __decorate, __metadata } from "tslib";
 import { Language, loadFooterLinks, loadSocialMediaLinks } from "@baloise/web-app-utils";
-import { Host, h } from "@stencil/core";
-import { defaultConfig, ListenToConfig, updateBalLanguage, } from "../../utils/config";
+import { h, Host } from "@stencil/core";
 import { BEM } from "../../utils/bem";
-import { Logger } from "../../utils/log";
+import { defaultConfig, ListenToConfig, updateBalLanguage, } from "../../utils/config";
 import { rIC } from "../../utils/helpers";
+import { Logger } from "../../utils/log";
+import { sanitizeSvg } from "../../utils/svg";
 import { i18nBalFooter } from "./bal-footer.i18n";
 export class Footer {
     constructor() {
+        this.logoSvgContent = '';
         this.links = [];
         this.socialMediaLinks = [];
         this.language = defaultConfig.language;
@@ -17,6 +19,14 @@ export class Footer {
          * 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.
          */
@@ -37,6 +47,10 @@ export class Footer {
     createLogger(log) {
         this.log = log;
     }
+    logoSvgChanged() {
+        this.logoSvgContent = sanitizeSvg(this.logoSvg);
+        console.log('SVG content updated:', this.logoSvgContent);
+    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
@@ -44,6 +58,7 @@ export class Footer {
     connectedCallback() {
         this.updateFooterLinks();
         this.updateSocialMediaLinks();
+        this.logoSvgChanged();
     }
     /**
      * LISTENERS
@@ -106,14 +121,14 @@ export class Footer {
         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: '0f28887c73645c037cbd7037c81f48aaf56a24b6', class: Object.assign({}, block.class()) }, h("footer", { key: 'e20ddb6f42be2b77cd11e4645df009d885fa0a9a', class: Object.assign({}, elInner.class()) }, h("div", { key: '8c1813f2faeca425f322c50598e6c296aa999af9', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: '31edd56ff2c1c7d37ed9896d319908736ccb62bb', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: '909ad494a1d0325dc4c58ed7c3ac36039e7ff964', 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: '8046b0219db8c586acd80614aafbcb2d6d2c306b', 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: 'd0696f7722e7f608120a68fabbbcf5a63194992c', class: Object.assign({}, elWrapper.class()) }, h("bal-icon", { key: '1f4b3fe0976c592ad7d1291950050f75e1e42a44', class: Object.assign({}, elWrapper.element('icon').class()), name: "web", color: "white" }), h("select", { key: 'd864fb1f49e1adb815f3065ff3eac2a0ac48698d', class: Object.assign({}, elWrapper.element('select').class()), onChange: event => this.changeLanguage(event.target.value), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("option", { key: language, value: language, selected: language === this.language }, language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name))))))), h("div", { key: '60f23f4422055ec4a5c2f5ec813837dd18ce4913', class: Object.assign({}, elSlot.class()) }, h("slot", { key: '4d4de8f40a1465304977baafb8ddf3d8dcffc8e3' })), h("div", { key: 'd50ec236e3bc2ff9bffd8e2fada22e8830112f6b', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: 'ea8154f9cb85418017c0e8189c5a1ba4d0de8756', 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: '737e60a24473de1ef2d07651bbb88bf72896b958', 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,
@@ -132,6 +147,46 @@ export class Footer {
     }
     static get properties() {
         return {
+            "logoHref": {
+                "type": "string",
+                "attribute": "logo-href",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image address for the logo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "logoSvg": {
+                "type": "string",
+                "attribute": "logo-svg",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Svg content for the logo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "hideLinks": {
                 "type": "boolean",
                 "attribute": "hide-links",
@@ -221,6 +276,7 @@ export class Footer {
     }
     static get states() {
         return {
+            "logoSvgContent": {},
             "links": {},
             "socialMediaLinks": {},
             "language": {},
@@ -261,6 +317,12 @@ export class Footer {
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "logoSvg",
+                "methodName": "logoSvgChanged"
+            }];
+    }
 }
 __decorate([
     Logger('bal-footer'),

package/dist/collection/components/bal-form/bal-form.js

@@ -32,7 +32,7 @@ export class Form {
                 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' }))));
     }
     static get is() { return "bal-form"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-form-grid/bal-form-col/bal-form-col.js

@@ -5,7 +5,7 @@ export class FormCol {
         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,
@@ -15,7 +15,7 @@ export class FormCol {
                 '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' })));
     }
     static get is() { return "bal-form-col"; }
     static get properties() {

package/dist/collection/components/bal-form-grid/bal-form-grid.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class FormGrid {
     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 is() { return "bal-form-grid"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-heading/bal-heading.js

@@ -100,7 +100,7 @@ export class Heading {
         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' }))));
     }
     static get is() { return "bal-heading"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-hint/bal-hint-text/bal-hint-text.js

@@ -6,7 +6,7 @@ export class HintText {
         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' }))));
     }
     static get is() { return "bal-hint-text"; }
 }

package/dist/collection/components/bal-hint/bal-hint-title/bal-hint-title.js

@@ -6,7 +6,7 @@ export class HintTitle {
         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' })))));
     }
     static get is() { return "bal-hint-title"; }
 }

package/dist/collection/components/bal-hint/bal-hint.css

@@ -1 +1 @@
-@media(hover: hover)and (pointer: fine){.bal-hint__icon:focus-visible:not(:active){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{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:flex;gap:1.5rem;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{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}
+@media(hover: hover)and (pointer: fine){.bal-hint__icon:focus-visible:not(:active){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{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:flex;gap:1.5rem;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{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}

package/dist/collection/components/bal-hint/bal-hint.js

@@ -121,7 +121,7 @@ export class Hint {
             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))));
     }