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

package/dist/cjs/{tokens.esm-2b08bc6c.js → tokens.esm-b1eb9ac4.js}

@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 16 Jan 2025 14:24:58 GMT
+ * Generated on Thu, 06 Feb 2025 21:52:18 GMT
  */
 const balColorGreen3 = "#94e3d4";
 const balColorGreen6 = "#1b5951";

package/dist/cjs/{window-resize.decorator-7153a9f2.js → window-resize.decorator-6133d79a.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const breakpoints_subject = require('./breakpoints.subject-37ab025d.js');
+const breakpoints_subject = require('./breakpoints.subject-3244205b.js');
 const listener = require('./listener-52d2e5fd.js');
 const browser = require('./browser-1d542d0f.js');
 

package/dist/collection/collection-manifest.json

@@ -1,5 +1,7 @@
 {
   "entries": [
+    "components/bal-list/bal-list-item-accordion-body/bal-list-item-accordion-body.js",
+    "components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.js",
     "components/bal-popover/bal-popover.js",
     "components/bal-accordion/bal-accordion.js",
     "components/bal-accordion/bal-accordion-details/bal-accordion-details.js",
@@ -55,8 +57,6 @@
     "components/bal-label/bal-label.js",
     "components/bal-list/bal-list.js",
     "components/bal-list/bal-list-item/bal-list-item.js",
-    "components/bal-list/bal-list-item-accordion-body/bal-list-item-accordion-body.js",
-    "components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.js",
     "components/bal-list/bal-list-item-content/bal-list-item-content.js",
     "components/bal-list/bal-list-item-icon/bal-list-item-icon.js",
     "components/bal-list/bal-list-item-subtitle/bal-list-item-subtitle.js",
@@ -115,7 +115,8 @@
     "components/bal-textarea/bal-textarea.js",
     "components/bal-time-input/bal-time-input.js",
     "components/bal-toast/bal-toast.js",
-    "components/bal-tooltip/bal-tooltip.js"
+    "components/bal-tooltip/bal-tooltip.js",
+    "components/docs/bal-doc-app/bal-doc-app.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/bal-accordion/bal-accordion-details/bal-accordion-details.js

@@ -47,7 +47,7 @@ export 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' }))));
     }
     static get is() { return "bal-accordion-details"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-accordion/bal-accordion-summary/bal-accordion-summary.js

@@ -83,7 +83,7 @@ export 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" })));
     }
     static get is() { return "bal-accordion-summary"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.js

@@ -3,6 +3,9 @@ import { Host, h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 import { Logger } from "../../../utils/log";
 import { stopEventBubbling } from "../../../utils/form-input";
+import { defaultConfig, ListenToConfig } from "../../../utils/config";
+import { i18nBalAccordion } from "../bal-accordion.i18n";
+import { ariaBooleanToString } from "../../../utils/aria";
 export class AccordionTrigger {
     constructor() {
         this.componentId = `bal-accordion-trigger-${accordionTriggerIds++}`;
@@ -21,6 +24,7 @@ export 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 = '';
@@ -45,6 +49,16 @@ export class AccordionTrigger {
     componentWillRender() {
         this.updateAccordionId();
     }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+    }
     /**
      * GETTERS
      * ------------------------------------------------------
@@ -82,7 +96,7 @@ export 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 })))));
     }
     static get is() { return "bal-accordion-trigger"; }
     static get originalStyleUrls() {
@@ -323,7 +337,41 @@ export class AccordionTrigger {
     }
     static get states() {
         return {
-            "parentAccordionId": {}
+            "parentAccordionId": {},
+            "language": {}
+        };
+    }
+    static get methods() {
+        return {
+            "configChanged": {
+                "complexType": {
+                    "signature": "(state: BalConfigState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "BalConfigState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BalConfigState": {
+                            "location": "import",
+                            "path": "../../../utils/config",
+                            "id": "src/utils/config/index.ts::BalConfigState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "define config for the component"
+                        }]
+                }
+            }
         };
     }
     static get elementRef() { return "el"; }
@@ -334,4 +382,10 @@ __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;

package/dist/collection/components/bal-accordion/bal-accordion.i18n.js

@@ -0,0 +1,42 @@
+export 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',
+    },
+};

package/dist/collection/components/bal-app/bal-app.js

@@ -53,11 +53,11 @@ export class App {
         }
     }
     render() {
-        return (h(Host, { key: '29fef05a451290e2e20dc6808d1cce03ec1b1c4c', class: {
+        return (h(Host, { key: 'e062237a5407e1f20d5ba64329e264fc0ae41f4e', class: {
                 'bal-app': true,
                 'bal-app--safari': balBrowser.isSafari,
                 'bal-app--touch': balDevice.hasTouchScreen,
-            } }, h("slot", { key: 'd54179394cb4d9882647d497e09495193d57a12d' })));
+            } }, h("slot", { key: '0fdf270bb2737933ba48a2181e98897de19f66ed' })));
     }
     static get is() { return "bal-app"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-badge/bal-badge.js

@@ -15,7 +15,7 @@ export class Badge {
         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' })) : ('')));
     }
     static get is() { return "bal-badge"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-button/bal-button-group/bal-button-group.js

@@ -8,12 +8,12 @@ export class ButtonGroup {
     }
     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' }))));
     }
     static get is() { return "bal-button-group"; }
     static get properties() {

package/dist/collection/components/bal-button/bal-button.js

@@ -1,5 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import { inheritAttributes } from "../../utils/attributes";
+import { ariaBooleanToString } from "../../utils/aria";
 import { rOnLoad } from "../../utils/helpers";
 export class Button {
     constructor() {
@@ -33,6 +34,7 @@ export class Button {
         this.inverted = false;
         this.loading = false;
         this.rounded = false;
+        this.balPopup = undefined;
         this.icon = '';
         this.iconTurn = false;
         this.iconRight = '';
@@ -48,7 +50,13 @@ export class Button {
         }
     }
     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, [
@@ -57,6 +65,7 @@ export class Button {
             'aria-controls',
             'aria-hidden',
             'tabindex',
+            'aria-haspopup',
         ]);
     }
     componentDidRender() {
@@ -115,7 +124,7 @@ export class Button {
         }
     }
     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'
@@ -144,13 +153,14 @@ export class Button {
             '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',
@@ -526,6 +536,26 @@ export class Button {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "balPopup": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the button is a popup."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "bal-popup",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
             "icon": {
                 "type": "string",
                 "mutable": false,
@@ -651,7 +681,7 @@ export class Button {
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalButtonAria",
-                    "resolved": "{ controls?: string; title?: string; label?: string; }",
+                    "resolved": "{ controls?: string; title?: string; label?: string; haspopup?: string; }",
                     "references": {
                         "BalProps": {
                             "location": "global",

package/dist/collection/components/bal-card/bal-card-actions/bal-card-actions.js

@@ -4,7 +4,7 @@ export class CardActions {
         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' }))));
     }
     static get is() { return "bal-card-actions"; }
     static get properties() {

package/dist/collection/components/bal-card/bal-card-button/bal-card-button.js

@@ -10,7 +10,7 @@ export class CardButton {
         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' }))));
     }
     static get is() { return "bal-card-button"; }
     static get properties() {

package/dist/collection/components/bal-card/bal-card-content/bal-card-content.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CardContent {
     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' })));
     }
     static get is() { return "bal-card-content"; }
 }

package/dist/collection/components/bal-card/bal-card-subtitle/bal-card-subtitle.js

@@ -6,7 +6,7 @@ export class CardSubtitle {
         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' }))));
     }
     static get is() { return "bal-card-subtitle"; }
     static get properties() {

package/dist/collection/components/bal-card/bal-card-title/bal-card-title.js

@@ -4,7 +4,7 @@ export class CardTitle {
         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' }))));
     }
     static get is() { return "bal-card-title"; }
     static get properties() {

package/dist/collection/components/bal-card/bal-card.js

@@ -16,7 +16,7 @@ export class Card {
         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 !== '',
@@ -26,7 +26,7 @@ export class Card {
                 '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 is() { return "bal-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-carousel/bal-carousel.css

@@ -1 +1 @@
-:root{--bal-carousel-inner-border-background: var(--bal-color-border);--bal-carousel-inner-border-background-inverted: var(--bal-color-border-primary-light);--bal-carousel-inner-shadow-left-background-before: var(--bal-color-white);--bal-carousel-inner-shadow-right-background-after: var(--bal-color-white);--bal-carousel-inner-shadow-left-background-inverted-before: var(--bal-color-primary);--bal-carousel-inner-shadow-right-background-inverted-after: var(--bal-color-primary);--bal-carousel-product-item-button-background: var(--bal-color-white);--bal-carousel-product-item-button-background-green: var(--bal-color-green-1);--bal-carousel-product-item-button-background-green-hover: var(--bal-color-green-1);--bal-carousel-product-item-button-background-green-active: var(--bal-color-green-2);--bal-carousel-product-item-button-background-red: var(--bal-color-red-1);--bal-carousel-product-item-button-background-red-hover: var(--bal-color-red-1);--bal-carousel-product-item-button-background-red-active: var(--bal-color-red-2);--bal-carousel-product-item-button-background-yellow: var(--bal-color-yellow-1);--bal-carousel-product-item-button-background-yellow-hover: var(--bal-color-yellow-1);--bal-carousel-product-item-button-background-yellow-active: var(--bal-color-yellow-2);--bal-carousel-product-item-button-background-purple: var(--bal-color-purple-1);--bal-carousel-product-item-button-background-purple-hover: var(--bal-color-purple-1);--bal-carousel-product-item-button-background-purple-active: var(--bal-color-purple-2);--bal-carousel-inner-border-radius: var(--bal-radius-rounded);--bal-carousel-image-border-radius: var(--bal-radius-normal);--bal-carousel-product-item-button-border-radius: var(--bal-radius-large);--bal-carousel-product-item-button-label-text-color: var(--bal-color-text-primary);--bal-carousel-sticky-top: 0}.bal-swiper{position:relative;display:block}.bal-swiper__inner{display:block;position:relative;margin-left:auto;margin-right:auto;overflow:clip;list-style:none;padding:0;touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-overflow-scrolling:touch}.bal-swiper__inner--items-per-view-auto .bal-carousel__item{width:auto}.bal-swiper__inner--items-per-view-1 .bal-carousel__item{width:100%}.bal-swiper__inner--items-per-view-2 .bal-carousel__item{width:50%}.bal-swiper__inner--items-per-view-3 .bal-carousel__item{width:33.3333%}.bal-swiper__inner--items-per-view-4 .bal-carousel__item{width:25%}.bal-swiper__container{position:relative;max-width:100%;width:100%;height:100%;display:flex;box-sizing:content-box;transition-property:transform;transition-duration:0ms;transform:translate3d(0px, 0px, 0px)}.bal-swiper__controls{width:100%}.bal-swiper__controls--dots{position:relative}@media screen and (max-width: 768px){.bal-swiper__controls--large{display:flex;justify-content:center;gap:2rem;margin-top:1rem}}@media screen and (min-width: 769px),print{.bal-swiper__controls--large{position:absolute;top:calc(50% - 1.5rem)}.bal-swiper__controls--large .bal-swiper__controls__button{position:absolute;z-index:7}.bal-swiper__controls--large .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--large .bal-swiper__controls__button--right{right:0}}.bal-swiper__controls__button--hidden{display:none !important;visibility:none !important}.bal-swiper__controls--small{position:absolute;top:calc(50% - 1rem)}.bal-swiper__controls--small .bal-swiper__controls__button{position:absolute;z-index:7}.bal-swiper__controls--small .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--small .bal-swiper__controls__button--right{right:0}.bal-swiper__controls--small .bal-swiper__controls__button--hidden{display:none !important;visibility:hidden !important}.bal-swiper__inner--shadow-left::before,.bal-swiper__inner--shadow-right::after{position:absolute;width:3rem;height:100%;top:0}.bal-swiper__inner--shadow-left::before{content:"";left:0;background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right::after{content:"";right:0;background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-after) 50%)}.bal-swiper__inner--shadow-left.bal-swiper__inner--inverted::before{background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-inverted-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right.bal-swiper__inner--inverted::after{background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-carousel--full-height{height:100%}.bal-carousel__inner--full-height{height:100%}.bal-carousel__inner__container--border{padding-bottom:var(--bal-border-width-normal)}.bal-carousel__inner__container__border{position:absolute;background:var(--bal-carousel-inner-border-background);border-radius:var(--bal-carousel-inner-border-radius);height:var(--bal-border-width-normal);width:100%;bottom:0;transform:translate3d(0px, 0px, 0px)}.bal-carousel__inner__container__border--inverted{background:var(--bal-carousel-inner-border-background-inverted)}.bal-carousel__item{box-sizing:border-box;text-align:center;font-size:var(--bal-text-size-large);min-height:2rem;display:flex;justify-content:center;align-items:center;flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;round:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:2.5rem}}@media screen and (min-width: 1024px){.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:3rem}}.bal-carousel--card{margin-left:-1rem;margin-right:-1rem}@media screen and (min-width: 769px),print{.bal-carousel--card{margin-left:-2.5rem;margin-right:-2.5rem}}.bal-carousel--card .bal-carousel__controls{padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__controls{padding-left:2.5rem;padding-right:2.5rem}}.bal-carousel--card .bal-carousel__item{width:100%;padding-top:1rem;padding-bottom:1rem;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__item{width:100%;padding-top:2.5rem;padding-bottom:2.5rem;padding-left:2.5rem;padding-right:2.5rem}}.bal-carousel--controls-sticky .bal-carousel__controls--tabs{position:sticky;top:var(--bal-carousel-sticky-top);z-index:var(--bal-z-index-sticky)}.bal-carousel__controls--tabs .bal-card{padding:0}.bal-carousel__controls--tabs .bal-card-content{padding:.5rem !important;gap:.5rem;display:flex}.bal-carousel__controls--tabs .bal-card-content .bal-button{flex:1}.bal-carousel__controls--tabs .bal-card-content .bal-button .button{padding:.5rem !important}.bal-carousel--image .bal-carousel__inner{border-radius:var(--bal-carousel-image-border-radius)}.bal-carousel--image .bal-carousel__inner--is-1by1{padding-top:100%}.bal-carousel--image .bal-carousel__inner--is-16by9{padding-top:56.25%}.bal-carousel--image .bal-carousel__inner--is-3by2{padding-top:66.66%}.bal-carousel--image .bal-carousel__inner--is-4by3{padding-top:75%}.bal-carousel--image .bal-carousel__inner__container{position:absolute;top:0;left:0;display:flex;flex-direction:row;height:100%}.bal-carousel--image .bal-carousel__item{position:relative;flex:0 0 100%}.bal-carousel--image .bal-carousel__item>img{height:100%;width:100%;object-fit:cover;user-select:none;user-drag:none;user-zoom:fixed}.bal-carousel--product .bal-carousel__inner__container{gap:1rem;width:fit-content;padding-top:1rem;padding-bottom:1rem}@media screen and (min-width: 769px),print{.bal-carousel--product .bal-carousel__inner__container{padding-top:1.5rem;padding-bottom:1.5rem}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__inner__container{padding-top:2rem;padding-bottom:2rem}}.bal-carousel--product .bal-carousel__item{display:flex;min-width:10rem;max-width:10rem;height:11rem;text-align:center;user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item img{user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item__button{display:flex;flex:1;flex-direction:column;align-items:center;gap:1rem;border-radius:var(--bal-carousel-product-item-button-border-radius);padding:var(--bal-text-size-x-small);border:none;cursor:pointer;user-select:none;outline:none;background:var(--bal-carousel-product-item-button-background)}@media(hover: hover)and (pointer: fine){.bal-carousel--product .bal-carousel__item__button:focus-visible:not(:active){box-shadow:var(--bal-focus-shadow) !important}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-green{background:var(--bal-carousel-product-item-button-background-green)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-green:hover{background:var(--bal-carousel-product-item-button-background-green-hover)}.bal-carousel--product .bal-carousel__item__button--color-green:active{background:var(--bal-carousel-product-item-button-background-green-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-red{background:var(--bal-carousel-product-item-button-background-red)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-red:hover{background:var(--bal-carousel-product-item-button-background-red-hover)}.bal-carousel--product .bal-carousel__item__button--color-red:active{background:var(--bal-carousel-product-item-button-background-red-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-yellow{background:var(--bal-carousel-product-item-button-background-yellow)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-yellow:hover{background:var(--bal-carousel-product-item-button-background-yellow-hover)}.bal-carousel--product .bal-carousel__item__button--color-yellow:active{background:var(--bal-carousel-product-item-button-background-yellow-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-purple{background:var(--bal-carousel-product-item-button-background-purple)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-purple:hover{background:var(--bal-carousel-product-item-button-background-purple-hover)}.bal-carousel--product .bal-carousel__item__button--color-purple:active{background:var(--bal-carousel-product-item-button-background-purple-active)}}.bal-carousel--product .bal-carousel__item__button__image{width:5rem;height:5rem;pointer-events:none}.bal-carousel--product .bal-carousel__item__button__label{font-weight:var(--bal-font-weight-bold);color:var(--bal-carousel-product-item-button-label-text-color);font-size:var(--bal-text-size-normal);hyphens:auto;height:3.5rem;overflow:hidden;line-height:1.15rem;word-break:break-word}
+:root{--bal-carousel-inner-border-background: var(--bal-color-border);--bal-carousel-inner-border-background-inverted: var(--bal-color-border-primary-light);--bal-carousel-inner-shadow-left-background-before: var(--bal-color-white);--bal-carousel-inner-shadow-right-background-after: var(--bal-color-white);--bal-carousel-inner-shadow-left-background-inverted-before: var(--bal-color-primary);--bal-carousel-inner-shadow-right-background-inverted-after: var(--bal-color-primary);--bal-carousel-product-item-button-background: var(--bal-color-white);--bal-carousel-product-item-button-background-green: var(--bal-color-green-1);--bal-carousel-product-item-button-background-green-hover: var(--bal-color-green-1);--bal-carousel-product-item-button-background-green-active: var(--bal-color-green-2);--bal-carousel-product-item-button-background-red: var(--bal-color-red-1);--bal-carousel-product-item-button-background-red-hover: var(--bal-color-red-1);--bal-carousel-product-item-button-background-red-active: var(--bal-color-red-2);--bal-carousel-product-item-button-background-yellow: var(--bal-color-yellow-1);--bal-carousel-product-item-button-background-yellow-hover: var(--bal-color-yellow-1);--bal-carousel-product-item-button-background-yellow-active: var(--bal-color-yellow-2);--bal-carousel-product-item-button-background-purple: var(--bal-color-purple-1);--bal-carousel-product-item-button-background-purple-hover: var(--bal-color-purple-1);--bal-carousel-product-item-button-background-purple-active: var(--bal-color-purple-2);--bal-carousel-inner-border-radius: var(--bal-radius-rounded);--bal-carousel-image-border-radius: var(--bal-radius-normal);--bal-carousel-product-item-button-border-radius: var(--bal-radius-large);--bal-carousel-product-item-button-label-text-color: var(--bal-color-text-primary);--bal-carousel-sticky-top: 0}.bal-swiper{position:relative;display:block}.bal-swiper__inner{display:block;position:relative;margin-left:auto;margin-right:auto;overflow:clip;list-style:none;padding:0;touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-overflow-scrolling:touch}.bal-swiper__inner--items-per-view-auto .bal-carousel__item{width:auto}.bal-swiper__inner--items-per-view-1 .bal-carousel__item{width:100%}.bal-swiper__inner--items-per-view-2 .bal-carousel__item{width:50%}.bal-swiper__inner--items-per-view-3 .bal-carousel__item{width:33.3333%}.bal-swiper__inner--items-per-view-4 .bal-carousel__item{width:25%}.bal-swiper__container{position:relative;max-width:100%;width:100%;height:100%;display:flex;box-sizing:content-box;transition-property:transform;transition-duration:0ms;transform:translate3d(0px, 0px, 0px)}.bal-swiper__container--gap-none{gap:0}.bal-swiper__container--gap-normal{gap:1rem}.bal-swiper__container--gap-medium{gap:1.5rem}.bal-swiper__controls{width:100%}.bal-swiper__controls--dots{position:relative}@media screen and (max-width: 768px){.bal-swiper__controls--large{display:flex;justify-content:center;gap:2rem;margin-top:1rem}}@media screen and (min-width: 769px),print{.bal-swiper__controls--large{position:absolute;top:calc(50% - 1.5rem)}.bal-swiper__controls--large .bal-swiper__controls__button{position:absolute;z-index:7}.bal-swiper__controls--large .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--large .bal-swiper__controls__button--right{right:0}}.bal-swiper__controls__button--hidden{display:none !important;visibility:none !important}.bal-swiper__controls--small{position:absolute;top:calc(50% - 1rem)}.bal-swiper__controls--small .bal-swiper__controls__button{position:absolute;z-index:7}.bal-swiper__controls--small .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--small .bal-swiper__controls__button--right{right:0}.bal-swiper__controls--small .bal-swiper__controls__button--hidden{display:none !important;visibility:hidden !important}.bal-swiper__inner--shadow-left::before,.bal-swiper__inner--shadow-right::after{position:absolute;width:3rem;height:100%;top:0}.bal-swiper__inner--shadow-left::before{content:"";left:0;background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right::after{content:"";right:0;background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-after) 50%)}.bal-swiper__inner--shadow-left.bal-swiper__inner--inverted::before{background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-inverted-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right.bal-swiper__inner--inverted::after{background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-carousel--full-height{height:100%}.bal-carousel--full-height .bal-carousel__item{height:auto}.bal-carousel__inner--full-height{height:100%}.bal-carousel__inner__container--border{padding-bottom:var(--bal-border-width-normal)}.bal-carousel__inner__container__border{position:absolute;background:var(--bal-carousel-inner-border-background);border-radius:var(--bal-carousel-inner-border-radius);height:var(--bal-border-width-normal);width:100%;bottom:0;transform:translate3d(0px, 0px, 0px)}.bal-carousel__inner__container__border--inverted{background:var(--bal-carousel-inner-border-background-inverted)}.bal-carousel__item{box-sizing:border-box;text-align:center;font-size:var(--bal-text-size-large);min-height:2rem;display:flex;justify-content:center;align-items:center;flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;round:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:2.5rem}}@media screen and (min-width: 1024px){.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:3rem}}.bal-carousel--card{margin-left:-1rem;margin-right:-1rem}@media screen and (min-width: 769px),print{.bal-carousel--card{margin-left:-2.5rem;margin-right:-2.5rem}}.bal-carousel--card .bal-carousel__controls{padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__controls{padding-left:2.5rem;padding-right:2.5rem}}.bal-carousel--card .bal-carousel__item{width:100%;padding-top:1rem;padding-bottom:1rem;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__item{width:100%;padding-top:2.5rem;padding-bottom:2.5rem;padding-left:2.5rem;padding-right:2.5rem}}.bal-carousel--controls-sticky .bal-carousel__controls--tabs{position:sticky;top:var(--bal-carousel-sticky-top);z-index:var(--bal-z-index-sticky)}.bal-carousel__controls--tabs .bal-card{padding:0}.bal-carousel__controls--tabs .bal-card-content{padding:.5rem !important;gap:.5rem;display:flex}.bal-carousel__controls--tabs .bal-card-content .bal-button{flex:1}.bal-carousel__controls--tabs .bal-card-content .bal-button .button{padding:.5rem !important}.bal-carousel--image .bal-carousel__inner{border-radius:var(--bal-carousel-image-border-radius)}.bal-carousel--image .bal-carousel__inner--is-1by1{padding-top:100%}.bal-carousel--image .bal-carousel__inner--is-16by9{padding-top:56.25%}.bal-carousel--image .bal-carousel__inner--is-3by2{padding-top:66.66%}.bal-carousel--image .bal-carousel__inner--is-4by3{padding-top:75%}.bal-carousel--image .bal-carousel__inner__container{position:absolute;top:0;left:0;display:flex;flex-direction:row;height:100%}.bal-carousel--image .bal-carousel__item{position:relative;flex:0 0 100%}.bal-carousel--image .bal-carousel__item>img{height:100%;width:100%;object-fit:cover;user-select:none;user-drag:none;user-zoom:fixed}.bal-carousel--product .bal-carousel__inner__container{gap:1rem;width:fit-content;padding-top:1rem;padding-bottom:1rem}@media screen and (min-width: 769px),print{.bal-carousel--product .bal-carousel__inner__container{padding-top:1.5rem;padding-bottom:1.5rem}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__inner__container{padding-top:2rem;padding-bottom:2rem}}.bal-carousel--product .bal-carousel__item{display:flex;min-width:10rem;max-width:10rem;height:11rem;text-align:center;user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item img{user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item__button{display:flex;flex:1;flex-direction:column;align-items:center;gap:1rem;border-radius:var(--bal-carousel-product-item-button-border-radius);padding:var(--bal-text-size-x-small);border:none;cursor:pointer;user-select:none;outline:none;background:var(--bal-carousel-product-item-button-background)}@media(hover: hover)and (pointer: fine){.bal-carousel--product .bal-carousel__item__button:focus-visible:not(:active){box-shadow:var(--bal-focus-shadow) !important}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-green{background:var(--bal-carousel-product-item-button-background-green)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-green:hover{background:var(--bal-carousel-product-item-button-background-green-hover)}.bal-carousel--product .bal-carousel__item__button--color-green:active{background:var(--bal-carousel-product-item-button-background-green-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-red{background:var(--bal-carousel-product-item-button-background-red)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-red:hover{background:var(--bal-carousel-product-item-button-background-red-hover)}.bal-carousel--product .bal-carousel__item__button--color-red:active{background:var(--bal-carousel-product-item-button-background-red-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-yellow{background:var(--bal-carousel-product-item-button-background-yellow)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-yellow:hover{background:var(--bal-carousel-product-item-button-background-yellow-hover)}.bal-carousel--product .bal-carousel__item__button--color-yellow:active{background:var(--bal-carousel-product-item-button-background-yellow-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-purple{background:var(--bal-carousel-product-item-button-background-purple)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-purple:hover{background:var(--bal-carousel-product-item-button-background-purple-hover)}.bal-carousel--product .bal-carousel__item__button--color-purple:active{background:var(--bal-carousel-product-item-button-background-purple-active)}}.bal-carousel--product .bal-carousel__item__button__image{width:5rem;height:5rem;pointer-events:none}.bal-carousel--product .bal-carousel__item__button__label{font-weight:var(--bal-font-weight-bold);color:var(--bal-carousel-product-item-button-label-text-color);font-size:var(--bal-text-size-normal);hyphens:auto;height:3.5rem;overflow:hidden;line-height:1.15rem;word-break:break-word}

package/dist/collection/components/bal-carousel/bal-carousel.js

@@ -23,6 +23,7 @@ export class Carousel {
         this.steps = 1;
         this.itemsPerView = 1;
         this.controls = 'none';
+        this.space = 'none';
         this.htmlRole = 'list';
         this.controlsOverflow = false;
         this.inverted = false;
@@ -45,8 +46,11 @@ export class Carousel {
     onControlsChange() {
         this.swiper.controls = this.controls;
     }
+    onSpaceChange() {
+        this.swiper.gapSpace = this.space;
+    }
     onInterFaceChange() {
-        this.swiper.gapSize = this.interface === 'product' ? 16 : 0;
+        this.swiper.gapSpace = this.interface === 'product' ? 'normal' : this.space;
     }
     /**
      * LIFECYCLE
@@ -55,9 +59,10 @@ export class Carousel {
     connectedCallback() {
         this.swiper.connectedCallback(this);
         this.onControlsChange();
-        this.onInterFaceChange();
         this.onItemsPerViewChange();
         this.onStepsChange();
+        this.onSpaceChange();
+        this.onInterFaceChange();
         this.onValueChange();
     }
     disconnectedCallback() {
@@ -139,7 +144,7 @@ export class Carousel {
         const block = BEM.block('carousel');
         const inner = block.element('inner');
         const container = inner.element('container');
-        return (h(Host, { key: '89263d584f6952e1e8b22c1158ab814f3d8d601e', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiper()), block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-tabs`).class(this.controls === 'tabs')) }, this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: this.swiper.getAllControlItems(), containerId: this.swiper.containerId, onControlChange: item => this.swiper.onControlChange(item.value) })) : (''), h("div", { key: 'fb631d4a11c0e094c65e42fec8742cfe15b0bcf8', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssInnerSwiper()), inner.class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), ref: el => (this.swiper.innerEl = el) }, h("div", { key: '793f837d4e6ae7e636fcf33a523c610e7639423d', id: this.swiper.containerId, role: this.controls === 'tabs' ? '' : 'list', class: Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiperContainer()), container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.swiper.containerEl = el) }, h("slot", { key: '7786bb252ef257147b3a9b1f357587710d8d0d21' }), this.border ? (h("div", { id: `${this.swiper.id}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.swiper.borderEl = el) })) : (''))), this.swiper.renderControls()));
+        return (h(Host, { key: '045f46d215e6655af8a04cc992ccb0c0d2ace7b1', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiper()), block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-tabs`).class(this.controls === 'tabs')) }, this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: this.swiper.getAllControlItems(), containerId: this.swiper.containerId, onControlChange: item => this.swiper.onControlChange(item.value) })) : (''), h("div", { key: '9b3a26e262678685c62bfca9b47748312548b9ae', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssInnerSwiper()), inner.class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), ref: el => (this.swiper.innerEl = el) }, h("div", { key: '3cd4f36061c3ea702ac26cad019e4b11e39f8750', id: this.swiper.containerId, role: this.controls === 'tabs' ? '' : 'list', class: Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiperContainer()), container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.swiper.containerEl = el) }, h("slot", { key: 'e45dad1eddb06ec65c8eceeccf67969fe92b24cb' }), this.border ? (h("div", { id: `${this.swiper.id}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.swiper.borderEl = el) })) : (''))), this.swiper.renderControls()));
     }
     static get is() { return "bal-carousel"; }
     static get originalStyleUrls() {
@@ -234,6 +239,26 @@ export class Carousel {
                 "reflect": false,
                 "defaultValue": "'none'"
             },
+            "space": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'normal' | 'medium' | 'none'",
+                    "resolved": "\"medium\" | \"none\" | \"normal\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the layout of the navigation controls."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "space",
+                "reflect": false,
+                "defaultValue": "'none'"
+            },
             "htmlRole": {
                 "type": "string",
                 "mutable": false,
@@ -558,6 +583,9 @@ export class Carousel {
             }, {
                 "propName": "controls",
                 "methodName": "onControlsChange"
+            }, {
+                "propName": "space",
+                "methodName": "onSpaceChange"
             }, {
                 "propName": "interface",
                 "methodName": "onInterFaceChange"

package/dist/collection/components/bal-checkbox/bal-checkbox-button/bal-checkbox-button.js

@@ -170,7 +170,7 @@ export class CheckboxButton {
         const invalid = !!this.invalid;
         const color = !!this.color;
         const colored = this.checked && color;
-        return (h(Host, { key: '1cc87d4d87494ed93c669658d6b113ecdded148e', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, h("button", { key: '2875aff0c5511077bbbbf697e589ca2e9cba9861', role: "checkbox", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, h("slot", { key: 'e83b0706ab2f9d2c8f39b15a654159448921336a' }))));
+        return (h(Host, { key: 'df8642a22032a8ffd1a7c7db3e378027a1b926e8', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, h("button", { key: '9c6c1334a44190f5d6987c32ebf45be35ff00cf9', role: "checkbox", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, h("slot", { key: '288d784a482e32dba9e4a46f1806ef35a51a76c0' }))));
     }
     static get is() { return "bal-checkbox-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.js

@@ -9,6 +9,7 @@ import { Logger } from "../../../utils/log";
 import { ListenToMutation } from "../../../utils/mutation";
 import { defaultBalAriaForm } from "../../../utils/form";
 import { ListenToFocus } from "../../../utils/focus";
+import { ariaBooleanToString } from "../../../utils/aria";
 export class CheckboxGroup {
     constructor() {
         this.inputId = `bal-cg-${checkboxGroupIds++}`;
@@ -273,7 +274,7 @@ export class CheckboxGroup {
             }
             return option;
         });
-        return (h(Host, Object.assign({ class: Object.assign({}, block.class()), role: "group", "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, onClick: this.onClick }, this.inheritedAttributes), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier('vertical-mobile').class(this.verticalOnMobile)), innerEl.modifier('vertical').class(this.vertical)), innerEl.modifier('expanded').class(this.expanded)), innerEl.modifier('select-button').class(this.interface === 'select-button')) }, h("slot", null), options.map(option => (h("bal-checkbox", { key: option.value, name: option.name, value: option.value, labelHidden: option.labelHidden, flat: option.flat, interface: option.interface, disabled: option.disabled, readonly: option.readonly, required: option.required, nonSubmit: !!option.nonSubmit, invalid: option.invalid, innerHTML: option.html }))))));
+        return (h(Host, Object.assign({ class: Object.assign({}, block.class()), role: "group", "aria-disabled": ariaBooleanToString(this.disabled), "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, onClick: this.onClick }, this.inheritedAttributes), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier('vertical-mobile').class(this.verticalOnMobile)), innerEl.modifier('vertical').class(this.vertical)), innerEl.modifier('expanded').class(this.expanded)), innerEl.modifier('select-button').class(this.interface === 'select-button')) }, h("slot", null), options.map(option => (h("bal-checkbox", { key: option.value, name: option.name, value: option.value, labelHidden: option.labelHidden, flat: option.flat, interface: option.interface, disabled: option.disabled, readonly: option.readonly, required: option.required, nonSubmit: !!option.nonSubmit, invalid: option.invalid, innerHTML: option.html }))))));
     }
     static get is() { return "bal-checkbox-group"; }
     static get properties() {