@baloise/ds-core 16.3.0 → 16.4.0

package/dist/collection/components/bal-carousel/controls/dot-control.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
-export const DotControl = ({ value, items, onControlChange }) => {
+export const DotControl = ({ value, items, containerId, onControlChange }) => {
     const block = BEM.block('carousel');
     const controls = block.element('controls');
     const onChange = (ev) => {
@@ -13,5 +13,5 @@ export const DotControl = ({ value, items, onControlChange }) => {
         }
         onControlChange(items[selectedValue]);
     };
-    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('tabs').class()) }, h("bal-pagination", { interface: "small", value: value + 1, totalPages: items.length, onBalChange: onChange })));
+    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('tabs').class()) }, h("bal-pagination", { "aria-controls": containerId, interface: "small", value: value + 1, totalPages: items.length, onBalChange: onChange })));
 };

package/dist/collection/components/bal-carousel/controls/large-control.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
-export const LargeControl = ({ isFirst, isLast, inverted, areControlsHidden, onNextClick, onPreviousClick, leftControlTitle, rightControlTitle, }) => {
+export const LargeControl = ({ isFirst, isLast, inverted, areControlsHidden, onNextClick, onPreviousClick, containerId, leftControlTitle, rightControlTitle, }) => {
     const block = BEM.block('carousel');
     const controls = block.element('controls');
     const button = controls.element('button');
-    return (h("div", { "data-mutation": "false", class: Object.assign(Object.assign({}, controls.class()), controls.modifier('large').class()) }, h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst && areControlsHidden)), square: true, icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), disabled: isFirst, "aria-hidden": isFirst && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-left", title: leftControlTitle }), h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast && areControlsHidden)), square: true, icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), disabled: isLast, "aria-hidden": isLast && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
+    return (h("div", { "data-mutation": "false", class: Object.assign(Object.assign({}, controls.class()), controls.modifier('large').class()) }, h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst && areControlsHidden)), "aria-controls": containerId, square: true, icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), disabled: isFirst, "aria-hidden": isFirst && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-left", title: leftControlTitle }), h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast && areControlsHidden)), "aria-controls": containerId, square: true, icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), disabled: isLast, "aria-hidden": isLast && areControlsHidden ? 'true' : null, "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
 };

package/dist/collection/components/bal-carousel/controls/small-control.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
-export const SmallControl = ({ isFirst, isLast, inverted, leftControlTitle, rightControlTitle, onNextClick, onPreviousClick, }) => {
+export const SmallControl = ({ isFirst, isLast, inverted, leftControlTitle, rightControlTitle, containerId, onNextClick, onPreviousClick, }) => {
     const block = BEM.block('carousel');
     const controls = block.element('controls');
     const button = controls.element('button');
-    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('small').class()) }, h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst)), square: true, size: "small", icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), disabled: isFirst, "aria-hidden": isFirst ? 'true' : null, tabindex: "-1", "data-testid": "bal-carousel-control-left", title: leftControlTitle }), h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast)), square: true, size: "small", icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), disabled: isLast, "aria-hidden": isLast ? 'true' : null, tabindex: "-1", "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
+    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('small').class()) }, h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('left').class()), button.modifier('hidden').class(isFirst)), "aria-controls": containerId, square: true, size: "small", icon: "nav-go-left", rounded: true, inverted: inverted, onClick: () => onPreviousClick(), disabled: isFirst, "aria-hidden": isFirst ? 'true' : null, tabindex: "-1", "data-testid": "bal-carousel-control-left", title: leftControlTitle }), h("bal-button", { class: Object.assign(Object.assign(Object.assign({}, button.class()), button.modifier('right').class()), button.modifier('hidden').class(isLast)), "aria-controls": containerId, square: true, size: "small", icon: "nav-go-right", rounded: true, inverted: inverted, onClick: () => onNextClick(), disabled: isLast, "aria-hidden": isLast ? 'true' : null, tabindex: "-1", "data-testid": "bal-carousel-control-right", title: rightControlTitle })));
 };

package/dist/collection/components/bal-carousel/controls/tab-control.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
-export const TabControl = ({ value, items, onControlChange }) => {
+export const TabControl = ({ value, items, containerId, onControlChange }) => {
     const block = BEM.block('carousel');
     const controls = block.element('controls');
-    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('tabs').class()) }, h("bal-card", null, h("bal-card-content", null, items.map(item => (h("bal-button", { key: item.value, expanded: true, color: value === item.value ? 'primary' : 'light', onClick: () => onControlChange(item) }, item.label)))))));
+    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('tabs').class()) }, h("bal-card", null, h("bal-card-content", null, items.map(item => (h("bal-button", { "aria-controls": containerId, key: item.value, expanded: true, color: value === item.value ? 'primary' : 'light', onClick: () => onControlChange(item) }, item.label)))))));
 };

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

@@ -36,6 +36,9 @@ export class Checkbox {
             if (element.href) {
                 return;
             }
+            if (this.wasFocused) {
+                this.focused = true;
+            }
             if (element.nodeName !== 'INPUT' && !this.disabled && !this.readonly) {
                 this.toggleChecked();
                 (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
@@ -53,6 +56,7 @@ export class Checkbox {
             this.balFocus.emit(ev);
             if (this.keyboardMode) {
                 this.focused = true;
+                this.wasFocused = true;
             }
         };
         this.onBlur = (ev) => {
@@ -63,11 +67,17 @@ export class Checkbox {
             this.focused = false;
         };
         this.onPointerDown = () => (this.keyboardMode = false);
-        this.onKeydown = (ev) => (this.keyboardMode = FOCUS_KEYS.includes(ev.key));
+        this.onKeydown = (ev) => {
+            if (!isSpaceKey(ev)) {
+                this.wasFocused = false;
+            }
+            this.keyboardMode = FOCUS_KEYS.includes(ev.key);
+        };
         this.hasLabel = true;
         this.focused = false;
         this.buttonTabindex = undefined;
         this.ariaForm = defaultBalAriaForm;
+        this.wasFocused = false;
         this.name = this.inputId;
         this.label = '';
         this.invisible = false;
@@ -595,7 +605,8 @@ export class Checkbox {
             "hasLabel": {},
             "focused": {},
             "buttonTabindex": {},
-            "ariaForm": {}
+            "ariaForm": {},
+            "wasFocused": {}
         };
     }
     static get events() {

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

@@ -1,20 +1,15 @@
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import { inheritAttributes } from "../../utils/attributes";
 import { BEM } from "../../utils/bem";
 import { ListenToConfig, defaultConfig } from "../../utils/config";
 import { i18nBalClose } from "./bal-close.i18n";
 export class Close {
     constructor() {
-        this.inheritedAttributes = {};
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
         this.size = '';
         this.inverted = false;
     }
-    componentWillRender() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['tabindex']);
-    }
     /**
      * @internal define config for the component
      */
@@ -27,7 +22,7 @@ export class Close {
         const buttonEl = blockEl.element('button');
         const iconEl = buttonEl.element('icon');
         const label = i18nBalClose[this.language].close;
-        return (h(Host, { class: Object.assign({}, blockEl.class()) }, h("button", Object.assign({ type: "button", "aria-label": label, title: label, tabindex: -1, class: Object.assign(Object.assign(Object.assign({}, buttonEl.class()), buttonEl.modifier('inverted').class(this.inverted)), buttonEl.modifier(`size-${this.size}`).class(this.size !== '')), "data-testid": "bal-close" }, this.inheritedAttributes), h("bal-icon", { name: "close", size: this.size === 'small' ? 'x-small' : this.size === 'medium' ? 'medium' : 'small', inverted: this.inverted, class: Object.assign({}, iconEl.class()) }))));
+        return (h(Host, { class: Object.assign({}, blockEl.class()) }, h("button", { type: "button", "aria-label": label, title: label, tabindex: "0", class: Object.assign(Object.assign(Object.assign({}, buttonEl.class()), buttonEl.modifier('inverted').class(this.inverted)), buttonEl.modifier(`size-${this.size}`).class(this.size !== '')), "data-testid": "bal-close" }, h("bal-icon", { name: "close", size: this.size === 'small' ? 'x-small' : this.size === 'medium' ? 'medium' : 'small', inverted: this.inverted, class: Object.assign({}, iconEl.class()) }))));
     }
     static get is() { return "bal-close"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.js

@@ -1,6 +1,7 @@
 import { __decorate, __metadata } from "tslib";
 import { Host, h } from "@stencil/core";
 import { Logger } from "../../../utils/log";
+import { isEnterKey, isSpaceKey } from "@baloise/web-app-utils";
 export class ListItemAccordionHead {
     constructor() {
         /**
@@ -12,6 +13,11 @@ export class ListItemAccordionHead {
                 this.accordionOpen = !this.accordionOpen;
             }
         };
+        this.onKeyDown = (ev) => {
+            if (isSpaceKey(ev) || isEnterKey(ev)) {
+                this.onClick();
+            }
+        };
         this.accordionOpen = false;
         this.icon = 'plus';
     }
@@ -32,7 +38,7 @@ export class ListItemAccordionHead {
                 'bal-list__item': true,
                 'bal-list__item__accordion-head': true,
                 'bal-list__item__accordion-head--open': this.accordionOpen,
-            }, onClick: this.onClick }, h("slot", null), h("bal-list-item-icon", { right: true }, h("bal-icon", { class: "bal-list__item__accordion-head__icon", name: this.icon, size: "small", turn: this.accordionOpen }))));
+            }, role: "button", tabindex: "0", onClick: this.onClick, onKeyDown: this.onKeyDown }, h("slot", null), h("bal-list-item-icon", { right: true }, h("bal-icon", { class: "bal-list__item__accordion-head__icon", name: this.icon, size: "small", turn: this.accordionOpen }))));
     }
     static get is() { return "bal-list-item-accordion-head"; }
     static get properties() {

package/dist/collection/components/bal-nav/bal-nav-menu-bar/bal-nav-menu-bar.css

@@ -1 +1 @@
-:root{--bal-nav-menu-bar-background: var(--bal-color-white);--bal-nav-menu-bar-radius: var(--bal-radius-large);--bal-nav-menu-bar-shadow: 0 5px 15px rgba(0,0,0,.1)}.bal-nav-menu-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;z-index:var(--bal-z-index-navigation)}.bal-nav-menu-bar__container{flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav-menu-bar__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav-menu-bar__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav-menu-bar__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav-menu-bar__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav-menu-bar__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav-menu-bar__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}@media screen and (max-width: 768px){.bal-nav-menu-bar--hidden-mobile{display:hidden;visibility:hidden}}@media screen and (max-width: 768px){.bal-nav-menu-bar--hidden-tablet{display:hidden;visibility:hidden}}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-nav-menu-bar--hidden-tablet{display:hidden;visibility:hidden}}@media screen and (min-width: 1440px){.bal-nav-menu-bar{position:fixed;margin-top:1rem}}.bal-nav-menu-bar--position-fixed-top{position:fixed}.bal-nav-menu-bar__inner{background:var(--bal-nav-menu-bar-background);box-shadow:var(--bal-nav-menu-bar-shadow)}@media screen and (min-width: 1440px){.bal-nav-menu-bar__inner{background:rgba(0,0,0,0);box-shadow:none}}.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{min-height:64px}@media screen and (min-width: 1440px){.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{background:var(--bal-nav-menu-bar-background);border-radius:var(--bal-nav-menu-bar-radius);box-shadow:var(--bal-nav-menu-bar-shadow);min-height:80px}}@media screen and (min-width: 1440px)and (max-width: 1539px){.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{background:rgba(0,0,0,0);box-shadow:none;min-height:80px}.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container::before{position:absolute;content:"";height:100%;top:0;left:1rem;right:1rem;background:var(--bal-nav-menu-bar-background);border-radius:var(--bal-nav-menu-bar-radius);box-shadow:var(--bal-nav-menu-bar-shadow)}}.bal-nav-menu-bar .bal-nav__logo{align-self:flex-start;z-index:1;height:auto;padding-top:.8em}@media screen and (min-width: 1024px){.bal-nav-menu-bar .bal-nav__logo{padding-top:1rem}}@media screen and (min-width: 1440px){.bal-nav-menu-bar .bal-nav__logo{padding-top:1.5rem}}.bal-nav-menu-bar-body-padding{padding-top:1rem}@media screen and (min-width: 1440px){.bal-nav-menu-bar-body-padding{padding-top:7rem}}.bal-nav-menu-bar-body-margin{margin-top:1rem}@media screen and (min-width: 1440px){.bal-nav-menu-bar-body-margin{margin-top:7rem}}.bal-nav-menu-bar-fixed-body-padding{padding-top:8rem}.bal-nav-menu-bar-fixed-body-margin{margin-top:8rem}
+:root{--bal-nav-menu-bar-background: var(--bal-color-white);--bal-nav-menu-bar-radius: var(--bal-radius-large);--bal-nav-menu-bar-shadow: 0 5px 15px rgba(0,0,0,.1)}.bal-nav-menu-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;z-index:var(--bal-z-index-navigation)}.bal-nav-menu-bar__container{flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav-menu-bar__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav-menu-bar__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav-menu-bar__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav-menu-bar__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav-menu-bar__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav-menu-bar__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}@media screen and (max-width: 768px){.bal-nav-menu-bar--hidden-mobile{display:hidden;visibility:hidden}}@media screen and (max-width: 768px){.bal-nav-menu-bar--hidden-tablet{display:hidden;visibility:hidden}}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-nav-menu-bar--hidden-tablet{display:hidden;visibility:hidden}}@media screen and (min-width: 1440px){.bal-nav-menu-bar{position:fixed;margin-top:1rem}}.bal-nav-menu-bar--position-fixed-top{position:fixed}.bal-nav-menu-bar__inner{background:var(--bal-nav-menu-bar-background);box-shadow:var(--bal-nav-menu-bar-shadow)}@media screen and (min-width: 1440px){.bal-nav-menu-bar__inner{background:rgba(0,0,0,0);box-shadow:none}}.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{min-height:64px}@media screen and (min-width: 1440px){.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{background:var(--bal-nav-menu-bar-background);border-radius:var(--bal-nav-menu-bar-radius);box-shadow:var(--bal-nav-menu-bar-shadow);min-height:80px}}@media screen and (min-width: 1440px)and (max-width: 1539px){.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{background:rgba(0,0,0,0);box-shadow:none;min-height:80px}.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container::before{position:absolute;content:"";height:100%;top:0;left:1rem;right:1rem;background:var(--bal-nav-menu-bar-background);border-radius:var(--bal-nav-menu-bar-radius);box-shadow:var(--bal-nav-menu-bar-shadow)}}.bal-nav-menu-bar .bal-nav__logo{align-self:flex-start;z-index:1;height:auto;margin-top:.8em}@media screen and (min-width: 1024px){.bal-nav-menu-bar .bal-nav__logo{margin-top:1rem}}@media screen and (min-width: 1440px){.bal-nav-menu-bar .bal-nav__logo{margin-top:1.5rem}}.bal-nav-menu-bar-body-padding{padding-top:1rem}@media screen and (min-width: 1440px){.bal-nav-menu-bar-body-padding{padding-top:7rem}}.bal-nav-menu-bar-body-margin{margin-top:1rem}@media screen and (min-width: 1440px){.bal-nav-menu-bar-body-margin{margin-top:7rem}}.bal-nav-menu-bar-fixed-body-padding{padding-top:8rem}.bal-nav-menu-bar-fixed-body-margin{margin-top:8rem}

package/dist/collection/components/bal-nav/bal-nav-menu-flyout/bal-nav-menu-flyout.js

@@ -6,17 +6,13 @@ import { ListenToResize } from "../../../utils/resize";
 import { BalScrollHandler } from "../../../utils/scroll";
 export class NavMenuFlyout {
     constructor() {
-        this.navMenuFlyoutId = `bal-nav-menu-flyout-${NavMenuFlyOutIds++}`;
         this.bodyScrollHandler = new BalScrollHandler();
         this.isHidden = false;
+        this.navId = `bal-nav-x${NavMenuFlyOutIds++}`;
     }
     createLogger(log) {
         this.log = log;
     }
-    /**
-     * PUBLIC PROPERTY API
-     * ------------------------------------------------------
-     */
     /**
      * LIFECYCLE
      * ------------------------------------------------------
@@ -54,7 +50,7 @@ export class NavMenuFlyout {
     render() {
         const block = BEM.block('nav-menu-flyout');
         const line = block.element('line');
-        return (h(Host, { id: this.navMenuFlyoutId, class: Object.assign({}, block.class()) }, h("div", { class: Object.assign({}, line.class()) }), h("div", { class: Object.assign({}, block.element('container').class()) }, h("slot", null))));
+        return (h(Host, { id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { class: Object.assign({}, line.class()) }), h("div", { class: Object.assign({}, block.element('container').class()) }, h("slot", null))));
     }
     static get is() { return "bal-nav-menu-flyout"; }
     static get originalStyleUrls() {
@@ -67,6 +63,28 @@ export class NavMenuFlyout {
             "$": ["bal-nav-menu-flyout.css"]
         };
     }
+    static get properties() {
+        return {
+            "navId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This is used to connect the flyout to the aria controls"
+                },
+                "attribute": "nav-id",
+                "reflect": false,
+                "defaultValue": "`bal-nav-x${NavMenuFlyOutIds++}`"
+            }
+        };
+    }
     static get states() {
         return {
             "isHidden": {}

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

@@ -1 +1 @@
-:root{--bal-nav-background: var(--bal-color-primary);--bal-nav-service-background-grey: var(--bal-color-grey);--bal-nav-service-background-purple: var(--bal-color-purple);--bal-nav-service-background-red: var(--bal-color-red);--bal-nav-service-background-yellow: var(--bal-color-yellow);--bal-nav-service-background-green: var(--bal-color-green)}.bal-nav{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%}.bal-nav__flyout{background:var(--bal-color-white);scroll-padding-top:1rem;padding-top:1rem;padding-bottom:1rem;height:calc(var(--bal-app-height, 100%) - 4rem - 4rem);overflow-y:auto}@media screen and (min-width: 1024px){.bal-nav__flyout{display:none;visibility:hidden}}.bal-nav__flyout__container{flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav__flyout__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav__flyout__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav__flyout__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav__flyout__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav__flyout__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav__flyout__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav__flyout:not(.bal-nav__flyout--visible){position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav .bal-nav-meta-bar,.bal-nav .bal-nav-menu-bar{z-index:auto !important}.bal-list__item__accordion-head:after{background:rgba(0,0,0,0) !important}.bal-nav-meta-bar-transform-touch{z-index:var(--bal-z-index-popup);position:relative}.bal-nav__mobile-meta-item{display:flex;justify-content:space-between;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;padding:0;margin:0;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-x-large);line-height:var(--bal-line-heigh-x-large);cursor:pointer}.bal-nav__mobile-menu-item{display:flex;justify-content:space-between;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;margin:0;padding:0 0 0 1rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-large);line-height:var(--bal-line-heigh-large);cursor:pointer}.bal-nav__mobile-section-item,.bal-nav__mobile-service-item>a{display:flex;justify-content:space-between;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-links{display:flex;justify-content:space-between;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-text);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li,.bal-nav__mobile-menu-list,.bal-nav__mobile-menu-list>li,.bal-nav__mobile-section-list,.bal-nav__mobile-service-list,.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li,.bal-nav__mobile-links-list{display:flex;flex-direction:column}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-section-list,.bal-nav__mobile-service-list{gap:var(--bal-space-x-large)}.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li{gap:var(--bal-space-xx-small)}.bal-nav__mobile-links-list{gap:var(--bal-space-xx-small)}.bal-nav__mobile-section-list{padding-top:1rem}.bal-nav__mobile-service-list>li{border-radius:var(--bal-radius-normal);padding-top:1rem;padding-bottom:1rem}.bal-nav__mobile-section-list--invisible,.bal-nav__mobile-service-list--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link{font-family:var(--bal-font-family-text);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-x-small);line-height:var(--bal-line-height-x-small)}.bal-nav__mobile-overview-link--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link--menu{padding:0 0 0 1rem}.bal-nav__line{background-color:var(--bal-color-border-grey-light);height:var(--bal-border-width-normal);border:none;display:block;border-radius:var(--bal-list-item-radius);width:100%;margin:0;padding:0}.bal-nav__mobile-links--clickable,.bal-nav__mobile-section-item--clickable,.bal-nav__mobile-service-item--clickable>a{cursor:pointer}.bal-nav__mobile-links--selected,.bal-nav__mobile-section-item--selected,.bal-nav__mobile-service-item--selected>a{text-decoration:underline}.bal-nav__mobile-service-item--color-grey{background:var(--bal-nav-service-background-grey)}.bal-nav__mobile-service-item--color-purple{background:var(--bal-nav-service-background-purple)}.bal-nav__mobile-service-item--color-red{background:var(--bal-nav-service-background-red)}.bal-nav__mobile-service-item--color-yellow{background:var(--bal-nav-service-background-yellow)}.bal-nav__mobile-service-item--color-green{background:var(--bal-nav-service-background-green)}
+@media(hover: hover)and (pointer: fine){.bal-nav__logo:focus-visible{box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-nav-background: var(--bal-color-primary);--bal-nav-service-background-grey: var(--bal-color-grey);--bal-nav-service-background-purple: var(--bal-color-purple);--bal-nav-service-background-red: var(--bal-color-red);--bal-nav-service-background-yellow: var(--bal-color-yellow);--bal-nav-service-background-green: var(--bal-color-green)}.bal-nav{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%}.bal-nav__flyout{background:var(--bal-color-white);scroll-padding-top:1rem;padding-top:1rem;padding-bottom:1rem;height:calc(var(--bal-app-height, 100%) - 4rem - 4rem);overflow-y:auto}@media screen and (min-width: 1024px){.bal-nav__flyout{display:none;visibility:hidden}}.bal-nav__flyout__container{flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav__flyout__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav__flyout__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav__flyout__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav__flyout__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav__flyout__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav__flyout__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav__flyout:not(.bal-nav__flyout--visible){position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav .bal-nav-meta-bar,.bal-nav .bal-nav-menu-bar{z-index:auto !important}.bal-list__item__accordion-head:after{background:rgba(0,0,0,0) !important}.bal-nav-meta-bar-transform-touch{z-index:var(--bal-z-index-popup);position:relative}.bal-nav__mobile-meta-item{display:flex;justify-content:space-between;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;padding:0;margin:0;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-x-large);line-height:var(--bal-line-heigh-x-large);cursor:pointer}.bal-nav__mobile-menu-item{display:flex;justify-content:space-between;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;margin:0;padding:0 0 0 1rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-large);line-height:var(--bal-line-heigh-large);cursor:pointer}.bal-nav__mobile-section-item,.bal-nav__mobile-service-item>a{display:flex;justify-content:space-between;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-links{display:flex;justify-content:space-between;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-text);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li,.bal-nav__mobile-menu-list,.bal-nav__mobile-menu-list>li,.bal-nav__mobile-section-list,.bal-nav__mobile-service-list,.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li,.bal-nav__mobile-links-list{display:flex;flex-direction:column}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-section-list,.bal-nav__mobile-service-list{gap:var(--bal-space-x-large)}.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li{gap:var(--bal-space-xx-small)}.bal-nav__mobile-links-list{gap:var(--bal-space-xx-small)}.bal-nav__mobile-section-list{padding-top:1rem}.bal-nav__mobile-service-list>li{border-radius:var(--bal-radius-normal);padding-top:1rem;padding-bottom:1rem}.bal-nav__mobile-section-list--invisible,.bal-nav__mobile-service-list--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link{font-family:var(--bal-font-family-text);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-x-small);line-height:var(--bal-line-height-x-small)}.bal-nav__mobile-overview-link--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link--menu{padding:0 0 0 1rem}.bal-nav__line{background-color:var(--bal-color-border-grey-light);height:var(--bal-border-width-normal);border:none;display:block;border-radius:var(--bal-list-item-radius);width:100%;margin:0;padding:0}.bal-nav__mobile-links--clickable,.bal-nav__mobile-section-item--clickable,.bal-nav__mobile-service-item--clickable>a{cursor:pointer}.bal-nav__mobile-links--selected,.bal-nav__mobile-section-item--selected,.bal-nav__mobile-service-item--selected>a{text-decoration:underline}.bal-nav__mobile-service-item--color-grey{background:var(--bal-nav-service-background-grey)}.bal-nav__mobile-service-item--color-purple{background:var(--bal-nav-service-background-purple)}.bal-nav__mobile-service-item--color-red{background:var(--bal-nav-service-background-red)}.bal-nav__mobile-service-item--color-yellow{background:var(--bal-nav-service-background-yellow)}.bal-nav__mobile-service-item--color-green{background:var(--bal-nav-service-background-green)}

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

@@ -280,10 +280,13 @@ export class Nav {
         return (h(Host, { id: this.navId, class: Object.assign({}, block.class()) }, h("div", { class: {
                 'bal-nav-meta-bar-transform': true,
                 'bal-nav-meta-bar-transform-touch': this.isTouch,
-            } }, this.isDesktop ? (h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (h("bal-tabs", { spaceless: true, inverted: true, context: "meta", value: this.activeMetaLinkValue, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render()))) : (h("span", null)), h("bal-stack", { id: "bal-nav__meta-buttons", space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtMetaBar()))))) : (''), this.isDesktop ? (h("bal-nav-menu-bar", { position: "fixed-top", ref: menuBarEl => (this.menuBarEl = menuBarEl) }, h("bal-stack", { space: "auto", "space-row": "none", "use-wrap": true }, this.renderLogo(), h("bal-tabs", { context: "navigation", accordion: true, spaceless: true, value: this.activeMenuLinkValue }, (_a = this.linkItems
+            } }, this.isDesktop ? (h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (h("bal-tabs", { spaceless: true, inverted: true, context: "meta", value: this.activeMetaLinkValue, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
+            flyoutId: `${this.navId}-menu-flyout`,
+        })))) : (h("span", null)), h("bal-stack", { id: "bal-nav__meta-buttons", space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtMetaBar()))))) : (''), this.isDesktop ? (h("bal-nav-menu-bar", { position: "fixed-top", ref: menuBarEl => (this.menuBarEl = menuBarEl) }, h("bal-stack", { space: "auto", "space-row": "none", "use-wrap": true }, this.renderLogo(), h("bal-tabs", { context: "navigation", accordion: true, spaceless: true, value: this.activeMenuLinkValue }, (_a = this.linkItems
             .find(item => item.value === this.activeMetaLinkValue)) === null || _a === void 0 ? void 0 : _a.mainLinkItems.map(item => item.render({
+            flyoutId: `${this.navId}-menu-flyout`,
             onClick: () => this.onMenuBarTabChange(item.value),
-        })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", null, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_c = (_b = this.activeMenuLinkItem) === null || _b === void 0 ? void 0 : _b.overviewLink) === null || _c === void 0 ? void 0 : _c.href, target: (_e = (_d = this.activeMenuLinkItem) === null || _d === void 0 ? void 0 : _d.overviewLink) === null || _e === void 0 ? void 0 : _e.target, onClick: () => { var _a; return this.linkItemClickListener((_a = this.activeMenuLinkItem) === null || _a === void 0 ? void 0 : _a.overviewLink); } }, (_g = (_f = this.activeMenuLinkItem) === null || _f === void 0 ? void 0 : _f.overviewLink) === null || _g === void 0 ? void 0 :
+        })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", { navId: this.navId }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_c = (_b = this.activeMenuLinkItem) === null || _b === void 0 ? void 0 : _b.overviewLink) === null || _c === void 0 ? void 0 : _c.href, target: (_e = (_d = this.activeMenuLinkItem) === null || _d === void 0 ? void 0 : _d.overviewLink) === null || _e === void 0 ? void 0 : _e.target, onClick: () => { var _a; return this.linkItemClickListener((_a = this.activeMenuLinkItem) === null || _a === void 0 ? void 0 : _a.overviewLink); } }, (_g = (_f = this.activeMenuLinkItem) === null || _f === void 0 ? void 0 : _f.overviewLink) === null || _g === void 0 ? void 0 :
             _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), h("div", null, h("slot", null))), this.isTouch ? (h("bal-nav-meta-bar", { variant: "white", size: "normal" }, h("bal-stack", { space: "auto" }, this.renderLogo(), h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), h("bal-button", { square: true, color: this.isFlyoutActive ? 'primary' : 'light', icon: this.isFlyoutActive ? 'close' : 'menu-bars', "aria-label": this.isFlyoutActive ? i18nNavBars[this.language].close : i18nNavBars[this.language].open, onClick: ev => this.onTouchToggleFlyout(ev) }))))) : (''), this.isTouch ? (h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, h("ul", { class: Object.assign({}, block.element('mobile-meta-list').class()) }, this.linkItems.map(item => item.renderTouch({
             activeMetaLinkValue: this.activeMetaLinkValue,
             activeMenuLinkValue: this.activeMenuLinkValue,

package/dist/collection/components/bal-nav/models/bal-nav-menu-link-item.js

@@ -35,9 +35,9 @@ export class NavMenuLinkItem extends NavLinkItem {
     render(context) {
         const hasChildren = this.sectionLinkItems.length > 0 || this.serviceLinkItems.length > 0;
         if (!hasChildren && this.isLink) {
-            return h("bal-tab-item", { label: this.label, value: this.value, href: this.href, target: this.target });
+            return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, href: this.href, target: this.target, "no-panel": true }));
         }
-        return (h("bal-tab-item", { label: this.label, value: this.value, onBalNavigate: ev => {
+        return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, "no-panel": true, onBalNavigate: ev => {
                 context === null || context === void 0 ? void 0 : context.onClick();
                 if (this.onClick) {
                     this.onClick(ev.detail);

package/dist/collection/components/bal-nav/models/bal-nav-meta-link-item.js

@@ -24,11 +24,11 @@ export class NavMetaLinkItem extends NavLinkItem {
             activeMenuLinkValue: context.activeMenuLinkValue,
         })))) : (''), h("hr", { class: Object.assign({}, block.element('line').class()) })));
     }
-    render() {
+    render(context) {
         if (this.isLink) {
-            return h("bal-tab-item", { label: this.label, value: this.value, href: this.href, target: this.target });
+            return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, href: this.href, target: this.target, "no-panel": true }));
         }
-        return (h("bal-tab-item", { label: this.label, value: this.value, onBalNavigate: ev => {
+        return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, "no-panel": true, onBalNavigate: ev => {
                 if (this.onClick) {
                     this.onClick(ev.detail);
                 }

package/dist/collection/components/bal-option-list/bal-option-list.js

@@ -61,6 +61,21 @@ export class OptionList {
      * PUBLIC METHODS
      * ------------------------------------------------------
      */
+    /**
+     * Focus the selected visible option in the list, if no option is selected it selects the first one
+     */
+    async focusSelected() {
+        const options = this.options;
+        const indexToFocus = this.getSelectedOptionIndex(options);
+        if (indexToFocus > 0) {
+            this.updateFocus(options, indexToFocus);
+            await waitAfterFramePaint();
+            return indexToFocus;
+        }
+        else {
+            return await this.focusFirst();
+        }
+    }
     /**
      * Focus the first visible option in the list
      * @returns focusIndex
@@ -324,10 +339,19 @@ export class OptionList {
         }
         return undefined;
     }
+    getSelectedOptionIndex(options) {
+        for (let index = 0; index < options.length; index++) {
+            const option = options[index];
+            if (option.selected && !option.hidden) {
+                return index;
+            }
+        }
+        return this.focusIndex;
+    }
     getFirstOptionIndex(options) {
         for (let index = 0; index < options.length; index++) {
             const option = options[index];
-            if (!option.disabled) {
+            if (!option.disabled && !option.hidden) {
                 return index;
             }
         }
@@ -390,7 +414,7 @@ export class OptionList {
     render() {
         const block = BEM.block('option-list');
         const labelledby = this.labelledby || this.ariaForm.labelId;
-        return (h(Host, { class: Object.assign({}, block.class()), id: this.inputId, tabIndex: -1 }, h("div", Object.assign({ role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", null))));
+        return (h(Host, { class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", null))));
     }
     static get is() { return "bal-option-list"; }
     static get originalStyleUrls() {
@@ -544,6 +568,23 @@ export class OptionList {
     }
     static get methods() {
         return {
+            "focusSelected": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Focus the selected visible option in the list, if no option is selected it selects the first one",
+                    "tags": []
+                }
+            },
             "focusFirst": {
                 "complexType": {
                     "signature": "() => Promise<number>",

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

@@ -76,15 +76,15 @@ export class Pagination {
     }
     renderEllipsisElement() {
         const more = BEM.block('pagination').element('nav').element('pagination-list').modifier('more');
-        return (h("li", null, h("div", { class: Object.assign({}, more.class()) }, h("bal-text", { bold: true, heading: true, inline: true, space: "none" }, "\u2026"))));
+        return (h("li", { "aria-hidden": 'true' }, h("div", { class: Object.assign({}, more.class()) }, h("bal-text", { bold: true, heading: true, inline: true, space: "none" }, "\u2026"))));
     }
     renderPageElement(pageNumber) {
         const isActive = this._value === pageNumber;
         const dot = BEM.block('pagination').element('nav').element('pagination-list').element('dot');
         if (this.interface === 'small') {
-            return (h("li", null, h("span", { class: Object.assign(Object.assign(Object.assign({}, dot.class()), dot.modifier('active').class(isActive)), dot.modifier('inactive').class(!isActive)), onClick: () => this.selectPage(pageNumber) })));
+            return (h("li", null, h("span", { role: "button", "aria-current": isActive ? 'true' : undefined, class: Object.assign(Object.assign(Object.assign({}, dot.class()), dot.modifier('active').class(isActive)), dot.modifier('inactive').class(!isActive)), "aria-label": pageNumber, onClick: () => this.selectPage(pageNumber) })));
         }
-        return (h("li", null, h("bal-button", { square: true, color: isActive ? 'primary' : 'text', onClick: () => this.selectPage(pageNumber), "data-testid": "bal-pagination-page-number", size: this.isMobile || this.size === 'small' ? 'small' : '' }, pageNumber)));
+        return (h("li", null, h("bal-button", { square: true, color: isActive ? 'primary' : 'text', "aria-current": isActive ? 'true' : undefined, onClick: () => this.selectPage(pageNumber), "data-testid": "bal-pagination-page-number", size: this.isMobile || this.size === 'small' ? 'small' : '' }, pageNumber)));
     }
     render() {
         const mobileItems = this.getItems(1);

package/dist/collection/components/bal-progress-bar/bal-progress-bar.css

@@ -1 +1 @@
-:root{--bal-progress-bar-background-white: var(--bal-color-white);--bal-progress-bar-background-grey: var(--bal-color-grey-3);--bal-progress-bar-line-background: var(--bal-color-primary);--bal-progress-bar-line-radius: var(--bal-radius-rounded)}.bal-progress-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;min-width:0;height:.25rem}.bal-progress-bar--background-white{background:var(--bal-progress-bar-background-white)}.bal-progress-bar--background-grey{background:var(--bal-progress-bar-background-grey)}.bal-progress-bar__line{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;height:.25rem;width:0;background:var(--bal-progress-bar-line-background);border-top-right-radius:var(--bal-progress-bar-line-radius);border-bottom-right-radius:var(--bal-progress-bar-line-radius)}.bal-progress-bar__line--animated{will-change:width;transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-progress-bar__line--full{border-top-right-radius:0;border-bottom-right-radius:0}
+:root{--bal-progress-bar-background-white: var(--bal-color-white);--bal-progress-bar-background-grey: var(--bal-color-grey-3);--bal-progress-bar-background-purple: var(--bal-color-purple-2);--bal-progress-bar-background-yellow: var(--bal-color-yellow-2);--bal-progress-bar-background-red: var(--bal-color-red-2);--bal-progress-bar-background-green: var(--bal-color-green-2);--bal-progress-bar-line-color-primary: var(--bal-color-primary);--bal-progress-bar-line-color-purple: var(--bal-color-purple-6);--bal-progress-bar-line-color-yellow: var(--bal-color-yellow-6);--bal-progress-bar-line-color-red: var(--bal-color-red-6);--bal-progress-bar-line-color-green: var(--bal-color-green-6);--bal-progress-bar-line-radius: var(--bal-radius-rounded)}.bal-progress-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;min-width:0;height:.25rem}.bal-progress-bar--background-white-of-primary,.bal-progress-bar--background-white-of-purple,.bal-progress-bar--background-white-of-red,.bal-progress-bar--background-white-of-green,.bal-progress-bar--background-white-of-yellow{background:var(--bal-progress-bar-background-white)}.bal-progress-bar--background-grey-of-primary{background:var(--bal-progress-bar-background-grey)}.bal-progress-bar--background-grey-of-purple{background:var(--bal-progress-bar-background-purple)}.bal-progress-bar--background-grey-of-red{background:var(--bal-progress-bar-background-red)}.bal-progress-bar--background-grey-of-green{background:var(--bal-progress-bar-background-green)}.bal-progress-bar--background-grey-of-yellow{background:var(--bal-progress-bar-background-yellow)}.bal-progress-bar__line{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;height:.25rem;width:0;background:var(--bal-progress-bar-line-color-primary);border-top-right-radius:var(--bal-progress-bar-line-radius);border-bottom-right-radius:var(--bal-progress-bar-line-radius)}.bal-progress-bar__line--animated{will-change:width;transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-progress-bar__line--full{border-top-right-radius:0;border-bottom-right-radius:0}.bal-progress-bar__line--color-purple{background:var(--bal-progress-bar-line-color-purple)}.bal-progress-bar__line--color-yellow{background:var(--bal-progress-bar-line-color-yellow)}.bal-progress-bar__line--color-red{background:var(--bal-progress-bar-line-color-red)}.bal-progress-bar__line--color-green{background:var(--bal-progress-bar-line-color-green)}

package/dist/collection/components/bal-progress-bar/bal-progress-bar.js

@@ -8,6 +8,7 @@ export class ProgressBar {
         this.isTouch = balBreakpoints.isTouch; // need this part to improve a none side effect import
         this.value = 0;
         this.background = 'white';
+        this.color = 'primary';
     }
     /**
      * LIFECYCLE
@@ -51,7 +52,7 @@ export class ProgressBar {
     render() {
         const block = BEM.block('progress-bar');
         const bemLineEl = block.element('line');
-        return (h(Host, { "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}`).class()) }, h("div", { class: Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
+        return (h(Host, { "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, h("div", { class: Object.assign(Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`color-${this.color}`).class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
     }
     static get is() { return "bal-progress-bar"; }
     static get originalStyleUrls() {
@@ -101,11 +102,34 @@ export class ProgressBar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The shape color"
+                    "text": "The background color"
                 },
                 "attribute": "background",
                 "reflect": false,
                 "defaultValue": "'white'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalProgressBarColor",
+                    "resolved": "\"green\" | \"primary\" | \"purple\" | \"red\" | \"yellow\"",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The progress bar color"
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'primary'"
             }
         };
     }

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

@@ -1 +1 @@
-@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{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{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{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{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:flex;box-sizing:border-box;gap:.5rem;flex-direction:column;flex-basis:1rem;flex-grow: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{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{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{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:flex;align-items: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{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{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%;hyphens:auto;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}
+@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{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{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{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{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:flex;box-sizing:border-box;gap:.5rem;flex-direction:column;flex-basis:1rem;flex-grow: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{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{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{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:flex;align-items: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{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{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%;hyphens:auto;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}

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

@@ -83,6 +83,7 @@ export class Steps {
         this.store = [];
         this.options = [];
         this.clickable = true;
+        this.color = 'primary';
         this.debounce = 0;
         this.value = undefined;
     }
@@ -176,9 +177,9 @@ export class Steps {
                 .join(','), "data-label": this.store
                 .filter(t => this.isActive(t))
                 .map(t => t.label)
-                .join(',') }, h("nav", { role: "tablist", class: Object.assign({}, bemStepsNav.class()) }, h("bal-carousel", { class: Object.assign({}, bemStepsNav.element('carousel').class()), onBalChange: stopEventBubbling, controls: "small", "items-per-view": "auto", steps: 3 }, steps
+                .join(',') }, h("nav", { class: Object.assign({}, bemStepsNav.class()), role: "tablist", "aria-live": "polite" }, h("bal-carousel", { class: Object.assign({}, bemStepsNav.element('carousel').class()), htmlRole: '', onBalChange: stopEventBubbling, controls: "small", "items-per-view": "auto", steps: 3 }, steps
             .filter(step => !step.invisible)
-            .map(step => (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)) }, h(StepButton, { item: step, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))))), h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, h("slot", null))));
+            .map(step => (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)) }, h(StepButton, { item: step, color: this.color, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))))), h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, h("slot", null))));
     }
     static get is() { return "bal-steps"; }
     static get originalStyleUrls() {
@@ -233,6 +234,29 @@ export class Steps {
                 "reflect": false,
                 "defaultValue": "true"
             },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalStepsColor",
+                    "resolved": "\"green\" | \"light-blue\" | \"primary\" | \"purple\" | \"red\" | \"yellow\"",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the color of the steps so it can be placed on colored backgrounds"
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
             "debounce": {
                 "type": "number",
                 "mutable": false,