@baloise/ds-core 17.3.0 → 17.4.0-snapshot.1609-d2bcc38d3

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'
@@ -144,6 +145,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'
@@ -144,6 +145,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 }
@@ -262,6 +264,7 @@ export const defineAllComponents = () => {
   defineBalDateCalendar()
   defineBalDateCalendarCell()
   defineBalDivider()
+  defineBalDocApp()
   defineBalDropdown()
   defineBalField()
   defineBalFieldControl()

package/components/aria.js

@@ -1,3 +1,8 @@
-const ariaBooleanToString = (bool) => (!!bool ? 'true' : 'false');
+const ariaBooleanToString = (value) => {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    return !!value ? 'true' : 'false';
+};
 
 export { ariaBooleanToString as a };

package/components/attributes.js

@@ -5,6 +5,7 @@ const trackingAttributes = ['data-tracking-style', 'data-tracking-topic', 'data-
  * the `title` attribute that developers set directly on `bal-input`. This
  * helper function should be called in componentWillLoad and assigned to a variable
  * that is later used in the render function.
+ * This function also removes the attribute from the parent when its set on child.
  *
  * This does not need to be reactive as changing attributes on the host element
  * does not trigger a re-render.

package/components/bal-accordion-details.js

@@ -53,7 +53,7 @@ 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: '46658e9e2842371f4faac02f3666f908f48000a2', 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: '4e2616b9946f33ce3a30c396f200dd2a8c16eed4', 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: '76467aaa5660e88ab9a208fdf0577f203f000fcf' }))));
+        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; }

package/components/bal-accordion-summary.js

@@ -89,7 +89,7 @@ const AccordionSummary = /*@__PURE__*/ proxyCustomElement(class AccordionSummary
                 'onKeyDown': this.onKeyDown,
             };
         }
-        return (h(Host, Object.assign({ key: 'c3a6c35f68b01dcfe81b8e87a8a31b3c87db771c', 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: '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; }

package/components/bal-accordion-trigger.js

@@ -3,9 +3,55 @@ 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 { a as ariaBooleanToString } from './aria.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: {
+        open: 'Öffnen',
+        close: 'Schließen',
+    },
+    en: {
+        open: 'Open',
+        close: 'Close',
+    },
+    fr: {
+        open: 'Ouvrir',
+        close: 'Fermer',
+    },
+    it: {
+        open: 'Apri',
+        close: 'Chiudi',
+    },
+    nl: {
+        open: 'Open',
+        close: 'Sluiten',
+    },
+    es: {
+        open: 'Abrir',
+        close: 'Cerrar',
+    },
+    pl: {
+        open: 'Otwórz',
+        close: 'Zamknij',
+    },
+    pt: {
+        open: 'Abrir',
+        close: 'Fechar',
+    },
+    sv: {
+        open: 'Öppna',
+        close: 'Stäng',
+    },
+    fi: {
+        open: 'Avaa',
+        close: 'Sulje',
+    },
+};
 
 const balAccordionTriggerCss = "@media (hover: hover)and (pointer: fine){.bal-accordion__trigger__button.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;height:3rem;width:3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}";
 const BalAccordionTriggerStyle0 = balAccordionTriggerCss;
@@ -30,6 +76,7 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
             (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.humanToggle();
         };
         this.parentAccordionId = undefined;
+        this.language = defaultConfig.language;
         this.button = false;
         this.expanded = true;
         this.openLabel = '';
@@ -54,6 +101,16 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
     componentWillRender() {
         this.updateAccordionId();
     }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+    }
     /**
      * GETTERS
      * ------------------------------------------------------
@@ -91,7 +148,7 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
                 tabindex: 0,
             };
         }
-        return (h(Host, { key: '891c25716cc93bd97ca9b25fcb512bb1915e8f5d', id: id, class: Object.assign({}, block.class()) }, this.button ? (h("bal-button", { id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: this.expanded, icon: icon, iconTurn: turn, color: this.color, size: this.size, onClick: this.onClick }, label)) : (h("button", Object.assign({ class: Object.assign(Object.assign({}, block.element('button').class()), { 'bal-focused': parentSummaryEl && !parentSummaryEl.trigger }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-label": "accordion trigger", part: buttonPart, "data-testid": "bal-accordion-trigger", onClick: this.onClick }, triggerAttributes), h("bal-icon", { turn: turn, name: icon })))));
+        return (h(Host, { key: '6aafc18d3f16cdfeea6c74024d4468eb52cb6c9c', id: id, class: Object.assign({}, block.class()) }, this.button ? (h("bal-button", { id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: this.expanded, icon: icon, iconTurn: turn, color: this.color, size: this.size, title: this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, "aria-label": this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, "aria-expanded": ariaBooleanToString(this.active), onClick: this.onClick }, label)) : (h("button", Object.assign({ class: Object.assign(Object.assign({}, block.element('button').class()), { 'bal-focused': parentSummaryEl && !parentSummaryEl.trigger }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-expanded": ariaBooleanToString(this.active), part: buttonPart, "data-testid": "bal-accordion-trigger", title: this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, "aria-label": this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, onClick: this.onClick }, triggerAttributes), h("bal-icon", { turn: turn, name: icon })))));
     }
     get el() { return this; }
     static get style() { return BalAccordionTriggerStyle0; }
@@ -106,7 +163,9 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
         "size": [1],
         "active": [1540],
         "state": [2],
-        "parentAccordionId": [32]
+        "parentAccordionId": [32],
+        "language": [32],
+        "configChanged": [64]
     }]);
 __decorate([
     Logger('bal-accordion-trigger'),
@@ -114,6 +173,12 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], AccordionTrigger.prototype, "createLogger", null);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], AccordionTrigger.prototype, "configChanged", null);
 let accordionTriggerIds = 0;
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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: '29fef05a451290e2e20dc6808d1cce03ec1b1c4c', class: {
-                'bal-app': true,
-                'bal-app--safari': balBrowser.isSafari,
-                'bal-app--touch': balDevice.hasTouchScreen,
-            } }, h("slot", { key: 'd54179394cb4d9882647d497e09495193d57a12d' })));
-    }
-    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,95 @@
+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: 'e062237a5407e1f20d5ba64329e264fc0ae41f4e', class: {
+                'bal-app': true,
+                'bal-app--safari': balBrowser.isSafari,
+                'bal-app--touch': balDevice.hasTouchScreen,
+            } }, h("slot", { key: '0fdf270bb2737933ba48a2181e98897de19f66ed' })));
+    }
+    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() {
+    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

@@ -22,7 +22,7 @@ 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: '8fefcf48fb5ba2011faf11b6d5dee452080d3344', 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: '582a5f522dd5c7fff3c373b4e85055d7b203aa20', 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: 'cb210bd83465da685b87be59d29195f96be0b584' })), 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: '0c065379dc9c282d71779193f357ddc2062009d9', 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: 'c23e1622df7a9fc30cd9f077be4bafcd1a80d6e0', 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: 'e01fa5ade4be45474abf0316f3a47b12776a2ae7' })), 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; }

package/components/bal-button-group2.js

@@ -11,12 +11,12 @@ const ButtonGroup = /*@__PURE__*/ proxyCustomElement(class ButtonGroup extends H
     }
     render() {
         const block = BEM.block('button-group');
-        return (h(Host, { key: '37a0df1c1011b201337d3a3838131fd4eec4ad52', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`position-${this.position}`).class()), block.modifier(`direction-${this.direction}`).class()) }, h("div", { key: 'fc6667209c1ce56dee220bca313c1b894e49be62', class: {
+        return (h(Host, { key: 'bd88bb4d967d745bdbbf825bd43bc3c75eea4f75', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`position-${this.position}`).class()), block.modifier(`direction-${this.direction}`).class()) }, h("div", { key: '3aaa6d2c14336ffb08469d00246169d72ed916dc', class: {
                 'field': true,
                 'is-grouped': true,
                 'is-reverse': this.reverse,
                 [`has-direction-${this.direction}`]: true,
-            } }, h("slot", { key: '8187edbafa351fc0b57178bd826dd4d36fc56721' }))));
+            } }, h("slot", { key: '8d980bc54adcae84174fecc1d331b37a2662ec0b' }))));
     }
 }, [4, "bal-button-group", {
         "position": [1],

package/components/bal-button2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { i as inheritAttributes } from './attributes.js';
+import { a as ariaBooleanToString } from './aria.js';
 import { m as rOnLoad } from './helpers.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { d as defineCustomElement$1 } from './bal-spinner2.js';
@@ -45,6 +46,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         this.inverted = false;
         this.loading = false;
         this.rounded = false;
+        this.balPopup = undefined;
         this.icon = '';
         this.iconTurn = false;
         this.iconRight = '';
@@ -60,7 +62,13 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         }
     }
     componentDidLoad() {
+        var _a;
         rOnLoad(() => (this.isLargestContentPaintDone = true));
+        if (this.el.getAttribute('bal-popup') && !((_a = this.aria) === null || _a === void 0 ? void 0 : _a.haspopup)) {
+            this.aria = {
+                haspopup: 'true',
+            };
+        }
     }
     componentWillLoad() {
         this.inheritAttributes = inheritAttributes(this.el, [
@@ -69,6 +77,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
             'aria-controls',
             'aria-hidden',
             'tabindex',
+            'aria-haspopup',
         ]);
     }
     componentDidRender() {
@@ -127,7 +136,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         }
     }
     render() {
-        var _a, _b, _c, _d;
+        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'
@@ -156,13 +165,14 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
             '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'],
         };
         return (h(Host, { onClick: this.handleClick, class: {
                 'bal-button': true,
                 'control': true,
                 'is-fullwidth': this.expanded,
                 'is-disabled': this.disabled,
-            } }, h(TagType, Object.assign({}, attrs, this.inheritAttributes, { type: this.elementType, class: this.buttonCssClass, part: "native", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, "aria-disabled": this.disabled ? 'true' : null, "data-testid": "bal-button" }, ariaAttributes), this.isLargestContentPaintDone && this.loading ? (h("bal-spinner", Object.assign({ color: spinnerColor(), small: true }, this.loadingAttrs, { deactivated: !this.loading }))) : (''), this.isLargestContentPaintDone && this.icon ? (h("bal-icon", Object.assign({}, this.leftIconAttrs, { class: this.square ? '' : 'icon-left', name: this.icon, size: this.square ? this.size : 'small', turn: this.iconTurn, inverted: this.isIconInverted }))) : (''), h("span", { class: {
+            } }, h(TagType, Object.assign({}, attrs, this.inheritAttributes, { type: this.elementType, class: this.buttonCssClass, part: "native", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, "aria-disabled": ariaBooleanToString(this.disabled), "data-testid": "bal-button" }, ariaAttributes), this.isLargestContentPaintDone && this.loading ? (h("bal-spinner", Object.assign({ color: spinnerColor(), small: true }, this.loadingAttrs, { deactivated: !this.loading }))) : (''), this.isLargestContentPaintDone && this.icon ? (h("bal-icon", Object.assign({}, this.leftIconAttrs, { class: this.square ? '' : 'icon-left', name: this.icon, size: this.square ? this.size : 'small', turn: this.iconTurn, inverted: this.isIconInverted }))) : (''), h("span", { class: {
                 'button-label': true,
                 'has-no-wrap': this.noWrap,
                 'is-small': this.size === 'small',
@@ -188,6 +198,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         "inverted": [4],
         "loading": [4],
         "rounded": [4],
+        "balPopup": [8, "bal-popup"],
         "icon": [1],
         "iconTurn": [4, "icon-turn"],
         "iconRight": [1, "icon-right"],

package/components/bal-card-actions.js

@@ -8,7 +8,7 @@ const CardActions = /*@__PURE__*/ proxyCustomElement(class CardActions extends H
         this.position = '';
     }
     render() {
-        return (h(Host, { key: '78f85e69ecf9184127533a57f8fb53793bf7f49e', class: "bal-card-actions" }, h("bal-button-group", { key: 'bee1def05a211bffb60f76b69a32cbd9e6d1a536', class: "m-none", position: this.position }, h("slot", { key: 'd62d486907ed3ef8bcd888464a0ddb32f2dfdcd3' }))));
+        return (h(Host, { key: '0ddde50f0b230e34ec5808381cee4512b3c819cf', class: "bal-card-actions" }, h("bal-button-group", { key: '55e2c1c888eb0a1c818565ae3d0e6d564a1320b1', class: "m-none", position: this.position }, h("slot", { key: 'c41d4ff9870e800acb34d11a0de30769f960ad02' }))));
     }
 }, [4, "bal-card-actions", {
         "position": [1]

package/components/bal-card-button.js

@@ -16,7 +16,7 @@ const CardButton = /*@__PURE__*/ proxyCustomElement(class CardButton extends HTM
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: 'a9a6233b6262d6160868017fd254d5a6ad2612ae', class: "bal-card-button" }, h("bal-button", { key: 'b7a5317e53b75f8d8bb4bbb8dd6ef56325c6676b', color: "info", expanded: true, "bottom-rounded": true, icon: this.icon, iconRight: this.iconRight, elementType: this.elementType, disabled: this.disabled, href: this.href, target: this.target, loading: this.loading }, h("slot", { key: '9461aa5ace6d22d8c7dd6eff5495dfc4e3232506' }))));
+        return (h(Host, { key: 'e10a38993a05b081e6963578ca58394ffed6b85c', class: "bal-card-button" }, h("bal-button", { key: '8d6a175f3ada4e3f3327cdb1bfc766ccef081a8a', color: "info", expanded: true, "bottom-rounded": true, icon: this.icon, iconRight: this.iconRight, elementType: this.elementType, disabled: this.disabled, href: this.href, target: this.target, loading: this.loading }, h("slot", { key: '7c0dd79bcbafccfbdf696fe95b209a8343080ddc' }))));
     }
 }, [4, "bal-card-button", {
         "icon": [1],

package/components/bal-card-content2.js

@@ -6,7 +6,7 @@ const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends H
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '3d9b2511b8743f33efeb25ae05691964b938cbcc', class: "bal-card-content" }, h("slot", { key: '2085fa6085da72981d7a5fb86eca8979b8d84076' })));
+        return (h(Host, { key: '45545a634067cee8d1d28d05291d8cef0299d416', class: "bal-card-content" }, h("slot", { key: '2d647c7e9bc7a95f9aa0f0d0b16fec7f6eb3383c' })));
     }
 }, [4, "bal-card-content"]);
 function defineCustomElement() {

package/components/bal-card-subtitle.js

@@ -10,7 +10,7 @@ const CardSubtitle = /*@__PURE__*/ proxyCustomElement(class CardSubtitle extends
         this.color = '';
     }
     render() {
-        return (h(Host, { key: '3c1cf2160f9cca6e5d9b2ce60069a23bedcb590a', class: "bal-card-subtitle" }, h("bal-text", { key: '22fab503a09f822fe30a6e06340312c3c080b6a4', bold: this.bold, space: "none", color: this.inverted ? 'white' : this.color }, h("slot", { key: 'bb28c8fcbfec3ba10184721940a453b22b2b8865' }))));
+        return (h(Host, { key: '3926fde414f565f08d192a020366edf1757c6922', class: "bal-card-subtitle" }, h("bal-text", { key: 'a04132e568b034e371f6805e77dbcfe21d9e9489', bold: this.bold, space: "none", color: this.inverted ? 'white' : this.color }, h("slot", { key: '037e237cdaced982f0b3ba0074016aa4777ffbde' }))));
     }
 }, [4, "bal-card-subtitle", {
         "inverted": [4],

package/components/bal-card-title.js

@@ -8,7 +8,7 @@ const CardTitle = /*@__PURE__*/ proxyCustomElement(class CardTitle extends HTMLE
         this.inverted = false;
     }
     render() {
-        return (h(Host, { key: '7e5021e2cf281b237676f401ca3109a6988b8edc', class: "bal-card-title" }, h("bal-heading", { key: 'b1a0badb897ba81b3fc25367cdd2155ee5bb7b43', level: "h3", space: "none", inverted: this.inverted }, h("slot", { key: '8765c2c2485f4f1a885278070328136ec1402b1a' }))));
+        return (h(Host, { key: 'b12a4f08d1a78e31aa306b20ee59a8826249b5b0', class: "bal-card-title" }, h("bal-heading", { key: 'a22c6af75f714e70f1efd36f0671a6e623a9ef31', level: "h3", space: "none", inverted: this.inverted }, h("slot", { key: '11483681e586eac535db5244f4c85a87d0ddce42' }))));
     }
 }, [4, "bal-card-title", {
         "inverted": [4]

package/components/bal-card2.js

@@ -22,7 +22,7 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
         return isEmpty(this.color) ? '' : `is-${this.inverted ? 'blue' : this.color}`;
     }
     render() {
-        return (h(Host, { key: '7bc59c101e875eedda1f209d3eb2442ac00b4df5', class: {
+        return (h(Host, { key: '60405d26b29d82993d5853b66126448c24da76de', class: {
                 'bal-card': true,
                 [`bal-card--${this.colorTypeClass}`]: !isEmpty(this.color),
                 [`bal-card--is-${this.space}`]: this.space !== '',
@@ -32,7 +32,7 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
                 'bal-card--is-selected': this.selected,
                 'bal-card--is-square': this.square,
                 'bal-card--has-fullheight': this.fullheight,
-            } }, h("slot", { key: '577a43d779ac88042185e9bf5d3eb61f663cebad' })));
+            } }, h("slot", { key: 'a196556a24c3847732c405aa7f811403b7b25474' })));
     }
     static get style() { return BalCardStyle0; }
 }, [4, "bal-card", {