@baloise/ds-core 19.3.0 → 19.4.0

package/components/bal-tabs2.js

@@ -1,13 +1,23 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { L as ListenToAnimation } from './animation.decorator.js';
 import { a as areArraysEqual } from './array.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
+import { b as balBreakpoints } from './breakpoints.subject.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { n as raf, d as deepReady, t as transitionEndAsync, k as debounce, o as debounceEvent, u as hasParent, m as rOnLoad, i as isDescendant, b as waitAfterFramePaint } from './helpers.js';
+import { r as raf, d as deepReady, t as transitionEndAsync, l as debounce, k as debounceEvent, u as hasParent, n as rOnLoad, i as isDescendant, b as waitAfterFramePaint } from './helpers.js';
 import { L as Logger } from './log.js';
+import { L as ListenToMutation } from './mutation.decorator.js';
+import './window-resize.subject.js';
+import { L as ListenToResize } from './resize.decorator.js';
 import { t as toKebabCase } from './string.js';
 import { S as SwiperUtil, g as getComputedPadding, a as getWidthOfOverflowingChildren } from './swiper.util.js';
+import { L as ListenToSwipe } from './swipe.decorator.js';
+import { L as ListenToVisibility } from './visibility.decorator.js';
 import { n as newBalTabOption } from './bal-tab.util.js';
 import { a as ariaBooleanToString } from './aria.js';
 import { b as balBrowser } from './browser.js';
@@ -20,15 +30,6 @@ import { d as defineCustomElement$4 } from './bal-popover-content2.js';
 import { d as defineCustomElement$3 } from './bal-select2.js';
 import { d as defineCustomElement$2 } from './bal-select-option2.js';
 import { d as defineCustomElement$1 } from './bal-tag2.js';
-import { L as ListenToAnimation } from './animation.decorator.js';
-import { b as balBreakpoints } from './breakpoints.subject.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToMutation } from './mutation.decorator.js';
-import { L as ListenToVisibility } from './visibility.decorator.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
-import { L as ListenToResize } from './resize.decorator.js';
-import { L as ListenToSwipe } from './swipe.decorator.js';
-import { L as ListenToConfig } from './config.decorator.js';
 
 const TabIcon = ({ item, inverted, accordion, isAccordionOpen, isMobile, hasBubble, }) => {
     const bemEl = BEM.block('tabs').element('nav').element('item').element('icon');
@@ -149,7 +150,6 @@ const TabSelect = ({ items, value, onSelectTab }) => {
 };
 
 const balTabsCss = "@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;box-shadow:var(--bal-focus-shadow-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__line{position:absolute;background:var(--bal-tabs-tab-nav-line-background);border-radius:var(--bal-tabs-tab-nav-line-radius);left:1px;z-index:1}.bal-tabs__nav__line--hidden{display:none}.bal-tabs__nav__line--vertical{top:0;min-height:2.5rem}.bal-tabs__nav__line--vertical.bal-tabs__nav__line--active{width:var(--bal-border-width-normal)}.bal-tabs__nav__line:not(.bal-tabs__nav__line--vertical){bottom:0;min-width:5rem}.bal-tabs__nav__line:not(.bal-tabs__nav__line--vertical).bal-tabs__nav__line--active{height:var(--bal-border-width-normal)}.bal-tabs__nav__line--animated{will-change:min-width,width,min-height,height,transform;-webkit-transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-tabs__nav__line--inverted{background:var(--bal-tabs-tab-nav-line-background-inverted)}@media screen and (min-width: 769px),print{.bal-tabs__nav--vertical-col-one-third{-ms-flex:none;flex:none;width:33.3333%}.bal-tabs__nav--vertical-col-half{-ms-flex:none;flex:none;width:33.3333%}.bal-tabs__nav--vertical-col-two-thirds{-ms-flex:none;flex:none;width:66.6666%}.bal-tabs__nav--vertical-col-three-quarters{-ms-flex:none;flex:none;width:75%}.bal-tabs__nav--vertical-col-full{-ms-flex:none;flex:none;width:100%}}.bal-tabs__nav__container--expanded{position:relative;display:-ms-flexbox;display:flex;width:100%;min-width:100%;-ms-flex:1;flex:1}.bal-tabs__nav__container--vertical{overflow:hidden}.bal-tabs__nav__item{display:-ms-flexbox;display:flex;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-decoration:none;cursor:default;gap:.5rem;padding:.25rem .75rem;border-radius:var(--bal-tabs-tab-button-radius);min-width:3rem;min-height:3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;background-color:rgba(0,0,0,0);border:unset;width:auto}@media screen and (min-width: 769px),print{.bal-tabs__nav__item{-ms-flex-direction:row;flex-direction:row;min-height:3.5rem}}@media screen and (max-width: 768px){.bal-tabs__nav__item--group-has-sub-label{height:5rem}}.bal-tabs__nav__item--dim-inactive-elements:not(.bal-tabs__nav__item--active){opacity:.6}.bal-tabs__nav__item--display-svg{-ms-flex-direction:row;flex-direction:row}@media screen and (max-width: 768px){.bal-tabs__nav__item--display-svg:not(.bal-tabs__nav__item--display-svg.bal-tabs__nav__item--active){-ms-flex:0 0 auto;flex:0 0 auto;min-width:3rem;width:6rem;padding:.25rem}}.bal-tabs__nav__item--accordion{-ms-flex-direction:row;flex-direction:row}.bal-tabs__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-tabs__nav__item--expanded{-ms-flex:1;flex:1;width:5rem;min-width:5rem}.bal-tabs__nav__item--icon-position-vertical{-ms-flex-direction:column;flex-direction:column}.bal-tabs__nav__item--clickable{cursor:pointer;pointer-events:all}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-hover)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-hover)}}.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-active)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-active)}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-inverted-hover)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-inverted-hover)}}.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-inverted-active)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-inverted-active)}.bal-tabs__nav__item--vertical{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;min-height:2.5rem;padding:.5rem 1rem}.bal-tabs__nav__item--spaceless.bal-tabs__nav__item--first{padding-left:0}.bal-tabs__nav__item--spaceless.bal-tabs__nav__item--last{padding-right:0}.bal-tabs__nav__item--context-meta{min-height:3rem;height:3rem}.bal-tabs__nav__item--context-navigation{min-height:3rem;height:3rem}@media screen and (min-width: 1024px){.bal-tabs__nav__item--context-navigation{min-height:4rem;height:4rem}}@media screen and (min-width: 1280px){.bal-tabs__nav__item--context-navigation{min-height:4rem;height:4rem}}@media screen and (min-width: 1440px){.bal-tabs__nav__item--context-navigation{min-height:5rem;height:5rem}}.bal-tabs__nav__item__icon{position:relative}.bal-tabs__nav__item__icon__bubble{position:absolute;right:-0.75rem;top:-0.25rem}@media screen and (min-width: 769px),print{.bal-tabs__nav__item__icon__bubble{right:-0.625rem;top:-0.25rem}}.bal-tabs__nav__item__label{display:block;position:relative;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-body-line-height);text-align:center;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-tabs-tab-label-text-color)}.bal-tabs__nav__item__label--with-svg{text-align:left;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:var(--bal-text-size-large);line-height:var(--bal-line-height-small)}@media screen and (max-width: 768px){.bal-tabs__nav__item__label--with-svg:not(.bal-tabs__nav__item__label--active){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0}}.bal-tabs__nav__item__label--disabled{color:var(--bal-tabs-tab-label-text-color-disabled)}.bal-tabs__nav__item__label--inverted{font-family:var(--bal-font-family-text);color:var(--bal-tabs-tab-label-text-color-inverted)}.bal-tabs__nav__item__label--inverted.bal-tabs__nav__item__label--disabled{color:var(--bal-tabs-tab-label-text-color-inverted-disabled)}.bal-tabs__nav__item__label--inverted{font-weight:var(--bal-font-weight-regular);letter-spacing:.1085px}.bal-tabs__nav__item__label--inverted.bal-tabs__nav__item__label--active{font-weight:var(--bal-font-weight-bold);letter-spacing:0}.bal-tabs__nav__item__label__bubble{position:absolute;right:-0.5rem;top:-0.5rem}.bal-tabs__nav__item__label--vertical{text-align:left;width:auto;white-space:normal}.bal-tabs__nav__item__label--expanded{white-space:normal}.bal-tabs__nav__item__label--context-meta{font-size:var(--bal-text-size-small)}.bal-tabs__nav__item__label__sub-label{font-size:var(--bal-text-size-small)}:root{--bal-tabs-tab-nav-border-background:var(--bal-color-border);--bal-tabs-tab-nav-border-background-inverted:var(--bal-color-border-inverted);--bal-tabs-tab-nav-line-background:var(--bal-color-border-primary);--bal-tabs-tab-nav-line-background-inverted:var(--bal-color-border-inverted);--bal-tabs-tab-button-radius:var(--bal-radius-normal);--bal-tabs-tab-nav-border-radius:var(--bal-radius-rounded);--bal-tabs-tab-nav-line-radius:var(--bal-radius-rounded);--bal-tabs-tab-button-label-text-color-hover:var(--bal-color-light-blue-5);--bal-tabs-tab-button-icon-text-color-hover:var(--bal-color-light-blue-5);--bal-tabs-tab-button-label-text-color-active:var(--bal-color-primary-6);--bal-tabs-tab-button-icon-text-color-active:var(--bal-color-primary-6);--bal-tabs-tab-button-label-text-color-inverted-hover:var(--bal-color-light-blue-2);--bal-tabs-tab-button-icon-text-color-inverted-hover:var(--bal-color-light-blue-2);--bal-tabs-tab-button-label-text-color-inverted-active:var(--bal-color-text-info);--bal-tabs-tab-button-icon-text-color-inverted-active:var(--bal-color-text-info);--bal-tabs-tab-label-text-color:var(--bal-color-text-primary);--bal-tabs-tab-label-text-color-disabled:var(--bal-color-text-grey);--bal-tabs-tab-label-text-color-inverted:var(--bal-color-text-white);--bal-tabs-tab-label-text-color-inverted-disabled:var(--bal-color-text-primary-light)}.bal-swiper{position:relative;display:block}.bal-swiper__inner{display:block;position:relative;margin-left:auto;margin-right:auto;overflow:clip;list-style:none;padding:0;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-overflow-scrolling:touch}.bal-swiper__inner--items-per-view-auto .bal-carousel__item{width:auto}.bal-swiper__inner--items-per-view-1 .bal-carousel__item{width:100%}.bal-swiper__inner--items-per-view-2 .bal-carousel__item{width:50%}.bal-swiper__inner--items-per-view-3 .bal-carousel__item{width:33.3333%}.bal-swiper__inner--items-per-view-4 .bal-carousel__item{width:25%}.bal-swiper__container{position:relative;max-width:100%;width:100%;height:100%;display:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-duration:0ms;transition-duration:0ms;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.bal-swiper__container--gap-none{gap:0}.bal-swiper__container--gap-normal{gap:1rem}.bal-swiper__container--gap-medium{gap:1.5rem}.bal-swiper__controls{width:100%}.bal-swiper__controls--dots{position:relative}@media screen and (max-width: 768px){.bal-swiper__controls--large{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;gap:2rem;margin-top:1rem}}@media screen and (min-width: 769px),print{.bal-swiper__controls--large{position:absolute;top:calc(50% - 1.5rem)}.bal-swiper__controls--large .bal-swiper__controls__button{position:absolute;z-index:7}.bal-swiper__controls--large .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--large .bal-swiper__controls__button--right{right:0}}.bal-swiper__controls__button--hidden{display:none !important;visibility:none !important}.bal-swiper__controls--small{position:absolute;top:calc(50% - 1rem)}.bal-swiper__controls--small .bal-swiper__controls__button{position:absolute;z-index:7}.bal-swiper__controls--small .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--small .bal-swiper__controls__button--right{right:0}.bal-swiper__controls--small .bal-swiper__controls__button--hidden{display:none !important;visibility:hidden !important}.bal-swiper__inner--shadow-left::before,.bal-swiper__inner--shadow-right::after{position:absolute;width:3rem;height:100%;top:0}.bal-swiper__inner--shadow-left::before{content:\"\";left:0;background:-webkit-gradient(linear, left top, right top, color-stop(50%, var(--bal-carousel-inner-shadow-left-background-before)), to(rgba(255, 255, 255, 0)));background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right::after{content:\"\";right:0;background:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--bal-carousel-inner-shadow-right-background-after)));background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-after) 50%)}.bal-swiper__inner--shadow-left.bal-swiper__inner--inverted::before{background:-webkit-gradient(linear, left top, right top, color-stop(50%, var(--bal-carousel-inner-shadow-left-background-inverted-before)), to(rgba(255, 255, 255, 0)));background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-inverted-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right.bal-swiper__inner--inverted::after{background:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--bal-carousel-inner-shadow-right-background-inverted-after)));background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0}.bal-tabs--fullwidth{width:100%}.bal-tabs--vertical{-ms-flex-direction:column;flex-direction:column;gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-tabs--vertical{-ms-flex-direction:row;flex-direction:row;gap:var(--bal-space-normal)}}@media screen and (min-width: 769px),print{.bal-tabs--navbar{height:100%}}.bal-tab-item{width:100%;display:none}.bal-tab-item--active{display:block}.bal-tabs--accordion .bal-tabs__content{overflow:hidden}.bal-tabs--accordion.bal-tabs--collapsed .bal-tabs__content{display:none}.bal-tabs__content{width:100%}.bal-tabs__content--vertical{width:auto;-ms-flex:1;flex:1}.bal-tabs__content--hidden{display:none}.bal-tabs__nav--full-height,.bal-tabs__nav__inner--full-height{height:100%}.bal-tabs__nav__border{position:absolute;background:var(--bal-tabs-tab-nav-border-background);border-radius:var(--bal-tabs-tab-nav-border-radius);height:var(--bal-border-width-normal);left:1px;right:1px;bottom:0;min-width:100%}.bal-tabs__nav__border--hidden{display:none}.bal-tabs__nav__border--vertical{min-width:var(--bal-border-width-normal);max-width:var(--bal-border-width-normal);width:var(--bal-border-width-normal);height:100%;top:0;right:auto}.bal-tabs__nav__border--inverted{background:var(--bal-tabs-tab-nav-border-background-inverted)}";
-const BalTabsStyle0 = balTabsCss;
 
 const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
     constructor() {
@@ -161,6 +161,97 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         this.tabsId = `bal-tabs-${TabsIds++}`;
         this.inheritAttributes = {};
         this.swiper = new SwiperUtil();
+        this.isAccordionOpen = false;
+        this.accordionState = 1 /* AccordionState.Collapsed */;
+        this.isNavbarOpen = false;
+        this.inNavbar = false;
+        this.inNavbarLight = false;
+        this.enableLineRender = false;
+        this.hasAnimated = false;
+        this.index = 0;
+        this.isMobile = balBreakpoints.isMobile;
+        this.isTablet = balBreakpoints.isTablet;
+        this.language = defaultConfig.language;
+        this.store = [];
+        this.animated = true;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * @deprecated Defines the layout of the tabs. Right only works from the breakpoint
+         * high-definition and beyond.
+         */
+        this.float = 'left';
+        /**
+         * If `true` the tabs is a block element and uses 100% of the width
+         */
+        this.fullwidth = false;
+        /**
+         * If `true` the tab items can be open and closed
+         */
+        this.accordion = false;
+        /**
+         * If `true` the tabs have a carousel if they need more space than provided.
+         */
+        this.overflow = true;
+        /**
+         * Tabs can be passed as a property or through HTML markup.
+         */
+        this.options = [];
+        /**
+         * Defines the layout of the tabs.
+         */
+        this.iconPosition = 'horizontal';
+        /**
+         * If `true` the field expands over the whole width.
+         */
+        this.expanded = false;
+        /**
+         * If `true` the tabs container does not have a padding left or right.
+         */
+        this.spaceless = false;
+        /**
+         * If `true` the tabs or tabs can be clicked.
+         */
+        this.clickable = true;
+        /**
+         * If `true` a light border is shown for the tabs.
+         */
+        this.border = false;
+        /**
+         * If `true` the tabs can be uses on dark background
+         */
+        this.inverted = false;
+        /**
+         * If `true` the tabs selected line is optional
+         */
+        this.optionalTabSelection = 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;
+        /**
+         * If `true` tabs are align vertically.
+         */
+        this.vertical = false;
+        /**
+         * The col size of the tabs on vertical mode.
+         */
+        this.verticalColSize = 'one-third';
+        /**
+         * If `true` the tabs are shown as a select component on mobile
+         */
+        this.selectOnMobile = false;
+        this.value = undefined;
+        /**
+         * if true, inactive elements will have their opacity reduced
+         */
+        this.dimInactiveElements = false;
+        /**
+         * If `true` then  isTabList becomes true even if there is a link in the list.
+         */
+        this.handleAsTabList = false;
         /**
          * LISTENERS
          * ------------------------------------------------------
@@ -369,39 +460,6 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
                 }
             }
         };
-        this.isAccordionOpen = false;
-        this.accordionState = 1 /* AccordionState.Collapsed */;
-        this.isNavbarOpen = false;
-        this.inNavbar = false;
-        this.inNavbarLight = false;
-        this.enableLineRender = false;
-        this.hasAnimated = false;
-        this.index = 0;
-        this.isMobile = balBreakpoints.isMobile;
-        this.isTablet = balBreakpoints.isTablet;
-        this.language = defaultConfig.language;
-        this.store = [];
-        this.animated = true;
-        this.float = 'left';
-        this.fullwidth = false;
-        this.accordion = false;
-        this.overflow = true;
-        this.options = [];
-        this.context = undefined;
-        this.iconPosition = 'horizontal';
-        this.expanded = false;
-        this.spaceless = false;
-        this.clickable = true;
-        this.border = false;
-        this.inverted = false;
-        this.optionalTabSelection = false;
-        this.debounce = 0;
-        this.vertical = false;
-        this.verticalColSize = 'one-third';
-        this.selectOnMobile = false;
-        this.value = undefined;
-        this.dimInactiveElements = false;
-        this.handleAsTabList = false;
     }
     createLogger(log) {
         this.log = log;
@@ -765,7 +823,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         "vertical": ["verticalChanged"],
         "value": ["valueChanged"]
     }; }
-    static get style() { return BalTabsStyle0; }
+    static get style() { return balTabsCss; }
 }, [4, "bal-tabs", {
         "float": [1],
         "fullwidth": [4],

package/components/bal-tag2.js

@@ -6,7 +6,6 @@ import { d as defineCustomElement$2 } from './bal-close2.js';
 import { d as defineCustomElement$1 } from './bal-icon2.js';
 
 const balTagCss = ":root{--bal-tag-background:var(--bal-color-grey);--bal-tag-background-primary:var(--bal-color-primary);--bal-tag-background-grey:var(--bal-color-grey);--bal-tag-background-success:var(--bal-color-success-4);--bal-tag-background-info:var(--bal-color-info-4);--bal-tag-background-warning:var(--bal-color-warning-4);--bal-tag-background-danger:var(--bal-color-danger-4);--bal-tag-background-purple:var(--bal-color-purple-5);--bal-tag-background-red:var(--bal-color-red-5);--bal-tag-background-yellow:var(--bal-color-yellow-4);--bal-tag-background-green:var(--bal-color-green-4);--bal-tag-background-purple-light:var(--bal-color-purple-2);--bal-tag-background-red-light:var(--bal-color-red-2);--bal-tag-background-yellow-light:var(--bal-color-yellow-2);--bal-tag-background-green-light:var(--bal-color-green-2);--bal-tag-background-invalid:var(--bal-color-border-danger);--bal-tag-background-disabled:var(--bal-color-border-grey-dark);--bal-tag-radius:var(--bal-radius-rounded);--bal-tag-border-disabled-color:var(--bal-color-border-grey-dark);--bal-tag-text:var(--bal-color-primary);--bal-tag-text-primary:var(--bal-color-white);--bal-tag-text-grey:var(--bal-color-primary);--bal-tag-text-success:var(--bal-color-white);--bal-tag-text-info:var(--bal-color-white);--bal-tag-text-warning:var(--bal-color-primary);--bal-tag-text-danger:var(--bal-color-white);--bal-tag-text-purple:var(--bal-color-white);--bal-tag-text-red:var(--bal-color-white);--bal-tag-text-yellow:var(--bal-color-primary);--bal-tag-text-green:var(--bal-color-primary);--bal-tag-text-purple-light:var(--bal-color-primary);--bal-tag-text-red-light:var(--bal-color-primary);--bal-tag-text-yellow-light:var(--bal-color-primary);--bal-tag-text-green-light:var(--bal-color-primary);--bal-tag-text-invalid:var(--bal-color-text-white);--bal-tag-text-disabled:var(--bal-color-text-white);--bal-tag-size-small-font-size:var(--bal-text-size-small);--bal-tag-size-small-font-weight:var(--bal-font-weight-regular)}.bal-tag{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:static;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-height:2rem;line-height:1.5rem;padding:.25rem .75rem .25rem .75rem;background-color:var(--bal-tag-background);border-radius:var(--bal-tag-radius)}.bal-tag--is-small{padding:0 .75rem 0 .75rem;min-height:1.5rem}.bal-tag--is-medium{min-height:2.5rem;padding:.5rem 1rem .5rem 1rem}.bal-tag--is-large{min-height:3rem;padding:.75rem 1.5rem .75rem 1.5rem}.bal-tag--is-primary{background:var(--bal-tag-background-primary)}.bal-tag--is-grey{background:var(--bal-tag-background-grey)}.bal-tag--is-success{background:var(--bal-tag-background-success)}.bal-tag--is-info{background:var(--bal-tag-background-info)}.bal-tag--is-warning{background:var(--bal-tag-background-warning)}.bal-tag--is-danger{background:var(--bal-tag-background-danger)}.bal-tag--is-purple{background:var(--bal-tag-background-purple)}.bal-tag--is-red{background:var(--bal-tag-background-red)}.bal-tag--is-yellow{background:var(--bal-tag-background-yellow)}.bal-tag--is-green{background:var(--bal-tag-background-green)}.bal-tag--is-purple-light{background:var(--bal-tag-background-purple-light)}.bal-tag--is-red-light{background:var(--bal-tag-background-red-light)}.bal-tag--is-yellow-light{background:var(--bal-tag-background-yellow-light)}.bal-tag--is-green-light{background:var(--bal-tag-background-green-light)}.bal-tag--is-invalid{background:var(--bal-tag-background-invalid);color:var(--bal-color-text-white)}.bal-tag__label{font-family:var(--bal-font-family-text);color:var(--bal-tag-text);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal) !important;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:.25rem}.bal-tag__label--is-small{font-size:var(--bal-tag-size-small-font-size) !important;font-weight:var(--bal-tag-size-small-font-weight) !important}.bal-tag__label--is-medium{font-size:var(--bal-text-size-medium) !important}.bal-tag__label--is-large{font-size:var(--bal-text-size-medium) !important}.bal-tag__label--is-primary{color:var(--bal-tag-text-primary)}.bal-tag__label--is-grey{color:var(--bal-tag-text-grey)}.bal-tag__label--is-success{color:var(--bal-tag-text-success)}.bal-tag__label--is-info{color:var(--bal-tag-text-info)}.bal-tag__label--is-warning{color:var(--bal-tag-text-warning)}.bal-tag__label--is-danger{color:var(--bal-tag-text-danger)}.bal-tag__label--is-purple{color:var(--bal-tag-text-purple)}.bal-tag__label--is-red{color:var(--bal-tag-text-red)}.bal-tag__label--is-yellow{color:var(--bal-tag-text-yellow)}.bal-tag__label--is-green{color:var(--bal-tag-text-green)}.bal-tag__label--is-purple-light{color:var(--bal-tag-text-purple-light)}.bal-tag__label--is-red-light{color:var(--bal-tag-text-red-light)}.bal-tag__label--is-yellow-light{color:var(--bal-tag-text-yellow-light)}.bal-tag__label--is-green-light{color:var(--bal-tag-text-green-light)}.bal-tag__label--is-invalid{background:var(--bal-color-border-danger);color:var(--bal-tag-text-invalid)}.bal-tag__label--is-disabled{background-color:var(--bal-tag-background-disabled);border-color:var(--bal-tag-border-disabled-color)}.bal-tag--is-disabled{cursor:default;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:var(--bal-tag-background-disabled);border-color:var(--bal-tag-border-disabled-color);-webkit-box-shadow:none;box-shadow:none;color:var(--bal-tag-text-disabled)}.bal-tag--is-disabled>span{color:var(--bal-tag-text-disabled)}.bal-tag__close{margin-left:.25rem;margin-right:-0.5rem}.bal-tag-group{display:-ms-flexbox;display:flex;gap:.25rem}";
-const BalTagStyle0 = balTagCss;
 
 const Tag = /*@__PURE__*/ proxyCustomElement(class Tag extends HTMLElement {
     constructor() {
@@ -15,13 +14,38 @@ const Tag = /*@__PURE__*/ proxyCustomElement(class Tag extends HTMLElement {
         this.balCloseClick = createEvent(this, "balCloseClick", 7);
         this.inheritedAttributes = {};
         this.inheritedAttributesClose = {};
+        /**
+         * The theme type of the tag.
+         */
         this.color = '';
+        /**
+         * The size of the tag element
+         */
         this.size = '';
+        /**
+         * The theme type of the tag.
+         */
         this.closable = false;
+        /**
+         * Overwrites the default color to invalid style
+         */
         this.invalid = 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;
+        /**
+         * Choosing left or center the tag is aligned to that side in the bal-card.
+         */
         this.position = 'left';
+        /**
+         * If `true` a light version of the color is displayed
+         */
         this.light = false;
+        /**
+         * @internal
+         * Sets background color to transparent
+         */
         this.transparent = false;
     }
     componentWillLoad() {
@@ -46,7 +70,7 @@ const Tag = /*@__PURE__*/ proxyCustomElement(class Tag extends HTMLElement {
                 this.invalid, "data-testid": "bal-tag-close", onClick: (ev) => this.balCloseClick.emit(ev) }, this.inheritedAttributesClose))));
     }
     get el() { return this; }
-    static get style() { return BalTagStyle0; }
+    static get style() { return balTagCss; }
 }, [4, "bal-tag", {
         "color": [1],
         "size": [1],

package/components/bal-text.js

@@ -1,4 +1,139 @@
-import { T as Text, d as defineCustomElement$1 } from './bal-text2.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { B as BEM } from './bem.js';
+
+const balTextCss = ":root{--bal-text-color-light-blue:var(--bal-color-text-light-blue);--bal-text-color-blue-dark:var(--bal-color-text-primary-dark);--bal-text-color-blue-light:var(--bal-color-text-hovered);--bal-text-color-primary-light:var(--bal-color-text-primary-light);--bal-text-color-primary-dark:var(--bal-color-text-primary-dark);--bal-text-color-white:var(--bal-color-text-white);--bal-text-color-black:var(--bal-color-text-black);--bal-text-color-grey:var(--bal-color-text-grey);--bal-text-color-primary:var(--bal-color-text-primary);--bal-text-color-blue:var(--bal-color-text-primary);--bal-text-color-info:var(--bal-color-text-info);--bal-text-color-success:var(--bal-color-text-success);--bal-text-color-warning:var(--bal-color-text-warning);--bal-text-color-danger:var(--bal-color-text-danger);--bal-text-color-danger-dark:var(--bal-color-text-danger-dark);--bal-text-color-danger-darker:var(--bal-color-text-danger-darker)}.bal-text{display:block;-webkit-box-sizing:content-box;box-sizing:content-box;position:static;word-break:break-word;margin:0 0 var(--bal-space-normal) 0}.bal-text--inline{display:inline;margin:0}.bal-text--space-all{margin-top:var(--bal-space-normal);margin-bottom:var(--bal-space-normal)}.bal-text--space-top{margin-top:var(--bal-space-normal);margin-bottom:0}.bal-text--space-bottom{margin-top:0;margin-bottom:var(--bal-space-normal)}.bal-text--space-none{margin:0}.bal-text__text{padding:0;margin:0}.bal-text__text--no-wrap{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bal-text__text--bold{font-weight:var(--bal-font-weight-bold)}.bal-text__text--shadow{text-shadow:var(--bal-text-shadow-normal)}.bal-text__text--heading{font-family:var(--bal-font-family-title)}.bal-text__text--size-small{font-size:var(--bal-text-size-small);line-height:var(--bal-line-height-small)}@media screen and (min-width: 769px),print{.bal-text__text--size-small{font-size:var(--bal-text-size-small-tablet);line-height:var(--bal-line-height-tablet-small)}}@media screen and (min-width: 1024px){.bal-text__text--size-small{font-size:var(--bal-text-size-small-desktop);line-height:var(--bal-line-height-desktop-small)}}.bal-text__text--size-block{font-size:var(--bal-text-size-medium);line-height:var(--bal-line-height-medium)}@media screen and (min-width: 769px),print{.bal-text__text--size-block{font-size:var(--bal-text-size-medium-tablet);line-height:var(--bal-line-height-tablet-medium)}}@media screen and (min-width: 1024px){.bal-text__text--size-block{font-size:var(--bal-text-size-medium-desktop);line-height:var(--bal-line-height-desktop-medium)}}.bal-text__text--size-lead{font-size:var(--bal-text-size-large);line-height:var(--bal-line-height-large)}@media screen and (min-width: 769px),print{.bal-text__text--size-lead{font-size:var(--bal-text-size-large-tablet);line-height:var(--bal-line-height-tablet-large)}}@media screen and (min-width: 1024px){.bal-text__text--size-lead{font-size:var(--bal-text-size-large-desktop);line-height:var(--bal-line-height-desktop-large)}}.bal-text__text--color-light-blue{color:var(--bal-text-color-light-blue)}.bal-text__text--color-blue-dark{color:var(--bal-text-color-primary-dark)}.bal-text__text--color-blue-light{color:var(--bal-text-color-blue-light)}.bal-text__text--color-primary-light{color:var(--bal-text-color-primary-light)}.bal-text__text--color-primary-dark{color:var(--bal-text-color-primary-dark)}.bal-text__text--color-white{color:var(--bal-text-color-white)}.bal-text__text--color-black{color:var(--bal-text-color-black)}.bal-text__text--color-grey{color:var(--bal-text-color-grey)}.bal-text__text--color-primary{color:var(--bal-text-color-primary)}.bal-text__text--color-blue{color:var(--bal-text-color-primary)}.bal-text__text--color-info{color:var(--bal-text-color-info)}.bal-text__text--color-success{color:var(--bal-text-color-success)}.bal-text__text--color-warning{color:var(--bal-text-color-warning)}.bal-text__text--color-danger{color:var(--bal-text-color-danger)}.bal-text__text--color-danger-dark{color:var(--bal-text-color-danger-dark)}.bal-text__text--color-danger-darker{color:var(--bal-text-color-danger-darker)}";
+
+const Text = /*@__PURE__*/ proxyCustomElement(class Text extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * PUBLIC API
+         * ------------------------------------------------------
+         */
+        /**
+         * Defines the size of the paragraph
+         */
+        this.size = '';
+        /**
+         * If `true` the text has heading font family
+         */
+        this.heading = false;
+        /**
+         * When true, the text will be truncated with a text overflow ellipsis instead of wrapping.
+         * Please note that text overflow can only occur in block or inline-block level elements,
+         * as these elements require a width to overflow.
+         */
+        this.noWrap = false;
+        /**
+         * If `true` the text is bold
+         */
+        this.bold = false;
+        /**
+         * If `true` the text is shown as a display inline
+         */
+        this.inline = false;
+        /**
+         * Defines the color of the text.
+         */
+        this.color = '';
+        /**
+         * Defines at which position the heading has spacing.
+         */
+        this.space = '';
+        /**
+         * If `true` the color gets inverted for dark backgrounds
+         */
+        this.inverted = false;
+        /**
+         * If `true` adds a text shadow to improve readability on image background
+         * */
+        this.shadow = 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 = undefined;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.invalid = undefined;
+        /**
+         * @internal
+         */
+        this.hovered = false;
+        /**
+         * @internal
+         */
+        this.pressed = false;
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    parseColor() {
+        if (this.disabled) {
+            return 'grey';
+        }
+        if (this.invalid) {
+            if (this.pressed) {
+                return 'danger-darker';
+            }
+            if (this.hovered) {
+                return 'danger-dark';
+            }
+            return 'danger';
+        }
+        const color = this.inverted ? 'white' : this.color === 'info' ? 'primary' : this.color;
+        if (this.pressed) {
+            return 'primary-dark';
+        }
+        if (this.hovered) {
+            return 'light-blue';
+        }
+        return color;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const Text = this.inline ? 'span' : 'p';
+        const color = this.parseColor();
+        const block = BEM.block('text');
+        return (h(Host, { key: '49275becd21961382642b6545611f8b7763d3010', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { key: '554500f4a7fdb830534fad06788e1d54375fb076', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
+                .element('text')
+                .modifier(`size-${this.size}`)
+                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: 'e508267e4a92701542dba64ecb4f9b488c4cd07a' }))));
+    }
+    static get style() { return balTextCss; }
+}, [4, "bal-text", {
+        "size": [1],
+        "heading": [4],
+        "noWrap": [4, "no-wrap"],
+        "bold": [4],
+        "inline": [4],
+        "color": [1],
+        "space": [1],
+        "inverted": [4],
+        "shadow": [4],
+        "disabled": [4],
+        "invalid": [4],
+        "hovered": [4],
+        "pressed": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-text":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Text);
+            }
+            break;
+    } });
+}
 
 const BalText = Text;
 const defineCustomElement = defineCustomElement$1;

package/components/bal-textarea.js

@@ -1,13 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getInputTarget, c as inputHandleFocus, d as inputHandleBlur, e as inputHandleChange, f as inputHandleClick, b as inputHandleHostClick, j as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
-import { o as debounceEvent } from './helpers.js';
+import { k as debounceEvent } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { a as ariaBooleanToString } from './aria.js';
 
 const balTextareaCss = ".bal-textarea{-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;width:100%;font-family:var(--bal-font-family-text);white-space:pre-wrap;-webkit-box-sizing:border-box;box-sizing:border-box}.bal-textarea__native{margin:0;display:block;width:100%;max-width:100%;max-height:100%;outline:none;background:rgba(0,0,0,0);-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:calc(.75em - 2px)}.bal-textarea__native::-webkit-input-placeholder{padding:0;font-family:inherit}.bal-textarea__native::-moz-placeholder{padding:0;font-family:inherit}.bal-textarea__native:-ms-input-placeholder{padding:0;font-family:inherit}.bal-textarea__native::-ms-input-placeholder{padding:0;font-family:inherit}.bal-textarea__native::placeholder{padding:0;font-family:inherit}";
-const BalTextareaStyle0 = balTextareaCss;
 
 const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLElement {
     constructor() {
@@ -22,6 +21,56 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
         this.inheritedAttributes = {};
         this.inputValue = this.value;
         this.initialValue = this.value || '';
+        this.focused = false;
+        this.ariaForm = defaultBalAriaForm;
+        /**
+         * 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;
+        /**
+         * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+         */
+        this.autocapitalize = 'none';
+        /**
+         * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        this.autocomplete = 'off';
+        /**
+         * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+         */
+        this.autofocus = 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`, 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 user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * If `true` the input gets a clickable cursor style
+         */
+        this.clickable = false;
+        /**
+         * The value of the textarea.
+         */
+        this.value = '';
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
         this.onInput = (ev) => {
             const input = getInputTarget(ev);
             if (input) {
@@ -40,27 +89,6 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
         };
         this.onClick = (ev) => inputHandleClick(this, ev);
         this.handleClick = (ev) => inputHandleHostClick(this, ev);
-        this.focused = false;
-        this.ariaForm = defaultBalAriaForm;
-        this.name = this.inputId;
-        this.invalid = false;
-        this.autocapitalize = 'none';
-        this.autocomplete = 'off';
-        this.autofocus = false;
-        this.debounce = 0;
-        this.placeholder = undefined;
-        this.maxLength = undefined;
-        this.minLength = undefined;
-        this.disabled = false;
-        this.readonly = false;
-        this.cols = undefined;
-        this.rows = undefined;
-        this.wrap = undefined;
-        this.required = false;
-        this.clickable = false;
-        this.inputmode = undefined;
-        this.value = '';
-        this.autoInvalidOff = false;
     }
     debounceChanged() {
         this.balChange = debounceEvent(this.balChange, this.debounce);
@@ -124,7 +152,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
     static get watchers() { return {
         "debounce": ["debounceChanged"]
     }; }
-    static get style() { return BalTextareaStyle0; }
+    static get style() { return balTextareaCss; }
 }, [4, "bal-textarea", {
         "name": [1],
         "invalid": [4],

package/components/bal-time-input.js

@@ -1,8 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { l as lodash_isnil } from './index3.js';
+import { i as isNil } from './index2.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
 import { g as getInputTarget, c as inputHandleFocus, d as inputHandleBlur, e as inputHandleChange, 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 { k as debounceEvent } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 import { i as isCtrlOrCommandKey, N as NUMBER_KEYS, A as ACTION_KEYS } from './keys.constant.js';
 import { B as BEM } from './bem.js';
@@ -12,11 +14,8 @@ import { L as Logger } from './log.js';
 import { a as ariaBooleanToString } from './aria.js';
 import { d as defineCustomElement$3 } from './bal-icon2.js';
 import { d as defineCustomElement$2 } from './bal-input-group2.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
 
 const balTimeInputCss = ":root{--bal-time-input-native-placeholder-background-before:var(--bal-color-white);--bal-time-input-native-placeholder-background-disabled-before:var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-danger-before:var(--bal-color-danger-1);--bal-time-input-native-placeholder-background-disabled-danger-before:var(--bal-color-grey-2);--bal-time-input-native-placeholder-background-hover-before:var(--bal-color-grey-1);--bal-time-input-native-text-color:var(--bal-color-primary-3);--bal-time-input-native-text-color-focus-value:var(--bal-color-primary);--bal-time-input-native-text-color-disabled:var(--bal-color-grey-5);--bal-time-input-native-text-color-disabled-value:var(--bal-color-grey-4);--bal-time-input-native-placeholder-text-color-disabled-before:var(--bal-color-grey-5);--bal-time-input-native-placeholder-text-color-before:var(--bal-color-primary-3)}.bal-time-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)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper{display:flex}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper::-webkit-clear-button{display:none}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper::-webkit-inner-spin-button{display:none}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper::-webkit-calendar-picker-indicator{display:none;background:none}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.has-focus::-webkit-datetime-edit-text,.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.has-focus::-webkit-datetime-edit-text::-webkit-datetime-edit-hour-field,.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.has-value::-webkit-datetime-edit-text::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.has-focus::-webkit-datetime-edit-text::-webkit-datetime-edit-minute-field,.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.has-value::-webkit-datetime-edit-text::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-focus-value)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.is-disabled::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.is-disabled::-webkit-datetime-edit-text::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.is-disabled::-webkit-datetime-edit-text::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.is-disabled::-webkit-datetime-edit-text.has-value::-webkit-datetime-edit-text{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.is-disabled::-webkit-datetime-edit-text.has-value::-webkit-datetime-edit-text::-webkit-datetime-edit-hour-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.is-disabled::-webkit-datetime-edit-text.has-value::-webkit-datetime-edit-text::-webkit-datetime-edit-minute-field{color:var(--bal-time-input-native-text-color-disabled-value)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.show-placeholder.is-disabled::before{color:var(--bal-time-input-native-placeholder-text-color-disabled-before);background:var(--bal-time-input-native-placeholder-background-disabled-before)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.show-placeholder.is-disabled::before.is-danger::before{background:var(--bal-time-input-native-placeholder-background-danger-before)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.show-placeholder.is-disabled::before.is-disabled.is-danger::before{background:var(--bal-time-input-native-placeholder-background-disabled-danger-before)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.show-placeholder.is-disabled::before:hover::before{background:var(--bal-time-input-native-placeholder-background-hover-before)}.bal-time-input__native::-webkit-datetime-edit-fields-wrapper.show-placeholder.is-disabled::before::before{color:var(--bal-time-input-native-placeholder-text-color-before);content:attr(placeholder);pointer-events:none;position:absolute;background:var(--bal-time-input-native-placeholder-background-before)}";
-const BalTimeInputStyle0 = balTimeInputCss;
 
 const TimeInput = /*@__PURE__*/ proxyCustomElement(class TimeInput extends HTMLElement {
     constructor() {
@@ -32,6 +31,42 @@ const TimeInput = /*@__PURE__*/ proxyCustomElement(class TimeInput extends HTMLE
         this.inheritedAttributes = {};
         this.inputValue = this.value;
         this.initialValue = '';
+        this.focused = false;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.ariaForm = defaultBalAriaForm;
+        /**
+         * 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 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;
+        /**
+         * 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;
         this.onInput = (ev) => {
             const input = getInputTarget(ev);
             if (input) {
@@ -51,24 +86,12 @@ const TimeInput = /*@__PURE__*/ proxyCustomElement(class TimeInput extends HTMLE
             }
         };
         this.onKeydown = (ev) => {
-            if (!lodash_isnil(ev) && !isCtrlOrCommandKey(ev)) {
+            if (!isNil(ev) && !isCtrlOrCommandKey(ev)) {
                 if (!this.getAllowedKeys().includes(ev.key)) {
                     return stopEventBubbling(ev);
                 }
             }
         };
-        this.focused = false;
-        this.language = defaultConfig.language;
-        this.region = defaultConfig.region;
-        this.ariaForm = defaultBalAriaForm;
-        this.name = this.inputId;
-        this.invalid = false;
-        this.required = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.debounce = 0;
-        this.value = undefined;
-        this.autoInvalidOff = false;
     }
     createLogger(log) {
         this.log = log;
@@ -152,7 +175,7 @@ const TimeInput = /*@__PURE__*/ proxyCustomElement(class TimeInput extends HTMLE
     static get watchers() { return {
         "debounce": ["debounceChanged"]
     }; }
-    static get style() { return BalTimeInputStyle0; }
+    static get style() { return balTimeInputCss; }
 }, [0, "bal-time-input", {
         "name": [1],
         "invalid": [4],