@baloise/ds-core 19.3.0-nightly.20250704 → 19.3.0

package/components/bal-navbar-brand.js

@@ -2,14 +2,14 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { _ as __decorate, a as __metadata } from './tslib.es6.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 { w as wait } from './helpers.js';
+import { a as wait } from './helpers.js';
 import { B as BalScrollHandler } from './scroll.js';
 import { d as defineCustomElement$5 } from './bal-button2.js';
 import { d as defineCustomElement$4 } from './bal-icon2.js';
 import { d as defineCustomElement$3 } from './bal-logo2.js';
 import { d as defineCustomElement$2 } from './bal-spinner2.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
 
 const i18nBalNavbarBrand = {
     en: {
@@ -54,38 +54,15 @@ const NavbarBrand = /*@__PURE__*/ proxyCustomElement(class NavbarBrand extends H
         this.bodyScrollHandler = new BalScrollHandler();
         this.language = defaultConfig.language;
         this.isMenuActive = false;
-        /**
-         * Link of the logo / title.
-         */
         this.href = '';
-        /**
-         * If `true` the logo is rendered as a button
-         */
+        this.rel = undefined;
         this.logoClickable = false;
-        /**
-         * Specifies where to display the linked URL.
-         * Only applies when an `href` is provided.
-         */
+        this.logoLabel = undefined;
         this.target = '_self';
-        /**
-         * @deprecated Use interface on bal-navbar instead.
-         * If `true` the navbar does not have a mobil version. Only shows logo and an app title.
-         */
         this.simple = false;
-        /**
-         * Size of the logo SVG
-         */
+        this.logo = undefined;
         this.logoSize = '';
-        /**
-         * Defines if the logo animation should be active
-         */
         this.animated = true;
-        /**
-         * @internal
-         * Defines the type of navbar. App is used for almost every web applications
-         * like the portal app. For our sales funnel we recommend to use the simple navbar.
-         * Meta and main are used for the website.
-         */
         this.interface = 'app';
     }
     connectedCallback() {

package/components/bal-navbar-menu-end.js

@@ -5,12 +5,6 @@ const NavbarMenuEnd = /*@__PURE__*/ proxyCustomElement(class NavbarMenuEnd exten
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * @internal
-         * Defines the type of navbar. App is used for almost every web applications
-         * like the portal app. For our sales funnel we recommend to use the simple navbar.
-         * Meta and main are used for the website.
-         */
         this.interface = 'app';
     }
     render() {

package/components/bal-navbar-menu-start.js

@@ -5,12 +5,6 @@ const NavbarMenuStart = /*@__PURE__*/ proxyCustomElement(class NavbarMenuStart e
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * @internal
-         * Defines the type of navbar. App is used for almost every web applications
-         * like the portal app. For our sales funnel we recommend to use the simple navbar.
-         * Meta and main are used for the website.
-         */
         this.interface = 'app';
     }
     render() {

package/components/bal-navbar-menu.js

@@ -11,12 +11,6 @@ const NavbarMenu = /*@__PURE__*/ proxyCustomElement(class NavbarMenu extends HTM
         this.__registerHost();
         this.isMenuActive = false;
         this.isTouch = balBreakpoints.isTouch;
-        /**
-         * @internal
-         * Defines the type of navbar. App is used for almost every web applications
-         * like the portal app. For our sales funnel we recommend to use the simple navbar.
-         * Meta and main are used for the website.
-         */
         this.interface = 'app';
     }
     breakpointListener(breakpoints) {

package/components/bal-navbar.js

@@ -2,24 +2,14 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { B as BEM } from './bem.js';
 
 const balNavbarCss = ":root{--bal-navbar-background:var(--bal-color-primary);--bal-navbar-light-background:var(--bal-color-white);--bal-navbar-active-menu-background:var(--bal-color-white);--bal-navbar-height:4rem;--bal-navbar-height-desktop:5rem;--bal-navbar-brand-title-text-color:var(--bal-color-text-white);--bal-navbar-brand-title-font-size:var(--bal-text-size-medium);--bal-navbar-brand-title-light-text-color:var(--bal-color-text-primary);--bal-navbar-brand-text-color:var(--bal-color-text-white);--bal-navbar-brand-logo-link-color:var(--bal-color-text-white)}.bal-navbar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block}.bal-navbar--context-app:not(.bal-navbar--is-light),.bal-navbar--context-simple:not(.bal-navbar--is-light){background:var(--bal-navbar-background)}.bal-navbar--context-app,.bal-navbar--context-simple{height:var(--bal-navbar-height);max-height:var(--bal-navbar-height)}@media screen and (min-width: 1024px){.bal-navbar--context-app,.bal-navbar--context-simple{height:var(--bal-navbar-height-desktop);max-height:var(--bal-navbar-height-desktop)}}.bal-navbar__nav{display:-ms-flexbox;display:flex;height:100%;gap:1rem}.bal-navbar__brand{-ms-flex:1;flex:1;gap:2rem;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}@media screen and (min-width: 1024px){.bal-navbar__brand{-ms-flex:initial;flex:initial}}.bal-navbar__brand>a{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%}.bal-navbar__brand__logo{height:calc(100% - 1rem);-o-object-fit:contain;object-fit:contain}@media screen and (min-width: 1024px){.bal-navbar__brand__logo{height:calc(100% - 2rem)}}.bal-navbar__brand__title{display:none;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-navbar__brand__title>bal-logo{display:none}@media screen and (min-width: 769px),print{.bal-navbar__brand__title{display:inline-block;font-size:var(--bal-navbar-brand-title-font-size);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);color:var(--bal-navbar-brand-title-text-color)}}@media screen and (min-width: 1024px){.bal-navbar__brand__title{font-size:var(--bal-navbar-brand-title-font-size)}}.bal-navbar__brand--context-app,.bal-navbar__brand--context-simple{color:var(--bal-navbar-brand-text-color)}.bal-navbar__brand--context-app>a,.bal-navbar__brand--context-simple>a{color:var(--bal-navbar-brand-logo-link-color)}.bal-navbar__menu{position:static;display:none;z-index:var(--bal-z-index-navigation)}@media screen and (max-width: 1023px){.bal-navbar__menu--active{position:fixed !important;display:block;background:var(--bal-navbar-active-menu-background)}}@media screen and (max-width: 1023px){.bal-navbar__menu--context-app{padding-top:1rem;padding-bottom:1rem;overflow-y:auto;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:4rem;left:0;bottom:0;right:0}}@media screen and (min-width: 1024px){.bal-navbar__menu{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;gap:1rem;padding-right:0 !important}}.bal-navbar__menu--context-simple{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex:1;flex:1;gap:1rem}.bal-navbar__menu__start{display:block;margin-bottom:1rem}@media screen and (min-width: 1024px){.bal-navbar__menu__start{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:.5rem;margin-bottom:0}}.bal-navbar__menu__start--context-simple{display:none}.bal-navbar__menu__start--context-meta{-ms-flex-pack:start;justify-content:flex-start}.bal-navbar__menu__end{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;gap:.5rem}.bal-navbar__menu__end .button-label{word-break:keep-all !important}.bal-navbar__menu__end .bal-button-group{width:100%}@media screen and (max-width: 1023px){.bal-navbar__menu__end .bal-button-group{margin-top:2rem}}.bal-navbar__menu__end--context-simple>.field{-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}.bal-navbar__menu__end>.field{-ms-flex:1;flex:1}@media screen and (min-width: 1024px){.bal-navbar__menu__end>.field{-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}}.bal-navbar--is-light{background-color:var(--bal-navbar-light-background);-webkit-box-shadow:var(--bal-shadow-normal);box-shadow:var(--bal-shadow-normal)}.bal-navbar--is-light .bal-navbar__brand__title{color:var(--bal-navbar-brand-title-light-text-color)}.bal-navbar--is-light bal-logo svg svg,.bal-navbar--is-light bal-logo svg g,.bal-navbar--is-light bal-logo svg path,.bal-navbar--is-light bal-logo svg circle{fill:var(--bal-color-primary)}.bal-navbar__brand__burger.bal-button{margin-left:auto}@media screen and (min-width: 1024px){.bal-navbar__brand__burger.bal-button{display:none}}.bal-navbar__brand__burger--hidden.bal-button{display:none !important}";
+const BalNavbarStyle0 = balNavbarCss;
 
 const Navbar = /*@__PURE__*/ proxyCustomElement(class Navbar extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * It `true` the navbar has a white background. Always use the blue header.
-         */
         this.light = false;
-        /**
-         * Defines the type of navbar. App is used for almost every web applications
-         * like the portal app. For our sales funnel we recommend to use the simple navbar.
-         * Meta and main are used for the website.
-         */
         this.interface = 'app';
-        /**
-         * Sets the content content width with the regular container classes
-         */
         this.container = '';
     }
     interfaceHandler() {
@@ -46,7 +36,7 @@ const Navbar = /*@__PURE__*/ proxyCustomElement(class Navbar extends HTMLElement
     static get watchers() { return {
         "interface": ["interfaceHandler"]
     }; }
-    static get style() { return balNavbarCss; }
+    static get style() { return BalNavbarStyle0; }
 }, [4, "bal-navbar", {
         "light": [4],
         "interface": [1],

package/components/bal-notices.js

@@ -2,22 +2,14 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { B as BEM } from './bem.js';
 
 const balNoticesCss = ".bal-notices{position:fixed !important;display:-ms-flexbox !important;display:flex !important;top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;padding-top:1rem !important;padding-bottom:1rem !important;margin:0 !important;overflow:hidden !important;z-index:var(--bal-z-index-toast) !important;pointer-events:none !important;-ms-flex-direction:column !important;flex-direction:column !important}.bal-notices--container{-ms-flex-align:center !important;align-items:center !important}.bal-notices:not(.bal-notices--container){padding-left:1rem !important;padding-right:1rem !important}.bal-notices__inner{display:-ms-flexbox;display:flex;gap:.5rem}.bal-notices__inner--snackbar{height:100vh;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:end;align-items:flex-end;-ms-flex-direction:column;flex-direction:column;margin:.5em}.bal-notices__inner--snackbar .bal-snackbar{-ms-flex-pack:end;justify-content:flex-end;-ms-flex-item-align:end;align-self:flex-end;pointer-events:auto !important}.bal-notices__inner--toast{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;margin:.5em}.bal-notices__inner--toast .bal-toast{-ms-flex-pack:center;justify-content:center;-ms-flex-item-align:center;align-self:center}.bal-notices__inner.container{--bal-toast-width:100%;--bal-toast-width-tablet:100%;--bal-toast-width-desktop:100%}.bal-notices--animated .bal-toast{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:slideInDown;animation-name:slideInDown}.bal-notices--animated .bal-snackbar{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideInDown{from{-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);visibility:visible}to{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes slideInDown{from{-webkit-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);visibility:visible}to{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes slideInUp{from{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);visibility:visible}to{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes slideInUp{from{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);visibility:visible}to{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}";
+const BalNoticesStyle0 = balNoticesCss;
 
 const Notices = /*@__PURE__*/ proxyCustomElement(class Notices extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * @internal Tells if the notice is animated
-         */
         this.animated = true;
-        /**
-         * @internal The interface tells the notice where to show the notice.
-         */
         this.interface = 'toast';
-        /**
-         * @internal Sets the content content width with the regular container classes
-         */
         this.container = undefined;
     }
     render() {
@@ -26,7 +18,7 @@ const Notices = /*@__PURE__*/ proxyCustomElement(class Notices extends HTMLEleme
         const hasContainer = this.interface === 'toast' && this.container !== undefined;
         return (h(Host, { key: '83c73f66abe9dc3abf4181c43af09fc4ce7f3b7a', class: Object.assign(Object.assign(Object.assign({ 'bal-app': true }, block.class()), block.modifier('container').class(hasContainer)), block.modifier('animated').class(this.animated)) }, h("div", { key: 'f16cd17c52f0df45500e9be985fc099c5c134cf6', class: Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier(this.interface).class()), { container: hasContainer, [`is-${this.container}`]: hasContainer && this.container !== '' }) }, h("slot", { key: 'bdf0fc55a2b9d63fed14821e8e83553394052ac2' }))));
     }
-    static get style() { return balNoticesCss; }
+    static get style() { return BalNoticesStyle0; }
 }, [4, "bal-notices", {
         "animated": [4],
         "interface": [1],

package/components/bal-notification.js

@@ -2,23 +2,14 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { B as BEM } from './bem.js';
 
 const balNotificationCss = ":root{--bal-notification-font-size:var(--bal-text-size-normal);--bal-notification-font-family:var(--bal-font-family-text);--bal-notification-title-font-family:var(--bal-font-family-title);--bal-notification-title-font-size:var(--bal-text-size-medium);--bal-notification-title-font-size-tablet:var(--bal-text-size-medium-tablet);--bal-notification-title-font-size-desktop:var(--bal-text-size-medium-desktop);--bal-notification-background:var(--bal-color-grey-2);--bal-notification-background-primary:var(--bal-color-grey-2);--bal-notification-background-info:var(--bal-color-info-2);--bal-notification-background-success:var(--bal-color-success-2);--bal-notification-background-warning:var(--bal-color-warning-2);--bal-notification-background-danger:var(--bal-color-danger-2);--bal-notification-background-light:var(--bal-color-grey-1);--bal-notification-background-light-primary:var(--bal-color-purple-1);--bal-notification-background-light-info:var(--bal-color-info-1);--bal-notification-background-light-success:var(--bal-color-green-1);--bal-notification-background-light-warning:var(--bal-color-yellow-1);--bal-notification-background-light-danger:var(--bal-color-red-1);--bal-notification-border:var(--bal-color-grey-4);--bal-notification-border-primary:var(--bal-color-purple-3);--bal-notification-border-info:var(--bal-color-info-3);--bal-notification-border-success:var(--bal-color-green-5);--bal-notification-border-warning:var(--bal-color-yellow-4);--bal-notification-border-danger:var(--bal-color-red-4);--bal-notification-radius:var(--bal-radius-large);--bal-notification-light-radius:var(--bal-radius-normal);--bal-notification-color:var(--bal-color-text-primary);--bal-notification-color-primary:var(--bal-color-text-primary);--bal-notification-color-info:var(--bal-color-text-primary);--bal-notification-color-success:var(--bal-color-text-primary);--bal-notification-color-warning:var(--bal-color-text-primary);--bal-notification-color-danger:var(--bal-color-text-primary)}.bal-notification{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;gap:.125rem;position:relative;min-height:3.5rem;border-radius:var(--bal-notification-radius);font-family:var(--bal-notification-font-family);font-size:var(--bal-notification-font-size);font-weight:var(--bal-font-weight-regular);background:var(--bal-notification-background);color:var(--bal-notification-color);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;padding:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-notification{padding:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-notification{padding:var(--bal-space-medium-desktop)}}.bal-notification>strong,.bal-notification>b,.bal-notification>h2{font-family:var(--bal-notification-title-font-family);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-notification-title-font-size);line-height:var(--bal-text-line-height-title)}@media screen and (min-width: 769px),print{.bal-notification>strong,.bal-notification>b,.bal-notification>h2{font-size:var(--bal-notification-title-font-size-tablet)}}@media screen and (min-width: 1024px){.bal-notification>strong,.bal-notification>b,.bal-notification>h2{font-size:var(--bal-notification-title-font-size-desktop)}}.bal-notification>span,.bal-notification>p{font-family:var(--bal-notification-font-family);font-size:var(--bal-notification-font-size);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text)}.bal-notification--color-light{border:2px solid var(--bal-notification-border-primary);background:var(--bal-notification-background-light-primary);color:var(--bal-notification-color-primary);border-radius:var(--bal-notification-light-radius)}.bal-notification--color-primary{background:var(--bal-notification-background-primary);color:var(--bal-notification-color-primary)}.bal-notification--color-primary-light{border:2px solid var(--bal-notification-border-primary);background:var(--bal-notification-background-light-primary);color:var(--bal-notification-color-primary);border-radius:var(--bal-notification-light-radius)}.bal-notification--color-info{background:var(--bal-notification-background-info);color:var(--bal-notification-color-info)}.bal-notification--color-info-light{border:2px solid var(--bal-notification-border-info);background:var(--bal-notification-background-light-info);color:var(--bal-notification-color-info);border-radius:var(--bal-notification-light-radius)}.bal-notification--color-danger{background:var(--bal-notification-background-danger);color:var(--bal-notification-color-danger)}.bal-notification--color-danger-light{border:2px solid var(--bal-notification-border-danger);background:var(--bal-notification-background-light-danger);color:var(--bal-notification-color-danger);border-radius:var(--bal-notification-light-radius)}.bal-notification--color-warning{background:var(--bal-notification-background-warning);color:var(--bal-notification-color-warning)}.bal-notification--color-warning-light{border:2px solid var(--bal-notification-border-warning);background:var(--bal-notification-background-light-warning);color:var(--bal-notification-color-warning);border-radius:var(--bal-notification-light-radius)}.bal-notification--color-success{background:var(--bal-notification-background-success);color:var(--bal-notification-color-success)}.bal-notification--color-success-light{border:2px solid var(--bal-notification-border-success);background:var(--bal-notification-background-light-success);color:var(--bal-notification-color-success);border-radius:var(--bal-notification-light-radius)}.bal-notification:not(.bal-notification--no-icon){padding-left:3rem}.bal-notification:not(.bal-notification--no-icon):before{background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;position:absolute;height:1.5rem;width:1.5rem;left:.825rem;top:1.5rem;content:\"\";display:block;background-color:var(--bal-color-primary);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z\" fill=\"black\"/></svg>')}.bal-notification--color-primary:not(.bal-notification--no-icon):before,.bal-notification--color-primary-light:not(.bal-notification--no-icon):before{mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z\" fill=\"black\"/></svg>')}.bal-notification--color-info:not(.bal-notification--no-icon):before,.bal-notification--color-info-light:not(.bal-notification--no-icon):before{mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z\" fill=\"black\"/></svg>')}.bal-notification--color-success:not(.bal-notification--no-icon):before,.bal-notification--color-success-light:not(.bal-notification--no-icon):before{mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z\" fill=\"black\"/></svg>')}.bal-notification--color-warning:not(.bal-notification--no-icon):before,.bal-notification--color-warning-light:not(.bal-notification--no-icon):before{mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z\" fill=\"black\"/></svg>')}.bal-notification--color-danger:not(.bal-notification--no-icon):before,.bal-notification--color-danger-light:not(.bal-notification--no-icon):before{mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z\" fill=\"black\"/></svg>')}";
+const BalNotificationStyle0 = balNotificationCss;
 
 const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * Defines the color of the element
-         * Color type primary is deprecated, please use info instead.
-         */
         this.color = '';
-        /**
-         * If `true` the notifications are presented in a light variant
-         */
         this.light = false;
-        /**
-         * If `true` there will be no icon provided
-         */
         this.noIcon = false;
     }
     render() {
@@ -26,7 +17,7 @@ const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends
         block.element('inner');
         return (h(Host, { key: '25a9149c4bb693ebf3c1b1a863e72f7727b8d046', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`no-icon`).class(this.noIcon)), block.modifier(`color-${this.color}${this.light ? '-light' : ''}`).class(!!this.color)), block.modifier(`color-light`).class(!this.color && this.light)), "data-testid": "bal-notification-content" }, h("slot", { key: '6254964fe9f247d75cb102a80c7a251a233bf2d9' })));
     }
-    static get style() { return balNotificationCss; }
+    static get style() { return BalNotificationStyle0; }
 }, [4, "bal-notification", {
         "color": [1],
         "light": [4],

package/components/bal-number-input.js

@@ -1,26 +1,136 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
-import { f as inputHandleClick, b as inputHandleHostClick, c as inputHandleFocus, d as inputHandleBlur, e as inputHandleChange, l as getUpcomingValue, s as stopEventBubbling, j as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
-import { k as debounceEvent } from './helpers.js';
+import { f as inputHandleClick, b as inputHandleHostClick, c as inputHandleFocus, d as inputHandleBlur, e as inputHandleChange, l as getNativeInputValue, m as getUpcomingValue, s as stopEventBubbling, j as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
+import { o as debounceEvent } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 import { g as getNegativeSymbol, a as getDecimalSeparator, b as getThousandSeparator, f as formatLocaleNumber } from './number.js';
 import { B as BEM } from './bem.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { L as Logger } from './log.js';
-import { i as isNil } from './index2.js';
+import { l as lodash_isnil } from './index3.js';
 import { N as NUMBER_KEYS, A as ACTION_KEYS } from './keys.constant.js';
-import { i as isNaN } from './index6.js';
-import { i as isEmpty } from './index4.js';
+import { i as isEmpty } 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';
+
+/**
+ * lodash 3.0.2 (Custom Build) <https://lodash.com/>
+ * Build: `lodash modularize exports="npm" -o ./`
+ * Copyright 2012-2016 The Dojo Foundation <http://dojofoundation.org/>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright 2009-2016 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ * Available under MIT license <https://lodash.com/license>
+ */
+
+/** `Object#toString` result references. */
+var numberTag = '[object Number]';
+
+/** Used for built-in method references. */
+var objectProto = Object.prototype;
+
+/**
+ * Used to resolve the [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var objectToString = objectProto.toString;
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+function isObjectLike(value) {
+  return !!value && typeof value == 'object';
+}
+
+/**
+ * Checks if `value` is `NaN`.
+ *
+ * **Note:** This method is not the same as [`isNaN`](https://es5.github.io/#x15.1.2.4)
+ * which returns `true` for `undefined` and other non-numeric values.
+ *
+ * @static
+ * @memberOf _
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is `NaN`, else `false`.
+ * @example
+ *
+ * _.isNaN(NaN);
+ * // => true
+ *
+ * _.isNaN(new Number(NaN));
+ * // => true
+ *
+ * isNaN(undefined);
+ * // => true
+ *
+ * _.isNaN(undefined);
+ * // => false
+ */
+function isNaN(value) {
+  // An `NaN` primitive is the only value that is not equal to itself.
+  // Perform the `toStringTag` check first to avoid errors with some ActiveX objects in IE.
+  return isNumber$1(value) && value != +value;
+}
+
+/**
+ * Checks if `value` is classified as a `Number` primitive or object.
+ *
+ * **Note:** To exclude `Infinity`, `-Infinity`, and `NaN`, which are classified
+ * as numbers, use the `_.isFinite` method.
+ *
+ * @static
+ * @memberOf _
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is correctly classified, else `false`.
+ * @example
+ *
+ * _.isNumber(3);
+ * // => true
+ *
+ * _.isNumber(Number.MIN_VALUE);
+ * // => true
+ *
+ * _.isNumber(Infinity);
+ * // => true
+ *
+ * _.isNumber('3');
+ * // => false
+ */
+function isNumber$1(value) {
+  return typeof value == 'number' ||
+    (isObjectLike(value) && objectToString.call(value) == numberTag);
+}
+
+var lodash_isnan = isNaN;
 
 function checkIfValueIsStringAndDoesNotHaveGermanFormat(val) {
     return typeof val === 'string' && getThousandSeparator() !== '.';
 }
 function isNumber(value) {
     const num = parseFloat(value);
-    return typeof num === 'number' && !isNaN(num);
+    return typeof num === 'number' && !lodash_isnan(num);
 }
 function isNotNumber(value) {
     return !isNumber(value) && value !== '' && value !== getNegativeSymbol() && value !== getDecimalSeparator();
@@ -30,7 +140,7 @@ function toNumber(value, decimalPoints = 0) {
     if (val === '' ||
         val === undefined ||
         val === null ||
-        isNaN(val) ||
+        lodash_isnan(val) ||
         val === getNegativeSymbol() ||
         val === getDecimalSeparator() ||
         !isNumber(val)) {
@@ -46,7 +156,7 @@ function toNumber(value, decimalPoints = 0) {
 }
 function toFixedNumber(value, decimalPoints = 0) {
     let val = value;
-    if (isNil(val)) {
+    if (lodash_isnil(val)) {
         return '';
     }
     if (checkIfValueIsStringAndDoesNotHaveGermanFormat(val)) {
@@ -56,13 +166,13 @@ function toFixedNumber(value, decimalPoints = 0) {
         val = `0${val}`;
     }
     const num = decimalPoints === 0 ? parseInt(val, 10) : parseFloat(val.replace(getDecimalSeparator(), '.'));
-    return isNaN(num) ? '' : num.toFixed(decimalPoints);
+    return lodash_isnan(num) ? '' : num.toFixed(decimalPoints);
 }
 function mapDecimalSeparator(value) {
     return value.replace('.', getDecimalSeparator());
 }
 function toUserFormattedNumber(value, decimalPoints = 0, suffix = '') {
-    if (isNil(value)) {
+    if (lodash_isnil(value)) {
         return '';
     }
     if (value.charAt(0) === getDecimalSeparator()) {
@@ -70,7 +180,7 @@ function toUserFormattedNumber(value, decimalPoints = 0, suffix = '') {
     }
     const num = decimalPoints === 0 ? parseInt(value, 10) : parseFloat(value);
     const formattedSuffix = suffix !== '' ? ` ${suffix.trim()}` : '';
-    return isNaN(num) ? '' : formatLocaleNumber(num, decimalPoints) + formattedSuffix;
+    return lodash_isnan(num) ? '' : formatLocaleNumber(num, decimalPoints) + formattedSuffix;
 }
 const countDecimalSeparators = (value) => (value.split(getDecimalSeparator()) || []).length - 1 || 0;
 function validateKeyDown({ key, ctrlKey, metaKey, selectionStart, selectionEnd, newValue, decimal, }) {
@@ -112,6 +222,7 @@ function validateKeyDown({ key, ctrlKey, metaKey, selectionStart, selectionEnd,
 }
 
 const balNumberInputCss = ".bal-number-input{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:relative;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;width:100%;padding:0;font-family:var(--bal-font-family-text)}";
+const BalNumberInputStyle0 = balNumberInputCss;
 
 const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends HTMLElement {
     constructor() {
@@ -127,56 +238,6 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
         this.lastValue = '';
         this.inputValue = this.value;
         this.initialValue = undefined;
-        this.focused = false;
-        this.language = defaultConfig.language;
-        this.region = defaultConfig.region;
-        this.ariaForm = defaultBalAriaForm;
-        this.nativeInputValue = '';
-        this.inputPattern = this.createPattern();
-        /**
-         * 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;
-        /**
-         * Defines the allowed decimal points for the `number-input`.
-         */
-        this.decimal = 0;
-        /**
-         * If `true`, the user must fill in a value before submitting a form.
-         */
-        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` the input value has 0 as default value
-         */
-        this.exactNumber = false;
-        /**
-         * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
-         */
-        this.debounce = 0;
-        /**
-         * The value of the input.
-         */
-        this.value = undefined;
-        /**
-         * If `true`, in Angular reactive forms the control will not be set invalid
-         */
-        this.autoInvalidOff = false;
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -221,6 +282,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
             inputHandleChange(this);
         };
         this.onKeydown = (ev) => {
+            const oldValue = getNativeInputValue(this);
             const newValue = getUpcomingValue(this, ev);
             const input = ev === null || ev === void 0 ? void 0 : ev.target;
             if (input &&
@@ -230,12 +292,34 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
                     metaKey: ev.metaKey,
                     decimal: this.decimal,
                     newValue,
+                    oldValue,
                     selectionStart: input.selectionStart,
                     selectionEnd: input.selectionEnd,
                 })) {
                 return stopEventBubbling(ev);
             }
         };
+        this.focused = false;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.ariaForm = defaultBalAriaForm;
+        this.nativeInputValue = '';
+        this.inputPattern = this.createPattern();
+        this.name = this.inputId;
+        this.invalid = false;
+        this.decimal = 0;
+        this.suffix = undefined;
+        this.pattern = undefined;
+        this.placeholder = undefined;
+        this.required = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.exactNumber = false;
+        this.max = undefined;
+        this.min = undefined;
+        this.debounce = 0;
+        this.value = undefined;
+        this.autoInvalidOff = false;
     }
     createLogger(log) {
         this.log = log;
@@ -246,7 +330,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
     valueChanged(newValue, oldValue) {
         const newValueAsNumber = toNumber(newValue, this.decimal);
         if (newValueAsNumber !== oldValue) {
-            const isValueNotDefined = newValueAsNumber === '' || isNil(newValueAsNumber) || isNaN(newValueAsNumber);
+            const isValueNotDefined = newValueAsNumber === '' || lodash_isnil(newValueAsNumber) || lodash_isnan(newValueAsNumber);
             const emptyValue = this.exactNumber ? '0' : '';
             const value = isValueNotDefined ? emptyValue : newValueAsNumber.toString();
             this.inputValue = toNumber(toFixedNumber(value, this.decimal), this.decimal);
@@ -356,7 +440,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
         return `-?\\d{1,3}(?:${thousandSeparator}\\d{3})*(?:\\${decimalSeparator}\\d{1,2})?(?:${suffix})?`;
     }
     get lastValueGetter() {
-        if (this.exactNumber && (isNil(this.lastValue) || isEmpty(this.lastValue))) {
+        if (this.exactNumber && (lodash_isnil(this.lastValue) || isEmpty(this.lastValue))) {
             return '0';
         }
         return this.lastValue;
@@ -378,7 +462,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
         "debounce": ["debounceChanged"],
         "value": ["valueChanged"]
     }; }
-    static get style() { return balNumberInputCss; }
+    static get style() { return BalNumberInputStyle0; }
 }, [0, "bal-number-input", {
         "name": [1],
         "invalid": [4],

package/components/bal-option-list.js

@@ -1,15 +1,16 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { i as isNil } from './index2.js';
+import { l as lodash_isnil } from './index3.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
-import { a as waitAfterFramePaint, r as raf } from './helpers.js';
+import { b as waitAfterFramePaint, n as raf } from './helpers.js';
 import { L as Logger } from './log.js';
-import { i as includes, s as startsWith } from './utils.js';
+import { s as startsWith, i as includes } from './utils.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { a as ariaBooleanToString } from './aria.js';
 
 const balOptionListCss = ".bal-option-list{display:block;position:relative;width:100%;list-style:none;margin:0;outline:0;max-height:var(--bal-option-list-max-height);border-radius:var(--bal-radius-normal);overflow:hidden auto}";
+const BalOptionListStyle0 = balOptionListCss;
 
 const OptionList = /*@__PURE__*/ proxyCustomElement(class OptionList extends HTMLElement {
     constructor() {
@@ -18,33 +19,12 @@ const OptionList = /*@__PURE__*/ proxyCustomElement(class OptionList extends HTM
         this.inputId = `bal-option-list-${balOptionListIds++}`;
         this.inheritAttributes = {};
         this.ariaForm = defaultBalAriaForm;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * If `true` the list supports multiple selections
-         */
         this.multiple = false;
-        /**
-         * If `true`, the user cannot interact with the option.
-         */
         this.disabled = false;
-        /**
-         * If `true`, the user must fill in a value before submitting a form.
-         */
         this.required = false;
-        /**
-         * Defines the focused option with his index value
-         */
         this.focusIndex = -1;
-        /**
-         * Defines the filter logic of the list
-         */
+        this.labelledby = undefined;
         this.filter = 'includes';
-        /**
-         * Defines the max height of the list element
-         */
         this.contentHeight = 262;
     }
     createLogger(log) {
@@ -424,7 +404,7 @@ const OptionList = /*@__PURE__*/ proxyCustomElement(class OptionList extends HTM
             return this.focusIndex;
         }
         const option = options.find(o => startsWith(o.label || '', label));
-        if (!isNil(option) && option.id) {
+        if (!lodash_isnil(option) && option.id) {
             return options.indexOf(option);
         }
         return this.focusIndex;
@@ -447,7 +427,7 @@ const OptionList = /*@__PURE__*/ proxyCustomElement(class OptionList extends HTM
     static get watchers() { return {
         "contentHeight": ["contentHeightChanged"]
     }; }
-    static get style() { return balOptionListCss; }
+    static get style() { return BalOptionListStyle0; }
 }, [4, "bal-option-list", {
         "multiple": [4],
         "disabled": [4],