npm - @baloise/ds-core - Versions diffs - 19.3.0-nightly.20250704 → 19.3.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1113) hide show

package/components/bal-tabs2.js CHANGED Viewed

@@ -1,23 +1,13 @@
 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 { r as raf, d as deepReady, t as transitionEndAsync, q as debounce, k as debounceEvent, u as hasParent, l as rOnLoad, i as isDescendant, a as waitAfterFramePaint } from './helpers.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 { 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';
@@ -30,6 +20,15 @@ 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');
@@ -150,6 +149,7 @@ 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,97 +161,6 @@ 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
          * ------------------------------------------------------
@@ -460,6 +369,39 @@ 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;
@@ -823,7 +765,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         "vertical": ["verticalChanged"],
         "value": ["valueChanged"]
     }; }
-    static get style() { return balTabsCss; }
+    static get style() { return BalTabsStyle0; }
 }, [4, "bal-tabs", {
         "float": [1],
         "fullwidth": [4],

package/components/bal-tag2.js CHANGED Viewed

@@ -6,6 +6,7 @@ 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() {
@@ -14,38 +15,13 @@ 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() {
@@ -70,7 +46,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 balTagCss; }
+    static get style() { return BalTagStyle0; }
 }, [4, "bal-tag", {
         "color": [1],
         "size": [1],

package/components/bal-text.js CHANGED Viewed

@@ -1,139 +1,4 @@
-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;
-    } });
-}
+import { T as Text, d as defineCustomElement$1 } from './bal-text2.js';
 const BalText = Text;
 const defineCustomElement = defineCustomElement$1;

package/components/bal-text2.js ADDED Viewed

@@ -0,0 +1,94 @@
+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 BalTextStyle0 = balTextCss;
+const Text = /*@__PURE__*/ proxyCustomElement(class Text extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.size = '';
+        this.heading = false;
+        this.noWrap = false;
+        this.bold = false;
+        this.inline = false;
+        this.color = '';
+        this.space = '';
+        this.inverted = false;
+        this.shadow = false;
+        this.disabled = undefined;
+        this.invalid = undefined;
+        this.hovered = false;
+        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 BalTextStyle0; }
+}, [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() {
+    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;
+    } });
+}
+export { Text as T, defineCustomElement as d };

package/components/bal-textarea.js CHANGED Viewed

@@ -1,12 +1,13 @@
 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 { k as debounceEvent } from './helpers.js';
+import { o 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() {
@@ -21,56 +22,6 @@ 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) {
@@ -89,6 +40,27 @@ 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);
@@ -152,7 +124,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
     static get watchers() { return {
         "debounce": ["debounceChanged"]
     }; }
-    static get style() { return balTextareaCss; }
+    static get style() { return BalTextareaStyle0; }
 }, [4, "bal-textarea", {
         "name": [1],
         "invalid": [4],