@baloise/ds-core 19.1.0 → 19.2.0-nightly.20250623

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

@@ -4,10 +4,12 @@ import { BEM } from "../../utils/bem";
 import { ListenToBreakpoints, balBreakpoints } from "../../utils/breakpoints";
 import { balBrowser } from "../../utils/browser";
 import { ListenToConfig, defaultConfig, } from "../../utils/config";
-import { waitAfterIdleCallback, waitForComponent } from "../../utils/helpers";
+import { stopEventBubbling } from "../../utils/form-input";
+import { isDescendant, waitAfterIdleCallback, waitForComponent } from "../../utils/helpers";
 import { Logger } from "../../utils/log";
 import { ListenToMutation } from "../../utils/mutation";
 import { BalScrollHandler } from "../../utils/scroll";
+import { gatherTabInformation, handleFlyoutFocusOut, handleTabKeyDown } from "./bal-nav-focus.util";
 import { i18nNavBars } from "./bal-nav.i18n";
 import { NavMetaButton } from "./models/bal-nav-meta-button";
 import { NavMetaLinkItem } from "./models/bal-nav-meta-link-item";
@@ -277,20 +279,53 @@ export class Nav {
         const block = BEM.block('nav');
         const flyoutBlock = block.element('flyout');
         this.hasRenderedWithFlyoutActive = this.isFlyoutActive;
-        return (h(Host, { key: 'c384e25a9962ec11739b7594114d2ad19fd07937', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: '06cf6bb549c278c98b41ef3d176ac58dfe95bacc', class: {
+        return (h(Host, { key: '6731ced264e30666493c9b66469f8656e3a632ee', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: 'b8b36c81b079f727699a2d037c4f687084791cfa', 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, "aria-label": i18nNavBars[this.language].mainNavigation, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
+            } }, 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", { inverted: true, context: "meta", value: this.activeMetaLinkValue, "aria-label": i18nNavBars[this.language].mainNavigation, 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, "aria-label": i18nNavBars[this.language].navigation }, (_a = this.linkItems
-            .find(item => item.value === this.activeMetaLinkValue)) === null || _a === void 0 ? void 0 : _a.mainLinkItems.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, value: this.activeMenuLinkValue, "aria-label": i18nNavBars[this.language].navigation }, (_a = this.linkItems
+            .find(item => item.value === this.activeMetaLinkValue)) === null || _a === void 0 ? void 0 : _a.mainLinkItems.map((item, index) => item.render({
             flyoutId: `${this.navId}-menu-flyout`,
             onClick: () => this.onMenuBarTabChange(item.value),
-        })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", { navId: this.navId, "aria-label": i18nNavBars[this.language].subNavigation }, 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", { key: '7b17b61ea275f90fb5016d8ec0d26dece26caa4f' }, h("slot", { key: '8ae80d7fdacd29e171f136bfe3ace823290ff068' }))), 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({
+            onTabPress: (ev) => {
+                if (this.isFlyoutActive) {
+                    const isBackwards = ev.shiftKey;
+                    const info = gatherTabInformation({
+                        activeMetaLinkValue: this.activeMetaLinkValue,
+                        activeMenuLinkValue: this.activeMenuLinkValue,
+                        linkItems: this.linkItems,
+                    });
+                    handleTabKeyDown(info, {
+                        el: this.el,
+                        navId: this.navId,
+                        isFlyoutActive: this.isFlyoutActive,
+                        isBackwards,
+                        item,
+                        stopEventBubbling: () => stopEventBubbling(ev),
+                        closeFlyout: () => this.closeFlyout(),
+                    });
+                }
+            },
+        })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", { navId: this.navId, "aria-label": i18nNavBars[this.language].subNavigation, onBalFocusOut: (ev) => {
+                if (this.isFlyoutActive) {
+                    stopEventBubbling(ev);
+                    const info = gatherTabInformation({
+                        activeMetaLinkValue: this.activeMetaLinkValue,
+                        activeMenuLinkValue: this.activeMenuLinkValue,
+                        linkItems: this.linkItems,
+                    });
+                    const isBackwards = isDescendant(this.el, ev.detail.relatedTarget);
+                    handleFlyoutFocusOut(info, {
+                        el: this.el,
+                        isBackwards,
+                    });
+                }
+            } }, 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", { key: '66321dcac9fb856d8bba914283fc1fe0d4626d35' }, h("slot", { key: '1d89fec71d39cc81c491f2422312a733e103f016' }))), 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,
-        })))))) : (''), this.isTouch && this.isFlyoutActive ? (h("bal-nav-meta-bar", { variant: "grey", size: "normal" }, h("bal-stack", { space: "x-small", align: "center" }, this.metaButtons.map(button => button.renderAtTouchBottomMetaBar())))) : ('')));
+        })))))) : (''), this.isTouch && this.isFlyoutActive ? (h("bal-nav-meta-bar", { stayOnTopOfBackdrop: true, variant: "grey", size: "normal" }, h("bal-stack", { space: "x-small", align: "center" }, this.metaButtons.map(button => button.renderAtTouchBottomMetaBar())))) : ('')));
     }
     renderGridLinks(linkItem) {
         var _a, _b;

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

@@ -1,10 +1,11 @@
 import { h } from "@stencil/core";
+import { BEM } from "../../../utils/bem";
+import { isTabKey } from "../../../utils/keyboard";
+import { AccordionButton } from "../components/accordion-button";
+import { OverviewLink } from "../components/overview-link";
 import { NavLinkItem } from "./bal-nav-link-item";
 import { NavSectionLinkItem } from "./bal-nav-section-link-item";
 import { NavServiceLinkItem } from "./bal-nav-service-link-item";
-import { AccordionButton } from "../components/accordion-button";
-import { OverviewLink } from "../components/overview-link";
-import { BEM } from "../../../utils/bem";
 export class NavMenuLinkItem extends NavLinkItem {
     constructor(item, observer) {
         super(item, observer);
@@ -35,9 +36,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", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, href: this.href, rel: this.rel, target: this.target, "no-panel": true }));
+            return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, href: this.href, rel: this.rel, target: this.target, onBalKeyDown: ev => isTabKey(ev.detail) && (context === null || context === void 0 ? void 0 : context.onTabPress(ev.detail)), "no-panel": true }));
         }
-        return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, "no-panel": true, onBalNavigate: ev => {
+        return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, "no-panel": true, onBalKeyDown: ev => isTabKey(ev.detail) && (context === null || context === void 0 ? void 0 : context.onTabPress(ev.detail)), onBalNavigate: ev => {
                 context === null || context === void 0 ? void 0 : context.onClick();
                 if (this.onClick) {
                     this.onClick(ev.detail);

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

@@ -1,14 +1,13 @@
 import { __decorate, __metadata } from "tslib";
-import { h, Host, } from "@stencil/core";
-import { isEscapeKey } from "../../utils/keyboard";
+import { Host, h, } from "@stencil/core";
 import { BEM } from "../../utils/bem";
 import { balBrowser } from "../../utils/browser";
 import { stopEventBubbling } from "../../utils/form-input";
-import { PopoverVariantRenderer, FullscreenVariantRenderer, DrawerVariantRenderer, } from "./variants";
 import { debounce } from "../../utils/helpers";
+import { isEscapeKey } from "../../utils/keyboard";
 import { Logger } from "../../utils/log";
+import { DrawerVariantRenderer, FullscreenVariantRenderer, PopoverVariantRenderer, } from "./variants";
 import { VariantRenderer } from "./variants/variant.renderer";
-import { focusableQueryString } from "../../utils/focus-visible";
 export class Popup {
     constructor() {
         this.popupId = `bal-pu-${popupIds++}`;
@@ -214,7 +213,7 @@ export class Popup {
         const result = await this.getVariantRenderer().dismiss(this);
         this.lastVariantRenderer = undefined;
         if (this.lastFocus && this.lastFocus.focus) {
-            (_a = this.lastFocus) === null || _a === void 0 ? void 0 : _a.focus();
+            (_a = this.lastFocus) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
         }
         return result;
     }
@@ -289,13 +288,9 @@ export class Popup {
         }
     }
     focusFirstDescendant() {
-        const { el } = this;
-        const firstInput = el.querySelector(focusableQueryString);
-        if (firstInput) {
-            firstInput.focus();
-        }
-        else {
-            el.focus();
+        const contentEl = this.contentEl;
+        if (contentEl) {
+            contentEl.focus({ preventScroll: true });
         }
     }
     /**
@@ -310,7 +305,7 @@ export class Popup {
         const innerBlock = block.element('inner');
         const innerHeadBlock = innerBlock.element('head');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { key: '42bff759d5df91ba386b0fef2c115534177b035f', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: 'c66537aede2f557a3ae4e368226f14251177e27a', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: 'e93bf6f131e859126f4861deac80c761bae28d66', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: this.minContainerWidth } }, h("div", { key: 'fcffcfe49ec94f2e7843fdb11428efd2cf6124c5', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '182834344790fb5cb8018a3841b0be36f67132b0', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: '1dca8c0e7d328b04cb73168ddb43ca111f4090f2', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '1675cc733ec0eea4b56e28981a51570528947082' }))))));
+        return (h(Host, { key: '4ad1ef7a26405280b668dc964e36e45b12523830', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: 'd9c7aa58b64ba58bdd73195b4c988698ddac0141', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: 'e1aa90db041a2960e23aae4b4d49c89ebfaa777b', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: this.minContainerWidth } }, h("div", { key: 'b2bccd97aad258a0a3246293a8250be6207f0368', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: 'f44ec75a2d463fd81f46c0c1d2175907747c4346', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: 'bebd41411dcc4960ee1e0ab9e08a6494ede835bd', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content", tabindex: "-1" }, h("slot", { key: '3f06f9d1303b4a785c358954fe79744f4daa019c' }))))));
     }
     static get is() { return "bal-popup"; }
     static get originalStyleUrls() {

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

@@ -213,6 +213,7 @@ export class RadioGroup {
             // space bar on top of a selected radio
             if (['Space'].includes(ev.code)) {
                 this.value = this.allowEmptySelection && this.value !== undefined ? undefined : current.value;
+                this.balChange.emit(this.value);
                 // Prevent browsers from jumping
                 // to the bottom of the screen
                 ev.preventDefault();

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}}: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;border:none;background-color:rgba(0,0,0,0)}.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__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}.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}.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;display:flex;overflow-x:auto}.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}}: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;border:none;background-color:rgba(0,0,0,0)}.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__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}.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}.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;display:flex;overflow-x:auto;overflow-y:hidden}.bal-step-item{width:100%;display:none}.bal-step-item--active{display:block}

package/dist/collection/components/bal-tabs/bal-tab-item/bal-tab-item.js

@@ -59,6 +59,7 @@ export class TabItem {
             passed: false,
             prevent: this.prevent,
             navigate: this.balNavigate,
+            keyDown: this.balKeyDown,
             trackingData: this.inheritAttributes,
             noPanel: this.noPanel,
             aria: this.aria,
@@ -69,10 +70,10 @@ export class TabItem {
     render() {
         const hasPanel = !this.noPanel;
         const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (h(Host, { key: 'fb75a99fe41ccd8bbac4e1d8c0c8bf8a116e3121', id: this.tabPanelID, class: {
+        return (h(Host, { key: 'dff521c2768c6f6363c40f464d7a1c4b755ed56f', id: this.tabPanelID, class: {
                 'bal-tab-item': true,
                 'bal-tab-item--active': this.isActive,
-            }, role: hasPanel ? 'tabpanel' : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', "aria-labelledby": this.tabsId ? `${this.tabsId}-button-${this.value}` : undefined, tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: '5e8e7ce04a22af2fce844c4604c3a3277dbccce5' })));
+            }, role: hasPanel ? 'tabpanel' : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', "aria-labelledby": this.tabsId ? `${this.tabsId}-button-${this.value}` : undefined, tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: '3a98e9f46657921751ba7d625ae45cf0eef46025' })));
     }
     static get is() { return "bal-tab-item"; }
     static get properties() {
@@ -413,6 +414,26 @@ export class TabItem {
                         }
                     }
                 }
+            }, {
+                "method": "balKeyDown",
+                "name": "balKeyDown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the link element has clicked"
+                },
+                "complexType": {
+                    "original": "BalEvents.BalTabItemKeyDownDetail",
+                    "resolved": "KeyboardEvent",
+                    "references": {
+                        "BalEvents": {
+                            "location": "global",
+                            "id": "global::BalEvents"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

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

@@ -1,9 +1,9 @@
 import { h } from "@stencil/core";
+import { ariaBooleanToString } from "../../../utils/aria";
 import { BEM } from "../../../utils/bem";
+import { toKebabCase } from "../../../utils/string";
 import { TabIcon } from "./tab-icon";
 import { TabLabel } from "./tab-label";
-import { toKebabCase } from "../../../utils/string";
-import { ariaBooleanToString } from "../../../utils/aria";
 export const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accordion, isAccordionOpen, isLinkList, inverted, isExpanded, spaceless, clickable, iconPosition, context, onSelectTab, hasSubLabelInGroup, dimInactiveElements, }) => {
     var _a;
     const bemEl = BEM.block('tabs').element('nav').element('item');
@@ -38,7 +38,10 @@ export const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical,
     if (!isLinkList) {
         attrs['tabindex'] = item.active ? '0' : '-1';
     }
-    const renderButton = () => (h(TagType, Object.assign({ id: `${tabsId}-button-${toKebabCase(item.value)}`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('accordion').class(accordion)), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('expanded').class(isExpanded)), bemEl.modifier('spaceless').class(spaceless)), bemEl.modifier('first').class(isFirst)), bemEl.modifier('last').class(isLast)), bemEl.modifier('passed').class(item.passed)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal')), bemEl.modifier(`display-svg`).class(item.svg && item.svg.length > 0)), bemEl.modifier('group-has-sub-label').class(hasSubLabelInGroup)), bemEl.modifier('dim-inactive-elements').class(dimInactiveElements)), { 'bal-focusable': !item.disabled && !item.invisible }), draggable: false, "data-tabs": tabsId, "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-tabs-item", "aria-selected": !isTabButton ? undefined : item.active ? 'true' : 'false' }, attrs, { onClick: (ev) => onSelectTab(ev, item) }), item.icon || item.svg ? (h(TabIcon, { accordion: false, item: item, isMobile: isMobile, hasBubble: hasIconBubble, inverted: inverted })) : (''), h(TabLabel, { item: item, isMobile: isMobile, isVertical: isVertical, isExpanded: isExpanded, hasBubble: hasLabelBubble, inverted: inverted, context: context }), accordion && !item.href ? (h(TabIcon, { accordion: accordion, isAccordionOpen: isAccordionOpen, item: item, isMobile: isMobile, hasBubble: hasAccordionIconBubble, inverted: inverted })) : ('')));
+    const renderButton = () => (h(TagType, Object.assign({ id: `${tabsId}-button-${toKebabCase(item.value)}`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('accordion').class(accordion)), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('expanded').class(isExpanded)), bemEl.modifier('spaceless').class(spaceless)), bemEl.modifier('first').class(isFirst)), bemEl.modifier('last').class(isLast)), bemEl.modifier('passed').class(item.passed)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal')), bemEl.modifier(`display-svg`).class(item.svg && item.svg.length > 0)), bemEl.modifier('group-has-sub-label').class(hasSubLabelInGroup)), bemEl.modifier('dim-inactive-elements').class(dimInactiveElements)), { 'bal-focusable': !item.disabled && !item.invisible }), draggable: false, "data-tabs": tabsId, "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-tabs-item", "aria-selected": !isTabButton ? undefined : item.active ? 'true' : 'false' }, attrs, { onClick: (ev) => onSelectTab(ev, item), onKeyDown: (ev) => {
+            var _a;
+            (_a = item.keyDown) === null || _a === void 0 ? void 0 : _a.emit(ev);
+        } }), item.icon || item.svg ? (h(TabIcon, { accordion: false, item: item, isMobile: isMobile, hasBubble: hasIconBubble, inverted: inverted })) : (''), h(TabLabel, { item: item, isMobile: isMobile, isVertical: isVertical, isExpanded: isExpanded, hasBubble: hasLabelBubble, inverted: inverted, context: context }), accordion && !item.href ? (h(TabIcon, { accordion: accordion, isAccordionOpen: isAccordionOpen, item: item, isMobile: isMobile, hasBubble: hasAccordionIconBubble, inverted: inverted })) : ('')));
     if (isLinkList) {
         return h("li", null, renderButton());
     }