@baloise/ds-core 19.8.2 → 19.8.3-nightly.20251107

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 { l as debounce, v as isChildOfEventTarget, p as addEventListener, q 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/bal-accordion-details.js

@@ -6,9 +6,11 @@ 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 AccordionDetails = /*@__PURE__*/ proxyCustomElement(class AccordionDetails extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.componentId = `bal-accordion-details-${accordionDetailIds++}`;
         /**
          * PUBLIC PROPERTY API
@@ -64,11 +66,11 @@ const AccordionDetails = /*@__PURE__*/ proxyCustomElement(class AccordionDetails
         const id = this.parentAccordionId ? `${this.parentAccordionId}-details` : this.componentId;
         const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
         const contentPart = expanded ? 'content expanded' : 'content';
-        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' }))));
+        return (h(Host, { key: '1e909c6bdc60974006159dc9eb6408d3350ea684', 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: 'f38a2c41997e018e4226384b81dd73d7e55d16e8', 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: '8429dd4b9a113cade1d579d23cba01e38bb9fb9e' }))));
     }
     get el() { return this; }
     static get style() { return balAccordionDetailsCss; }
-}, [4, "bal-accordion-details", {
+}, [260, "bal-accordion-details", {
         "state": [2],
         "active": [4],
         "animated": [4],

package/components/bal-accordion-summary.js

@@ -1,16 +1,18 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
-import { L as Logger } from './log.js';
 import { s as stopEventBubbling } from './form-input.js';
+import { L as Logger } from './log.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 AccordionSummary = /*@__PURE__*/ proxyCustomElement(class AccordionSummary extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.componentId = `bal-accordion-summary-${accordionSummaryIds++}`;
         /**
          * PUBLIC PROPERTY API
@@ -100,11 +102,11 @@ const AccordionSummary = /*@__PURE__*/ proxyCustomElement(class AccordionSummary
                 'onKeyDown': this.onKeyDown,
             };
         }
-        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" })));
+        return (h(Host, Object.assign({ key: 'ed4f3e46644cf6288855154214126231e5b25e1d', 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 balAccordionSummaryCss; }
-}, [0, "bal-accordion-summary", {
+}, [256, "bal-accordion-summary", {
         "trigger": [4],
         "active": [1540],
         "state": [2],

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: {
@@ -56,9 +56,11 @@ 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 AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.componentId = `bal-accordion-trigger-${accordionTriggerIds++}`;
         this.language = defaultConfig.language;
         /**
@@ -218,7 +220,7 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
     }
     get el() { return this; }
     static get style() { return balAccordionTriggerCss; }
-}, [0, "bal-accordion-trigger", {
+}, [256, "bal-accordion-trigger", {
         "button": [4],
         "variant": [1],
         "expanded": [4],

package/components/bal-accordion.js

@@ -1,19 +1,21 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.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 { r as raf, k as debounceEvent, f as waitForComponent, t as transitionEndAsync } from './helpers.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 { 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 Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.balChange = createEvent(this, "balChange", 7);
         this.balWillAnimate = createEvent(this, "balWillAnimate", 7);
         this.balDidAnimate = createEvent(this, "balDidAnimate", 7);
@@ -56,7 +58,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
          * @internal
          * defines the version of the component
          */
-        this.version = 1;
+        this.version = 2;
         /**
          * PRIVATE METHODS
          * ------------------------------------------------------
@@ -313,7 +315,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         "debounce": ["debounceChanged"]
     }; }
     static get style() { return balAccordionCss; }
-}, [4, "bal-accordion", {
+}, [260, "bal-accordion", {
         "active": [1540],
         "debounce": [2],
         "openLabel": [1, "open-label"],

package/components/bal-app.js

@@ -1,101 +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 { L as Logger } from './log.js';
-import { b as updateBalAnimated } from './config.utils.js';
-import { l as debounce, m as rIC, n 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$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,104 @@
+import { proxyCustomElement, HTMLElement, createEvent, 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 { s as startFocusVisible } from './focus-visible.js';
+import { q as debounce, n as rIC, l as rOnLoad } from './helpers.js';
+import { L as Logger } from './log.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 App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.balAppReady = createEvent(this, "balAppReady", 7);
+        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');
+                this.balAppReady.emit();
+            }
+        });
+    }
+    disconnectedCallback() {
+        if (balBrowser.hasWindow) {
+            window.removeEventListener('resize', this.debouncedNotify);
+        }
+    }
+    async setFocus(elements) {
+        if (this.focusVisible) {
+            this.focusVisible.setFocus(elements);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'e6229236201fea92c4ccb1812f2f280a06130889', class: {
+                'bal-app': true,
+                'bal-app--safari': balBrowser.isSafari,
+                'bal-app--touch': balDevice.hasTouchScreen,
+            } }, h("slot", { key: '7712c7609c709dbe754eaf5700fd43ca3992a39f' })));
+    }
+    get el() { return this; }
+    static get style() { return balAppCss; }
+}, [260, "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

@@ -5,9 +5,11 @@ 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 Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * Define the size of badge. Small is recommended for tabs.
          */
@@ -29,11 +31,11 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
         const size = this.size !== '';
         const position = this.position !== '';
         const labelHidden = !!this.icon || this.size === 'small';
-        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' })) : ('')));
+        return (h(Host, { key: 'b705f8e38629cf8b549982aee4cdb37eaddd59de', 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: '8ce1e8ecef96a6fd74365fd28d825e40f1ca43a8', 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: '4153dcd8209ef3bfb88792110ca25bc2ff874395' })), 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 balBadgeCss; }
-}, [4, "bal-badge", {
+}, [260, "bal-badge", {
         "icon": [1],
         "size": [1],
         "color": [1],

package/components/bal-button-group2.js

@@ -2,9 +2,11 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { B as BEM } from './bem.js';
 
 const ButtonGroup = /*@__PURE__*/ proxyCustomElement(class ButtonGroup extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * The value of the button, which is submitted with the form data.
          */
@@ -28,7 +30,7 @@ const ButtonGroup = /*@__PURE__*/ proxyCustomElement(class ButtonGroup extends H
                 [`has-direction-${this.direction}`]: true,
             } }, h("slot", { key: 'a65f6a5a52b522c600c4df6c0963cdd59ad07462' }))));
     }
-}, [4, "bal-button-group", {
+}, [260, "bal-button-group", {
         "position": [1],
         "direction": [1],
         "reverse": [4]

package/components/bal-button2.js

@@ -1,16 +1,18 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as ariaBooleanToString } from './aria.js';
 import { i as inheritAttributes } from './attributes.js';
-import { n as rOnLoad } from './helpers.js';
+import { l as rOnLoad } from './helpers.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { d as defineCustomElement$1 } from './bal-spinner2.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 Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.balClick = createEvent(this, "balClick", 7);
         this.balNavigate = createEvent(this, "balNavigate", 7);
         this.balFocus = createEvent(this, "balFocus", 7);
@@ -255,7 +257,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     }
     get el() { return this; }
     static get style() { return balButtonCss; }
-}, [4, "bal-button", {
+}, [260, "bal-button", {
         "color": [1],
         "elementType": [1, "element-type"],
         "disabled": [516],

package/components/bal-card-actions.js

@@ -2,9 +2,11 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as defineCustomElement$2 } from './bal-button-group2.js';
 
 const CardActions = /*@__PURE__*/ proxyCustomElement(class CardActions extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * The value of the button, which is submitted with the form data.
          */
@@ -13,7 +15,7 @@ const CardActions = /*@__PURE__*/ proxyCustomElement(class CardActions extends H
     render() {
         return (h(Host, { key: 'a7cfd2bf8e431e2bd0fb357e11ab28391f3a76c1', class: "bal-card-actions" }, h("bal-button-group", { key: '15606e2e6831e3d3e7977b948bd9b14582c71d5d', class: "m-none", position: this.position }, h("slot", { key: '384f7646c468defca583a7ef7cbe2edf93ea74fa' }))));
     }
-}, [4, "bal-card-actions", {
+}, [260, "bal-card-actions", {
         "position": [1]
     }]);
 function defineCustomElement$1() {

package/components/bal-card-button.js

@@ -4,9 +4,11 @@ import { d as defineCustomElement$3 } from './bal-icon2.js';
 import { d as defineCustomElement$2 } from './bal-spinner2.js';
 
 const CardButton = /*@__PURE__*/ proxyCustomElement(class CardButton extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * Name of the icon like `edit`.
          */
@@ -36,7 +38,7 @@ const CardButton = /*@__PURE__*/ proxyCustomElement(class CardButton extends HTM
     render() {
         return (h(Host, { key: '3088f94353d94bf69767bcae3e714d5e3b3928d6', class: "bal-card-button" }, h("bal-button", { key: '8684146c87ae36da730bd7934d6a16e0ec00fda5', color: "info", expanded: true, "bottom-rounded": true, icon: this.icon, rel: this.rel, iconRight: this.iconRight, elementType: this.elementType, disabled: this.disabled, href: this.href, target: this.target, loading: this.loading }, h("slot", { key: 'e325e51c8d30285fc03b6991f8d42d957721a8e1' }))));
     }
-}, [4, "bal-card-button", {
+}, [260, "bal-card-button", {
         "icon": [1],
         "elementType": [1, "element-type"],
         "disabled": [516],

package/components/bal-card-content2.js

@@ -1,14 +1,16 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     render() {
         return (h(Host, { key: '63fb6b5e72ad6c3fa30ba68f6d9bdf0e1833df76', class: "bal-card-content" }, h("slot", { key: '851ba08103e95a1c0536523a449d1f317543092c' })));
     }
-}, [4, "bal-card-content"]);
+}, [260, "bal-card-content"]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/components/bal-card-subtitle.js

@@ -2,9 +2,11 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { B as BEM } from './bem.js';
 
 const CardSubtitle = /*@__PURE__*/ proxyCustomElement(class CardSubtitle extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * If `true` the card text color becomes white.
          */
@@ -22,7 +24,7 @@ const CardSubtitle = /*@__PURE__*/ proxyCustomElement(class CardSubtitle extends
         const block = BEM.block('card-subtitle');
         return (h(Host, { key: '8cdde0f96f513fa303e73fb6934ea31b8e081b70', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('bold').class(this.bold)), block.modifier(`color-${this.color}`).class(!this.inverted)), block.modifier('inverted').class(this.inverted)) }, h("span", { key: '0706b14cbe256d54016e492de7be29adef5badb5' }, h("slot", { key: '22e5a11111f7b663e15e1ab1ebba3f3cafbecd01' }))));
     }
-}, [4, "bal-card-subtitle", {
+}, [260, "bal-card-subtitle", {
         "inverted": [4],
         "bold": [4],
         "color": [1]

package/components/bal-card-title.js

@@ -2,9 +2,11 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as defineCustomElement$2 } from './bal-heading2.js';
 
 const CardTitle = /*@__PURE__*/ proxyCustomElement(class CardTitle extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * If `true` the card text color becomes white.
          */
@@ -13,7 +15,7 @@ const CardTitle = /*@__PURE__*/ proxyCustomElement(class CardTitle extends HTMLE
     render() {
         return (h(Host, { key: '480825eb5bb7479126da292aaa53a4fa74a8cd95', class: "bal-card-title" }, h("bal-heading", { key: 'c193388a8ade59840457b375b4a8715bef3e2328', level: "h3", space: "none", inverted: this.inverted }, h("slot", { key: '8c01ab5b70d5aabef47a5693b827fa8e23192c92' }))));
     }
-}, [4, "bal-card-title", {
+}, [260, "bal-card-title", {
         "inverted": [4]
     }]);
 function defineCustomElement$1() {