@baloise/ds-core 19.3.0 → 19.4.0

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

@@ -1,26 +1,59 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { o as raf, t as transitionEndAsync, p as debounceEvent, w as waitForComponent } from './helpers-51d51cc5.js';
-import { B as BEM } from './bem-8c7d2eb0.js';
-import { L as Logger } from './log-dfd1c19f.js';
-import { L as ListenToConfig } from './config.decorator-6795d1fe.js';
-import { s as stopEventBubbling } from './form-input-1ebdb905.js';
-import { b as isEnterKey, d as isSpaceKey } from './keyboard.helpers-159e517d.js';
-import { a as ariaBooleanToString } from './aria-ea150568.js';
-import { d as defaultConfig } from './config.default-53a04699.js';
-import './browser-a8073d92.js';
-import './config.utils-f3793464.js';
+import { L as Logger, H as registerInstance, P as createEvent, Q as raf, W as transitionEndAsync, T as debounceEvent, A as waitForComponent, M as h, N as Host, O as getElement, f as defaultConfig } from './index-pkPHUz5e.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
+import { L as ListenToConfig } from './config.decorator-T4wBa62Z.js';
+import { B as BEM } from './bem-ByiN-QjD.js';
+import { s as stopEventBubbling } from './form-input-CGW38ndP.js';
+import { b as isEnterKey, d as isSpaceKey } from './keyboard.helpers-D1VPLQ5z.js';
+import { a as ariaBooleanToString } from './aria-DBsOHTWj.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) {
         registerInstance(this, hostRef);
-        this.balChange = createEvent(this, "balChange", 7);
-        this.balWillAnimate = createEvent(this, "balWillAnimate", 7);
-        this.balDidAnimate = createEvent(this, "balDidAnimate", 7);
+        this.balChange = createEvent(this, "balChange");
+        this.balWillAnimate = createEvent(this, "balWillAnimate");
+        this.balDidAnimate = 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
          * ------------------------------------------------------
@@ -147,16 +180,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;
@@ -300,24 +323,35 @@ __decorate([
     __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) {
         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;
@@ -362,15 +396,30 @@ __decorate([
     __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) {
         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
          * ------------------------------------------------------
@@ -392,10 +441,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;
@@ -458,7 +503,7 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], AccordionSummary.prototype, "createLogger", null);
 let accordionSummaryIds = 0;
-AccordionSummary.style = BalAccordionSummaryStyle0;
+AccordionSummary.style = balAccordionSummaryCss;
 
 const i18nBalAccordion = {
     de: {
@@ -504,12 +549,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) {
         registerInstance(this, hostRef);
         this.componentId = `bal-accordion-trigger-${accordionTriggerIds++}`;
+        this.language = 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
          * ------------------------------------------------------
@@ -529,19 +619,6 @@ const AccordionTrigger = class {
          * ------------------------------------------------------
          */
         this.block = BEM.block('accordion').element('trigger');
-        this.parentAccordionId = undefined;
-        this.language = 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;
@@ -649,6 +726,6 @@ __decorate([
     __metadata("design:returntype", Promise)
 ], AccordionTrigger.prototype, "configChanged", null);
 let accordionTriggerIds = 0;
-AccordionTrigger.style = BalAccordionTriggerStyle0;
+AccordionTrigger.style = balAccordionTriggerCss;
 
 export { Accordion as bal_accordion, AccordionDetails as bal_accordion_details, AccordionSummary as bal_accordion_summary, AccordionTrigger as bal_accordion_trigger };

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

@@ -1,27 +1,28 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { b as balBrowser } from './browser-a8073d92.js';
-import { b as balDevice } from './device-8c6d2881.js';
-import { k as debounce, n as rIC, m as rOnLoad } from './helpers-51d51cc5.js';
-import { L as Logger } from './log-dfd1c19f.js';
-import { s as startFocusVisible } from './focus-visible-c1d6b5b8.js';
-import { G as updateBalAnimated } from './config.utils-f3793464.js';
+import { L as Logger, H as registerInstance, I as debounce, a as balBrowser, j as updateBalAnimated, J as rIC, K as rOnLoad, M as h, N as Host, O as getElement } from './index-pkPHUz5e.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
+import { b as balDevice } from './device-ClkcmLoi.js';
+import { s as startFocusVisible } from './focus-visible-DqCbGYzv.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) {
         registerInstance(this, hostRef);
         this.debouncedNotify = 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 (balBrowser.hasDocument && 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;
@@ -72,6 +73,6 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], App.prototype, "createLogger", null);
-App.style = BalAppStyle0;
+App.style = balAppCss;
 
 export { App as bal_app };

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

@@ -1,15 +1,22 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
-import { B as BEM } from './bem-8c7d2eb0.js';
+import { H as registerInstance, M as h, N as Host, O as getElement } from './index-pkPHUz5e.js';
+import { B as BEM } from './bem-ByiN-QjD.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) {
         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() {
@@ -24,6 +31,6 @@ const Badge = class {
     }
     get el() { return getElement(this); }
 };
-Badge.style = BalBadgeStyle0;
+Badge.style = balBadgeCss;
 
 export { Badge as bal_badge };

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

@@ -1,63 +1,135 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
-import { a as ariaBooleanToString } from './aria-ea150568.js';
-import { i as inheritAttributes } from './attributes-a3e70948.js';
-import { m as rOnLoad } from './helpers-51d51cc5.js';
-import { B as BEM } from './bem-8c7d2eb0.js';
-import './browser-a8073d92.js';
-import './config.utils-f3793464.js';
+import { H as registerInstance, P as createEvent, K as rOnLoad, M as h, N as Host, O as getElement } from './index-pkPHUz5e.js';
+import { a as ariaBooleanToString } from './aria-DBsOHTWj.js';
+import { i as inheritAttributes } from './attributes-C4sZQbkT.js';
+import { B as BEM } from './bem-ByiN-QjD.js';
 
 const balButtonCss = "bal-button,.bal-button{display:inline-block;position:static}bal-button.is-fullwidth,.bal-button.is-fullwidth{width:100%;-ms-flex:1 1 100%;flex:1 1 100%}bal-button[disabled] bal-icon,.bal-button[disabled] bal-icon{pointer-events:none}.bal-button .button-label.has-no-wrap{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bal-button-group{display:-ms-flexbox;display:flex}.bal-button-group--position-center{-ms-flex-pack:center;justify-content:center}.bal-button-group--position-left{-ms-flex-pack:start;justify-content:flex-start}.bal-button-group--position-right{-ms-flex-pack:end;justify-content:flex-end}@media screen and (max-width: 768px){.bal-button-group--direction-auto .field.is-grouped,.bal-button-group--direction-auto .bal-button,.bal-button-group--direction-auto .bal-button .button{width:100% !important}}@media screen and (max-width: 768px){.bal-button-group--direction-column .field.is-grouped,.bal-button-group--direction-column .bal-button,.bal-button-group--direction-column .bal-button .button{width:100% !important}}";
-const BalButtonStyle0 = balButtonCss;
 
 const Button = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.balClick = createEvent(this, "balClick", 7);
-        this.balNavigate = createEvent(this, "balNavigate", 7);
-        this.balFocus = createEvent(this, "balFocus", 7);
-        this.balBlur = createEvent(this, "balBlur", 7);
-        this.balDidRender = createEvent(this, "balDidRender", 7);
+        this.balClick = createEvent(this, "balClick");
+        this.balNavigate = createEvent(this, "balNavigate");
+        this.balFocus = createEvent(this, "balFocus");
+        this.balBlur = createEvent(this, "balBlur");
+        this.balDidRender = createEvent(this, "balDidRender");
         this.inheritAttributes = {};
-        this.onFocus = () => {
-            this.balFocus.emit();
-        };
-        this.onBlur = () => {
-            this.balBlur.emit();
-        };
-        this.onClick = (ev) => {
-            if (!this.disabled) {
-                this.balClick.emit(ev);
-                if (this.href !== undefined) {
-                    this.balNavigate.emit(ev);
-                }
-            }
-        };
         this.isLargestContentPaintDone = false;
+        /**
+         * The color to use from your application's color palette.
+         */
         this.color = 'primary';
+        /**
+         * The type of button.
+         */
         this.elementType = 'button';
+        /**
+         * If `true`, the user cannot interact with the button.
+         */
         this.disabled = false;
+        /**
+         * Size of the button
+         */
         this.size = '';
-        this.href = undefined;
+        /**
+         * Specifies where to display the linked URL.
+         * Only applies when an `href` is provided.
+         */
         this.target = '_self';
-        this.rel = undefined;
-        this.download = undefined;
+        /**
+         * If `true` adds a box shadow to improve readability on image background
+         * */
         this.shadow = false;
+        /**
+         * If `true` the width of the buttons is limited
+         */
         this.square = false;
+        /**
+         * If `true` the button has a active theme
+         */
         this.isActive = false;
+        /**
+         * If `true` the button has a full width
+         */
         this.expanded = false;
+        /**
+         * If `true` the button has no padding and a reduced height
+         */
         this.flat = false;
+        /**
+         * If `true` the button is outlined
+         */
         this.outlined = false;
+        /**
+         * If `true` the button is inverted
+         */
         this.inverted = false;
+        /**
+         * If `true` the label is hidden and a loading spinner is shown instead.
+         */
         this.loading = false;
+        /**
+         * If `true` the button is rounded.
+         */
         this.rounded = false;
+        /**
+         * If `true` the button is a popup.
+         */
         this.balPopup = undefined;
+        /**
+         * Name of the left button icon
+         */
         this.icon = '';
+        /**
+         * If `true` the icon turns
+         */
         this.iconTurn = false;
+        /**
+         * Name of the right button icon
+         */
         this.iconRight = '';
+        /**
+         * The label of the button will not break
+         */
         this.noWrap = false;
+        /**
+         * The name of the button, which is submitted with the form data.
+         */
         this.name = '';
+        /**
+         * The value of the button, which is submitted with the form data.
+         */
         this.value = '';
-        this.aria = undefined;
+        /**
+         * A11y attributes for the native button element.
+         */
+        this.a11yControls = undefined;
+        /**
+         * A11y attributes for the native button element.
+         */
+        this.a11yTitle = undefined;
+        /**
+         * A11y attributes for the native button element.
+         */
+        this.a11yLabel = undefined;
+        /**
+         * A11y attributes for the native button element.
+         */
+        this.a11yHaspopup = undefined;
+        this.onFocus = () => {
+            this.balFocus.emit();
+        };
+        this.onBlur = () => {
+            this.balBlur.emit();
+        };
+        this.onClick = (ev) => {
+            if (!this.disabled) {
+                this.balClick.emit(ev);
+                if (this.href !== undefined) {
+                    this.balNavigate.emit(ev);
+                }
+            }
+        };
     }
     listenOnClick(ev) {
         if (this.disabled && ev.target && ev.target === this.el) {
@@ -69,7 +141,6 @@ const Button = class {
         rOnLoad(() => (this.isLargestContentPaintDone = true));
     }
     componentWillLoad() {
-        var _a;
         this.inheritAttributes = inheritAttributes(this.el, [
             'title',
             'aria-label',
@@ -78,10 +149,8 @@ const Button = class {
             'tabindex',
             'aria-haspopup',
         ]);
-        if (this.el.hasAttribute('bal-popup') && !((_a = this.aria) === null || _a === void 0 ? void 0 : _a.haspopup)) {
-            this.aria = {
-                haspopup: 'true',
-            };
+        if (this.el.hasAttribute('bal-popup') && !this.a11yHaspopup) {
+            this.a11yHaspopup = 'true';
         }
     }
     componentDidRender() {
@@ -140,7 +209,6 @@ const Button = class {
         }
     }
     render() {
-        var _a, _b, _c, _d, _e;
         const { elementType, download, href, rel, target, name, value } = this;
         const TagType = this.href === undefined ? 'button' : 'a';
         const attrs = TagType === 'button'
@@ -166,10 +234,10 @@ const Button = class {
             }
         };
         const ariaAttributes = {
-            'title': ((_a = this.aria) === null || _a === void 0 ? void 0 : _a.title) || this.inheritAttributes['title'],
-            'aria-label': ((_b = this.aria) === null || _b === void 0 ? void 0 : _b.label) || this.inheritAttributes['aria-label'] || ((_c = this.aria) === null || _c === void 0 ? void 0 : _c.title) || this.inheritAttributes['title'],
-            'aria-controls': ((_d = this.aria) === null || _d === void 0 ? void 0 : _d.controls) || this.inheritAttributes['aria-controls'],
-            'aria-haspopup': ((_e = this.aria) === null || _e === void 0 ? void 0 : _e.haspopup) || this.inheritAttributes['aria-haspopup'],
+            'title': this.a11yTitle || this.inheritAttributes['title'],
+            'aria-label': this.a11yLabel || this.inheritAttributes['aria-label'] || this.a11yTitle || this.inheritAttributes['title'],
+            'aria-controls': this.a11yControls || this.inheritAttributes['aria-controls'],
+            'aria-haspopup': this.a11yHaspopup || this.inheritAttributes['aria-haspopup'],
         };
         return (h(Host, { onClick: this.handleClick, class: {
                 'bal-button': true,
@@ -184,13 +252,23 @@ const Button = class {
     }
     get el() { return getElement(this); }
 };
-Button.style = BalButtonStyle0;
+Button.style = balButtonCss;
 
 const ButtonGroup = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * The value of the button, which is submitted with the form data.
+         */
         this.position = '';
+        /**
+         * `auto` will position the button items vertical and full width.
+         * `row` will force that the buttons are also horizontal on mobile.
+         */
         this.direction = 'auto';
+        /**
+         * If `true` the flex direction is used in reverse on mobile.
+         */
         this.reverse = false;
     }
     render() {