@baloise/ds-core 16.3.0 → 16.4.0-nightly.20240917

package/dist/cjs/bal-segment.cjs.entry.js

@@ -0,0 +1,319 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-219b2f52.js');
+const tslib_es6 = require('./tslib.es6-a680968e.js');
+const bem = require('./bem-81bc6a2d.js');
+const log = require('./log-33398c2a.js');
+const index_esm = require('./index.esm-54a3d84e.js');
+const formInput = require('./form-input-134c5116.js');
+const focusVisible = require('./focus-visible-264bd9b8.js');
+const helpers = require('./helpers-2a8c8333.js');
+const breakpoints_decorator = require('./breakpoints.decorator-77a3b464.js');
+const windowResize_decorator = require('./window-resize.decorator-5b9c08d1.js');
+require('./browser-1d542d0f.js');
+require('./index-e6a233be.js');
+require('./_commonjsHelpers-68cdf74f.js');
+require('./icons.constant-7c82086a.js');
+require('./config.utils-e4cd49d6.js');
+require('./breakpoints.subject-ae73ae55.js');
+require('./device-9f97a845.js');
+require('./listener-52d2e5fd.js');
+require('./tokens.esm-15025c39.js');
+
+const balSegmentCss = ":root{--bal-segment-background:var(--bal-color-grey-2);--bal-segment-background-invalid:var(--bal-color-danger-1);--bal-segment-item-focus-border:var(--bal-color-border-primary);--bal-segment-item-text-color:var(--bal-color-text-primary);--bal-segment-item-text-color-checked:var(--bal-color-text-primary);--bal-segment-item-text-color-checked-hovered:var(--bal-color-text-primary-hovered);--bal-segment-item-text-color-checked-pressed:var(--bal-color-text-primary-pressed);--bal-segment-item-text-color-invalid:var(--bal-color-text-danger);--bal-segment-item-text-color-invalid-hovered:var(--bal-color-text-danger-hovered);--bal-segment-item-text-color-invalid-pressed:var(--bal-color-text-danger-pressed);--bal-segment-item-text-color-disabled:var(--bal-color-text-grey);--bal-segment-item-text-color-disabled-checked:var(--bal-color-text-grey-dark);--bal-segment-item-divider-background:var(--bal-color-grey);--bal-segment-item-divider-background-invalid:var(--bal-color-danger-2);--bal-segment-item-indicator-background:var(--bal-color-purple-2);--bal-segment-item-indicator-background-invalid:var(--bal-color-danger-4);--bal-segment-item-indicator-background-disabled:var(--bal-color-grey-3)}.bal-segment{display:-ms-flexbox;display:flex;background:var(--bal-segment-background);border-radius:var(--bal-radius-normal);gap:.125rem;gap:.125rem;padding:.25rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-segment--invalid{background:var(--bal-segment-background-invalid)}.bal-segment--vertical{-ms-flex-direction:column;flex-direction:column;width:100%}.bal-segment--vertical .bal-segment-item__button{width:100%;-ms-flex:1;flex:1}.bal-segment--vertical.bal-segment--scrollable{overflow:auto;max-height:240px}.bal-segment--expanded{width:100%;min-width:100%;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}.bal-segment--expanded .bal-segment-item,.bal-segment--expanded .bal-segment-item>button{-ms-flex:1;flex:1;width:100%}.bal-segment--expanded .bal-segment-item .bal-content,.bal-segment--expanded .bal-segment-item>button .bal-content{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}";
+const BalSegmentStyle0 = balSegmentCss;
+
+const Segment = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.balBlur = index.createEvent(this, "balBlur", 7);
+        this.balChange = index.createEvent(this, "balChange", 7);
+        this.balSelect = index.createEvent(this, "balSelect", 7);
+        this.balVertical = index.createEvent(this, "balVertical", 7);
+        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) {
+        formInput.stopEventBubbling(ev);
+        this.balBlur.emit(ev.detail);
+    }
+    listenOnKeyDown(ev) {
+        this.keyboardMode = focusVisible.FOCUS_KEYS.includes(ev.key);
+        let current;
+        if (index_esm.isSpaceKey(ev)) {
+            formInput.stopEventBubbling(ev);
+            current = this.getSegmentItem('current');
+        }
+        else if (index_esm.isArrowUpKey(ev) || index_esm.isArrowLeftKey(ev)) {
+            formInput.stopEventBubbling(ev);
+            current = this.getSegmentItem('previous');
+        }
+        else if (index_esm.isArrowDownKey(ev) || index_esm.isArrowRightKey(ev)) {
+            formInput.stopEventBubbling(ev);
+            current = this.getSegmentItem('next');
+        }
+        else if (index_esm.isHomeKey(ev)) {
+            formInput.stopEventBubbling(ev);
+            current = this.getSegmentItem('first');
+        }
+        else if (index_esm.isEndKey(ev)) {
+            formInput.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() {
+        helpers.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})`;
+        }
+        index.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.BEM.block('segment');
+        return (index.h(index.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 }, index.h("slot", { onSlotchange: this.onSlottedItemsChange })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
+};
+tslib_es6.__decorate([
+    log.Logger('bal-segment'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Segment.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    breakpoints_decorator.ListenToBreakpoints(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Segment.prototype, "breakpointListener", null);
+tslib_es6.__decorate([
+    windowResize_decorator.ListenToWindowResize(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", []),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Segment.prototype, "windowResizeListener", null);
+Segment.style = BalSegmentStyle0;
+
+exports.bal_segment = Segment;

package/dist/cjs/bal-select_2.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-219b2f52.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const index$1 = require('./index-e6a233be.js');
 const helpers = require('./helpers-2a8c8333.js');
-const index_esm = require('./index.esm-4587dbf0.js');
+const index_esm = require('./index.esm-54a3d84e.js');
 const utils = require('./utils-9ea175af.js');
 const formInput = require('./form-input-134c5116.js');
 const bem = require('./bem-81bc6a2d.js');

package/dist/cjs/bal-shape.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-219b2f52.js');
 const bem = require('./bem-81bc6a2d.js');
-const tokens_esm = require('./tokens.esm-dc93a5d7.js');
+const tokens_esm = require('./tokens.esm-15025c39.js');
 
 const balShapeCss = ".bal-shape{display:block;overflow:hidden;border-radius:var(--bal-radius-normal);width:66px;height:66px}@media screen and (min-width: 769px),print{.bal-shape{width:120px;height:120px}}@media screen and (min-width: 1024px){.bal-shape{width:198px;height:198px;border-radius:unset}}.bal-shape--is-rotation-0{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.bal-shape--is-rotation-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.bal-shape--is-rotation-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-shape--is-rotation-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}";
 const BalShapeStyle0 = balShapeCss;

package/dist/cjs/bal-stack.cjs.entry.js

@@ -8,7 +8,7 @@ const bem = require('./bem-81bc6a2d.js');
 const log = require('./log-33398c2a.js');
 require('./browser-1d542d0f.js');
 
-const balStackCss = ".bal-stack{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;height:100%;width:100%;gap:1rem;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.bal-stack--use-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.bal-stack--fit-content{-ms-flex:unset;flex:unset;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-stack--layout-horizontal{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}.bal-stack--layout-vertical{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.bal-stack--layout-horizontal-reverse{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}.bal-stack--layout-vertical-reverse{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.bal-stack--align-top-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--align-top-center{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}.bal-stack--align-top-end{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--align-start{-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--align-center{-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bal-stack--align-end{-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--align-bottom-start{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--align-bottom-center{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.bal-stack--align-bottom-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-top-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-top-center{-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-top-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-center{-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-bottom-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-bottom-center{-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-bottom-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack: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{-ms-flex-pack:justify;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{-ms-flex-pack:justify;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{-ms-flex-pack:justify;justify-content:space-between}.bal-stack--space-column-none{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0}@media screen and (min-width: 769px),print{.bal-stack--space-column-none{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0}}@media screen and (min-width: 1024px){.bal-stack--space-column-none{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0}}.bal-stack--space-column-xx-small{-webkit-column-gap:var(--bal-space-xx-small);-moz-column-gap:var(--bal-space-xx-small);column-gap:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-xx-small{-webkit-column-gap:var(--bal-space-xx-small-tablet);-moz-column-gap:var(--bal-space-xx-small-tablet);column-gap:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-xx-small{-webkit-column-gap:var(--bal-space-xx-small-desktop);-moz-column-gap:var(--bal-space-xx-small-desktop);column-gap:var(--bal-space-xx-small-desktop)}}.bal-stack--space-column-x-small{-webkit-column-gap:var(--bal-space-x-small);-moz-column-gap:var(--bal-space-x-small);column-gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-x-small{-webkit-column-gap:var(--bal-space-x-small-tablet);-moz-column-gap:var(--bal-space-x-small-tablet);column-gap:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-x-small{-webkit-column-gap:var(--bal-space-x-small-desktop);-moz-column-gap:var(--bal-space-x-small-desktop);column-gap:var(--bal-space-x-small-desktop)}}.bal-stack--space-column-small{-webkit-column-gap:var(--bal-space-small);-moz-column-gap:var(--bal-space-small);column-gap:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-small{-webkit-column-gap:var(--bal-space-small-tablet);-moz-column-gap:var(--bal-space-small-tablet);column-gap:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-small{-webkit-column-gap:var(--bal-space-small-desktop);-moz-column-gap:var(--bal-space-small-desktop);column-gap:var(--bal-space-small-desktop)}}.bal-stack--space-column-medium{-webkit-column-gap:var(--bal-space-medium);-moz-column-gap:var(--bal-space-medium);column-gap:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--space-column-medium{-webkit-column-gap:var(--bal-space-medium-tablet);-moz-column-gap:var(--bal-space-medium-tablet);column-gap:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-medium{-webkit-column-gap:var(--bal-space-medium-desktop);-moz-column-gap:var(--bal-space-medium-desktop);column-gap:var(--bal-space-medium-desktop)}}.bal-stack--space-column-large{-webkit-column-gap:var(--bal-space-large);-moz-column-gap:var(--bal-space-large);column-gap:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-large{-webkit-column-gap:var(--bal-space-large-tablet);-moz-column-gap:var(--bal-space-large-tablet);column-gap:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-large{-webkit-column-gap:var(--bal-space-large-desktop);-moz-column-gap:var(--bal-space-large-desktop);column-gap:var(--bal-space-large-desktop)}}.bal-stack--space-column-x-large{-webkit-column-gap:var(--bal-space-x-large);-moz-column-gap:var(--bal-space-x-large);column-gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-x-large{-webkit-column-gap:var(--bal-space-x-large-tablet);-moz-column-gap:var(--bal-space-x-large-tablet);column-gap:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-x-large{-webkit-column-gap:var(--bal-space-x-large-desktop);-moz-column-gap:var(--bal-space-x-large-desktop);column-gap:var(--bal-space-x-large-desktop)}}.bal-stack--space-column-xx-large{-webkit-column-gap:var(--bal-space-xx-large);-moz-column-gap:var(--bal-space-xx-large);column-gap:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-xx-large{-webkit-column-gap:var(--bal-space-xx-large-tablet);-moz-column-gap:var(--bal-space-xx-large-tablet);column-gap:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-xx-large{-webkit-column-gap:var(--bal-space-xx-large-desktop);-moz-column-gap:var(--bal-space-xx-large-desktop);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}";
+const balStackCss = ".bal-stack{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;height:100%;width:100%;gap:1rem;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.bal-stack--use-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.bal-stack--fit-content{-ms-flex:unset;flex:unset;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-stack--layout-horizontal{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}.bal-stack--layout-vertical{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.bal-stack--layout-horizontal-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-align:center;align-items:center}.bal-stack--layout-vertical-reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse;-ms-flex-align:start;align-items:flex-start}.bal-stack--align-top-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--align-top-center{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}.bal-stack--align-top-end{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--align-start{-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--align-center{-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bal-stack--align-end{-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--align-bottom-start{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--align-bottom-center{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.bal-stack--align-bottom-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-top-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-top-center{-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-top-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-center{-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-bottom-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-bottom-center{-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-bottom-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack: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{-ms-flex-pack:justify;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{-ms-flex-pack:justify;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{-ms-flex-pack:justify;justify-content:space-between}.bal-stack--space-column-none{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0}@media screen and (min-width: 769px),print{.bal-stack--space-column-none{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0}}@media screen and (min-width: 1024px){.bal-stack--space-column-none{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0}}.bal-stack--space-column-xx-small{-webkit-column-gap:var(--bal-space-xx-small);-moz-column-gap:var(--bal-space-xx-small);column-gap:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-xx-small{-webkit-column-gap:var(--bal-space-xx-small-tablet);-moz-column-gap:var(--bal-space-xx-small-tablet);column-gap:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-xx-small{-webkit-column-gap:var(--bal-space-xx-small-desktop);-moz-column-gap:var(--bal-space-xx-small-desktop);column-gap:var(--bal-space-xx-small-desktop)}}.bal-stack--space-column-x-small{-webkit-column-gap:var(--bal-space-x-small);-moz-column-gap:var(--bal-space-x-small);column-gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-x-small{-webkit-column-gap:var(--bal-space-x-small-tablet);-moz-column-gap:var(--bal-space-x-small-tablet);column-gap:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-x-small{-webkit-column-gap:var(--bal-space-x-small-desktop);-moz-column-gap:var(--bal-space-x-small-desktop);column-gap:var(--bal-space-x-small-desktop)}}.bal-stack--space-column-small{-webkit-column-gap:var(--bal-space-small);-moz-column-gap:var(--bal-space-small);column-gap:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-small{-webkit-column-gap:var(--bal-space-small-tablet);-moz-column-gap:var(--bal-space-small-tablet);column-gap:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-small{-webkit-column-gap:var(--bal-space-small-desktop);-moz-column-gap:var(--bal-space-small-desktop);column-gap:var(--bal-space-small-desktop)}}.bal-stack--space-column-medium{-webkit-column-gap:var(--bal-space-medium);-moz-column-gap:var(--bal-space-medium);column-gap:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--space-column-medium{-webkit-column-gap:var(--bal-space-medium-tablet);-moz-column-gap:var(--bal-space-medium-tablet);column-gap:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-medium{-webkit-column-gap:var(--bal-space-medium-desktop);-moz-column-gap:var(--bal-space-medium-desktop);column-gap:var(--bal-space-medium-desktop)}}.bal-stack--space-column-large{-webkit-column-gap:var(--bal-space-large);-moz-column-gap:var(--bal-space-large);column-gap:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-large{-webkit-column-gap:var(--bal-space-large-tablet);-moz-column-gap:var(--bal-space-large-tablet);column-gap:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-large{-webkit-column-gap:var(--bal-space-large-desktop);-moz-column-gap:var(--bal-space-large-desktop);column-gap:var(--bal-space-large-desktop)}}.bal-stack--space-column-x-large{-webkit-column-gap:var(--bal-space-x-large);-moz-column-gap:var(--bal-space-x-large);column-gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-x-large{-webkit-column-gap:var(--bal-space-x-large-tablet);-moz-column-gap:var(--bal-space-x-large-tablet);column-gap:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-x-large{-webkit-column-gap:var(--bal-space-x-large-desktop);-moz-column-gap:var(--bal-space-x-large-desktop);column-gap:var(--bal-space-x-large-desktop)}}.bal-stack--space-column-xx-large{-webkit-column-gap:var(--bal-space-xx-large);-moz-column-gap:var(--bal-space-xx-large);column-gap:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-xx-large{-webkit-column-gap:var(--bal-space-xx-large-tablet);-moz-column-gap:var(--bal-space-xx-large-tablet);column-gap:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-xx-large{-webkit-column-gap:var(--bal-space-xx-large-desktop);-moz-column-gap:var(--bal-space-xx-large-desktop);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}";
 const BalStackStyle0 = balStackCss;
 
 const Stack = class {

package/dist/cjs/bal-steps.cjs.entry.js

@@ -7,12 +7,12 @@ const tslib_es6 = require('./tslib.es6-a680968e.js');
 const helpers = require('./helpers-2a8c8333.js');
 const bem = require('./bem-81bc6a2d.js');
 const log = require('./log-33398c2a.js');
-const index_esm = require('./index.esm-4587dbf0.js');
+const index_esm = require('./index.esm-54a3d84e.js');
 const formInput = require('./form-input-134c5116.js');
 const balStep_util = require('./bal-step.util-3c009db9.js');
-const breakpoints_subject = require('./breakpoints.subject-06716a68.js');
+const breakpoints_subject = require('./breakpoints.subject-ae73ae55.js');
 const mutation_decorator = require('./mutation.decorator-af043b68.js');
-const breakpoints_decorator = require('./breakpoints.decorator-47fd06b2.js');
+const breakpoints_decorator = require('./breakpoints.decorator-77a3b464.js');
 require('./browser-1d542d0f.js');
 require('./icons.constant-7c82086a.js');
 require('./config.utils-e4cd49d6.js');
@@ -20,7 +20,7 @@ require('./index-e6a233be.js');
 require('./_commonjsHelpers-68cdf74f.js');
 require('./device-9f97a845.js');
 require('./listener-52d2e5fd.js');
-require('./tokens.esm-dc93a5d7.js');
+require('./tokens.esm-15025c39.js');
 
 const StepIcon = ({ item, isMobile }) => {
     const bemEl = bem.BEM.block('steps').element('nav').element('item').element('icon');
@@ -34,17 +34,17 @@ const StepLabel = ({ item }) => {
     return (index.h("span", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), "data-testid": "bal-steps-option-label" }, item.label));
 };
 
-const StepButton = ({ item, isMobile, clickable, onSelectTab }) => {
+const StepButton = ({ item, color, isMobile, clickable, onSelectTab }) => {
     const bemEl = bem.BEM.block('steps').element('nav').element('item');
     if (item.invisible) {
         return;
     }
-    return (index.h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, href: item.href === '' ? 'javascript:;' : item.href, target: item.target, onClick: (ev) => onSelectTab(ev, item) },
+    return (index.h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`color-${color}`).class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, href: item.href === '' ? 'javascript:;' : item.href, target: item.target, onClick: (ev) => onSelectTab(ev, item) },
         index.h(StepIcon, { item: item, isMobile: isMobile }),
         index.h(StepLabel, { item: item })));
 };
 
-const balStepsCss = "@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background:var(--bal-color-white);--bal-steps-step-icon-background-active:var(--bal-color-primary);--bal-steps-step-icon-background-disabled:var(--bal-color-grey-2);--bal-steps-step-icon-background-done:var(--bal-color-primary);--bal-steps-step-icon-background-failed:var(--bal-color-danger);--bal-steps-step-button-progress-line-background:var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after:var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-width:var(--bal-form-field-control-border-width);--bal-steps-step-border-style:var(--bal-form-field-control-border-style);--bal-steps-step-border-color:var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled:var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed:var(--bal-color-danger);--bal-steps-step-icon-radius:var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius:var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius:var(--bal-radius-rounded);--bal-steps-step-label-text-color:var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done:var(--bal-color-text-primary);--bal-steps-step-label-text-color-active:var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed:var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color:var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active:var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done:var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed:var(--bal-color-text-white)}.bal-steps__nav__item{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;gap:.5rem;-ms-flex-direction:column;flex-direction:column;-ms-flex-preferred-size:1rem;flex-basis:1rem;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;text-decoration:none;cursor:default;position:relative;min-width:3rem;padding-top:6px}.bal-steps__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-steps__nav__item--clickable{cursor:pointer;pointer-events:all}.bal-steps__nav__item:not(:last-child)::after{content:\" \";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-progress-line-background);border-radius:var(--bal-steps-step-button-progress-line-radius);margin-top:3px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.5rem}}.bal-steps__nav__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-passed-background)}.bal-steps__nav__carousel__item{-ms-flex:1;flex:1;min-width:3rem}.bal-steps__nav__carousel__item:not(:last-child)::after{content:\" \";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-carousel-item-background-after);border-radius:var(--bal-steps-step-button-carousel-item-radius);margin-top:3px;margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__carousel__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:1.5rem;margin-right:1.5rem}}.bal-steps__nav__carousel__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-carousel-item-passed-background-after)}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background:var(--bal-color-white);--bal-steps-step-icon-background-active:var(--bal-color-primary);--bal-steps-step-icon-background-disabled:var(--bal-color-grey-2);--bal-steps-step-icon-background-done:var(--bal-color-primary);--bal-steps-step-icon-background-failed:var(--bal-color-danger);--bal-steps-step-button-progress-line-background:var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after:var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-width:var(--bal-form-field-control-border-width);--bal-steps-step-border-style:var(--bal-form-field-control-border-style);--bal-steps-step-border-color:var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled:var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed:var(--bal-color-danger);--bal-steps-step-icon-radius:var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius:var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius:var(--bal-radius-rounded);--bal-steps-step-label-text-color:var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done:var(--bal-color-text-primary);--bal-steps-step-label-text-color-active:var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed:var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color:var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active:var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done:var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed:var(--bal-color-text-white)}.bal-steps__nav__item__icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;font-weight:var(--bal-font-weight-bold);border-radius:var(--bal-steps-step-icon-radius);font-size:var(--bal-text-size-small);height:1.5rem;width:1.5rem;left:calc(50% - .75rem);border:var(--bal-steps-step-border-width) var(--bal-steps-step-border-style) var(--bal-steps-step-border-color);background:var(--bal-steps-step-icon-background);color:var(--bal-steps-step-icon-text-color)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon{height:2rem;width:2rem;left:calc(50% - 1rem);font-size:var(--bal-text-size-normal)}}.bal-steps__nav__item__icon--active{border-color:var(--bal-steps-step-border-color-active);background:var(--bal-steps-step-icon-background-active);color:var(--bal-steps-step-icon-text-color-active)}.bal-steps__nav__item__icon--done{border-color:var(--bal-steps-step-border-color-done);background:var(--bal-steps-step-icon-background-done);color:var(--bal-steps-step-icon-text-color-done)}.bal-steps__nav__item__icon--failed{border-color:var(--bal-steps-step-border-color-failed);background:var(--bal-steps-step-icon-background-failed);color:var(--bal-steps-step-icon-text-color-failed);font-size:var(--bal-text-size-normal)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-tablet)}}@media screen and (min-width: 1024px){.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-desktop)}}.bal-steps__nav__item__icon--disabled{border-color:var(--bal-steps-step-border-color-disabled);background:var(--bal-steps-step-icon-background-disabled);color:var(--bal-steps-step-icon-text-color-disabled)}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}.bal-steps__nav__item__label{display:none}@media screen and (min-width: 769px),print{.bal-steps__nav__item__label{display:block;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);text-align:center;width:100%;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-steps-step-label-text-color)}.bal-steps__nav__item__label--done{color:var(--bal-steps-step-label-text-color-done)}.bal-steps__nav__item__label--active{color:var(--bal-steps-step-label-text-color-active)}.bal-steps__nav__item__label--failed{color:var(--bal-steps-step-label-text-color-failed)}.bal-steps__nav__item__label--disabled{color:var(--bal-steps-step-label-text-color-disabled)}}.bal-steps{display:block;position:static}.bal-steps__nav{-webkit-overflow-scrolling:touch;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-step-item{width:100%;display:none}.bal-step-item--active{display:block}";
+const balStepsCss = "@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background:var(--bal-color-white);--bal-steps-step-icon-background-active:var(--bal-color-primary);--bal-steps-step-icon-background-disabled:var(--bal-color-grey-2);--bal-steps-step-icon-background-done:var(--bal-color-primary);--bal-steps-step-icon-background-failed:var(--bal-color-danger);--bal-steps-step-button-progress-line-background:var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after:var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-progress-line-background-light-blue:var(--bal-color-primary-2);--bal-steps-step-button-passed-background-light-blue:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-purple:var(--bal-color-purple-2);--bal-steps-step-button-passed-background-purple:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-green:var(--bal-color-green-2);--bal-steps-step-button-passed-background-green:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-red:var(--bal-color-red-2);--bal-steps-step-button-passed-background-red:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-yellow:var(--bal-color-yellow-2);--bal-steps-step-button-passed-background-yellow:var(--bal-color-primary);--bal-steps-step-border-width:var(--bal-form-field-control-border-width);--bal-steps-step-border-style:var(--bal-form-field-control-border-style);--bal-steps-step-border-color:var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled:var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed:var(--bal-color-danger);--bal-steps-step-icon-radius:var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius:var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius:var(--bal-radius-rounded);--bal-steps-step-label-text-color:var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done:var(--bal-color-text-primary);--bal-steps-step-label-text-color-active:var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed:var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color:var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active:var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done:var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed:var(--bal-color-text-white)}.bal-steps__nav__item{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;gap:.5rem;-ms-flex-direction:column;flex-direction:column;-ms-flex-preferred-size:1rem;flex-basis:1rem;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;text-decoration:none;cursor:default;position:relative;min-width:3rem;padding-top:6px}.bal-steps__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-steps__nav__item--clickable{cursor:pointer;pointer-events:all}.bal-steps__nav__item:not(:last-child)::after{content:\" \";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-progress-line-background);border-radius:var(--bal-steps-step-button-progress-line-radius);margin-top:3px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.5rem}}.bal-steps__nav__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-passed-background)}.bal-steps__nav__carousel__item{-ms-flex:1;flex:1;min-width:3rem}.bal-steps__nav__carousel__item:not(:last-child)::after{content:\" \";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-carousel-item-background-after);border-radius:var(--bal-steps-step-button-carousel-item-radius);margin-top:3px;margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__carousel__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:1.5rem;margin-right:1.5rem}}.bal-steps__nav__carousel__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-carousel-item-passed-background-after)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-light-blue::after{background-color:var(--bal-steps-step-button-progress-line-background-light-blue)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-purple::after{background-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-red::after{background-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-yellow::after{background-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-green::after{background-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-light-blue::after{background-color:var(--bal-steps-step-button-passed-background-light-blue)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-purple::after{background-color:var(--bal-steps-step-button-passed-background-purple)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-red::after{background-color:var(--bal-steps-step-button-passed-background-red)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-yellow::after{background-color:var(--bal-steps-step-button-passed-background-yellow)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-green::after{background-color:var(--bal-steps-step-button-passed-background-green)}.bal-steps__nav__item--color-light-blue:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-light-blue)}.bal-steps__nav__item--color-light-blue.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-light-blue);border-color:var(--bal-steps-step-button-progress-line-background-light-blue);color:var(--bal-color-primary-4)}.bal-steps__nav__item--color-light-blue.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-purple:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__item--color-purple.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-purple);border-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__item--color-purple.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-green:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__item--color-green.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-green);border-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__item--color-green.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-yellow:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__item--color-yellow.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-yellow);border-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__item--color-yellow.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-red:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__item--color-red.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-red);border-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__item--color-red.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background:var(--bal-color-white);--bal-steps-step-icon-background-active:var(--bal-color-primary);--bal-steps-step-icon-background-disabled:var(--bal-color-grey-2);--bal-steps-step-icon-background-done:var(--bal-color-primary);--bal-steps-step-icon-background-failed:var(--bal-color-danger);--bal-steps-step-button-progress-line-background:var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after:var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-progress-line-background-light-blue:var(--bal-color-primary-2);--bal-steps-step-button-passed-background-light-blue:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-purple:var(--bal-color-purple-2);--bal-steps-step-button-passed-background-purple:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-green:var(--bal-color-green-2);--bal-steps-step-button-passed-background-green:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-red:var(--bal-color-red-2);--bal-steps-step-button-passed-background-red:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-yellow:var(--bal-color-yellow-2);--bal-steps-step-button-passed-background-yellow:var(--bal-color-primary);--bal-steps-step-border-width:var(--bal-form-field-control-border-width);--bal-steps-step-border-style:var(--bal-form-field-control-border-style);--bal-steps-step-border-color:var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled:var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed:var(--bal-color-danger);--bal-steps-step-icon-radius:var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius:var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius:var(--bal-radius-rounded);--bal-steps-step-label-text-color:var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done:var(--bal-color-text-primary);--bal-steps-step-label-text-color-active:var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed:var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color:var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active:var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done:var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed:var(--bal-color-text-white)}.bal-steps__nav__item__icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;font-weight:var(--bal-font-weight-bold);border-radius:var(--bal-steps-step-icon-radius);font-size:var(--bal-text-size-small);height:1.5rem;width:1.5rem;left:calc(50% - .75rem);border:var(--bal-steps-step-border-width) var(--bal-steps-step-border-style) var(--bal-steps-step-border-color);background:var(--bal-steps-step-icon-background);color:var(--bal-steps-step-icon-text-color)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon{height:2rem;width:2rem;left:calc(50% - 1rem);font-size:var(--bal-text-size-normal)}}.bal-steps__nav__item__icon--active{border-color:var(--bal-steps-step-border-color-active);background:var(--bal-steps-step-icon-background-active);color:var(--bal-steps-step-icon-text-color-active)}.bal-steps__nav__item__icon--done{border-color:var(--bal-steps-step-border-color-done);background:var(--bal-steps-step-icon-background-done);color:var(--bal-steps-step-icon-text-color-done)}.bal-steps__nav__item__icon--failed{border-color:var(--bal-steps-step-border-color-failed);background:var(--bal-steps-step-icon-background-failed);color:var(--bal-steps-step-icon-text-color-failed);font-size:var(--bal-text-size-normal)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-tablet)}}@media screen and (min-width: 1024px){.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-desktop)}}.bal-steps__nav__item__icon--disabled{border-color:var(--bal-steps-step-border-color-disabled);background:var(--bal-steps-step-icon-background-disabled);color:var(--bal-steps-step-icon-text-color-disabled);opacity:.6}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}.bal-steps__nav__item__label{display:none}@media screen and (min-width: 769px),print{.bal-steps__nav__item__label{display:block;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);text-align:center;width:100%;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-steps-step-label-text-color)}.bal-steps__nav__item__label--done{color:var(--bal-steps-step-label-text-color-done)}.bal-steps__nav__item__label--active{color:var(--bal-steps-step-label-text-color-active)}.bal-steps__nav__item__label--failed{color:var(--bal-steps-step-label-text-color-failed)}.bal-steps__nav__item__label--disabled{color:var(--bal-steps-step-label-text-color-disabled);opacity:.6}}.bal-steps{display:block;position:static}.bal-steps__nav{-webkit-overflow-scrolling:touch;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-step-item{width:100%;display:none}.bal-step-item--active{display:block}";
 const BalStepsStyle0 = balStepsCss;
 
 const Steps = class {
@@ -123,6 +123,7 @@ const Steps = class {
         this.store = [];
         this.options = [];
         this.clickable = true;
+        this.color = 'primary';
         this.debounce = 0;
         this.value = undefined;
     }
@@ -216,9 +217,9 @@ const Steps = class {
                 .join(','), "data-label": this.store
                 .filter(t => this.isActive(t))
                 .map(t => t.label)
-                .join(',') }, index.h("nav", { role: "tablist", class: Object.assign({}, bemStepsNav.class()) }, index.h("bal-carousel", { class: Object.assign({}, bemStepsNav.element('carousel').class()), onBalChange: formInput.stopEventBubbling, controls: "small", "items-per-view": "auto", steps: 3 }, steps
+                .join(',') }, index.h("nav", { class: Object.assign({}, bemStepsNav.class()), role: "tablist", "aria-live": "polite" }, index.h("bal-carousel", { class: Object.assign({}, bemStepsNav.element('carousel').class()), htmlRole: '', onBalChange: formInput.stopEventBubbling, controls: "small", "items-per-view": "auto", steps: 3 }, steps
             .filter(step => !step.invisible)
-            .map(step => (index.h("bal-carousel-item", { key: step.value, class: Object.assign(Object.assign({}, bemStepsNav.element('carousel').element('item').class()), bemStepsNav.element('carousel').element('item').modifier('passed').class(step.passed)) }, index.h(StepButton, { item: step, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))))), index.h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, index.h("slot", null))));
+            .map(step => (index.h("bal-carousel-item", { key: step.value, htmlRole: '', class: Object.assign(Object.assign(Object.assign({}, bemStepsNav.element('carousel').element('item').class()), bemStepsNav.element('carousel').element('item').modifier(`color-${this.color}`).class()), bemStepsNav.element('carousel').element('item').modifier('passed').class(step.passed)) }, index.h(StepButton, { item: step, color: this.color, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))))), index.h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, index.h("slot", null))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {