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

package/dist/esm/bal-tab-item_2.entry.js

@@ -1,95 +1,57 @@
-import { H as registerInstance, P as createEvent, M as h, N as Host, O as getElement, a as balBrowser, L as Logger, f as defaultConfig, Q as raf, r as deepReady, W as transitionEndAsync, I as debounce, T as debounceEvent, X as hasParent, K as rOnLoad, t as isDescendant, x as waitAfterFramePaint } from './index-DgPiq0y0.js';
-import { a as inheritTrackingAttributes, i as inheritAttributes } from './attributes-C4sZQbkT.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
-import { L as ListenToAnimation } from './animation.decorator-BRrK54mN.js';
-import { a as areArraysEqual } from './array-CDfSqLEo.js';
-import { B as BEM } from './bem-ByiN-QjD.js';
-import { b as balBreakpoints } from './breakpoints.subject-D2jditew.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-B9fGMzyI.js';
-import { L as ListenToConfig } from './config.decorator-g255X8DE.js';
-import { s as stopEventBubbling } from './form-input-DyU_I7Nf.js';
-import { L as ListenToMutation } from './mutation.decorator-CFRV3n5T.js';
-import './window-resize.subject-Dl0mHA8u.js';
-import { L as ListenToResize } from './resize.decorator-CdfVlqf4.js';
-import { t as toKebabCase, S as SwiperUtil, g as getComputedPadding, a as getWidthOfOverflowingChildren } from './swiper.util-Dy8CWRH7.js';
-import { L as ListenToSwipe } from './swipe.decorator-LAK4VYA0.js';
-import { L as ListenToVisibility } from './visibility.decorator-B1BbAwZf.js';
-import { n as newBalTabOption } from './bal-tab.util-BmVI6cLw.js';
-import { a as ariaBooleanToString } from './aria-DBsOHTWj.js';
-import './listener-BRXdr5Mk.js';
-import './index-zWZxKBfo.js';
-import './_commonjsHelpers-BFTU3MAI.js';
-import './index-B4k_dH6V.js';
-import './device-dF5vUTps.js';
-import './tokens.esm-B0bmgb-_.js';
-import './keyboard.helpers-D1VPLQ5z.js';
-import './swipe.subject-2eHkUcpg.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
+import { a as inheritTrackingAttributes, i as inheritAttributes } from './attributes-a3e70948.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
+import { a as areArraysEqual } from './array-4c09dfe3.js';
+import { B as BEM } from './bem-8c7d2eb0.js';
+import { s as stopEventBubbling } from './form-input-1ebdb905.js';
+import { o as raf, d as deepReady, t as transitionEndAsync, k as debounce, p as debounceEvent, u as hasParent, m as rOnLoad, i as isDescendant, b as waitAfterFramePaint } from './helpers-51d51cc5.js';
+import { L as Logger } from './log-dfd1c19f.js';
+import { t as toKebabCase, S as SwiperUtil, g as getComputedPadding, a as getWidthOfOverflowingChildren } from './swiper.util-8e17b8c4.js';
+import { n as newBalTabOption } from './bal-tab.util-933315fe.js';
+import { a as ariaBooleanToString } from './aria-ea150568.js';
+import { b as balBrowser } from './browser-a8073d92.js';
+import { b as balBreakpoints } from './breakpoints.subject-2f68e834.js';
+import { d as defaultConfig } from './config.default-53a04699.js';
+import { L as ListenToMutation } from './mutation.decorator-6a69cedb.js';
+import { L as ListenToVisibility } from './visibility.decorator-5db91610.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-4de4315f.js';
+import { L as ListenToResize } from './resize.decorator-3c8e5ee2.js';
+import { L as ListenToSwipe } from './swipe.decorator-3d3585e7.js';
+import { L as ListenToAnimation } from './animation.decorator-7fca988f.js';
+import { L as ListenToConfig } from './config.decorator-6795d1fe.js';
+import './index-82aff103.js';
+import './index-95ee0c4b.js';
+import './_commonjsHelpers-1c8beb5f.js';
+import './config.utils-f3793464.js';
+import './keyboard.helpers-159e517d.js';
+import './device-8c6d2881.js';
+import './listener-04842ae9.js';
+import './tokens.esm-4409ffbb.js';
+import './swipe.subject-26a9e5a5.js';
 
 const TabItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.balNavigate = createEvent(this, "balNavigate");
-        this.balKeyDown = createEvent(this, "balKeyDown");
+        this.balNavigate = createEvent(this, "balNavigate", 7);
+        this.balKeyDown = createEvent(this, "balKeyDown", 7);
         this.inheritAttributes = {};
         this.tabPanelID = `bal-tab-panel-id-${panelID++}`;
         this.isActive = false;
         this.tabsId = undefined;
-        /**
-         * Tells if this route is active and overrides the bal-tabs value property.
-         */
         this.active = false;
-        /**
-         * This is the key of the tab.
-         */
         this.value = '';
-        /**
-         * Label for the tab.
-         */
         this.label = '';
-        /**
-         * Link to path.
-         */
+        this.rel = undefined;
         this.href = undefined;
-        /**
-         * Specifies where to display the linked URL.
-         * Only applies when an `href` is provided.
-         */
         this.target = '_self';
-        /**
-         * If `true` a small red bubble is added to the tab.
-         */
         this.bubble = false;
-        /**
-         * If `true` the tab is disabled.
-         */
         this.disabled = false;
-        /**
-         * If `true` the step is hidden.
-         */
         this.invisible = false;
-        /**
-         * Tell's if the linking is done by a router.
-         */
         this.prevent = false;
-        /**
-         * Tab icon not available for the steps.
-         */
         this.icon = undefined;
-        /**
-         * If `true` the tab does not have a panel
-         */
         this.noPanel = false;
-        /**
-         * A11y attributes for the native button element.
-         */
-        this.a11yControls = undefined;
-        /**
-         * Sub label for the tab.
-         */
+        this.aria = undefined;
         this.subLabel = '';
-        /**
-         * source for the svg icon
-         */
         this.svg = '';
     }
     componentWillLoad() {
@@ -132,7 +94,7 @@ const TabItem = class {
             keyDown: this.balKeyDown,
             trackingData: this.inheritAttributes,
             noPanel: this.noPanel,
-            a11yControls: this.a11yControls,
+            aria: this.aria,
             subLabel: this.subLabel,
             svg: this.svg,
         };
@@ -140,10 +102,10 @@ const TabItem = class {
     render() {
         const hasPanel = !this.noPanel;
         const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (h(Host, { key: '404225fa81eca41461e3815c6aebf4140fef9d6f', id: this.tabPanelID, class: {
+        return (h(Host, { key: 'dff521c2768c6f6363c40f464d7a1c4b755ed56f', id: this.tabPanelID, class: {
                 'bal-tab-item': true,
                 'bal-tab-item--active': this.isActive,
-            }, role: hasPanel ? 'tabpanel' : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', "aria-labelledby": this.tabsId ? `${this.tabsId}-button-${this.value}` : undefined, tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: '8c97e95d9b6a836d3abeb3f5fe205039e0449cc4' })));
+            }, role: hasPanel ? 'tabpanel' : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', "aria-labelledby": this.tabsId ? `${this.tabsId}-button-${this.value}` : undefined, tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: '3a98e9f46657921751ba7d625ae45cf0eef46025' })));
     }
     get el() { return getElement(this); }
 };
@@ -268,107 +230,17 @@ 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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.balChange = createEvent(this, "balChange");
-        this.balWillAnimate = createEvent(this, "balWillAnimate");
-        this.balDidAnimate = createEvent(this, "balDidAnimate");
+        this.balChange = createEvent(this, "balChange", 7);
+        this.balWillAnimate = createEvent(this, "balWillAnimate", 7);
+        this.balDidAnimate = createEvent(this, "balDidAnimate", 7);
         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
          * ------------------------------------------------------
@@ -577,6 +449,39 @@ const Tabs = class {
                 }
             }
         };
+        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;
@@ -990,6 +895,6 @@ __decorate([
     __metadata("design:returntype", Promise)
 ], Tabs.prototype, "configChanged", null);
 let TabsIds = 0;
-Tabs.style = balTabsCss;
+Tabs.style = BalTabsStyle0;
 
 export { TabItem as bal_tab_item, Tabs as bal_tabs };

package/dist/esm/bal-table.entry.js

@@ -1,14 +1,12 @@
-import { H as registerInstance, M as h, N as Host, O as getElement } from './index-DgPiq0y0.js';
-import { B as BEM } from './bem-ByiN-QjD.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
+import { B as BEM } from './bem-8c7d2eb0.js';
 
 const balTableCss = ".bal-table{display:block;position:static}.bal-table--is-fullwidth{display:-ms-flexbox;display:flex;width:100%}bal-checkbox .bal-checkbox__label::before{top:0}bal-checkbox .bal-checkbox__label::after{margin-top:0px}";
+const BalTableStyle0 = balTableCss;
 
 const Table = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        /**
-         * If `true` the table has a full width
-         */
         this.expanded = false;
     }
     render() {
@@ -19,6 +17,6 @@ const Table = class {
     }
     get el() { return getElement(this); }
 };
-Table.style = balTableCss;
+Table.style = BalTableStyle0;
 
 export { Table as bal_table };

package/dist/esm/bal-tag_2.entry.js

@@ -1,48 +1,24 @@
-import { H as registerInstance, P as createEvent, M as h, N as Host, O as getElement } from './index-DgPiq0y0.js';
-import { i as inheritAttributes } from './attributes-C4sZQbkT.js';
-import { B as BEM } from './bem-ByiN-QjD.js';
-import { a as ariaBooleanToString } from './aria-DBsOHTWj.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
+import { i as inheritAttributes } from './attributes-a3e70948.js';
+import { B as BEM } from './bem-8c7d2eb0.js';
+import { a as ariaBooleanToString } from './aria-ea150568.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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.balCloseClick = createEvent(this, "balCloseClick");
+        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() {
@@ -68,7 +44,7 @@ const Tag = class {
     }
     get el() { return getElement(this); }
 };
-Tag.style = balTagCss;
+Tag.style = BalTagStyle0;
 
 const TagGroup = class {
     constructor(hostRef) {

package/dist/esm/bal-textarea.entry.js

@@ -1,74 +1,28 @@
-import { H as registerInstance, P as createEvent, T as debounceEvent, M as h, N as Host, O as getElement } from './index-DgPiq0y0.js';
-import { g as getInputTarget, a as inputHandleFocus, b as inputHandleBlur, e as inputHandleChange, f as inputHandleClick, i as inputHandleHostClick, h as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-DyU_I7Nf.js';
-import { i as inheritAttributes } from './attributes-C4sZQbkT.js';
-import { B as BEM } from './bem-ByiN-QjD.js';
-import { d as defaultBalAriaForm } from './form-FCLKfv6B.js';
-import { a as ariaBooleanToString } from './aria-DBsOHTWj.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
+import { g as getInputTarget, a as inputHandleFocus, b as inputHandleBlur, e as inputHandleChange, f as inputHandleClick, i as inputHandleHostClick, h as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-1ebdb905.js';
+import { p as debounceEvent } from './helpers-51d51cc5.js';
+import { i as inheritAttributes } from './attributes-a3e70948.js';
+import { B as BEM } from './bem-8c7d2eb0.js';
+import { d as defaultBalAriaForm } from './form-841232ff.js';
+import { a as ariaBooleanToString } from './aria-ea150568.js';
+import './browser-a8073d92.js';
+import './config.utils-f3793464.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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.balChange = createEvent(this, "balChange");
-        this.balInput = createEvent(this, "balInput");
-        this.balBlur = createEvent(this, "balBlur");
-        this.balKeyPress = createEvent(this, "balKeyPress");
-        this.balFocus = createEvent(this, "balFocus");
+        this.balChange = createEvent(this, "balChange", 7);
+        this.balInput = createEvent(this, "balInput", 7);
+        this.balBlur = createEvent(this, "balBlur", 7);
+        this.balKeyPress = createEvent(this, "balKeyPress", 7);
+        this.balFocus = createEvent(this, "balFocus", 7);
         this.inputId = `bal-textarea-${TextareaIds++}`;
         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) {
@@ -87,6 +41,27 @@ const Textarea = class {
         };
         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,6 +127,6 @@ const Textarea = class {
     }; }
 };
 let TextareaIds = 0;
-Textarea.style = balTextareaCss;
+Textarea.style = BalTextareaStyle0;
 
 export { Textarea as bal_textarea };