@baloise/ds-core 16.4.0 → 16.5.0

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

@@ -0,0 +1,537 @@
+import { __decorate, __metadata } from "tslib";
+import { h, Host, writeTask, } from "@stencil/core";
+import { BEM } from "../../utils/bem";
+import { Logger } from "../../utils/log";
+import { isArrowDownKey, isArrowUpKey, isSpaceKey, isHomeKey, isEndKey, isArrowLeftKey, isArrowRightKey, } from "@baloise/web-app-utils";
+import { stopEventBubbling } from "../../utils/form-input";
+import { FOCUS_KEYS } from "../../utils/focus-visible";
+import { ListenToWindowResize } from "../../utils/resize";
+import { raf } from "../../utils/helpers";
+import { ListenToBreakpoints } from "../../utils/breakpoints";
+export class Segment {
+    constructor() {
+        this.getSegmentItem = (selector) => {
+            var _a, _b;
+            const items = this.items.filter(item => !item.disabled);
+            const currIndex = items.findIndex(item => item === document.activeElement.closest('bal-segment-item'));
+            switch (selector) {
+                case 'current':
+                    return items[currIndex];
+                case 'first':
+                    return items[0];
+                case 'last':
+                    return items[items.length - 1];
+                case 'next':
+                    return (_a = items[currIndex + 1]) !== null && _a !== void 0 ? _a : items[0];
+                case 'previous':
+                    return (_b = items[currIndex - 1]) !== null && _b !== void 0 ? _b : items[items.length - 1];
+                default:
+                    return null;
+            }
+        };
+        /**
+         * PRIVATE EVENT HANDLERS
+         * ------------------------------------------------------
+         */
+        this.onPointerDown = () => {
+            this.keyboardMode = false;
+        };
+        this.onSlottedItemsChange = () => {
+            /**
+             * When the slotted segment buttons change we need to
+             * ensure that the new segment buttons are checked if
+             * the value matches the segment button value.
+             */
+            this.valueChanged(this.value);
+            this.defineWidth();
+        };
+        this.onClick = (ev) => {
+            if (this.disabled) {
+                return;
+            }
+            const current = ev.target;
+            const previous = this.checked;
+            // If the current element is a segment then that means
+            // the user tried to swipe to a segment button and
+            // click a segment button at the same time so we should
+            // not update the checked segment button
+            if (current.tagName === 'BAL-SEGMENT') {
+                return;
+            }
+            if (current && current.setFocus) {
+                current.setFocus();
+            }
+            if (previous) {
+                this.checkButton(previous, current);
+            }
+            else {
+                this.setCheckedClasses();
+                this.checkButton(current, current);
+            }
+            if (current !== previous) {
+                this.emitValueChange();
+            }
+        };
+        this.focusedValue = undefined;
+        this.keyboardMode = true;
+        this.isVertical = false;
+        this.isMobile = false;
+        this.maxWidth = 0;
+        this.invalid = false;
+        this.disabled = false;
+        this.vertical = false;
+        this.scrollable = false;
+        this.expanded = false;
+        this.value = undefined;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    valueChanged(value) {
+        /**
+         * `balSelect` is emitted every time the value changes (internal or external changes).
+         * Used by `bal-segment-item` to determine if the button should be checked.
+         */
+        this.balSelect.emit(value);
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback() {
+        this.el.addEventListener('touchstart', this.onPointerDown);
+        this.el.addEventListener('mousedown', this.onPointerDown);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('touchstart', this.onPointerDown);
+        this.el.removeEventListener('mousedown', this.onPointerDown);
+    }
+    async componentDidLoad() {
+        this.setCheckedClasses();
+        this.defineWidth();
+    }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    breakpointListener(breakpoints) {
+        this.isMobile = breakpoints.mobile;
+    }
+    windowResizeListener() {
+        if (this.vertical === false && this.maxWidth > 0) {
+            const parent = this.el.parentElement.getBoundingClientRect();
+            if (parent.width < this.maxWidth) {
+                //
+                // element in horizontal is to big
+                this.emitVerticalChange(true);
+            }
+            else {
+                //
+                // element has enough space in parent element
+                this.emitVerticalChange(false);
+            }
+        }
+        else {
+            this.emitVerticalChange(true);
+        }
+    }
+    listenOnBalBlur(ev) {
+        stopEventBubbling(ev);
+        this.balBlur.emit(ev.detail);
+    }
+    listenOnKeyDown(ev) {
+        this.keyboardMode = FOCUS_KEYS.includes(ev.key);
+        let current;
+        if (isSpaceKey(ev)) {
+            stopEventBubbling(ev);
+            current = this.getSegmentItem('current');
+        }
+        else if (isArrowUpKey(ev) || isArrowLeftKey(ev)) {
+            stopEventBubbling(ev);
+            current = this.getSegmentItem('previous');
+        }
+        else if (isArrowDownKey(ev) || isArrowRightKey(ev)) {
+            stopEventBubbling(ev);
+            current = this.getSegmentItem('next');
+        }
+        else if (isHomeKey(ev)) {
+            stopEventBubbling(ev);
+            current = this.getSegmentItem('first');
+        }
+        else if (isEndKey(ev)) {
+            stopEventBubbling(ev);
+            current = this.getSegmentItem('last');
+        }
+        if (!current) {
+            return;
+        }
+        const previous = this.checked;
+        if (current !== previous) {
+            this.checkButton(previous, current);
+            this.emitValueChange();
+        }
+        if (current) {
+            current.setFocus();
+        }
+    }
+    /**
+     * GETTERS
+     * ------------------------------------------------------
+     */
+    get items() {
+        return Array.from(this.el.querySelectorAll('bal-segment-item'));
+    }
+    get checked() {
+        return this.items.find(item => item.value === this.value);
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    emitValueChange() {
+        this.balChange.emit(this.value);
+    }
+    emitVerticalChange(isVertical) {
+        if (this.isVertical !== isVertical) {
+            this.isVertical = isVertical;
+            this.balVertical.emit(this.isVertical);
+        }
+    }
+    defineWidth() {
+        raf(() => {
+            if (this.isVertical === false) {
+                const childRect = this.el.getBoundingClientRect();
+                this.maxWidth = childRect.width;
+            }
+            this.windowResizeListener();
+        });
+    }
+    getIndicator(item) {
+        const root = item.shadowRoot || item;
+        return root.querySelector('.bal-segment-item__indicator');
+    }
+    checkButton(previous, current) {
+        const previousIndicator = this.getIndicator(previous);
+        const currentIndicator = this.getIndicator(current);
+        if (previousIndicator === null || currentIndicator === null) {
+            return;
+        }
+        const previousClientRect = previousIndicator.getBoundingClientRect();
+        const currentClientRect = currentIndicator.getBoundingClientRect();
+        const widthDelta = previousClientRect.width / currentClientRect.width;
+        const xPosition = previousClientRect.left - currentClientRect.left;
+        // Scale the indicator width to match the previous indicator width
+        // and translate it on top of the previous indicator
+        let transform = `translate3d(${xPosition}px, 0, 0) scaleX(${widthDelta})`;
+        if (this.isVertical) {
+            const heightDelta = previousClientRect.height / currentClientRect.height;
+            const yPosition = previousClientRect.top - currentClientRect.top;
+            // Scale the indicator width to match the previous indicator width
+            // and translate it on top of the previous indicator
+            transform = `translate3d(0, ${yPosition}px, 0) scaleY(${heightDelta})`;
+        }
+        writeTask(() => {
+            // Remove the transition before positioning on top of the previous indicator
+            currentIndicator.classList.remove('bal-segment-item__indicator--animated');
+            currentIndicator.style.setProperty('transform', transform);
+            // Force a repaint to ensure the transform happens
+            currentIndicator.getBoundingClientRect();
+            // Add the transition to move the indicator into place
+            currentIndicator.classList.add('bal-segment-item__indicator--animated');
+            // Remove the transform to slide the indicator back to the button clicked
+            currentIndicator.style.setProperty('transform', '');
+        });
+        this.value = current.value;
+        this.setCheckedClasses();
+    }
+    setCheckedClasses() {
+        const items = this.items;
+        const index = items.findIndex(item => item.value === this.value);
+        const next = index + 1;
+        const previous = index - 1;
+        for (const item of items) {
+            item.classList.remove('bal-segment-item--after-checked');
+            item.classList.remove('bal-segment-item--before-checked');
+        }
+        if (next < items.length) {
+            items[next].classList.add('bal-segment-item--after-checked');
+        }
+        if (previous < items.length && previous >= 0) {
+            items[previous].classList.add('bal-segment-item--before-checked');
+        }
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile } = this;
+        const block = BEM.block('segment');
+        return (h(Host, { role: "radiogroup", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { onSlotchange: this.onSlottedItemsChange })));
+    }
+    static get is() { return "bal-segment"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bal-segment.sass"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bal-segment.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the segment is shown red."
+                },
+                "attribute": "invalid",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user cannot interact with the segment."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the segment items are presented vertical as a list."
+                },
+                "attribute": "vertical",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "scrollable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, and is vertical then the list height is limited and scrollable."
+                },
+                "attribute": "scrollable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the element uses the whole width"
+                },
+                "attribute": "expanded",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "BalProps.BalSegmentValue",
+                    "resolved": "number | string",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "the value of the segment."
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focusedValue": {},
+            "keyboardMode": {},
+            "isVertical": {},
+            "isMobile": {},
+            "maxWidth": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "balBlur",
+                "name": "balBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the component was touched"
+                },
+                "complexType": {
+                    "original": "BalEvents.BalSegmentBlurDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "BalEvents": {
+                            "location": "global",
+                            "id": "global::BalEvents"
+                        }
+                    }
+                }
+            }, {
+                "method": "balChange",
+                "name": "balChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value property has changed and any dragging pointer has been released from `bal-segment`.\n\nThis event will not emit when programmatically setting the `value` property."
+                },
+                "complexType": {
+                    "original": "BalEvents.BalSegmentChangeDetail",
+                    "resolved": "number | string",
+                    "references": {
+                        "BalEvents": {
+                            "location": "global",
+                            "id": "global::BalEvents"
+                        }
+                    }
+                }
+            }, {
+                "method": "balSelect",
+                "name": "balSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Emitted when the value of the segment changes from user committed actions\nor from externally assigning a value."
+                },
+                "complexType": {
+                    "original": "BalEvents.BalSegmentChangeDetail",
+                    "resolved": "number | string",
+                    "references": {
+                        "BalEvents": {
+                            "location": "global",
+                            "id": "global::BalEvents"
+                        }
+                    }
+                }
+            }, {
+                "method": "balVertical",
+                "name": "balVertical",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Emitted when the vertical style changes"
+                },
+                "complexType": {
+                    "original": "BalEvents.BalSegmentVerticalDetail",
+                    "resolved": "boolean",
+                    "references": {
+                        "BalEvents": {
+                            "location": "global",
+                            "id": "global::BalEvents"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "balBlur",
+                "method": "listenOnBalBlur",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "listenOnKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    Logger('bal-segment'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "createLogger", null);
+__decorate([
+    ListenToBreakpoints(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "breakpointListener", null);
+__decorate([
+    ListenToWindowResize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "windowResizeListener", null);

package/dist/collection/components/bal-segment/bal-segment.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1 +1 @@
-.bal-stack{display:flex;flex:1;flex-direction:row;align-items:center;height:100%;width:100%;gap:1rem;flex-wrap:nowrap}.bal-stack--use-wrap{flex-wrap:wrap}.bal-stack--fit-content{flex:unset;width:fit-content}.bal-stack--layout-horizontal{flex-direction:row;align-items:center}.bal-stack--layout-vertical{flex-direction:column;align-items:flex-start}.bal-stack--layout-horizontal-reverse{flex-direction:row;align-items:center}.bal-stack--layout-vertical-reverse{flex-direction:column;align-items:flex-start}.bal-stack--align-top-start{align-items:flex-start;justify-content:flex-start}.bal-stack--align-top-center{align-items:flex-start;justify-content:center}.bal-stack--align-top-end{align-items:flex-start;justify-content:flex-end}.bal-stack--align-start{align-items:center;justify-content:flex-start}.bal-stack--align-center{align-items:center;justify-content:center}.bal-stack--align-end{align-items:center;justify-content:flex-end}.bal-stack--align-bottom-start{align-items:flex-end;justify-content:flex-start}.bal-stack--align-bottom-center{align-items:flex-end;justify-content:center}.bal-stack--align-bottom-end{align-items:flex-end;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-top-start{align-items:flex-start;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-top-center{align-items:center;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-top-end{align-items:flex-end;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-start{align-items:flex-start;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-center{align-items:center;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-end{align-items:flex-end;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-bottom-start{align-items:flex-start;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-bottom-center{align-items:center;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-bottom-end{align-items:flex-end;justify-content:flex-end}.bal-stack--px-none{padding-left:0;padding-right:0}.bal-stack--px-xx-small{padding-left:var(--bal-space-xx-small);padding-right:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--px-xx-small{padding-left:var(--bal-space-xx-small-tablet);padding-right:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-xx-small{padding-left:var(--bal-space-xx-small-desktop);padding-right:var(--bal-space-xx-small-desktop)}}.bal-stack--px-x-small{padding-left:var(--bal-space-x-small);padding-right:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--px-x-small{padding-left:var(--bal-space-x-small-tablet);padding-right:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-x-small{padding-left:var(--bal-space-x-small-desktop);padding-right:var(--bal-space-x-small-desktop)}}.bal-stack--px-small{padding-left:var(--bal-space-small);padding-right:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--px-small{padding-left:var(--bal-space-small-tablet);padding-right:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-small{padding-left:var(--bal-space-small-desktop);padding-right:var(--bal-space-small-desktop)}}.bal-stack--px-normal{padding-left:var(--bal-space-normal);padding-right:var(--bal-space-normal)}@media screen and (min-width: 769px),print{.bal-stack--px-normal{padding-left:var(--bal-space-normal-tablet);padding-right:var(--bal-space-normal-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-normal{padding-left:var(--bal-space-normal-desktop);padding-right:var(--bal-space-normal-desktop)}}.bal-stack--px-medium{padding-left:var(--bal-space-medium);padding-right:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--px-medium{padding-left:var(--bal-space-medium-tablet);padding-right:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-medium{padding-left:var(--bal-space-medium-desktop);padding-right:var(--bal-space-medium-desktop)}}.bal-stack--px-large{padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--px-large{padding-left:var(--bal-space-large-tablet);padding-right:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-large{padding-left:var(--bal-space-large-desktop);padding-right:var(--bal-space-large-desktop)}}.bal-stack--px-x-large{padding-left:var(--bal-space-x-large);padding-right:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--px-x-large{padding-left:var(--bal-space-x-large-tablet);padding-right:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-x-large{padding-left:var(--bal-space-x-large-desktop);padding-right:var(--bal-space-x-large-desktop)}}.bal-stack--px-xx-large{padding-left:var(--bal-space-xx-large);padding-right:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--px-xx-large{padding-left:var(--bal-space-xx-large-tablet);padding-right:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-xx-large{padding-left:var(--bal-space-xx-large-desktop);padding-right:var(--bal-space-xx-large-desktop)}}.bal-stack--py-none{padding-top:0;padding-bottom:0}.bal-stack--py-xx-small{padding-top:var(--bal-space-xx-small);padding-bottom:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--py-xx-small{padding-top:var(--bal-space-xx-small-tablet);padding-bottom:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-xx-small{padding-top:var(--bal-space-xx-small-desktop);padding-bottom:var(--bal-space-xx-small-desktop)}}.bal-stack--py-x-small{padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--py-x-small{padding-top:var(--bal-space-x-small-tablet);padding-bottom:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-x-small{padding-top:var(--bal-space-x-small-desktop);padding-bottom:var(--bal-space-x-small-desktop)}}.bal-stack--py-small{padding-top:var(--bal-space-small);padding-bottom:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--py-small{padding-top:var(--bal-space-small-tablet);padding-bottom:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-small{padding-top:var(--bal-space-small-desktop);padding-bottom:var(--bal-space-small-desktop)}}.bal-stack--py-normal{padding-top:var(--bal-space-normal);padding-bottom:var(--bal-space-normal)}@media screen and (min-width: 769px),print{.bal-stack--py-normal{padding-top:var(--bal-space-normal-tablet);padding-bottom:var(--bal-space-normal-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-normal{padding-top:var(--bal-space-normal-desktop);padding-bottom:var(--bal-space-normal-desktop)}}.bal-stack--py-medium{padding-top:var(--bal-space-medium);padding-bottom:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--py-medium{padding-top:var(--bal-space-medium-tablet);padding-bottom:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-medium{padding-top:var(--bal-space-medium-desktop);padding-bottom:var(--bal-space-medium-desktop)}}.bal-stack--py-large{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--py-large{padding-top:var(--bal-space-large-tablet);padding-bottom:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-large{padding-top:var(--bal-space-large-desktop);padding-bottom:var(--bal-space-large-desktop)}}.bal-stack--py-x-large{padding-top:var(--bal-space-x-large);padding-bottom:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--py-x-large{padding-top:var(--bal-space-x-large-tablet);padding-bottom:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-x-large{padding-top:var(--bal-space-x-large-desktop);padding-bottom:var(--bal-space-x-large-desktop)}}.bal-stack--py-xx-large{padding-top:var(--bal-space-xx-large);padding-bottom:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--py-xx-large{padding-top:var(--bal-space-xx-large-tablet);padding-bottom:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-xx-large{padding-top:var(--bal-space-xx-large-desktop);padding-bottom:var(--bal-space-xx-large-desktop)}}.bal-stack--space-auto{justify-content:space-between}.bal-stack--space-none{gap:0}@media screen and (min-width: 769px),print{.bal-stack--space-none{gap:0}}@media screen and (min-width: 1024px){.bal-stack--space-none{gap:0}}.bal-stack--space-xx-small{gap:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--space-xx-small{gap:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-xx-small{gap:var(--bal-space-xx-small-desktop)}}.bal-stack--space-x-small{gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--space-x-small{gap:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-x-small{gap:var(--bal-space-x-small-desktop)}}.bal-stack--space-small{gap:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--space-small{gap:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-small{gap:var(--bal-space-small-desktop)}}.bal-stack--space-medium{gap:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--space-medium{gap:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-medium{gap:var(--bal-space-medium-desktop)}}.bal-stack--space-large{gap:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--space-large{gap:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-large{gap:var(--bal-space-large-desktop)}}.bal-stack--space-x-large{gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--space-x-large{gap:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-x-large{gap:var(--bal-space-x-large-desktop)}}.bal-stack--space-xx-large{gap:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--space-xx-large{gap:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-xx-large{gap:var(--bal-space-xx-large-desktop)}}.bal-stack--space-row-auto{justify-content:space-between}.bal-stack--space-row-none{row-gap:0}@media screen and (min-width: 769px),print{.bal-stack--space-row-none{row-gap:0}}@media screen and (min-width: 1024px){.bal-stack--space-row-none{row-gap:0}}.bal-stack--space-row-xx-small{row-gap:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--space-row-xx-small{row-gap:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-xx-small{row-gap:var(--bal-space-xx-small-desktop)}}.bal-stack--space-row-x-small{row-gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--space-row-x-small{row-gap:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-x-small{row-gap:var(--bal-space-x-small-desktop)}}.bal-stack--space-row-small{row-gap:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--space-row-small{row-gap:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-small{row-gap:var(--bal-space-small-desktop)}}.bal-stack--space-row-medium{row-gap:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--space-row-medium{row-gap:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-medium{row-gap:var(--bal-space-medium-desktop)}}.bal-stack--space-row-large{row-gap:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--space-row-large{row-gap:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-large{row-gap:var(--bal-space-large-desktop)}}.bal-stack--space-row-x-large{row-gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--space-row-x-large{row-gap:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-x-large{row-gap:var(--bal-space-x-large-desktop)}}.bal-stack--space-row-xx-large{row-gap:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--space-row-xx-large{row-gap:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-xx-large{row-gap:var(--bal-space-xx-large-desktop)}}.bal-stack--space-column-auto{justify-content:space-between}.bal-stack--space-column-none{column-gap:0}@media screen and (min-width: 769px),print{.bal-stack--space-column-none{column-gap:0}}@media screen and (min-width: 1024px){.bal-stack--space-column-none{column-gap:0}}.bal-stack--space-column-xx-small{column-gap:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-xx-small{column-gap:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-xx-small{column-gap:var(--bal-space-xx-small-desktop)}}.bal-stack--space-column-x-small{column-gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-x-small{column-gap:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-x-small{column-gap:var(--bal-space-x-small-desktop)}}.bal-stack--space-column-small{column-gap:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-small{column-gap:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-small{column-gap:var(--bal-space-small-desktop)}}.bal-stack--space-column-medium{column-gap:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--space-column-medium{column-gap:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-medium{column-gap:var(--bal-space-medium-desktop)}}.bal-stack--space-column-large{column-gap:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-large{column-gap:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-large{column-gap:var(--bal-space-large-desktop)}}.bal-stack--space-column-x-large{column-gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-x-large{column-gap:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-x-large{column-gap:var(--bal-space-x-large-desktop)}}.bal-stack--space-column-xx-large{column-gap:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-xx-large{column-gap:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-xx-large{column-gap:var(--bal-space-xx-large-desktop)}}.bal-stack>bal-radio{margin-top:-0.25rem}.bal-stack>.bal-text,.bal-stack>.bal-heading,.bal-stack>.bal-heading:not(:last-child),.bal-stack>.title,.bal-stack>.subtitle,.bal-stack>.is-link,.bal-stack>p{margin:0}
+.bal-stack{display:flex;flex:1;flex-direction:row;align-items:center;height:100%;width:100%;gap:1rem;flex-wrap:nowrap}.bal-stack--use-wrap{flex-wrap:wrap}.bal-stack--fit-content{flex:unset;width:fit-content}.bal-stack--layout-horizontal{flex-direction:row;align-items:center}.bal-stack--layout-vertical{flex-direction:column;align-items:flex-start}.bal-stack--layout-horizontal-reverse{flex-direction:row-reverse;align-items:center}.bal-stack--layout-vertical-reverse{flex-direction:column-reverse;align-items:flex-start}.bal-stack--align-top-start{align-items:flex-start;justify-content:flex-start}.bal-stack--align-top-center{align-items:flex-start;justify-content:center}.bal-stack--align-top-end{align-items:flex-start;justify-content:flex-end}.bal-stack--align-start{align-items:center;justify-content:flex-start}.bal-stack--align-center{align-items:center;justify-content:center}.bal-stack--align-end{align-items:center;justify-content:flex-end}.bal-stack--align-bottom-start{align-items:flex-end;justify-content:flex-start}.bal-stack--align-bottom-center{align-items:flex-end;justify-content:center}.bal-stack--align-bottom-end{align-items:flex-end;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-top-start{align-items:flex-start;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-top-center{align-items:center;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-top-end{align-items:flex-end;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-start{align-items:flex-start;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-center{align-items:center;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-end{align-items:flex-end;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-bottom-start{align-items:flex-start;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-bottom-center{align-items:center;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-bottom-end{align-items:flex-end;justify-content:flex-end}.bal-stack--px-none{padding-left:0;padding-right:0}.bal-stack--px-xx-small{padding-left:var(--bal-space-xx-small);padding-right:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--px-xx-small{padding-left:var(--bal-space-xx-small-tablet);padding-right:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-xx-small{padding-left:var(--bal-space-xx-small-desktop);padding-right:var(--bal-space-xx-small-desktop)}}.bal-stack--px-x-small{padding-left:var(--bal-space-x-small);padding-right:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--px-x-small{padding-left:var(--bal-space-x-small-tablet);padding-right:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-x-small{padding-left:var(--bal-space-x-small-desktop);padding-right:var(--bal-space-x-small-desktop)}}.bal-stack--px-small{padding-left:var(--bal-space-small);padding-right:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--px-small{padding-left:var(--bal-space-small-tablet);padding-right:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-small{padding-left:var(--bal-space-small-desktop);padding-right:var(--bal-space-small-desktop)}}.bal-stack--px-normal{padding-left:var(--bal-space-normal);padding-right:var(--bal-space-normal)}@media screen and (min-width: 769px),print{.bal-stack--px-normal{padding-left:var(--bal-space-normal-tablet);padding-right:var(--bal-space-normal-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-normal{padding-left:var(--bal-space-normal-desktop);padding-right:var(--bal-space-normal-desktop)}}.bal-stack--px-medium{padding-left:var(--bal-space-medium);padding-right:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--px-medium{padding-left:var(--bal-space-medium-tablet);padding-right:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-medium{padding-left:var(--bal-space-medium-desktop);padding-right:var(--bal-space-medium-desktop)}}.bal-stack--px-large{padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--px-large{padding-left:var(--bal-space-large-tablet);padding-right:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-large{padding-left:var(--bal-space-large-desktop);padding-right:var(--bal-space-large-desktop)}}.bal-stack--px-x-large{padding-left:var(--bal-space-x-large);padding-right:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--px-x-large{padding-left:var(--bal-space-x-large-tablet);padding-right:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-x-large{padding-left:var(--bal-space-x-large-desktop);padding-right:var(--bal-space-x-large-desktop)}}.bal-stack--px-xx-large{padding-left:var(--bal-space-xx-large);padding-right:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--px-xx-large{padding-left:var(--bal-space-xx-large-tablet);padding-right:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-xx-large{padding-left:var(--bal-space-xx-large-desktop);padding-right:var(--bal-space-xx-large-desktop)}}.bal-stack--py-none{padding-top:0;padding-bottom:0}.bal-stack--py-xx-small{padding-top:var(--bal-space-xx-small);padding-bottom:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--py-xx-small{padding-top:var(--bal-space-xx-small-tablet);padding-bottom:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-xx-small{padding-top:var(--bal-space-xx-small-desktop);padding-bottom:var(--bal-space-xx-small-desktop)}}.bal-stack--py-x-small{padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--py-x-small{padding-top:var(--bal-space-x-small-tablet);padding-bottom:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-x-small{padding-top:var(--bal-space-x-small-desktop);padding-bottom:var(--bal-space-x-small-desktop)}}.bal-stack--py-small{padding-top:var(--bal-space-small);padding-bottom:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--py-small{padding-top:var(--bal-space-small-tablet);padding-bottom:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-small{padding-top:var(--bal-space-small-desktop);padding-bottom:var(--bal-space-small-desktop)}}.bal-stack--py-normal{padding-top:var(--bal-space-normal);padding-bottom:var(--bal-space-normal)}@media screen and (min-width: 769px),print{.bal-stack--py-normal{padding-top:var(--bal-space-normal-tablet);padding-bottom:var(--bal-space-normal-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-normal{padding-top:var(--bal-space-normal-desktop);padding-bottom:var(--bal-space-normal-desktop)}}.bal-stack--py-medium{padding-top:var(--bal-space-medium);padding-bottom:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--py-medium{padding-top:var(--bal-space-medium-tablet);padding-bottom:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-medium{padding-top:var(--bal-space-medium-desktop);padding-bottom:var(--bal-space-medium-desktop)}}.bal-stack--py-large{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--py-large{padding-top:var(--bal-space-large-tablet);padding-bottom:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-large{padding-top:var(--bal-space-large-desktop);padding-bottom:var(--bal-space-large-desktop)}}.bal-stack--py-x-large{padding-top:var(--bal-space-x-large);padding-bottom:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--py-x-large{padding-top:var(--bal-space-x-large-tablet);padding-bottom:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-x-large{padding-top:var(--bal-space-x-large-desktop);padding-bottom:var(--bal-space-x-large-desktop)}}.bal-stack--py-xx-large{padding-top:var(--bal-space-xx-large);padding-bottom:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--py-xx-large{padding-top:var(--bal-space-xx-large-tablet);padding-bottom:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-xx-large{padding-top:var(--bal-space-xx-large-desktop);padding-bottom:var(--bal-space-xx-large-desktop)}}.bal-stack--space-auto{justify-content:space-between}.bal-stack--space-none{gap:0}@media screen and (min-width: 769px),print{.bal-stack--space-none{gap:0}}@media screen and (min-width: 1024px){.bal-stack--space-none{gap:0}}.bal-stack--space-xx-small{gap:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--space-xx-small{gap:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-xx-small{gap:var(--bal-space-xx-small-desktop)}}.bal-stack--space-x-small{gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--space-x-small{gap:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-x-small{gap:var(--bal-space-x-small-desktop)}}.bal-stack--space-small{gap:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--space-small{gap:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-small{gap:var(--bal-space-small-desktop)}}.bal-stack--space-medium{gap:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--space-medium{gap:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-medium{gap:var(--bal-space-medium-desktop)}}.bal-stack--space-large{gap:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--space-large{gap:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-large{gap:var(--bal-space-large-desktop)}}.bal-stack--space-x-large{gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--space-x-large{gap:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-x-large{gap:var(--bal-space-x-large-desktop)}}.bal-stack--space-xx-large{gap:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--space-xx-large{gap:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-xx-large{gap:var(--bal-space-xx-large-desktop)}}.bal-stack--space-row-auto{justify-content:space-between}.bal-stack--space-row-none{row-gap:0}@media screen and (min-width: 769px),print{.bal-stack--space-row-none{row-gap:0}}@media screen and (min-width: 1024px){.bal-stack--space-row-none{row-gap:0}}.bal-stack--space-row-xx-small{row-gap:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--space-row-xx-small{row-gap:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-xx-small{row-gap:var(--bal-space-xx-small-desktop)}}.bal-stack--space-row-x-small{row-gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--space-row-x-small{row-gap:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-x-small{row-gap:var(--bal-space-x-small-desktop)}}.bal-stack--space-row-small{row-gap:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--space-row-small{row-gap:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-small{row-gap:var(--bal-space-small-desktop)}}.bal-stack--space-row-medium{row-gap:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--space-row-medium{row-gap:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-medium{row-gap:var(--bal-space-medium-desktop)}}.bal-stack--space-row-large{row-gap:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--space-row-large{row-gap:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-large{row-gap:var(--bal-space-large-desktop)}}.bal-stack--space-row-x-large{row-gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--space-row-x-large{row-gap:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-x-large{row-gap:var(--bal-space-x-large-desktop)}}.bal-stack--space-row-xx-large{row-gap:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--space-row-xx-large{row-gap:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-xx-large{row-gap:var(--bal-space-xx-large-desktop)}}.bal-stack--space-column-auto{justify-content:space-between}.bal-stack--space-column-none{column-gap:0}@media screen and (min-width: 769px),print{.bal-stack--space-column-none{column-gap:0}}@media screen and (min-width: 1024px){.bal-stack--space-column-none{column-gap:0}}.bal-stack--space-column-xx-small{column-gap:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-xx-small{column-gap:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-xx-small{column-gap:var(--bal-space-xx-small-desktop)}}.bal-stack--space-column-x-small{column-gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-x-small{column-gap:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-x-small{column-gap:var(--bal-space-x-small-desktop)}}.bal-stack--space-column-small{column-gap:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-small{column-gap:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-small{column-gap:var(--bal-space-small-desktop)}}.bal-stack--space-column-medium{column-gap:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--space-column-medium{column-gap:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-medium{column-gap:var(--bal-space-medium-desktop)}}.bal-stack--space-column-large{column-gap:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-large{column-gap:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-large{column-gap:var(--bal-space-large-desktop)}}.bal-stack--space-column-x-large{column-gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-x-large{column-gap:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-x-large{column-gap:var(--bal-space-x-large-desktop)}}.bal-stack--space-column-xx-large{column-gap:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-xx-large{column-gap:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-xx-large{column-gap:var(--bal-space-xx-large-desktop)}}.bal-stack>bal-radio{margin-top:-0.25rem}.bal-stack>.bal-text,.bal-stack>.bal-heading,.bal-stack>.bal-heading:not(:last-child),.bal-stack>.title,.bal-stack>.subtitle,.bal-stack>.is-link,.bal-stack>p{margin:0}

package/dist/collection/utils/constants/version.constant.js

@@ -1,2 +1,2 @@
 // generated by .build/version.js
-export const VERSION = '16.4.0';
+export const VERSION = '16.5.0';

package/dist/collection/utils/resize/index.js

@@ -1,5 +1,8 @@
-export * from './window-resize.listener';
+export * from './window-resize.decorator';
 export * from './window-resize.handler';
+export * from './window-resize.interfaces';
+export * from './window-resize.listener';
+export * from './window-resize.subject';
 export * from './resize.interfaces';
 export * from './resize.decorator';
 export * from './resize.subject';

package/dist/collection/utils/resize/window-resize.decorator.js

@@ -0,0 +1,20 @@
+import { BalWindowResizeSubject } from "./window-resize.subject";
+export function ListenToWindowResize() {
+    return function (target, _propertyKey, _descriptor) {
+        const { connectedCallback, disconnectedCallback } = target;
+        target.connectedCallback = function () {
+            if (!this._balWindowResizeSubject) {
+                this._balWindowResizeSubject = new BalWindowResizeSubject();
+                this._balWindowResizeSubject.attach(this);
+            }
+            return connectedCallback && connectedCallback.call(this);
+        };
+        target.disconnectedCallback = function () {
+            if (this._balWindowResizeSubject) {
+                this._balWindowResizeSubject.detach();
+                this._balWindowResizeSubject = undefined;
+            }
+            return disconnectedCallback && disconnectedCallback.call(this);
+        };
+    };
+}

package/dist/collection/utils/resize/window-resize.interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/resize/window-resize.listener.js

@@ -5,15 +5,15 @@ export class BalWindowResizeListener extends ListenerAbstract {
     constructor() {
         super(...arguments);
         this.resizeHandler = new BalWindowResizeHandler({ onlyListenToWidthChanges: true });
-        this.debouncedNotify = debounce(() => this.notify(), 10);
+        this.debouncedNotify = debounce(() => this.notify(), 100);
         this.notify = async () => {
             if (await this.resizeHandler.hasResized()) {
                 super.notify(undefined);
             }
         };
     }
-    connect() {
-        super.connect();
+    connect(el) {
+        super.connect(el);
         if (this.el) {
             addEventListener(this.el, 'resize', this.debouncedNotify, { passive: true });
         }