@baloise/ds-core 16.3.0 → 16.4.0

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

@@ -2,10 +2,10 @@ import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 import { StepIcon } from "./step-icon";
 import { StepLabel } from "./step-label";
-export const StepButton = ({ item, isMobile, clickable, onSelectTab }) => {
+export const StepButton = ({ item, color, isMobile, clickable, onSelectTab }) => {
     const bemEl = BEM.block('steps').element('nav').element('item');
     if (item.invisible) {
         return;
     }
-    return (h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, href: item.href === '' ? 'javascript:;' : item.href, target: item.target, onClick: (ev) => onSelectTab(ev, item) }, h(StepIcon, { item: item, isMobile: isMobile }), h(StepLabel, { item: item })));
+    return (h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`color-${color}`).class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, href: item.href === '' ? 'javascript:;' : item.href, target: item.target, onClick: (ev) => onSelectTab(ev, item) }, h(StepIcon, { item: item, isMobile: isMobile }), h(StepLabel, { item: item })));
 };

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

@@ -15,6 +15,8 @@ export class TabItem {
         this.invisible = false;
         this.prevent = false;
         this.icon = undefined;
+        this.noPanel = false;
+        this.aria = undefined;
     }
     componentWillLoad() {
         this.inheritAttributes = inheritTrackingAttributes(this.el);
@@ -47,13 +49,17 @@ export class TabItem {
             prevent: this.prevent,
             navigate: this.balNavigate,
             trackingData: this.inheritAttributes,
+            noPanel: this.noPanel,
+            aria: this.aria,
         };
     }
     render() {
-        return (h(Host, { id: this.tabPanelID, role: "tabpanel", "aria-label": this.label, "aria-hidden": !this.isActive ? 'true' : 'false', tabindex: this.isActive ? '0' : '-1', class: {
+        const hasPanel = !this.noPanel;
+        const noPanelOrInactive = !this.isActive || this.noPanel;
+        return (h(Host, { id: this.tabPanelID, class: {
                 'bal-tab-item': true,
                 'bal-tab-item--active': this.isActive,
-            } }, h("slot", null)));
+            }, role: hasPanel ? 'tabpanel' : undefined, "aria-label": hasPanel ? this.label : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", null)));
     }
     static get is() { return "bal-tab-item"; }
     static get properties() {
@@ -242,6 +248,45 @@ export class TabItem {
                 "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
+            },
+            "noPanel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the tab does not have a panel"
+                },
+                "attribute": "no-panel",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "aria": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalTabItemAria",
+                    "resolved": "{ controls?: string; }",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A11y attributes for the native tab element."
+                },
+                "defaultValue": "undefined"
             }
         };
     }

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

@@ -1,18 +1,19 @@
 import { __decorate, __metadata } from "tslib";
 import { Host, h, } from "@stencil/core";
 import { areArraysEqual } from "@baloise/web-app-utils";
-import { debounceEvent, deepReady, hasParent, isChildOfEventTarget, isDescendant, raf, transitionEndAsync, } from "../../utils/helpers";
+import { debounceEvent, deepReady, hasParent, isChildOfEventTarget, isDescendant, raf, transitionEndAsync, waitAfterFramePaint, } from "../../utils/helpers";
 import { ListenToConfig } from "../../utils/config";
 import { BEM } from "../../utils/bem";
 import { Logger } from "../../utils/log";
 import { newBalTabOption } from "./bal-tab.util";
 import { stopEventBubbling } from "../../utils/form-input";
 import { TabSelect } from "./components/tab-select";
-import { TabNav } from "./components/tab-nav";
 import { getComputedPadding } from "../../utils/style";
 import { ListenToBreakpoints, balBreakpoints } from "../../utils/breakpoints";
 import { ListenToMutation } from "../../utils/mutation";
 import { ListenToResize } from "../../utils/resize";
+import { TabNav } from "./components/tab-nav";
+import { toKebabCase } from "../../utils/string";
 export class Tabs {
     constructor() {
         this.tabsId = `bal-tabs-${TabsIds++}`;
@@ -34,8 +35,8 @@ export class Tabs {
                 this.store = newStore;
             }
             else if (!this.optionalTabSelection && !this.accordion && this.value === undefined && this.store.length > 0) {
-                const firstStep = this.store[0];
-                this.value = firstStep.value;
+                const firstTab = this.store[0];
+                this.value = firstTab.value;
             }
         };
         this.setActiveItem = () => {
@@ -47,7 +48,7 @@ export class Tabs {
         };
         this.setActiveContent = () => {
             if (this.options.length === 0) {
-                this.items.forEach(item => item.setActive(this.isActive(item)));
+                this.items.forEach(item => item.setActive(this.isTabActive(item)));
             }
         };
         this.getLineSize = (element, padding) => {
@@ -242,25 +243,26 @@ export class Tabs {
                 console.warn('[WARN] - Could not read tab options');
             }
         };
-        this.onSelectTab = async (ev, step) => {
-            if (step.prevent || step.disabled || !this.clickable) {
+        this.onSelectTab = async (ev, tab) => {
+            if (tab.prevent || tab.disabled || !this.clickable) {
                 stopEventBubbling(ev);
             }
-            if (!step.disabled && this.clickable) {
+            if (!tab.disabled && this.clickable) {
                 if (this.accordion) {
-                    if (step.value === this.value) {
+                    if (tab.value === this.value) {
                         this.toggleAccordionState();
                     }
                     else {
                         this.expandAccordion();
                     }
                 }
-                if (step.navigate) {
-                    step.navigate.emit(ev);
+                if (tab.navigate) {
+                    tab.navigate.emit(ev);
                 }
-                if (step.value !== this.value) {
-                    this.balChange.emit(step.value);
-                    await this.select(step);
+                if (tab.value !== this.value) {
+                    this.balChange.emit(tab.value);
+                    await this.select(tab);
+                    await this.focus(tab);
                 }
             }
         };
@@ -358,6 +360,26 @@ export class Tabs {
         isChildOfEventTarget(ev, this.el, () => this.animateLine());
         this.isUsedInNavbar(ev);
     }
+    listenToKeyDown(ev) {
+        if (this.isTabList) {
+            if (this.vertical !== false) {
+                if (ev.code === 'ArrowDown') {
+                    this.tabListSelectNext(ev);
+                }
+                else if (ev.code === 'ArrowUp') {
+                    this.tabListSelectPrevious(ev);
+                }
+            }
+            else {
+                if (ev.code === 'ArrowRight') {
+                    this.tabListSelectNext(ev);
+                }
+                else if (ev.code === 'ArrowLeft') {
+                    this.tabListSelectPrevious(ev);
+                }
+            }
+        }
+    }
     isUsedInNavbar(ev) {
         const target = ev.target;
         const parentNavbar = target.closest('bal-navbar');
@@ -409,11 +431,17 @@ export class Tabs {
      * PRIVATE METHODS
      * ------------------------------------------------------
      */
+    get isTabList() {
+        return this.store.filter(tab => !!tab.href).length === 0;
+    }
     get items() {
         return Array.from(this.el.querySelectorAll(`#${this.tabsId} > bal-tab-item`));
     }
-    isActive(step) {
-        return step.value === this.value;
+    isTabActive(tab) {
+        return tab.value === this.value;
+    }
+    isTabVisible(tab) {
+        return !tab.hidden;
     }
     parseVertical() {
         if (this.vertical === 'true' || this.vertical === '') {
@@ -451,6 +479,73 @@ export class Tabs {
     getCarouselElement() {
         return this.el.querySelector(`#${this.tabsId}-carousel`);
     }
+    /**
+     * PRIVATE Tab Navigation with Arrow Keys
+     * ------------------------------------------------------
+     */
+    findNextTab(previous = false) {
+        const indexOfActive = this.store.findIndex(t => this.isTabActive(t));
+        let tabs = this.store.map((tab, index) => ({
+            index,
+            visible: !tab.hidden && !tab.disabled,
+        }));
+        if (previous) {
+            tabs = tabs.reverse();
+        }
+        const visibleTabs = tabs.filter(t => t.visible).map(t => t.index);
+        const findNextTabReducer = (acc, index) => {
+            // found a new higher index need to break out
+            if (acc > indexOfActive) {
+                return acc;
+            }
+            if (index <= acc) {
+                return acc;
+            }
+            else {
+                return index;
+            }
+        };
+        const findPreviousTabReducer = (acc, index) => {
+            // found a new lower index need to break out
+            if (acc < indexOfActive) {
+                return acc;
+            }
+            if (index >= acc) {
+                return acc;
+            }
+            else {
+                return index;
+            }
+        };
+        const reducer = previous ? findPreviousTabReducer : findNextTabReducer;
+        const nextIndex = visibleTabs.reduce((acc, value) => reducer(acc, value), indexOfActive);
+        return this.store[nextIndex];
+    }
+    findPreviousTab() {
+        return this.findNextTab(true);
+    }
+    tabListSelectNext(ev) {
+        const nextTab = this.findNextTab();
+        if (nextTab) {
+            this.onSelectTab(ev, nextTab);
+        }
+    }
+    tabListSelectPrevious(ev) {
+        const previousTab = this.findPreviousTab();
+        if (previousTab) {
+            this.onSelectTab(ev, previousTab);
+        }
+    }
+    async focus(tab) {
+        await waitAfterFramePaint();
+        const hasKeyboardFocus = this.el.querySelector(`button.bal-focused`) !== null;
+        if (hasKeyboardFocus) {
+            const tabEl = this.el.querySelector(`#${this.tabsId}-button-${toKebabCase(tab.value)}`);
+            if (tabEl) {
+                tabEl.focus({ preventScroll: true });
+            }
+        }
+    }
     /**
      * RENDER
      * ------------------------------------------------------
@@ -467,13 +562,15 @@ export class Tabs {
         const tabs = this.store.map(tab => (Object.assign(Object.assign({}, tab), { active: tab.value === this.value })));
         const expanded = this.accordionState === 4 /* AccordionState.Expanded */ || this.accordionState === 8 /* AccordionState.Expanding */;
         const contentPart = expanded ? 'content expanded' : 'content';
+        const valueExists = this.value !== undefined && !!this.store.find(o => o.value === this.value);
+        const isLinkList = !this.isTabList;
         return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": this.store
-                .filter(t => this.isActive(t))
+                .filter(t => this.isTabActive(t))
                 .map(t => t.value)
                 .join(','), "data-label": this.store
-                .filter(t => this.isActive(t))
+                .filter(t => this.isTabActive(t))
                 .map(t => t.label)
-                .join(',') }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { items: tabs, tabsId: this.tabsId, onSelectTab: this.onSelectTab, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: this.value !== undefined, inverted: isInverted, animated: this.animated, context: this.context, border: this.border, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, hasCarousel: hasCarousel, iconPosition: this.iconPosition, verticalColSize: this.verticalColSize })), h("div", { part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, h("div", { id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", null)))));
+                .join(',') }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, inverted: isInverted, animated: this.animated, context: this.context, border: this.border, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, hasCarousel: hasCarousel, iconPosition: this.iconPosition, verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab })), h("div", { part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, h("div", { id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", null)))));
     }
     static get is() { return "bal-tabs"; }
     static get originalStyleUrls() {
@@ -586,7 +683,7 @@ export class Tabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Steps can be passed as a property or through HTML markup."
+                    "text": "Tabs can be passed as a property or through HTML markup."
                 },
                 "defaultValue": "[]"
             },
@@ -683,7 +780,7 @@ export class Tabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true` the tabs or steps can be clicked."
+                    "text": "If `true` the tabs or tabs can be clicked."
                 },
                 "attribute": "clickable",
                 "reflect": false,
@@ -1072,6 +1169,12 @@ export class Tabs {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "listenToKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }

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

@@ -2,7 +2,9 @@ import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 import { TabIcon } from "./tab-icon";
 import { TabLabel } from "./tab-label";
-export const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accordion, isAccordionOpen, inverted, expanded, spaceless, clickable, iconPosition, context, onSelectTab, }) => {
+import { toKebabCase } from "../../../utils/string";
+export const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accordion, isAccordionOpen, isLinkList, inverted, expanded, spaceless, clickable, iconPosition, context, onSelectTab, }) => {
+    var _a;
     const bemEl = BEM.block('tabs').element('nav').element('item');
     if (item.invisible) {
         return;
@@ -15,13 +17,23 @@ export const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical,
     const hasLabelBubble = (!hasIcon && hasBubble && !accordion) ||
         (hasBubble && !isMobile && iconPosition === 'horizontal' && !accordion) ||
         (hasBubble && isVertical && !accordion);
-    const TagType = item.href === undefined || item.href === '' ? 'button' : 'a';
-    const attrs = TagType === 'button'
-        ? { type: 'button' }
+    const isTabButton = item.href === undefined || item.href === '';
+    const TagType = isTabButton ? 'button' : 'a';
+    const attrs = isTabButton
+        ? {
+            'type': 'button',
+            'role': 'tab',
+            'aria-controls': ((_a = item.aria) === null || _a === void 0 ? void 0 : _a.controls) || item.tabPanelID || undefined,
+            'aria-expanded': item.active ? 'true' : 'false',
+            'aria-disabled': `${item.disabled}`,
+            'aria-label': item.label,
+        }
         : {
             href: item.href,
             target: item.target,
         };
-    return (h(TagType, Object.assign({ id: `${tabsId}-button-${TabButtonIds++}`, role: "tab", 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({}, 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(expanded)), 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')), { '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": item.active ? 'true' : 'false', "aria-disabled": `${item.disabled}`, "aria-label": item.label, "aria-controls": item.tabPanelID }, attrs, { onClick: (ev) => onSelectTab(ev, item) }), item.icon ? (h(TabIcon, { accordion: false, item: item, isMobile: isMobile, hasBubble: hasIconBubble, inverted: inverted })) : (''), h(TabLabel, { item: item, isMobile: isMobile, isVertical: isVertical, 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) {
+        attrs['tabindex'] = item.active ? '0' : '-1';
+    }
+    return (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({}, 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(expanded)), 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')), { '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 ? (h(TabIcon, { accordion: false, item: item, isMobile: isMobile, hasBubble: hasIconBubble, inverted: inverted })) : (''), h(TabLabel, { item: item, isMobile: isMobile, isVertical: isVertical, hasBubble: hasLabelBubble, inverted: inverted, context: context }), accordion && !item.href ? (h(TabIcon, { accordion: accordion, isAccordionOpen: isAccordionOpen, item: item, isMobile: isMobile, hasBubble: hasAccordionIconBubble, inverted: inverted })) : ('')));
 };
-let TabButtonIds = 0;

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

@@ -2,10 +2,10 @@ import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 import { stopEventBubbling } from "../../../utils/form-input";
 import { TabButton } from "./tab-button";
-export const TabNav = ({ items, tabsId, hasCarousel, isVertical, inNavbar, isMobile, isTouch, lineActive, border, accordion, isAccordionOpen, inverted, clickable, animated, spaceless, expanded, verticalColSize, iconPosition, context, onSelectTab, }) => {
+export const TabNav = ({ items, tabsId, hasCarousel, isVertical, inNavbar, isMobile, isTouch, lineActive, isLinkList, border, accordion, isAccordionOpen, inverted, clickable, animated, spaceless, expanded, verticalColSize, iconPosition, context, onSelectTab, }) => {
     const bemEl = BEM.block('tabs').element('nav');
     const tabs = items.filter(tab => !tab.invisible);
     const isFullHeight = inNavbar && !isTouch;
-    const Button = ({ item, index }) => (h(TabButton, { item: item, tabsId: tabsId, isFirst: index === 0, isLast: index === tabs.length - 1, isMobile: isMobile, isVertical: isVertical, iconPosition: iconPosition, spaceless: spaceless, inverted: inverted, accordion: accordion, isAccordionOpen: isAccordionOpen, context: context, expanded: expanded, clickable: clickable && !item.disabled, onSelectTab: onSelectTab }));
-    return (h("div", { role: "tablist", id: `${tabsId}-nav`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`full-height`).class(isFullHeight)), bemEl.modifier(`border`).class(border)), bemEl.modifier(`animated`).class(animated)), bemEl.modifier(`vertical`).class(isVertical)), bemEl.modifier(`expanded`).class(expanded && !isVertical)), bemEl.modifier(`vertical-col-${verticalColSize}`).class(isVertical)) }, hasCarousel ? (h("bal-carousel", { id: `${tabsId}-carousel`, class: Object.assign({}, bemEl.element('carousel').class()), fullHeight: isFullHeight, border: border, inverted: inverted, controls: "small", "items-per-view": "auto", steps: 3, onBalChange: stopEventBubbling }, tabs.map((tab, index) => (h("bal-carousel-item", { key: tab.value, class: Object.assign(Object.assign({}, bemEl.element('carousel').element('item').class()), bemEl.element('carousel').element('item').modifier('expanded').class(expanded)) }, h(Button, { item: tab, index: index })))), h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) }))) : (tabs.map((tab, index) => h(Button, { item: tab, index: index }))), !hasCarousel ? (h("div", { id: `${tabsId}-border`, class: Object.assign(Object.assign(Object.assign({}, bemEl.element('border').class()), bemEl.element('border').modifier(`inverted`).class(inverted)), bemEl.element('border').modifier(`vertical`).class(isVertical)) })) : (''), !hasCarousel ? (h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) })) : ('')));
+    const Button = ({ item, index }) => (h(TabButton, { item: item, isLinkList: isLinkList, tabsId: tabsId, isFirst: index === 0, isLast: index === tabs.length - 1, isMobile: isMobile, isVertical: isVertical, iconPosition: iconPosition, spaceless: spaceless, inverted: inverted, accordion: accordion, isAccordionOpen: isAccordionOpen, context: context, expanded: expanded, clickable: clickable && !item.disabled, onSelectTab: onSelectTab }));
+    return (h("div", { id: `${tabsId}-nav`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`full-height`).class(isFullHeight)), bemEl.modifier(`border`).class(border)), bemEl.modifier(`animated`).class(animated)), bemEl.modifier(`vertical`).class(isVertical)), bemEl.modifier(`expanded`).class(expanded && !isVertical)), bemEl.modifier(`vertical-col-${verticalColSize}`).class(isVertical)) }, hasCarousel ? (h("bal-carousel", { id: `${tabsId}-carousel`, class: Object.assign({}, bemEl.element('carousel').class()), htmlRole: 'tablist', fullHeight: isFullHeight, border: border, inverted: inverted, controls: "small", "items-per-view": "auto", steps: 3, onBalChange: stopEventBubbling }, tabs.map((tab, index) => (h("bal-carousel-item", { key: tab.value, htmlRole: '', class: Object.assign(Object.assign({}, bemEl.element('carousel').element('item').class()), bemEl.element('carousel').element('item').modifier('expanded').class(expanded)) }, h(Button, { item: tab, index: index })))), h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) }))) : (tabs.map((tab, index) => h(Button, { item: tab, index: index }))), !hasCarousel ? (h("div", { id: `${tabsId}-border`, class: Object.assign(Object.assign(Object.assign({}, bemEl.element('border').class()), bemEl.element('border').modifier(`inverted`).class(inverted)), bemEl.element('border').modifier(`vertical`).class(isVertical)) })) : (''), !hasCarousel ? (h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) })) : ('')));
 };

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

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

package/dist/collection/utils/date/date.spec.js

@@ -70,7 +70,6 @@ describe('balDate', () => {
                 const year = new Date().getFullYear();
                 const cutoff = year + 10;
                 const cutoffTwoDigits = cutoff % 100;
-                console.log('cutoff', cutoff);
                 expect(BalDate.fromAnyFormat(`1.1.${cutoffTwoDigits}`).toISODate()).toStrictEqual(`20${cutoffTwoDigits}-01-01`);
                 expect(BalDate.fromAnyFormat(`1.1.${cutoffTwoDigits - 1}`).toISODate()).toStrictEqual(`20${cutoffTwoDigits - 1}-01-01`);
                 expect(BalDate.fromAnyFormat(`1.1.${cutoffTwoDigits + 1}`).toISODate()).toStrictEqual(`19${cutoffTwoDigits + 1}-01-01`);

package/dist/collection/utils/dropdown/option.js

@@ -33,12 +33,15 @@ export class DropdownOptionUtil {
         this.component.rawOptions = this.component.options.map(mapOption);
         await this.component.valueUtil.updateInputContent();
     }
-    async listenToOptionChange(_ev) {
+    async listenToOptionChange(ev) {
         var _a;
         const newSelectedValues = (await ((_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.getSelectedValues())) || [];
         this.component.valueUtil.updateRawValueBySelection(newSelectedValues);
         if (!this.component.multiple) {
             this.component.popupUtil.collapseList();
+            if (this.component.hasFocus) {
+                this.component.balBlur.emit(new FocusEvent('blur', { relatedTarget: this.component.el }));
+            }
         }
     }
 }

package/dist/collection/utils/dropdown/popup.js

@@ -26,13 +26,13 @@ export class DropdownPopupUtil {
             }
         }
     }
-    expandList() {
+    async expandList() {
         var _a;
         if (this.component.panelEl) {
             this.component.panelCleanup = autoUpdate(this.component.el, this.component.panelEl, this.updatePanelPosition(this.component.el, this.component.panelEl));
         }
         this.component.isExpanded = true;
-        (_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.focusFirst();
+        await ((_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.focusSelected());
     }
     collapseList() {
         var _a;

package/dist/collection/utils/string.js

@@ -0,0 +1,10 @@
+export const toKebabCase = (string) => {
+    if (typeof string === 'string') {
+        return string
+            .replace(/([a-z])([0-9])/g, '$1-$2')
+            .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+            .replace(/[\s_]+/g, '-')
+            .toLowerCase();
+    }
+    return '';
+};

package/dist/collection/utils/string.spec.js

@@ -0,0 +1,24 @@
+import { toKebabCase } from "./string";
+describe('string', () => {
+    describe('toKebabCase', () => {
+        test('should format non string values correctly', () => {
+            expect(toKebabCase('')).toBe('');
+            expect(toKebabCase(undefined)).toBe('');
+            expect(toKebabCase(null)).toBe('');
+            expect(toKebabCase([])).toBe('');
+            expect(toKebabCase({})).toBe('');
+            expect(toKebabCase(7)).toBe('');
+            expect(toKebabCase(78)).toBe('');
+            expect(toKebabCase(true)).toBe('');
+            expect(toKebabCase(false)).toBe('');
+        });
+        test('should format string values correctly', () => {
+            expect(toKebabCase('HelloWorld')).toBe('hello-world');
+            expect(toKebabCase('Hello4World')).toBe('hello-4-world');
+            expect(toKebabCase('Hello44World')).toBe('hello-44-world');
+            expect(toKebabCase('4World')).toBe('4-world');
+            expect(toKebabCase('4World4')).toBe('4-world-4');
+            expect(toKebabCase('World')).toBe('world');
+        });
+    });
+});

package/dist/esm/bal-accordion_4.entry.js

@@ -5,9 +5,12 @@ import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import { s as stopEventBubbling } from './form-input-28a08ec5.js';
+import { h as isEnterKey, e as isSpaceKey } from './index.esm-83b1f9c4.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
+import './index-82aff103.js';
+import './_commonjsHelpers-1c8beb5f.js';
 
 const balAccordionCss = ".bal-accordion{display:block;position:relative;width:100%}.bal-accordion--card-v1,.bal-accordion--card-v2{margin-top:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion--card-v1,.bal-accordion--card-v2{margin-top:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion--card-v1,.bal-accordion--card-v2{margin-top:var(--bal-space-medium-desktop)}}.bal-accordion--card-v2{padding-left:var(--bal-space-medium);padding-right:var(--bal-space-medium);padding-bottom:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion--card-v2{padding-left:var(--bal-space-medium-tablet);padding-right:var(--bal-space-medium-tablet);padding-bottom:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion--card-v2{padding-left:var(--bal-space-medium-desktop);padding-right:var(--bal-space-medium-desktop);padding-bottom:var(--bal-space-medium-desktop)}}.bal-accordion__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.bal-accordion__trigger--card{margin-left:var(--bal-space-medium);margin-right:var(--bal-space-medium);margin-bottom:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion__trigger--card{margin-left:var(--bal-space-medium-tablet);margin-right:var(--bal-space-medium-tablet);margin-bottom:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion__trigger--card{margin-left:var(--bal-space-medium-desktop);margin-right:var(--bal-space-medium-desktop);margin-bottom:var(--bal-space-medium-desktop)}}.bal-accordion__content--card{margin-left:var(--bal-space-medium);margin-right:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion__content--card{margin-left:var(--bal-space-medium-tablet);margin-right:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion__content--card{margin-left:var(--bal-space-medium-desktop);margin-right:var(--bal-space-medium-desktop)}}.bal-accordion--animated{-webkit-transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-accordion--animated .bal-accordion__content{-webkit-transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-accordion__content{overflow:hidden;will-change:max-height}.bal-accordion--collapsing .bal-accordion__content{max-height:0 !important}.bal-accordion--collapsed .bal-accordion__content{display:none}.bal-accordion--expanding .bal-accordion__content{max-height:0}@media (prefers-reduced-motion: reduce){.bal-accordion,.bal-accordion__content{-webkit-transition:none !important;transition:none !important}}";
 const BalAccordionStyle0 = balAccordionCss;
@@ -359,7 +362,7 @@ __decorate([
 let accordionDetailIds = 0;
 AccordionDetails.style = BalAccordionDetailsStyle0;
 
-const balAccordionSummaryCss = ".bal-accordion__summary{position:static}.bal-accordion__summary--trigger{cursor:pointer}";
+const balAccordionSummaryCss = "@media (hover: hover)and (pointer: fine){.bal-accordion__summary--trigger:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}.bal-accordion__summary{position:static;display:block}.bal-accordion__summary--trigger{cursor:pointer}";
 const BalAccordionSummaryStyle0 = balAccordionSummaryCss;
 
 const AccordionSummary = class {
@@ -380,6 +383,13 @@ const AccordionSummary = class {
             stopEventBubbling(ev);
             (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.humanToggle();
         };
+        this.onKeyDown = (ev) => {
+            var _a;
+            if (isEnterKey(ev) || isSpaceKey(ev)) {
+                stopEventBubbling(ev);
+                (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.humanToggle();
+            }
+        };
         this.parentAccordionId = undefined;
         this.trigger = false;
         this.active = false;
@@ -428,12 +438,14 @@ const AccordionSummary = class {
             attributes = {
                 'aria-controls': `${this.parentAccordionId}-details-content`,
                 'role': 'button',
+                'tabindex': 0,
                 'part': buttonPart,
                 'data-testid': 'bal-accordion-button',
                 'onClick': this.onClick,
+                'onKeyDown': this.onKeyDown,
             };
         }
-        return (h(Host, Object.assign({ id: id, class: Object.assign(Object.assign({}, block.class()), block.modifier('trigger').class(this.trigger)) }, attributes, { "data-testid": "bal-accordion-summary" })));
+        return (h(Host, Object.assign({ id: id, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('trigger').class(this.trigger)), block.modifier('inner-trigger').class(!this.trigger)), { 'bal-focused': this.trigger }) }, attributes, { "data-testid": "bal-accordion-summary" })));
     }
     get el() { return getElement(this); }
 };
@@ -446,7 +458,7 @@ __decorate([
 let accordionSummaryIds = 0;
 AccordionSummary.style = BalAccordionSummaryStyle0;
 
-const balAccordionTriggerCss = ".bal-accordion__trigger{position:static}.bal-accordion__trigger__button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background:rgba(0,0,0,0);border:none;height:3rem;width:3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}";
+const balAccordionTriggerCss = "@media (hover: hover)and (pointer: fine){.bal-accordion__trigger__button.bal-focused:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}.bal-accordion__trigger{position:static;display:block}.bal-accordion__trigger__button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background:rgba(0,0,0,0);border:none;height:3rem;width:3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}";
 const BalAccordionTriggerStyle0 = balAccordionTriggerCss;
 
 const AccordionTrigger = class {
@@ -499,6 +511,10 @@ const AccordionTrigger = class {
         var _a;
         return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('bal-accordion')) || null;
     }
+    get parentAccordionSummaryElement() {
+        var _a;
+        return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('bal-accordion-summary')) || null;
+    }
     /**
      * RENDER
      * ------------------------------------------------------
@@ -515,7 +531,16 @@ const AccordionTrigger = class {
         }
         const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
         const buttonPart = expanded ? 'button expanded' : 'button';
-        return (h(Host, { id: id, class: Object.assign({}, block.class()) }, this.button ? (h("bal-button", { id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: true, icon: icon, iconTurn: turn, color: this.color, size: this.size, onClick: this.onClick }, label)) : (h("button", { class: Object.assign({}, block.element('button').class()), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-label": "accordion trigger", part: buttonPart, "data-testid": "bal-accordion-trigger", onClick: this.onClick }, h("bal-icon", { turn: turn, name: icon })))));
+        const parentSummaryEl = this.parentAccordionSummaryElement;
+        let triggerAttributes = {
+            tabindex: -1,
+        };
+        if (parentSummaryEl && !parentSummaryEl.trigger) {
+            triggerAttributes = {
+                tabindex: 0,
+            };
+        }
+        return (h(Host, { id: id, class: Object.assign({}, block.class()) }, this.button ? (h("bal-button", { id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: true, icon: icon, iconTurn: turn, color: this.color, size: this.size, onClick: this.onClick }, label)) : (h("button", Object.assign({ class: Object.assign(Object.assign({}, block.element('button').class()), { 'bal-focused': parentSummaryEl && !parentSummaryEl.trigger }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-label": "accordion trigger", part: buttonPart, "data-testid": "bal-accordion-trigger", onClick: this.onClick }, triggerAttributes), h("bal-icon", { turn: turn, name: icon })))));
     }
     get el() { return getElement(this); }
 };