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

package/components/_commonjsHelpers.js

@@ -1,3 +1,7 @@
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-export { commonjsGlobal as c };
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+export { commonjsGlobal as c, getDefaultExportFromCjs as g };

package/components/all.d.ts

@@ -27,6 +27,7 @@ import { BalDate, defineCustomElement as defineBalDate } from './bal-date'
 import { BalDateCalendar, defineCustomElement as defineBalDateCalendar } from './bal-date-calendar'
 import { BalDateCalendarCell, defineCustomElement as defineBalDateCalendarCell } from './bal-date-calendar-cell'
 import { BalDivider, defineCustomElement as defineBalDivider } from './bal-divider'
+import { BalDocApp, defineCustomElement as defineBalDocApp } from './bal-doc-app'
 import { BalDropdown, defineCustomElement as defineBalDropdown } from './bal-dropdown'
 import { BalField, defineCustomElement as defineBalField } from './bal-field'
 import { BalFieldControl, defineCustomElement as defineBalFieldControl } from './bal-field-control'
@@ -145,6 +146,7 @@ export { BalDate, defineBalDate }
 export { BalDateCalendar, defineBalDateCalendar }
 export { BalDateCalendarCell, defineBalDateCalendarCell }
 export { BalDivider, defineBalDivider }
+export { BalDocApp, defineBalDocApp }
 export { BalDropdown, defineBalDropdown }
 export { BalField, defineBalField }
 export { BalFieldControl, defineBalFieldControl }

package/components/all.js

@@ -27,6 +27,7 @@ import { BalDate, defineCustomElement as defineBalDate } from './bal-date'
 import { BalDateCalendar, defineCustomElement as defineBalDateCalendar } from './bal-date-calendar'
 import { BalDateCalendarCell, defineCustomElement as defineBalDateCalendarCell } from './bal-date-calendar-cell'
 import { BalDivider, defineCustomElement as defineBalDivider } from './bal-divider'
+import { BalDocApp, defineCustomElement as defineBalDocApp } from './bal-doc-app'
 import { BalDropdown, defineCustomElement as defineBalDropdown } from './bal-dropdown'
 import { BalField, defineCustomElement as defineBalField } from './bal-field'
 import { BalFieldControl, defineCustomElement as defineBalFieldControl } from './bal-field-control'
@@ -145,6 +146,7 @@ export { BalDate, defineBalDate }
 export { BalDateCalendar, defineBalDateCalendar }
 export { BalDateCalendarCell, defineBalDateCalendarCell }
 export { BalDivider, defineBalDivider }
+export { BalDocApp, defineBalDocApp }
 export { BalDropdown, defineBalDropdown }
 export { BalField, defineBalField }
 export { BalFieldControl, defineBalFieldControl }
@@ -264,6 +266,7 @@ export const defineAllComponents = () => {
   defineBalDateCalendar()
   defineBalDateCalendarCell()
   defineBalDivider()
+  defineBalDocApp()
   defineBalDropdown()
   defineBalField()
   defineBalFieldControl()

package/components/animation.decorator.js

@@ -1,4 +1,4 @@
-import { k as debounce, v as isChildOfEventTarget, l as addEventListener, r as removeEventListener } from './helpers.js';
+import { q as debounce, v as isChildOfEventTarget, o as addEventListener, p as removeEventListener } from './helpers.js';
 import { L as ListenerAbstract, a as SingleSubject } from './listener.js';
 
 class BalAnimationListener extends ListenerAbstract {

package/components/array.js

@@ -1,5 +1,5 @@
-import { l as lodash_isnil } from './index3.js';
-import { i as isEqual } from './index4.js';
+import { i as isNil } from './index2.js';
+import { i as isEqual } from './index5.js';
 
 /**
  * Returns `true` if the arrays are equal
@@ -9,7 +9,7 @@ import { i as isEqual } from './index4.js';
  * ```
  */
 function areArraysEqual(a, b) {
-    if (lodash_isnil(a) || lodash_isnil(b)) {
+    if (isNil(a) || isNil(b)) {
         return false;
     }
     const copyA = [...a].sort();

package/components/attributes.js

@@ -32,9 +32,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/components/bal-accordion-details.js

@@ -4,7 +4,6 @@ import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 
 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 = /*@__PURE__*/ proxyCustomElement(class AccordionDetails extends HTMLElement {
     constructor() {
@@ -12,14 +11,26 @@ const AccordionDetails = /*@__PURE__*/ proxyCustomElement(class AccordionDetails
         this.__registerHost();
         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;
@@ -56,7 +67,7 @@ const AccordionDetails = /*@__PURE__*/ proxyCustomElement(class AccordionDetails
         return (h(Host, { key: 'b9a16e64c4d5559646cdac24e2f9cad021d66a45', id: id, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('expanding').class(this.state === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.state === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.state === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.state === 1 /* AccordionState.Collapsed */)), block.modifier('animated').class(this.animated)) }, h("div", { key: '279f8c54de387926886868cf13da08b1c465d523', id: `${id}-content`, "aria-labelledby": `${this.parentAccordionId}-trigger-button`, role: "region", part: contentPart, class: Object.assign({}, wrapperEl.class()), "data-testid": "bal-accordion-details" }, h("slot", { key: '209b3840f44b6373c8aeb5ad6851e1bc76ec09d5' }))));
     }
     get el() { return this; }
-    static get style() { return BalAccordionDetailsStyle0; }
+    static get style() { return balAccordionDetailsCss; }
 }, [4, "bal-accordion-details", {
         "state": [2],
         "active": [4],

package/components/bal-accordion-summary.js

@@ -6,13 +6,28 @@ import { s as stopEventBubbling } from './form-input.js';
 import { i as isEnterKey, a as isSpaceKey } from './keyboard.helpers.js';
 
 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 = /*@__PURE__*/ proxyCustomElement(class AccordionSummary extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         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
          * ------------------------------------------------------
@@ -34,10 +49,6 @@ const AccordionSummary = /*@__PURE__*/ proxyCustomElement(class AccordionSummary
                 (_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;
@@ -92,7 +103,7 @@ const AccordionSummary = /*@__PURE__*/ proxyCustomElement(class AccordionSummary
         return (h(Host, Object.assign({ key: 'e192ab6a73d33db615d55c1ae5e82e334d5e690e', id: id, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('trigger').class(this.trigger)), block.modifier('inner-trigger').class(!this.trigger)), { 'bal-focused': this.trigger }) }, attributes, { "data-testid": "bal-accordion-summary" })));
     }
     get el() { return this; }
-    static get style() { return BalAccordionSummaryStyle0; }
+    static get style() { return balAccordionSummaryCss; }
 }, [0, "bal-accordion-summary", {
         "trigger": [4],
         "active": [1540],

package/components/bal-accordion-trigger.js

@@ -2,13 +2,13 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { a as ariaBooleanToString } from './aria.js';
 import { B as BEM } from './bem.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { L as Logger } from './log.js';
 import { d as defineCustomElement$4 } from './bal-button2.js';
 import { d as defineCustomElement$3 } from './bal-icon2.js';
 import { d as defineCustomElement$2 } from './bal-spinner2.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
 
 const i18nBalAccordion = {
     de: {
@@ -54,13 +54,58 @@ 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 = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         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
          * ------------------------------------------------------
@@ -80,19 +125,6 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
          * ------------------------------------------------------
          */
         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;
@@ -186,7 +218,7 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
     static get watchers() { return {
         "button": ["buttonChanged"]
     }; }
-    static get style() { return BalAccordionTriggerStyle0; }
+    static get style() { return balAccordionTriggerCss; }
 }, [0, "bal-accordion-trigger", {
         "button": [4],
         "variant": [1],

package/components/bal-accordion.js

@@ -1,15 +1,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { n as raf, t as transitionEndAsync, o as debounceEvent, w as waitForComponent } from './helpers.js';
-import { B as BEM } from './bem.js';
+import { r as raf, t as transitionEndAsync, k as debounceEvent, f as waitForComponent } from './helpers.js';
 import { L as Logger } from './log.js';
+import { L as ListenToConfig } from './config.decorator.js';
+import { B as BEM } from './bem.js';
 import { d as defineCustomElement$4 } from './bal-button2.js';
 import { d as defineCustomElement$3 } from './bal-icon2.js';
 import { d as defineCustomElement$2 } from './bal-spinner2.js';
-import { L as ListenToConfig } from './config.decorator.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 = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLElement {
     constructor() {
@@ -19,6 +18,45 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         this.balWillAnimate = createEvent(this, "balWillAnimate", 7);
         this.balDidAnimate = createEvent(this, "balDidAnimate", 7);
         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
          * ------------------------------------------------------
@@ -145,16 +183,6 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         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;
@@ -284,7 +312,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         "active": ["activeChanged"],
         "debounce": ["debounceChanged"]
     }; }
-    static get style() { return BalAccordionStyle0; }
+    static get style() { return balAccordionCss; }
 }, [4, "bal-accordion", {
         "active": [1540],
         "debounce": [2],

package/components/bal-app.js

@@ -1,96 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { b as balBrowser } from './browser.js';
-import { b as balDevice } from './device.js';
-import { k as debounce, p as rIC, m as rOnLoad } from './helpers.js';
-import { L as Logger } from './log.js';
-import { s as startFocusVisible } from './focus-visible.js';
-import { b as updateBalAnimated } from './config.utils.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 = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.debouncedNotify = debounce(() => this.notifyResize(), 100);
-        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;
-    }
-    connectedCallback() {
-        if (this.animated === false) {
-            updateBalAnimated(this.animated);
-        }
-        if (balBrowser.hasWindow) {
-            window.addEventListener('resize', this.debouncedNotify);
-            this.debouncedNotify();
-        }
-    }
-    componentDidLoad() {
-        rIC(() => {
-            this.ready = true;
-            startFocusVisible();
-        });
-        rOnLoad(() => {
-            if (balBrowser.hasDocument && balBrowser.hasWindow) {
-                const doc = document.documentElement;
-                doc.classList.add('lcp-ready');
-            }
-        });
-    }
-    disconnectedCallback() {
-        if (balBrowser.hasWindow) {
-            window.removeEventListener('resize', this.debouncedNotify);
-        }
-    }
-    async setFocus(elements) {
-        if (this.focusVisible) {
-            this.focusVisible.setFocus(elements);
-        }
-    }
-    render() {
-        return (h(Host, { key: '8aa3c989125e06e500597db9773fca378e4b7467', class: {
-                'bal-app': true,
-                'bal-app--safari': balBrowser.isSafari,
-                'bal-app--touch': balDevice.hasTouchScreen,
-            } }, h("slot", { key: 'c0e432a988e29f653198ed4eeead7f18fa447035' })));
-    }
-    get el() { return this; }
-    static get style() { return BalAppStyle0; }
-}, [4, "bal-app", {
-        "animated": [516],
-        "ready": [1540],
-        "setFocus": [64]
-    }]);
-__decorate([
-    Logger('bal-app'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], App.prototype, "createLogger", null);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-app"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-app":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, App);
-            }
-            break;
-    } });
-}
+import { A as App, d as defineCustomElement$1 } from './bal-app2.js';
 
 const BalApp = App;
 const defineCustomElement = defineCustomElement$1;

package/components/bal-app2.js

@@ -0,0 +1,100 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { b as balBrowser } from './browser.js';
+import { b as balDevice } from './device.js';
+import { L as Logger } from './log.js';
+import { b as updateBalAnimated } from './config.utils.js';
+import { q as debounce, n as rIC, l as rOnLoad } from './helpers.js';
+import { s as startFocusVisible } from './focus-visible.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 App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        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`);
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        if (this.animated === false) {
+            updateBalAnimated(this.animated);
+        }
+        if (balBrowser.hasWindow) {
+            window.addEventListener('resize', this.debouncedNotify);
+            this.debouncedNotify();
+        }
+    }
+    componentDidLoad() {
+        rIC(() => {
+            this.ready = true;
+            startFocusVisible();
+        });
+        rOnLoad(() => {
+            if (balBrowser.hasDocument && balBrowser.hasWindow) {
+                const doc = document.documentElement;
+                doc.classList.add('lcp-ready');
+            }
+        });
+    }
+    disconnectedCallback() {
+        if (balBrowser.hasWindow) {
+            window.removeEventListener('resize', this.debouncedNotify);
+        }
+    }
+    async setFocus(elements) {
+        if (this.focusVisible) {
+            this.focusVisible.setFocus(elements);
+        }
+    }
+    render() {
+        return (h(Host, { key: '8aa3c989125e06e500597db9773fca378e4b7467', class: {
+                'bal-app': true,
+                'bal-app--safari': balBrowser.isSafari,
+                'bal-app--touch': balDevice.hasTouchScreen,
+            } }, h("slot", { key: 'c0e432a988e29f653198ed4eeead7f18fa447035' })));
+    }
+    get el() { return this; }
+    static get style() { return balAppCss; }
+}, [4, "bal-app", {
+        "animated": [516],
+        "ready": [1540],
+        "setFocus": [64]
+    }]);
+__decorate([
+    Logger('bal-app'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], App.prototype, "createLogger", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-app"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-app":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, App);
+            }
+            break;
+    } });
+}
+
+export { App as A, defineCustomElement as d };

package/components/bal-badge2.js

@@ -3,15 +3,22 @@ import { B as BEM } from './bem.js';
 import { d as defineCustomElement$1 } from './bal-icon2.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 = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        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() {
@@ -25,7 +32,7 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
         return (h(Host, { key: '811cf1c81df29b916af366fa68f3af34e3c7c13e', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.color}`).class(color)), block.modifier(`position-${this.position}`).class(position)), block.modifier(`size-${this.size}`).class(size)) }, h("span", { key: 'fe39cc5bd17ec12ba43b10af15e5200020d3a15e', class: Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier(`color-${this.color}`).class(color)), labelEl.modifier(`hidden`).class(labelHidden)), "data-testid": "bal-badge-label" }, h("slot", { key: '8160cdc9d7adc06c360d9cfb9ebad0e5ca785758' })), this.size !== 'small' ? (h("bal-icon", { class: Object.assign(Object.assign({}, iconEl.class()), iconEl.modifier(`hidden`).class(!labelHidden)), size: this.size === '' ? 'small' : '', name: this.icon, color: this.color === 'grey' ? 'grey' : 'primary' })) : ('')));
     }
     get el() { return this; }
-    static get style() { return BalBadgeStyle0; }
+    static get style() { return balBadgeCss; }
 }, [4, "bal-badge", {
         "icon": [1],
         "size": [1],

package/components/bal-button-group2.js

@@ -5,8 +5,18 @@ const ButtonGroup = /*@__PURE__*/ proxyCustomElement(class ButtonGroup extends H
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * 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() {