@baloise/ds-core 19.2.0 → 19.3.0-nightly.20250630

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

@@ -1,60 +1,97 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const attributes = require('./attributes-11acd153.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const array = require('./array-ae164ca3.js');
-const bem = require('./bem-81bc6a2d.js');
-const formInput = require('./form-input-e9974433.js');
-const helpers = require('./helpers-debb881a.js');
-const log = require('./log-33398c2a.js');
-const swiper_util = require('./swiper.util-d23b8eb0.js');
-const balTab_util = require('./bal-tab.util-d0785ef4.js');
-const aria = require('./aria-7672033f.js');
-const browser = require('./browser-1d542d0f.js');
-const breakpoints_subject = require('./breakpoints.subject-46e29594.js');
-const config_default = require('./config.default-7e96eb95.js');
-const mutation_decorator = require('./mutation.decorator-485e250e.js');
-const visibility_decorator = require('./visibility.decorator-a218aab9.js');
-const breakpoints_decorator = require('./breakpoints.decorator-e93836f7.js');
-const resize_decorator = require('./resize.decorator-e4a92322.js');
-const swipe_decorator = require('./swipe.decorator-9c105f90.js');
-const animation_decorator = require('./animation.decorator-40bdfb52.js');
-const config_decorator = require('./config.decorator-de244188.js');
-require('./index-e6a233be.js');
-require('./index-3b7f8988.js');
-require('./_commonjsHelpers-68cdf74f.js');
-require('./config.utils-df30e424.js');
-require('./keyboard.helpers-2093e793.js');
-require('./device-9f97a845.js');
-require('./listener-52d2e5fd.js');
-require('./tokens.esm-b4bf229a.js');
-require('./swipe.subject-191f7d8a.js');
+var index = require('./index-D4vG8k57.js');
+var attributes = require('./attributes-Cp0kpySW.js');
+var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
+var animation_decorator = require('./animation.decorator-Ct7aiy8a.js');
+var array = require('./array-Db63Hhl1.js');
+var bem = require('./bem-p0PWVN8n.js');
+var breakpoints_subject = require('./breakpoints.subject-BO2zDz46.js');
+var breakpoints_decorator = require('./breakpoints.decorator-BvW42Q0T.js');
+var config_decorator = require('./config.decorator-D_FjiIar.js');
+var formInput = require('./form-input-B660-bjw.js');
+var mutation_decorator = require('./mutation.decorator-CugZMhs4.js');
+require('./window-resize.subject-D9DR__EJ.js');
+var resize_decorator = require('./resize.decorator-D7f4FbeF.js');
+var swiper_util = require('./swiper.util-Dh50nc_s.js');
+var swipe_decorator = require('./swipe.decorator-aP7AIbLE.js');
+var visibility_decorator = require('./visibility.decorator-kwm3v9pQ.js');
+var balTab_util = require('./bal-tab.util-DFGwGbfr.js');
+var aria = require('./aria-BzkqcV7W.js');
+require('./listener-B7XPbb55.js');
+require('./index-BZ67Dcnb.js');
+require('./_commonjsHelpers-BJu3ubxk.js');
+require('./index-BobQkZjn.js');
+require('./device-PwXgHi--.js');
+require('./tokens.esm-BPYitgVY.js');
+require('./keyboard.helpers-BkZpVT-9.js');
+require('./swipe.subject-BhMYr3OO.js');
 
 const TabItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.balNavigate = index.createEvent(this, "balNavigate", 7);
+        this.balNavigate = index.createEvent(this, "balNavigate");
+        this.balKeyDown = index.createEvent(this, "balKeyDown");
         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 = '';
-        this.rel = undefined;
+        /**
+         * Link to path.
+         */
         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;
-        this.aria = undefined;
+        /**
+         * A11y attributes for the native button element.
+         */
+        this.a11yControls = undefined;
+        /**
+         * Sub label for the tab.
+         */
         this.subLabel = '';
+        /**
+         * source for the svg icon
+         */
         this.svg = '';
     }
     componentWillLoad() {
@@ -94,9 +131,10 @@ const TabItem = class {
             passed: false,
             prevent: this.prevent,
             navigate: this.balNavigate,
+            keyDown: this.balKeyDown,
             trackingData: this.inheritAttributes,
             noPanel: this.noPanel,
-            aria: this.aria,
+            a11yControls: this.a11yControls,
             subLabel: this.subLabel,
             svg: this.svg,
         };
@@ -104,10 +142,10 @@ const TabItem = class {
     render() {
         const hasPanel = !this.noPanel;
         const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (index.h(index.Host, { key: 'fb75a99fe41ccd8bbac4e1d8c0c8bf8a116e3121', id: this.tabPanelID, class: {
+        return (index.h(index.Host, { key: '404225fa81eca41461e3815c6aebf4140fef9d6f', 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 }, index.h("slot", { key: '5e8e7ce04a22af2fce844c4604c3a3277dbccce5' })));
+            }, 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 }, index.h("slot", { key: '8c97e95d9b6a836d3abeb3f5fe205039e0449cc4' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -166,7 +204,10 @@ const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accord
     if (!isLinkList) {
         attrs['tabindex'] = item.active ? '0' : '-1';
     }
-    const renderButton = () => (index.h(TagType, Object.assign({ id: `${tabsId}-button-${swiper_util.toKebabCase(item.value)}`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('accordion').class(accordion)), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('expanded').class(isExpanded)), bemEl.modifier('spaceless').class(spaceless)), bemEl.modifier('first').class(isFirst)), bemEl.modifier('last').class(isLast)), bemEl.modifier('passed').class(item.passed)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal')), bemEl.modifier(`display-svg`).class(item.svg && item.svg.length > 0)), bemEl.modifier('group-has-sub-label').class(hasSubLabelInGroup)), bemEl.modifier('dim-inactive-elements').class(dimInactiveElements)), { 'bal-focusable': !item.disabled && !item.invisible }), draggable: false, "data-tabs": tabsId, "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-tabs-item", "aria-selected": !isTabButton ? undefined : item.active ? 'true' : 'false' }, attrs, { onClick: (ev) => onSelectTab(ev, item) }),
+    const renderButton = () => (index.h(TagType, Object.assign({ id: `${tabsId}-button-${swiper_util.toKebabCase(item.value)}`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('accordion').class(accordion)), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('expanded').class(isExpanded)), bemEl.modifier('spaceless').class(spaceless)), bemEl.modifier('first').class(isFirst)), bemEl.modifier('last').class(isLast)), bemEl.modifier('passed').class(item.passed)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal')), bemEl.modifier(`display-svg`).class(item.svg && item.svg.length > 0)), bemEl.modifier('group-has-sub-label').class(hasSubLabelInGroup)), bemEl.modifier('dim-inactive-elements').class(dimInactiveElements)), { 'bal-focusable': !item.disabled && !item.invisible }), draggable: false, "data-tabs": tabsId, "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-tabs-item", "aria-selected": !isTabButton ? undefined : item.active ? 'true' : 'false' }, attrs, { onClick: (ev) => onSelectTab(ev, item), onKeyDown: (ev) => {
+            var _a;
+            (_a = item.keyDown) === null || _a === void 0 ? void 0 : _a.emit(ev);
+        } }),
         item.icon || item.svg ? (index.h(TabIcon, { accordion: false, item: item, isMobile: isMobile, hasBubble: hasIconBubble, inverted: inverted })) : (''),
         index.h(TabLabel, { item: item, isMobile: isMobile, isVertical: isVertical, isExpanded: isExpanded, hasBubble: hasLabelBubble, inverted: inverted, context: context }),
         accordion && !item.href ? (index.h(TabIcon, { accordion: accordion, isAccordionOpen: isAccordionOpen, item: item, isMobile: isMobile, hasBubble: hasAccordionIconBubble, inverted: inverted })) : ('')));
@@ -216,7 +257,7 @@ const TabSelect = ({ items, value, onSelectTab }) => {
         if (selectedTabs.length > 0) {
             const selectedTab = selectedTabs[0];
             if (selectedTab.href !== '' && selectedTab.href !== undefined) {
-                if (browser.balBrowser.hasWindow) {
+                if (index.balBrowser.hasWindow) {
                     window.open(selectedTab.href, selectedTab.target);
                 }
             }
@@ -229,17 +270,107 @@ 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) {
         index.registerInstance(this, hostRef);
-        this.balChange = index.createEvent(this, "balChange", 7);
-        this.balWillAnimate = index.createEvent(this, "balWillAnimate", 7);
-        this.balDidAnimate = index.createEvent(this, "balDidAnimate", 7);
+        this.balChange = index.createEvent(this, "balChange");
+        this.balWillAnimate = index.createEvent(this, "balWillAnimate");
+        this.balDidAnimate = index.createEvent(this, "balDidAnimate");
         this.tabsId = `bal-tabs-${TabsIds++}`;
         this.inheritAttributes = {};
         this.swiper = new swiper_util.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 = breakpoints_subject.balBreakpoints.isMobile;
+        this.isTablet = breakpoints_subject.balBreakpoints.isTablet;
+        this.language = index.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
          * ------------------------------------------------------
@@ -325,9 +456,9 @@ const Tabs = class {
             if (this.currentRaf !== undefined) {
                 cancelAnimationFrame(this.currentRaf);
             }
-            helpers.raf(async () => {
-                await helpers.deepReady(this.el, true);
-                this.currentRaf = helpers.raf(async () => {
+            index.raf(async () => {
+                await index.deepReady(this.el, true);
+                this.currentRaf = index.raf(async () => {
                     const target = this.getTargetElement(this.value);
                     if (!target) {
                         return;
@@ -342,7 +473,7 @@ const Tabs = class {
                     if (lineElement) {
                         const isVertical = this.isVertical();
                         this.balWillAnimate.emit(this.value);
-                        const waitForTransition = helpers.transitionEndAsync(lineElement, 300);
+                        const waitForTransition = index.transitionEndAsync(lineElement, 300);
                         if (isVertical) {
                             lineElement.style.setProperty('transform', `translateY(${offset}px)`);
                             lineElement.style.setProperty('min-height', `${size}px`);
@@ -412,7 +543,7 @@ const Tabs = class {
          * EVENT BINDING
          * ------------------------------------------------------
          */
-        this.onOptionChange = helpers.debounce(() => this.onOptionChangeInternal(), 100);
+        this.onOptionChange = index.debounce(() => this.onOptionChangeInternal(), 100);
         this.onOptionChangeInternal = async () => {
             try {
                 const options = await this.getOptions();
@@ -448,39 +579,6 @@ 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 = breakpoints_subject.balBreakpoints.isMobile;
-        this.isTablet = breakpoints_subject.balBreakpoints.isTablet;
-        this.language = config_default.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;
@@ -493,7 +591,7 @@ const Tabs = class {
         this.updateSwiper();
     }
     debounceChanged() {
-        this.balChange = helpers.debounceEvent(this.balChange, this.debounce);
+        this.balChange = index.debounceEvent(this.balChange, this.debounce);
     }
     verticalChanged() {
         this.updateSwiper();
@@ -511,7 +609,7 @@ const Tabs = class {
         this.swiper.connectedCallback(this);
         this.swiper.controls = 'small';
         this.updateSwiper();
-        this.inNavbar = helpers.hasParent('bal-navbar', this.el);
+        this.inNavbar = index.hasParent('bal-navbar', this.el);
         if (this.inNavbar) {
             const parentNavbar = this.el.closest('bal-navbar');
             if (parentNavbar) {
@@ -521,7 +619,7 @@ const Tabs = class {
         this.debounceChanged();
         this.mutationObserverActive = this.options === undefined || this.options.length < 1;
         if (this.accordion) {
-            const inNavMenuBar = helpers.hasParent('bal-nav-menu-bar', this.el);
+            const inNavMenuBar = index.hasParent('bal-nav-menu-bar', this.el);
             if (inNavMenuBar) {
                 this.isAccordionOpen = false;
             }
@@ -547,7 +645,7 @@ const Tabs = class {
         this.items.forEach(item => {
             item.setTabId(this.tabsId);
         });
-        helpers.rOnLoad(() => {
+        index.rOnLoad(() => {
             this.enableLineRender = true;
             this.animateLine(true);
         });
@@ -701,7 +799,7 @@ const Tabs = class {
     isUsedInNavbar(target) {
         const parentNavbar = target.closest('bal-navbar');
         const isNavbarOpen = target;
-        if (parentNavbar && helpers.isDescendant(parentNavbar, this.el)) {
+        if (parentNavbar && index.isDescendant(parentNavbar, this.el)) {
             this.isNavbarOpen = isNavbarOpen;
         }
     }
@@ -797,7 +895,7 @@ const Tabs = class {
             const index = options.findIndex(option => option.value === tab.value);
             this.swiper.updateIndex(index);
         }
-        await helpers.waitAfterFramePaint();
+        await index.waitAfterFramePaint();
         if (hasKeyboardFocus) {
             const tabEl = this.el.querySelector(`#${this.tabsId}-button-${swiper_util.toKebabCase(tab.value)}`);
             if (tabEl) {
@@ -846,7 +944,7 @@ const Tabs = class {
     }; }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-tabs'),
+    index.Logger('bal-tabs'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
@@ -894,7 +992,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", Promise)
 ], Tabs.prototype, "configChanged", null);
 let TabsIds = 0;
-Tabs.style = BalTabsStyle0;
+Tabs.style = balTabsCss;
 
 exports.bal_tab_item = TabItem;
 exports.bal_tabs = Tabs;

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

@@ -1,16 +1,16 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const bem = require('./bem-81bc6a2d.js');
+var index = require('./index-D4vG8k57.js');
+var bem = require('./bem-p0PWVN8n.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) {
         index.registerInstance(this, hostRef);
+        /**
+         * If `true` the table has a full width
+         */
         this.expanded = false;
     }
     render() {
@@ -21,6 +21,6 @@ const Table = class {
     }
     get el() { return index.getElement(this); }
 };
-Table.style = BalTableStyle0;
+Table.style = balTableCss;
 
 exports.bal_table = Table;

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

@@ -1,28 +1,50 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const attributes = require('./attributes-11acd153.js');
-const bem = require('./bem-81bc6a2d.js');
-const aria = require('./aria-7672033f.js');
+var index = require('./index-D4vG8k57.js');
+var attributes = require('./attributes-Cp0kpySW.js');
+var bem = require('./bem-p0PWVN8n.js');
+var aria = require('./aria-BzkqcV7W.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) {
         index.registerInstance(this, hostRef);
-        this.balCloseClick = index.createEvent(this, "balCloseClick", 7);
+        this.balCloseClick = index.createEvent(this, "balCloseClick");
         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() {
@@ -48,7 +70,7 @@ const Tag = class {
     }
     get el() { return index.getElement(this); }
 };
-Tag.style = BalTagStyle0;
+Tag.style = balTagCss;
 
 const TagGroup = class {
     constructor(hostRef) {