@baloise/ds-core 19.3.0 → 19.4.0

package/components/bal-date-calendar2.js

@@ -1,17 +1,17 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { l as lodash_padstart } from './index5.js';
-import { l as lodash_isnil } from './index3.js';
+import { p as padStart } from './index3.js';
+import { i as isNil } from './index2.js';
 import { B as BalDate } from './date.js';
 import { L as Logger } from './log.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
 import { b as waitAfterFramePaint } from './helpers.js';
 import { B as BEM } from './bem.js';
+import { L as ListenToSwipe } from './swipe.decorator.js';
 import { i as i18nBalDate } from './bal-date.i18n.js';
 import { d as defineCustomElement$2 } from './bal-date-calendar-cell2.js';
 import { d as defineCustomElement$1 } from './bal-icon2.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
-import { L as ListenToSwipe } from './swipe.decorator.js';
 
 // Function to get the number of days in a month
 function getDaysInMonth(year, month) {
@@ -21,11 +21,11 @@ function getDaysInMonth(year, month) {
     return new Date(year, month, 0).getDate();
 }
 function isoDateOfDay(day, month, year) {
-    return `${year}-${lodash_padstart(`${month}`, 2, '0')}-${lodash_padstart(`${day}`, 2, '0')}`;
+    return `${year}-${padStart(`${month}`, 2, '0')}-${padStart(`${day}`, 2, '0')}`;
 }
 function isoDateOfToday() {
     const today = new Date();
-    return `${today.getFullYear()}-${lodash_padstart(`${today.getMonth() + 1}`, 2, '0')}-${lodash_padstart(`${today.getDate()}`, 2, '0')}`;
+    return `${today.getFullYear()}-${padStart(`${today.getMonth() + 1}`, 2, '0')}-${padStart(`${today.getDate()}`, 2, '0')}`;
 }
 // Function to generate the calendar grid
 function generateCalendarGrid(year, month, min, max, allowedDates) {
@@ -40,7 +40,7 @@ function generateCalendarGrid(year, month, min, max, allowedDates) {
         const dateMin = BalDate.fromISO(min);
         const dateMax = BalDate.fromISO(max);
         const allowedDate = (isoDate) => {
-            if (lodash_isnil(allowedDates)) {
+            if (isNil(allowedDates)) {
                 return false;
             }
             return !allowedDates(isoDate);
@@ -201,7 +201,6 @@ const CalendarNav = ({ language, onClickSelectMonthAndYear, monthFullNames, mont
 };
 
 const balDateCalendarCss = ":host{--bal-date-first-week-day:0;--bal-date-calendar-background:var(--bal-color-red-3)}:host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;background:var(--bal-color-white);border-radius:var(--bal-radius-normal)}.bal-date-calendar__nav{display:-ms-flexbox;display:flex;width:calc(100% - 1rem);-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;padding:.5rem;gap:.5rem}.bal-date-calendar__nav--start>button{display:-ms-flexbox;display:flex;gap:.5rem}.bal-date-calendar__nav--end{display:-ms-flexbox;display:flex;gap:.5rem}.bal-date-calendar__nav button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-color-text-primary);border:none;background:rgba(0,0,0,0);text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;min-height:2rem;min-width:2rem;padding:.25rem;border-radius:var(--bal-button-radius);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__nav button:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):hover{background:var(--bal-color-light-blue-1)}}.bal-date-calendar__nav button:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):active{background:var(--bal-color-light-blue-2)}.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled){color:var(--bal-color-light-blue-3);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):hover{color:var(--bal-color-text-primary)}}.bal-date-calendar__nav button--today:not(.bal-date-calendar__nav button--selected):not(.bal-date-calendar__nav button--disabled):active{color:var(--bal-color-text-primary)}.bal-date-calendar__nav button--selected{background:var(--bal-color-primary);color:var(--bal-color-text-white);font-weight:var(--bal-font-weight-bold)}.bal-date-calendar__nav button--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}.bal-date-calendar__body{display:block}.bal-date-calendar__body__grid{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:.5rem;height:0;padding-top:0;padding-bottom:0;visibility:hidden}.bal-date-calendar__body__grid--visible{height:auto;padding-top:.5rem;padding-bottom:.5rem;visibility:visible}.bal-date-calendar__body__grid__head{position:relative;display:grid;grid-template-columns:repeat(7, 1fr);-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-date-calendar__body__grid__head::after{position:absolute;content:\"\";height:2px;width:calc(100% + 1rem);bottom:0;left:-0.5rem;right:-0.5rem;background:var(--bal-color-border)}.bal-date-calendar__body__grid__head span{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:2rem;width:2rem;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;text-wrap:nowrap}.bal-date-calendar__body__grid__body{display:grid;grid-template-columns:repeat(7, 1fr);-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding-top:.5rem}.bal-date-calendar__body__grid__body>.bal-date-calendar-cell{width:2rem;height:2rem;text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-date-calendar__body__grid__body>.bal-date-calendar-cell:first-child{grid-column:var(--bal-date-first-week-day)}.bal-date-calendar__body__list{display:none;list-style:none;margin:0;padding:0;-webkit-column-gap:.5rem;-moz-column-gap:.5rem;column-gap:.5rem;row-gap:.5rem;width:calc(100% - 1rem);overflow-y:auto;max-height:18rem;position:relative;padding:.5rem;border-top:2px solid var(--bal-color-border)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-color-text-primary);border:none;background:rgba(0,0,0,0);text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;width:100%}@media (hover: hover)and (pointer: fine){.bal-date-calendar__body__list .bal-date-calendar__body__list__item:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):hover{background:var(--bal-color-light-blue-1)}}.bal-date-calendar__body__list .bal-date-calendar__body__list__item:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):active{background:var(--bal-color-light-blue-2)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled){color:var(--bal-color-light-blue-3);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):hover{color:var(--bal-color-text-primary)}}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--today:not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected):not(.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled):active{color:var(--bal-color-text-primary)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--selected{background:var(--bal-color-primary);color:var(--bal-color-text-white);font-weight:var(--bal-font-weight-bold)}.bal-date-calendar__body__list .bal-date-calendar__body__list__item--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}.bal-date-calendar__body__list--visible{display:grid}.bal-date-calendar__body__list--year{grid-template-columns:repeat(4, 1fr)}.bal-date-calendar__body__list--month{grid-template-columns:repeat(2, 1fr)}.bal-date-calendar-cell{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;border-radius:var(--bal-radius-normal);font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-color-text-primary);border:none;background:rgba(0,0,0,0);text-align:center;font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;outline:none;width:2rem;height:2rem}@media (hover: hover)and (pointer: fine){.bal-date-calendar-cell:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):hover{background:var(--bal-color-light-blue-1)}}.bal-date-calendar-cell:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):active{background:var(--bal-color-light-blue-2)}.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled){color:var(--bal-color-light-blue-3);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):hover{color:var(--bal-color-text-primary)}}.bal-date-calendar-cell--today:not(.bal-date-calendar-cell--selected):not(.bal-date-calendar-cell--disabled):active{color:var(--bal-color-text-primary)}.bal-date-calendar-cell--selected{background:var(--bal-color-primary);color:var(--bal-color-text-white);font-weight:var(--bal-font-weight-bold)}.bal-date-calendar-cell--disabled{cursor:default;background:rgba(0,0,0,0);color:var(--bal-color-text-grey-light)}";
-const BalDateCalendarStyle0 = balDateCalendarCss;
 
 const DateCalendar = /*@__PURE__*/ proxyCustomElement(class DateCalendar extends HTMLElement {
     constructor() {
@@ -211,6 +210,23 @@ const DateCalendar = /*@__PURE__*/ proxyCustomElement(class DateCalendar extends
         this.balChange = createEvent(this, "balChange", 7);
         this.oldMin = '';
         this.oldMax = '';
+        this.selectedDate = '';
+        this.monthFullNames = [];
+        this.weekdays = [];
+        this.months = [];
+        this.years = [];
+        this.calendarGrid = [];
+        this.firstDayOfWeek = 0;
+        this.month = 0;
+        this.year = 0;
+        this.language = defaultConfig.language;
+        this.isCalendarVisible = true;
+        this.isYearListVisible = false;
+        this.isMonthListVisible = false;
+        /**
+         * Callback to determine which date in the datepicker should be selectable.
+         */
+        this.allowedDates = undefined;
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -273,26 +289,6 @@ const DateCalendar = /*@__PURE__*/ proxyCustomElement(class DateCalendar extends
             this.isCalendarVisible = true;
             this.generateGridByMonthAndYear(newMonth, this.year);
         };
-        this.selectedDate = '';
-        this.monthFullNames = [];
-        this.weekdays = [];
-        this.months = [];
-        this.years = [];
-        this.calendarGrid = [];
-        this.firstDayOfWeek = 0;
-        this.month = 0;
-        this.year = 0;
-        this.language = defaultConfig.language;
-        this.isCalendarVisible = true;
-        this.isYearListVisible = false;
-        this.isMonthListVisible = false;
-        this.value = undefined;
-        this.defaultDate = undefined;
-        this.allowedDates = undefined;
-        this.min = undefined;
-        this.max = undefined;
-        this.minYearProp = undefined;
-        this.maxYearProp = undefined;
     }
     createLogger(log) {
         this.log = log;
@@ -447,11 +443,11 @@ const DateCalendar = /*@__PURE__*/ proxyCustomElement(class DateCalendar extends
         "minYearProp": ["yearRangePropChanged"],
         "maxYearProp": ["yearRangePropChanged"]
     }; }
-    static get style() { return BalDateCalendarStyle0; }
+    static get style() { return balDateCalendarCss; }
 }, [1, "bal-date-calendar", {
         "value": [1],
         "defaultDate": [1, "default-date"],
-        "allowedDates": [16],
+        "allowedDates": [16, "allowed-dates"],
         "min": [1025],
         "max": [1025],
         "minYearProp": [2, "min-year"],

package/components/bal-date.js

@@ -5,11 +5,15 @@ import { a as ariaBooleanToString } from './aria.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
 import { b as balBrowser } from './browser.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
+import { B as BalDate$1 } from './date.js';
 import { b as balFloatingUi } from './floating-ui.js';
 import { F as FOCUS_KEYS } from './focus-visible.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { p as rIC, o as debounceEvent, l as addEventListener, r as removeEventListener, e as waitAfterIdleCallback } from './helpers.js';
+import { m as rIC, k as debounceEvent, p as addEventListener, q as removeEventListener, e as waitAfterIdleCallback } from './helpers.js';
+import { a as isSpaceKey } from './keyboard.helpers.js';
 import { L as Logger } from './log.js';
 import { i as i18nBalDate } from './bal-date.i18n.js';
 import { d as defineCustomElement$6 } from './bal-date-calendar2.js';
@@ -17,13 +21,8 @@ import { d as defineCustomElement$5 } from './bal-date-calendar-cell2.js';
 import { d as defineCustomElement$4 } from './bal-icon2.js';
 import { d as defineCustomElement$3 } from './bal-input-date2.js';
 import { d as defineCustomElement$2 } from './bal-input-group2.js';
-import { B as BalDate$1 } from './date.js';
-import { a as isSpaceKey } from './keyboard.helpers.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
 
 const balDateCss = ":root{--bal-date-popup-z-index:var(--bal-z-index-tooltip);--bal-date-popup-shadow:var(--bal-shadow-normal);--bal-date-popup-radius:var(--bal-radius-normal)}:root{--bal-z-index-tooltip:1300}.bal-date{display:block;font-family:var(--bal-font-family-text);width:100%}.bal-date__icon--clickable{cursor:pointer}.bal-date__popup{display:none;width:-webkit-max-content;width:-moz-max-content;width:max-content;position:absolute;top:0;left:0;z-index:var(--bal-date-popup-z-index);-webkit-box-shadow:var(--bal-date-popup-shadow);box-shadow:var(--bal-date-popup-shadow);border-radius:var(--bal-date-popup-radius)}.bal-date__popup--visible{display:block}";
-const BalDateStyle0 = balDateCss;
 
 const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
     constructor() {
@@ -39,6 +38,71 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         this.balIconClick = createEvent(this, "balIconClick", 7);
         this.inputId = `bal-da-${dateIds++}`;
         this.inheritedAttributes = {};
+        this.isKeyboardMode = false;
+        this.hasFocus = false;
+        this.isExpanded = false;
+        this.language = defaultConfig.language;
+        this.ariaForm = defaultBalAriaForm;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.invalid = false;
+        /**
+         * If `true` the attribute required is added to the native input.
+         */
+        this.required = false;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        this.disabled = false;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        this.readonly = false;
+        /**
+         * If `true` there will be no trigger icon visible, so no UX indicator for a picker
+         */
+        this.freeSolo = false;
+        /**
+         * If `true` the datepicker only open on click of the icon
+         */
+        this.triggerIcon = false;
+        /**
+         * Closes the datepicker popover after selection
+         */
+        this.closeOnSelect = true;
+        /**
+         * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        this.autocomplete = 'off';
+        /**
+         * The value of the form field, which accepts ISO 8601 date strings (YYYY-MM-DD).
+         */
+        this.value = undefined;
+        /**
+         * Callback to determine which date in the datepicker should be selectable.
+         */
+        this.allowedDates = undefined;
+        /**
+         * If `true`, it returns the string `INVALID_VALUE` within the balChange event if the input provided is not valid.
+         */
+        this.allowInvalidValue = false;
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
+         */
+        this.debounce = 0;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
         /**
          * LIFECYCLE
          * ------------------------------------------------------
@@ -131,32 +195,6 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
                 }
             }
         };
-        this.isKeyboardMode = false;
-        this.hasFocus = false;
-        this.isExpanded = false;
-        this.language = defaultConfig.language;
-        this.calendarValue = undefined;
-        this.ariaForm = defaultBalAriaForm;
-        this.name = this.inputId;
-        this.invalid = false;
-        this.required = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.freeSolo = false;
-        this.placeholder = undefined;
-        this.triggerIcon = false;
-        this.closeOnSelect = true;
-        this.autocomplete = 'off';
-        this.value = undefined;
-        this.min = undefined;
-        this.max = undefined;
-        this.minYearProp = undefined;
-        this.maxYearProp = undefined;
-        this.defaultDate = undefined;
-        this.allowedDates = undefined;
-        this.allowInvalidValue = false;
-        this.debounce = 0;
-        this.autoInvalidOff = false;
     }
     createLogger(log) {
         this.log = log;
@@ -320,7 +358,7 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         "value": ["valueChanged"],
         "debounce": ["debounceChanged"]
     }; }
-    static get style() { return BalDateStyle0; }
+    static get style() { return balDateCss; }
 }, [0, "bal-date", {
         "name": [1],
         "invalid": [4],
@@ -338,7 +376,7 @@ const Date = /*@__PURE__*/ proxyCustomElement(class Date extends HTMLElement {
         "minYearProp": [2, "min-year"],
         "maxYearProp": [2, "max-year"],
         "defaultDate": [1, "default-date"],
-        "allowedDates": [16],
+        "allowedDates": [16, "allowed-dates"],
         "allowInvalidValue": [4, "allow-invalid-value"],
         "debounce": [2],
         "autoInvalidOff": [516, "auto-invalid-off"],

package/components/bal-divider.js

@@ -4,15 +4,31 @@ import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 
 const balDividerCss = ":root{--bal-divider-border-width:var(--bal-border-width-normal);--bal-divider-background-primary:var(--bal-color-border-primary);--bal-divider-background-primary-light:var(--bal-color-border-primary-light);--bal-divider-background-primary-dark:var(--bal-color-border-primary-pressed);--bal-divider-background-grey-light:var(--bal-color-border-divider);--bal-divider-background-grey:var(--bal-color-border);--bal-divider-background-grey-dark:var(--bal-color-border-grey-dark);--bal-divider-background-warning:var(--bal-color-border-warning);--bal-divider-background-success:var(--bal-color-border-success);--bal-divider-background-danger:var(--bal-color-border-danger);--bal-divider-background-danger-dark:var(--bal-color-border-danger-hovered);--bal-divider-background-danger-darker:var(--bal-color-border-danger-pressed);--bal-divider-background-white:var(--bal-color-border-inverted);--bal-divider-background-light-blue:var(--bal-color-border-primary-hovered);--bal-divider-radius:var(--bal-radius-rounded)}.bal-divider{margin:0;display:block;border-radius:var(--bal-divider-radius)}.bal-divider--color-primary{background:var(--bal-divider-background-primary)}.bal-divider--color-primary-light{background:var(--bal-divider-background-primary-light)}.bal-divider--color-primary-dark{background:var(--bal-divider-background-primary-dark)}.bal-divider--color-grey-light{background:var(--bal-divider-background-grey-light)}.bal-divider--color-grey{background:var(--bal-divider-background-grey)}.bal-divider--color-grey-dark{background:var(--bal-divider-background-grey-dark)}.bal-divider--color-warning{background:var(--bal-divider-background-warning)}.bal-divider--color-success{background:var(--bal-divider-background-success)}.bal-divider--color-danger{background:var(--bal-divider-background-danger)}.bal-divider--color-danger-dark{background:var(--bal-divider-background-danger-dark)}.bal-divider--color-danger-darker{background:var(--bal-divider-background-danger-darker)}.bal-divider--color-white{background:var(--bal-divider-background-white)}.bal-divider--color-light-blue{background:var(--bal-divider-background-light-blue)}.bal-divider--layout-horizontal{-ms-flex:1 0 100%;flex:1 0 100%;width:100%;min-height:var(--bal-divider-border-width);height:var(--bal-divider-border-width)}.bal-divider--layout-vertical{height:auto;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:stretch;align-self:stretch;width:var(--bal-divider-border-width)}.bal-divider--border-style-dashed.bal-divider--color-primary{background:repeating-linear-gradient(90deg, var(--bal-divider-background-primary) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-primary-light{background:repeating-linear-gradient(90deg, var(--bal-divider-background-primary-light) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-primary-dark{background:repeating-linear-gradient(90deg, var(--bal-divider-background-primary-dark) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-grey-light{background:repeating-linear-gradient(90deg, var(--bal-divider-background-grey-light) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-grey{background:repeating-linear-gradient(90deg, var(--bal-divider-background-grey) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-grey-dark{background:repeating-linear-gradient(90deg, var(--bal-divider-background-grey-dark) 0px, var --bal-divider-background-grey 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-warning{background:repeating-linear-gradient(90deg, var(--bal-divider-background-warning) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-success{background:repeating-linear-gradient(90deg, var(--bal-divider-background-success) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-danger{background:repeating-linear-gradient(90deg, var(--bal-divider-background-danger) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-danger-dark{background:repeating-linear-gradient(90deg, var(--bal-divider-background-danger-dark) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-danger-darker{background:repeating-linear-gradient(90deg, var(--bal-divider-background-danger-darker) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-white{background:repeating-linear-gradient(90deg, var(--bal-divider-background-white) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-light-blue{background:repeating-linear-gradient(90deg, var(--bal-divider-background-light-blue) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--space-none{margin:0}.bal-divider--space-xx-small{margin:var(--bal-space-xx-small) 0}@media screen and (min-width: 769px),print{.bal-divider--space-xx-small{margin:var(--bal-space-xx-small-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-xx-small{margin:var(--bal-space-xx-small-desktop) 0}}.bal-divider--space-x-small{margin:var(--bal-space-x-small) 0}@media screen and (min-width: 769px),print{.bal-divider--space-x-small{margin:var(--bal-space-x-small-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-x-small{margin:var(--bal-space-x-small-desktop) 0}}.bal-divider--space-small{margin:var(--bal-space-small) 0}@media screen and (min-width: 769px),print{.bal-divider--space-small{margin:var(--bal-space-small-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-small{margin:var(--bal-space-small-desktop) 0}}.bal-divider--space-normal{margin:var(--bal-space-normal) 0}@media screen and (min-width: 769px),print{.bal-divider--space-normal{margin:var(--bal-space-normal-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-normal{margin:var(--bal-space-normal-desktop) 0}}.bal-divider--space-medium{margin:var(--bal-space-medium) 0}@media screen and (min-width: 769px),print{.bal-divider--space-medium{margin:var(--bal-space-medium-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-medium{margin:var(--bal-space-medium-desktop) 0}}.bal-divider--space-large{margin:var(--bal-space-large) 0}@media screen and (min-width: 769px),print{.bal-divider--space-large{margin:var(--bal-space-large-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-large{margin:var(--bal-space-large-desktop) 0}}.bal-divider--space-x-large{margin:var(--bal-space-x-large) 0}@media screen and (min-width: 769px),print{.bal-divider--space-x-large{margin:var(--bal-space-x-large-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-x-large{margin:var(--bal-space-x-large-desktop) 0}}.bal-divider--space-xx-large{margin:var(--bal-space-xx-large) 0}@media screen and (min-width: 769px),print{.bal-divider--space-xx-large{margin:var(--bal-space-xx-large-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-xx-large{margin:var(--bal-space-xx-large-desktop) 0}}.bal-divider--space-xxx-large{margin:var(--bal-space-xxx-large) 0}@media screen and (min-width: 769px),print{.bal-divider--space-xxx-large{margin:var(--bal-space-xxx-large-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-xxx-large{margin:var(--bal-space-xxx-large-desktop) 0}}.bal-divider--layout-vertical.bal-divider--space-none{margin:0}.bal-divider--layout-vertical.bal-divider--space-xx-small{margin:0 var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-xx-small{margin:0 var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-xx-small{margin:0 var(--bal-space-xx-small-desktop)}}.bal-divider--layout-vertical.bal-divider--space-x-small{margin:0 var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-x-small{margin:0 var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-x-small{margin:0 var(--bal-space-x-small-desktop)}}.bal-divider--layout-vertical.bal-divider--space-small{margin:0 var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-small{margin:0 var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-small{margin:0 var(--bal-space-small-desktop)}}.bal-divider--layout-vertical.bal-divider--space-normal{margin:0 var(--bal-space-normal)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-normal{margin:0 var(--bal-space-normal-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-normal{margin:0 var(--bal-space-normal-desktop)}}.bal-divider--layout-vertical.bal-divider--space-medium{margin:0 var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-medium{margin:0 var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-medium{margin:0 var(--bal-space-medium-desktop)}}.bal-divider--layout-vertical.bal-divider--space-large{margin:0 var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-large{margin:0 var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-large{margin:0 var(--bal-space-large-desktop)}}.bal-divider--layout-vertical.bal-divider--space-x-large{margin:0 var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-x-large{margin:0 var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-x-large{margin:0 var(--bal-space-x-large-desktop)}}.bal-divider--layout-vertical.bal-divider--space-xx-large{margin:0 var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-xx-large{margin:0 var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-xx-large{margin:0 var(--bal-space-xx-large-desktop)}}.bal-divider--layout-vertical.bal-divider--space-xxx-large{margin:0 var(--bal-space-xxx-large)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-xxx-large{margin:0 var(--bal-space-xxx-large-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-xxx-large{margin:0 var(--bal-space-xxx-large-desktop)}}";
-const BalDividerStyle0 = balDividerCss;
 
 const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Defines the position of the child elements if they
+         * are showed verticaly or horizontally. Default is verticaly.
+         */
         this.layout = 'horizontal';
+        /**
+         * Defines the space between the child elements. Default is xx-small.
+         */
         this.space = 'none';
+        /**
+         * Defines the color of the separator line.
+         */
         this.color = 'grey';
+        /**
+         * Defines the color of the separator line.
+         */
         this.borderStyle = 'solid';
     }
     createLogger(log) {
@@ -30,7 +46,7 @@ const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLEleme
         const borderStyle = !!this.borderStyle;
         return (h(Host, { key: '60ea4a88825c99f20a5db8a458c4c27ad04d616c', role: "separator", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${this.layout}`).class(layout)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`color-${this.color}`).class(color)), block.modifier(`border-style-${this.borderStyle}`).class(borderStyle)) }, h("slot", { key: '307d340b0c7e0333995fc22030cd4c1794f54136' })));
     }
-    static get style() { return BalDividerStyle0; }
+    static get style() { return balDividerCss; }
 }, [4, "bal-divider", {
         "layout": [1],
         "space": [1],

package/components/bal-dropdown.js

@@ -1,21 +1,21 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { m as rIC, b as waitAfterFramePaint, p as addEventListener, q as removeEventListener, e as waitAfterIdleCallback } from './helpers.js';
+import { b as balBrowser } from './browser.js';
+import { b as isArrowDownKey, c as isArrowUpKey, i as isEnterKey, d as isEscapeKey, a as isSpaceKey } from './keyboard.helpers.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { i as inheritAttributes } from './attributes.js';
-import { d as defaultBalAriaForm } from './form.js';
-import { p as rIC, b as waitAfterFramePaint, l as addEventListener, r as removeEventListener, e as waitAfterIdleCallback } from './helpers.js';
-import { b as balBrowser } from './browser.js';
 import { a as areArraysEqual } from './array.js';
-import { l as lodash_isnil } from './index3.js';
 import { F as FOCUS_KEYS } from './focus-visible.js';
-import { b as balFloatingUi } from './floating-ui.js';
 import { D as DropdownOptionUtil } from './option.js';
-import { c as isArrowDownKey, d as isArrowUpKey, i as isEnterKey, e as isEscapeKey, a as isSpaceKey } from './keyboard.helpers.js';
+import { b as balFloatingUi } from './floating-ui.js';
+import { i as isNil } from './index2.js';
 import { a as ariaBooleanToString } from './aria.js';
 import { d as defaultConfig } from './config.default.js';
 import { L as ListenToConfig } from './config.decorator.js';
+import { d as defaultBalAriaForm } from './form.js';
 
 class DropdownAutoFillUtil {
     constructor() {
@@ -329,9 +329,9 @@ class DropdownValueUtil {
     }
     parseValueString(newValue = []) {
         let newRawValue = [];
-        if (!lodash_isnil(newValue) && newValue !== '') {
+        if (!isNil(newValue) && newValue !== '') {
             if (Array.isArray(newValue)) {
-                newRawValue = [...newValue.filter(v => !lodash_isnil(v))];
+                newRawValue = [...newValue.filter(v => !isNil(v))];
             }
             else {
                 if (newValue.split('').includes(',')) {
@@ -401,7 +401,6 @@ const DropdownInput = ({ inputId, httpFormSubmit, ariaForm, rawValue, autocomple
 };
 
 const balDropdownCss = ":root{--bal-dropdown-control-background:var(--bal-color-white);--bal-dropdown-control-background-hover:var(--bal-form-field-control-background-hover);--bal-dropdown-control-background-invalid:var(--bal-form-field-control-danger-background);--bal-dropdown-control-background-disabled:var(--bal-form-field-control-disabled-background);--bal-dropdown-control-input-background:var(--bal-color-grey-1);--bal-dropdown-control-native-input-background:transparent;--bal-dropdown-control-native-input-background-hover:transparent;--bal-dropdown-control-input-inverted-footer-background:transparent;--bal-dropdown-control-input-inverted-footer-background-hover:transparent;--bal-dropdown-control-input-multiple-background:transparent;--bal-dropdown-control-input-multiple-background-read-only-selection:transparent;--bal-dropdown-control-input-option-background:transparent;--bal-dropdown-control-input-option-background-selected:var(--bal-color-primary-1);--bal-dropdown-control-input-option-background-focused:var(--bal-color-grey-3);--bal-dropdown-control-input-option-background-hover:var(--bal-color-grey-3);--bal-dropdown-control-border-radius:var(--bal-form-field-control-radius);--bal-dropdown-popover-border-color:var(--bal-color-grey-2);--bal-dropdown-control-border-color:var(--bal-form-field-control-border-color);--bal-dropdown-control-border-color-focused:var(--bal-color-primary);--bal-dropdown-control-border-color-hover:var(--bal-form-field-control-border-color-hover);--bal-dropdown-control-border-color-invalid:var(--bal-form-field-control-danger-border-color);--bal-dropdown-control-border-color-disabled:var(--bal-form-field-control-disabled-border-color);--bal-dropdown-control-border-color-focus-within:var(--bal-color-primary);--bal-dropdown-option-border-top-color:var(--bal-color-grey-2);--bal-dropdown-popover-empty-text-color:var(--bal-form-field-control-color);--bal-dropdown-control-text-color:var(--bal-form-field-control-color);--bal-dropdown-control-text-color-focused:var(--bal-color-primary);--bal-dropdown-input-text-color-disabled:var(--bal-form-field-label-disabled-color);--bal-dropdown-control-inverted-footer-native-input-text-color:var(--bal-color-text-white);--bal-dropdown-option-content-label-text-color:var(--bal-form-field-control-color)}.bal-dropdown{display:block;position:relative;-ms-flex:1;flex:1;width:100%}.bal-dropdown__root{border-width:.125rem;border-style:solid;border-color:var(--bal-dropdown-control-border-color);border-radius:var(--bal-dropdown-control-border-radius);background:var(--bal-dropdown-control-background);font-weight:var(--bal-font-weight-regular);font-size:var(--bal-text-size-normal);font-family:var(--bal-font-family-text);color:var(--bal-dropdown-control-text-color);outline:none;-webkit-box-shadow:var(--bal-shadow-none);box-shadow:var(--bal-shadow-none);padding-right:1rem;height:auto;min-height:3rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:-ms-flexbox;display:flex;width:100%;text-align:left;gap:1rem;padding-left:calc(.75em - var(--bal-border-width-normal));padding-right:calc(.75em - var(--bal-border-width-normal));-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.bal-dropdown__root--autofill{background:#faffbd !important;background:light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important}.bal-dropdown__root>span{-ms-flex:1;flex:1;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bal-dropdown__root--focused{border-color:var(--bal-dropdown-control-border-color-focused)}.bal-dropdown__root--invalid{border-color:var(--bal-dropdown-control-border-color-invalid);background:var(--bal-dropdown-control-background-invalid)}.bal-dropdown__root--disabled{border-color:var(--bal-dropdown-control-border-color-disabled);background:var(--bal-dropdown-control-background-disabled)}.bal-dropdown__root__content--placeholder{color:var(--bal-form-field-control-placeholder-color)}.bal-dropdown__root__content--disabled{color:var(--bal-dropdown-input-text-color-disabled)}@media (hover: hover)and (pointer: fine){.bal-dropdown__root:not(.bal-dropdown__root--disabled):not(.bal-dropdown__root--invalid):not(.bal-dropdown__root--theme-purple):not(.bal-dropdown__root--theme-purple-expanded):hover{background:var(--bal-dropdown-control-background-hover)}}.bal-dropdown__root__content__chips{--bal-tag-size-small-font-size:var(--bal-text-size-normal);display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--bal-space-xx-small);padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-x-small)}.bal-dropdown__root__content__chips>bal-tag{z-index:1}.bal-dropdown__root__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:rgba(0,0,0,0);position:absolute;right:var(--bal-border-width-normal);left:var(--bal-border-width-normal);top:var(--bal-border-width-normal);bottom:var(--bal-border-width-normal);opacity:0;padding-left:calc(.75em - var(--bal-border-width-normal));padding-right:calc(.75em - var(--bal-border-width-normal));cursor:pointer}.bal-dropdown__root__input:disabled{cursor:default}.bal-dropdown__root__input:-webkit-autofill{opacity:1}.bal-dropdown__root__input:autofill{opacity:1}.bal-dropdown__root__input:-internal-autofill-selected{opacity:0}.bal-dropdown__root__select{position:absolute !important;left:0;top:0;margin:0;padding:0;opacity:0;outline:0;border:none;width:1px;height:1px;clip:rect(1px, 1px, 1px, 1px);overflow:hidden}.bal-dropdown__root--autofill .bal-dropdown__root__input{opacity:0}.bal-dropdown__list{display:none;visibility:hidden;opacity:0;width:100vw;position:absolute;top:0;left:0;will-change:left,top,opacity;background:var(--bal-color-white);border-radius:var(--bal-radius-normal);-webkit-box-shadow:var(--bal-shadow-normal);box-shadow:var(--bal-shadow-normal);z-index:var(--bal-z-index-popup)}@media screen and (min-width: 769px),print{.bal-dropdown__list{max-width:100vw;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-width:100%}}.bal-dropdown__list--expanded{display:block;visibility:visible;opacity:1}.bal-dropdown__native{bottom:0;left:0;position:absolute;opacity:0;pointer-events:none;width:100%}.bal-dropdown__clear{background:rgba(0,0,0,0);border:none;padding:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer}.bal-dropdown__clear--theme-purple{height:2rem;width:2rem;border-top-right-radius:2px;border-bottom-right-radius:2px;margin-right:-10px}.bal-dropdown__clear--theme-purple::before{content:\"\";position:absolute;right:32px;background:var(--bal-color-white);width:2px;height:100%}.bal-dropdown__rear{z-index:1}.bal-dropdown__root--size-small{min-height:2rem}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--disabled) .bal-dropdown__root__content--placeholder{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded){border:none;background:var(--bal-color-background-grey-light)}@media (hover: hover)and (pointer: fine){.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover{background:var(--bal-color-purple-1)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner circle{fill:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active{background:var(--bal-color-purple-2)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner g,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner path,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded){border:none;background:var(--bal-color-purple-2)}@media (hover: hover)and (pointer: fine){.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover{background:var(--bal-color-purple-3)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__content{color:var(--bal-color-text-primary-pressed)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):hover .bal-icon__inner circle{fill:var(--bal-color-text-primary-pressed)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active{background:var(--bal-color-purple-3)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner g,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner path,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):not(.bal-dropdown__root--disabled):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}}.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled),.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active{border:none;background:var(--bal-color-purple-2)}.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-dropdown__root__content,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-dropdown__root__content,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled) .bal-icon__inner circle,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):hover .bal-icon__inner circle,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:not(.bal-dropdown__root--disabled):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}.bal-dropdown__root--focused.bal-dropdown__root--theme-purple:before{content:\"\";border-width:var(--bal-border-width-normal);border-style:solid;border-color:var(--bal-focus-shadow);position:absolute;background:rgba(0,0,0,0);border-radius:var(--bal-radius-normal);top:-0.25rem;bottom:-0.25rem;left:-0.25rem;right:-0.25rem}.bal-dropdown__root__content--size-small{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-bold)}.bal-dropdown__clear--theme-purple{height:2rem;width:2rem;border-top-right-radius:2px;border-bottom-right-radius:2px;margin-right:-10px}.bal-dropdown__clear--theme-purple::before{content:\"\";position:absolute;right:32px;background:var(--bal-color-white);width:2px;height:100%}";
-const BalDropdownStyle0 = balDropdownCss;
 
 const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLElement {
     constructor() {
@@ -414,6 +413,19 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         this.inheritedAttributes = {};
         this.initialValue = [];
         this.nativeOptions = [];
+        this.rawOptions = [];
+        this.choices = [];
+        this.rawValue = [];
+        this.hasFocus = false;
+        this.isExpanded = false;
+        this.isAutoFilled = false;
+        this.isKeyboardMode = false;
+        this.inputLabel = '';
+        this.ariaForm = defaultBalAriaForm;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.httpFormSubmit = defaultConfig.httpFormSubmit;
+        this.labelToFocus = '';
         this.valueUtil = new DropdownValueUtil();
         this.eventsUtil = new DropdownEventsUtil();
         this.popupUtil = new DropdownPopupUtil();
@@ -421,6 +433,91 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         this.formSubmitUtil = new DropdownFormSubmitUtil();
         this.focusUtil = new DropdownFocusUtil();
         this.autoFillUtil = new DropdownAutoFillUtil();
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        this.autocomplete = 'off';
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * Defines the placeholder of the component. Only shown when the value is empty
+         */
+        this.placeholder = '';
+        /**
+         * Defines a inline label to be shown before the value
+         */
+        this.inlineLabel = '';
+        /**
+         * If `true` there will be on trigger icon visible
+         */
+        this.icon = 'caret-down';
+        /**
+         * Defines the size of the control.
+         */
+        this.size = '';
+        /**
+         * Defines the color style of the control
+         */
+        this.theme = '';
+        /**
+         * If `true`, the user cannot interact with the option.
+         */
+        this.disabled = false;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the user can select multiple options.
+         */
+        this.multiple = false;
+        /**
+         * If `true`, the selected options are shown as chips
+         */
+        this.chips = false;
+        /**
+         * If `true`, a cross at the end is visible to clear the selection
+         */
+        this.clearable = false;
+        /**
+         * If `true`, the component will be shown as invalid
+         */
+        this.invalid = false;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * Defines if the select is in a loading state.
+         */
+        this.loading = false;
+        /**
+         * Defines the filter logic of the list
+         */
+        this.filter = 'includes';
+        /**
+         * Defines the max height of the list element
+         */
+        this.contentHeight = 262;
+        /**
+         * @internal
+         * Set this to `true` when the component is placed on a dark background.
+         */
+        this.inverted = false;
+        /**
+         * Steps can be passed as a property or through HTML markup.
+         */
+        this.options = [];
+        /**
+         * The value of the selected options.
+         */
+        this.value = [];
         /**
          * LIFECYCLE
          * ------------------------------------------------------
@@ -518,39 +615,6 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
                 }
             }
         };
-        this.rawOptions = [];
-        this.choices = [];
-        this.rawValue = [];
-        this.hasFocus = false;
-        this.isExpanded = false;
-        this.isAutoFilled = false;
-        this.isKeyboardMode = false;
-        this.inputLabel = '';
-        this.ariaForm = defaultBalAriaForm;
-        this.language = defaultConfig.language;
-        this.region = defaultConfig.region;
-        this.httpFormSubmit = defaultConfig.httpFormSubmit;
-        this.labelToFocus = '';
-        this.autocomplete = 'off';
-        this.name = this.inputId;
-        this.placeholder = '';
-        this.inlineLabel = '';
-        this.icon = 'caret-down';
-        this.size = '';
-        this.theme = '';
-        this.disabled = false;
-        this.readonly = false;
-        this.multiple = false;
-        this.chips = false;
-        this.clearable = false;
-        this.invalid = false;
-        this.required = false;
-        this.loading = false;
-        this.filter = 'includes';
-        this.contentHeight = 262;
-        this.inverted = false;
-        this.options = [];
-        this.value = [];
     }
     createLogger(log) {
         this.log = log;
@@ -696,7 +760,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         "options": ["optionChanged"],
         "value": ["valueChanged"]
     }; }
-    static get style() { return BalDropdownStyle0; }
+    static get style() { return balDropdownCss; }
 }, [4, "bal-dropdown", {
         "autocomplete": [1],
         "name": [1],

package/components/bal-field-control.js

@@ -5,9 +5,23 @@ const FieldControl = /*@__PURE__*/ proxyCustomElement(class FieldControl extends
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * @deprecated
+         * Baloise icon for the right side of the input
+         */
         this.iconRight = '';
+        /**
+         * @deprecated
+         * Baloise icon for the left side of the input
+         */
         this.iconLeft = '';
+        /**
+         * If `true` on mobile devices the form control children are aligned verticaly and expanded to the full width
+         */
         this.expandedOnMobile = undefined;
+        /**
+         * If `true` a loading spinner is visible at the end of the input
+         */
         this.loading = false;
     }
     get buildIconLeftTemplate() {

package/components/bal-field-hint.js

@@ -16,8 +16,17 @@ const FieldHint = /*@__PURE__*/ proxyCustomElement(class FieldHint extends HTMLE
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * Text of the inputs label
+         */
         this.subject = '';
+        /**
+         * Text for the close button.
+         */
         this.closeLabel = 'Close';
+        /**
+         * Disables the close button for tablet and desktop
+         */
         this.small = false;
     }
     render() {