@baloise/ds-core 19.3.0 → 19.4.0

package/dist/cjs/{attributes-11acd153.js → attributes-Cp0kpySW.js}

@@ -34,9 +34,6 @@ const inheritAttributes = (el, attributes = []) => {
  */
 const inheritTrackingAttributes = (el, ignoreList) => {
     let attributesToInherit = trackingAttributes;
-    if (ignoreList && ignoreList.length > 0) {
-        attributesToInherit = attributesToInherit.filter(attr => !ignoreList.includes(attr));
-    }
     return inheritAttributes(el, attributesToInherit);
 };
 

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

@@ -1,30 +1,61 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const helpers = require('./helpers-debb881a.js');
-const bem = require('./bem-81bc6a2d.js');
-const log = require('./log-33398c2a.js');
-const config_decorator = require('./config.decorator-de244188.js');
-const formInput = require('./form-input-e9974433.js');
-const keyboard_helpers = require('./keyboard.helpers-2093e793.js');
-const aria = require('./aria-7672033f.js');
-const config_default = require('./config.default-7e96eb95.js');
-require('./browser-1d542d0f.js');
-require('./config.utils-df30e424.js');
+var index = require('./index-COfbtsc7.js');
+var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
+var config_decorator = require('./config.decorator-CDkNZ1Fo.js');
+var bem = require('./bem-p0PWVN8n.js');
+var formInput = require('./form-input-BUGd2Bkz.js');
+var keyboard_helpers = require('./keyboard.helpers-BkZpVT-9.js');
+var aria = require('./aria-BzkqcV7W.js');
 
 const balAccordionCss = ".bal-accordion{display:block;position:relative;width:100%}.bal-accordion--card-v1,.bal-accordion--card-v2{margin-top:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion--card-v1,.bal-accordion--card-v2{margin-top:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion--card-v1,.bal-accordion--card-v2{margin-top:var(--bal-space-medium-desktop)}}.bal-accordion--card-v2{padding-left:var(--bal-space-medium);padding-right:var(--bal-space-medium);padding-bottom:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion--card-v2{padding-left:var(--bal-space-medium-tablet);padding-right:var(--bal-space-medium-tablet);padding-bottom:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion--card-v2{padding-left:var(--bal-space-medium-desktop);padding-right:var(--bal-space-medium-desktop);padding-bottom:var(--bal-space-medium-desktop)}}.bal-accordion__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.bal-accordion__trigger--card{margin-left:var(--bal-space-medium);margin-right:var(--bal-space-medium);margin-bottom:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion__trigger--card{margin-left:var(--bal-space-medium-tablet);margin-right:var(--bal-space-medium-tablet);margin-bottom:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion__trigger--card{margin-left:var(--bal-space-medium-desktop);margin-right:var(--bal-space-medium-desktop);margin-bottom:var(--bal-space-medium-desktop)}}.bal-accordion__content--card{margin-left:var(--bal-space-medium);margin-right:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion__content--card{margin-left:var(--bal-space-medium-tablet);margin-right:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion__content--card{margin-left:var(--bal-space-medium-desktop);margin-right:var(--bal-space-medium-desktop)}}.bal-accordion--animated{-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-accordion--animated .bal-accordion__content{-webkit-transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-accordion__content{will-change:max-height}.bal-accordion__content--overflow-hidden{overflow:hidden;-webkit-clip-path:border-box;clip-path:border-box}.bal-accordion--collapsing .bal-accordion__content{max-height:0 !important}.bal-accordion--collapsed .bal-accordion__content{display:none}.bal-accordion--expanding .bal-accordion__content{max-height:0}@media (prefers-reduced-motion: reduce){.bal-accordion,.bal-accordion__content{-webkit-transition:none !important;transition:none !important}}";
-const BalAccordionStyle0 = balAccordionCss;
 
 const Accordion = 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.componentId = `bal-accordion-${accordionIds++}`;
+        this.state = 1 /* AccordionState.Collapsed */;
+        this.animated = true;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true` the accordion is open.
+         */
+        this.active = 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;
+        /**
+         * Label of the open trigger button
+         */
+        this.openLabel = '';
+        /**
+         * BalIcon of the open trigger button
+         */
+        this.openIcon = 'plus';
+        /**
+         * Label of the close trigger button
+         */
+        this.closeLabel = '';
+        /**
+         * BalIcon of the close trigger button
+         */
+        this.closeIcon = 'close';
+        /**
+         * If `true` the accordion is used on the bottom of a card
+         */
+        this.card = false;
+        /**
+         * @internal
+         * defines the version of the component
+         */
+        this.version = 1;
         /**
          * PRIVATE METHODS
          * ------------------------------------------------------
@@ -82,12 +113,12 @@ const Accordion = class {
                 cancelAnimationFrame(this.currentRaf);
             }
             if (this.shouldAnimate()) {
-                helpers.raf(() => {
+                index.raf(() => {
                     this.setState(8 /* AccordionState.Expanding */);
                     this.balWillAnimate.emit(this.active);
-                    this.currentRaf = helpers.raf(async () => {
+                    this.currentRaf = index.raf(async () => {
                         const contentHeight = detailsWrapperElement.offsetHeight;
-                        const waitForTransition = helpers.transitionEndAsync(detailsElement, 300);
+                        const waitForTransition = index.transitionEndAsync(detailsElement, 300);
                         detailsElement.style.setProperty('max-height', `${contentHeight}px`);
                         await waitForTransition;
                         this.setState(4 /* AccordionState.Expanded */);
@@ -117,11 +148,11 @@ const Accordion = class {
                 cancelAnimationFrame(this.currentRaf);
             }
             if (this.shouldAnimate()) {
-                this.currentRaf = helpers.raf(async () => {
+                this.currentRaf = index.raf(async () => {
                     const contentHeight = detailsElement.offsetHeight;
                     detailsElement.style.setProperty('max-height', `${contentHeight}px`);
-                    helpers.raf(async () => {
-                        const waitForTransition = helpers.transitionEndAsync(detailsElement, 300);
+                    index.raf(async () => {
+                        const waitForTransition = index.transitionEndAsync(detailsElement, 300);
                         this.setState(2 /* AccordionState.Collapsing */);
                         this.balDidAnimate.emit(this.active);
                         await waitForTransition;
@@ -151,16 +182,6 @@ const Accordion = class {
         this.onTriggerClickV1 = () => {
             this.humanToggle();
         };
-        this.state = 1 /* AccordionState.Collapsed */;
-        this.animated = true;
-        this.active = false;
-        this.debounce = 0;
-        this.openLabel = '';
-        this.openIcon = 'plus';
-        this.closeLabel = '';
-        this.closeIcon = 'close';
-        this.card = false;
-        this.version = 1;
     }
     createLogger(log) {
         this.log = log;
@@ -172,7 +193,7 @@ const Accordion = class {
         }
     }
     debounceChanged() {
-        this.balChange = helpers.debounceEvent(this.balChange, this.debounce);
+        this.balChange = index.debounceEvent(this.balChange, this.debounce);
     }
     /**
      * LIFECYCLE
@@ -180,7 +201,7 @@ const Accordion = class {
      */
     async connectedCallback() {
         this.debounceChanged();
-        await helpers.waitForComponent(this.el);
+        await index.waitForComponent(this.el);
         if (this.active) {
             this.activeChanged(this.active, false);
         }
@@ -292,7 +313,7 @@ const Accordion = class {
     }; }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-accordion'),
+    index.Logger('bal-accordion'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
@@ -304,24 +325,35 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", Promise)
 ], Accordion.prototype, "configChanged", null);
 let accordionIds = 0;
-Accordion.style = BalAccordionStyle0;
+Accordion.style = balAccordionCss;
 
 const balAccordionDetailsCss = ".bal-accordion__details{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;will-change:max-height;min-block-size:auto;min-height:auto;min-inline-size:auto;min-width:auto}.bal-accordion__details--animated{-webkit-transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-accordion__details--collapsing{max-height:0 !important;overflow:hidden;-webkit-clip-path:border-box;clip-path:border-box}.bal-accordion__details--collapsed{display:none;overflow:hidden;-webkit-clip-path:border-box;clip-path:border-box}.bal-accordion__details--expanding{max-height:0;overflow:hidden;-webkit-clip-path:border-box;clip-path:border-box}@media (prefers-reduced-motion: reduce){.bal-accordion__details{-webkit-transition:none !important;transition:none !important}}";
-const BalAccordionDetailsStyle0 = balAccordionDetailsCss;
 
 const AccordionDetails = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.componentId = `bal-accordion-details-${accordionDetailIds++}`;
         /**
-         * PRIVATE METHODS
+         * PUBLIC PROPERTY API
          * ------------------------------------------------------
          */
-        this.updateAccordionId = () => { var _a; return (this.parentAccordionId = (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.id); };
-        this.parentAccordionId = undefined;
+        /**
+         * @internal
+         */
         this.state = 1 /* AccordionState.Collapsed */;
+        /**
+         * @internal
+         */
         this.active = false;
+        /**
+         * @internal
+         */
         this.animated = true;
+        /**
+         * PRIVATE METHODS
+         * ------------------------------------------------------
+         */
+        this.updateAccordionId = () => { var _a; return (this.parentAccordionId = (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.id); };
     }
     createLogger(log) {
         this.log = log;
@@ -360,21 +392,36 @@ const AccordionDetails = class {
     get el() { return index.getElement(this); }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-accordion-details'),
+    index.Logger('bal-accordion-details'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], AccordionDetails.prototype, "createLogger", null);
 let accordionDetailIds = 0;
-AccordionDetails.style = BalAccordionDetailsStyle0;
+AccordionDetails.style = balAccordionDetailsCss;
 
 const balAccordionSummaryCss = "@media (hover: hover)and (pointer: fine){.bal-accordion__summary--trigger:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}.bal-accordion__summary{position:static;display:block}.bal-accordion__summary--trigger{cursor:pointer}";
-const BalAccordionSummaryStyle0 = balAccordionSummaryCss;
 
 const AccordionSummary = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.componentId = `bal-accordion-summary-${accordionSummaryIds++}`;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true` the whole summary component acts as a trigger and can be clicked
+         */
+        this.trigger = false;
+        /**
+         * @internal
+         */
+        this.active = false;
+        /**
+         * @internal
+         */
+        this.state = 1 /* AccordionState.Collapsed */;
         /**
          * PRIVATE METHODS
          * ------------------------------------------------------
@@ -396,10 +443,6 @@ const AccordionSummary = class {
                 (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.humanToggle();
             }
         };
-        this.parentAccordionId = undefined;
-        this.trigger = false;
-        this.active = false;
-        this.state = 1 /* AccordionState.Collapsed */;
     }
     createLogger(log) {
         this.log = log;
@@ -456,13 +499,13 @@ const AccordionSummary = class {
     get el() { return index.getElement(this); }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-accordion-summary'),
+    index.Logger('bal-accordion-summary'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], AccordionSummary.prototype, "createLogger", null);
 let accordionSummaryIds = 0;
-AccordionSummary.style = BalAccordionSummaryStyle0;
+AccordionSummary.style = balAccordionSummaryCss;
 
 const i18nBalAccordion = {
     de: {
@@ -508,12 +551,57 @@ const i18nBalAccordion = {
 };
 
 const balAccordionTriggerCss = "@media (hover: hover)and (pointer: fine){.bal-accordion__trigger__button.bal-focused:focus-visible,.bal-accordion__trigger__text.bal-focused:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}.bal-accordion__trigger{position:static;display:block}.bal-accordion__trigger__button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background:rgba(0,0,0,0);border:none;border-radius:var(--bal-border-radius-normal);height:3rem;width:3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.bal-accordion__trigger__text{display:inline;background:rgba(0,0,0,0);border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;padding:0;margin:0;border-radius:var(--bal-radius-normal);font-size:var(--bal-text-size-small);color:var(--bal-text-color-primary-light);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-accordion__trigger__text:hover{color:var(--bal-text-color-primary-hovered)}}.bal-accordion__trigger__text:active{color:var(--bal-text-color-primary-pressed)}";
-const BalAccordionTriggerStyle0 = balAccordionTriggerCss;
 
 const AccordionTrigger = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.componentId = `bal-accordion-trigger-${accordionTriggerIds++}`;
+        this.language = index.defaultConfig.language;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * @deprecated
+         * Trigger will be a bal-button
+         */
+        this.button = false;
+        /**
+         * If `true` the button is aligned over the whole width
+         */
+        this.expanded = true;
+        /**
+         * Label of the open trigger button
+         */
+        this.openLabel = '';
+        /**
+         * BalIcon of the open trigger button
+         */
+        this.openIcon = 'caret-down';
+        /**
+         * Label of the close trigger button
+         */
+        this.closeLabel = '';
+        /**
+         * BalIcon of the close trigger button
+         */
+        this.closeIcon = '';
+        /**
+         * The color to use from your application's color palette.
+         */
+        this.color = 'info';
+        /**
+         * Size of the button
+         */
+        this.size = '';
+        /**
+         * @internal
+         */
+        this.active = false;
+        /**
+         * @internal
+         */
+        this.state = 1 /* AccordionState.Collapsed */;
         /**
          * PRIVATE METHODS
          * ------------------------------------------------------
@@ -533,19 +621,6 @@ const AccordionTrigger = class {
          * ------------------------------------------------------
          */
         this.block = bem.BEM.block('accordion').element('trigger');
-        this.parentAccordionId = undefined;
-        this.language = config_default.defaultConfig.language;
-        this.button = false;
-        this.variant = undefined;
-        this.expanded = true;
-        this.openLabel = '';
-        this.openIcon = 'caret-down';
-        this.closeLabel = '';
-        this.closeIcon = '';
-        this.color = 'info';
-        this.size = '';
-        this.active = false;
-        this.state = 1 /* AccordionState.Collapsed */;
     }
     createLogger(log) {
         this.log = log;
@@ -641,7 +716,7 @@ const AccordionTrigger = class {
     }; }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-accordion-trigger'),
+    index.Logger('bal-accordion-trigger'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
@@ -653,7 +728,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", Promise)
 ], AccordionTrigger.prototype, "configChanged", null);
 let accordionTriggerIds = 0;
-AccordionTrigger.style = BalAccordionTriggerStyle0;
+AccordionTrigger.style = balAccordionTriggerCss;
 
 exports.bal_accordion = Accordion;
 exports.bal_accordion_details = AccordionDetails;

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

@@ -1,58 +1,57 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const browser = require('./browser-1d542d0f.js');
-const device = require('./device-9f97a845.js');
-const helpers = require('./helpers-debb881a.js');
-const log = require('./log-33398c2a.js');
-const focusVisible = require('./focus-visible-a434c91f.js');
-const config_utils = require('./config.utils-df30e424.js');
+var index = require('./index-COfbtsc7.js');
+var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
+var device = require('./device-CoI0V6AY.js');
+var focusVisible = require('./focus-visible-DFZa8IIA.js');
 
 const balAppCss = ":root{--bal-app-height:100%}.bal-app{position:relative}.lcp-wait{opacity:0;visibility:hidden;display:none}.lcp-ready .lcp-wait{opacity:inherit;visibility:inherit;display:inherit}";
-const BalAppStyle0 = balAppCss;
 
 const App = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.debouncedNotify = helpers.debounce(() => this.notifyResize(), 100);
+        this.debouncedNotify = index.debounce(() => this.notifyResize(), 100);
+        /**
+         * Disables all animation inside the bal-app. Can be used for simplify e2e testing.
+         */
+        this.animated = true;
+        /**
+         * @internal Is `true` when DS components are ready to be shown.
+         */
+        this.ready = false;
         this.notifyResize = async () => {
-            if (browser.balBrowser.hasDocument && browser.balBrowser.hasWindow) {
+            if (index.balBrowser.hasDocument && index.balBrowser.hasWindow) {
                 const doc = document.documentElement;
                 doc.style.setProperty('--bal-app-height', `${window.innerHeight}px`);
             }
         };
-        this.animated = true;
-        this.ready = false;
     }
     createLogger(log) {
         this.log = log;
     }
     connectedCallback() {
         if (this.animated === false) {
-            config_utils.updateBalAnimated(this.animated);
+            index.updateBalAnimated(this.animated);
         }
-        if (browser.balBrowser.hasWindow) {
+        if (index.balBrowser.hasWindow) {
             window.addEventListener('resize', this.debouncedNotify);
             this.debouncedNotify();
         }
     }
     componentDidLoad() {
-        helpers.rIC(() => {
+        index.rIC(() => {
             this.ready = true;
             focusVisible.startFocusVisible();
         });
-        helpers.rOnLoad(() => {
-            if (browser.balBrowser.hasDocument && browser.balBrowser.hasWindow) {
+        index.rOnLoad(() => {
+            if (index.balBrowser.hasDocument && index.balBrowser.hasWindow) {
                 const doc = document.documentElement;
                 doc.classList.add('lcp-ready');
             }
         });
     }
     disconnectedCallback() {
-        if (browser.balBrowser.hasWindow) {
+        if (index.balBrowser.hasWindow) {
             window.removeEventListener('resize', this.debouncedNotify);
         }
     }
@@ -64,18 +63,18 @@ const App = class {
     render() {
         return (index.h(index.Host, { key: '8aa3c989125e06e500597db9773fca378e4b7467', class: {
                 'bal-app': true,
-                'bal-app--safari': browser.balBrowser.isSafari,
+                'bal-app--safari': index.balBrowser.isSafari,
                 'bal-app--touch': device.balDevice.hasTouchScreen,
             } }, index.h("slot", { key: 'c0e432a988e29f653198ed4eeead7f18fa447035' })));
     }
     get el() { return index.getElement(this); }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-app'),
+    index.Logger('bal-app'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], App.prototype, "createLogger", null);
-App.style = BalAppStyle0;
+App.style = balAppCss;
 
 exports.bal_app = App;

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

@@ -1,19 +1,24 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const bem = require('./bem-81bc6a2d.js');
+var index = require('./index-COfbtsc7.js');
+var bem = require('./bem-p0PWVN8n.js');
 
 const balBadgeCss = ":root{--bal-badge-background:var(--bal-color-red-3);--bal-badge-background-grey:var(--bal-color-grey-3);--bal-badge-background-red:var(--bal-color-red-3);--bal-badge-background-yellow:var(--bal-color-yellow-3);--bal-badge-background-green:var(--bal-color-green-3);--bal-badge-background-purple:var(--bal-color-purple-3);--bal-badge-radius:var(--bal-radius-rounded);--bal-badge-text-color:var(--bal-color-text-primary);--bal-badge-color-grey:var(--bal-color-text-grey-dark);--bal-badge-color-red:var(--bal-color-text-primary);--bal-badge-color-yellow:var(--bal-color-text-primary);--bal-badge-color-green:var(--bal-color-text-primary);--bal-badge-color-purple:var(--bal-color-text-primary)}.bal-badge{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;min-width:1.5rem;height:1.5rem;border-radius:var(--bal-badge-radius);background:var(--bal-badge-background);padding:.25rem}.bal-badge--size-small{width:.75rem;max-width:.75rem;min-width:.75rem;height:.75rem}.bal-badge--size-large{width:2rem;height:2rem}.bal-badge--background-red,.bal-badge--background-danger{background:var(--bal-badge-background-red)}.bal-badge--background-yellow,.bal-badge--background-warning{background:var(--bal-badge-background-yellow)}.bal-badge--background-green,.bal-badge--background-success{background:var(--bal-badge-background-green)}.bal-badge--background-purple{background:var(--bal-badge-background-purple)}.bal-badge--background-grey{background:var(--bal-badge-background-grey)}.bal-badge--position-card,.bal-badge--position-button{position:absolute;right:-0.5rem;top:-0.5rem}.bal-badge--position-tabs{margin-top:-0.25rem;position:absolute;right:-1.625rem}.bal-badge--position-tabs.bal-badge--size-small{right:-1rem}span.bal-badge__label{font-weight:var(--bal-font-weight-bold) !important;font-family:var(--bal-font-family-text) !important;font-size:var(--bal-text-size-small) !important;color:var(--bal-badge-text-color);line-height:1.5rem !important;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}span.bal-badge__label--hidden{display:none !important}span.bal-badge__label--color-red,span.bal-badge__label--color-danger{color:var(--bal-badge-color-red)}span.bal-badge__label--color-yellow,span.bal-badge__label--color-warning{color:var(--bal-badge-color-yellow)}span.bal-badge__label--color-green,span.bal-badge__label--color-success{color:var(--bal-badge-color-green)}span.bal-badge__label--color-grey{color:var(--bal-badge-color-grey)}span.bal-badge__label--color-purple{color:var(--bal-badge-color-purple)}.bal-badge__icon--hidden{display:none !important}";
-const BalBadgeStyle0 = balBadgeCss;
 
 const Badge = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.icon = undefined;
+        /**
+         * Define the size of badge. Small is recommended for tabs.
+         */
         this.size = '';
+        /**
+         * Define the color for the badge.
+         */
         this.color = '';
+        /**
+         * If `true` the badge is added to the top right corner of the card.
+         */
         this.position = '';
     }
     render() {
@@ -28,6 +33,6 @@ const Badge = class {
     }
     get el() { return index.getElement(this); }
 };
-Badge.style = BalBadgeStyle0;
+Badge.style = balBadgeCss;
 
 exports.bal_badge = Badge;