@baloise/ds-core 16.3.0 → 16.4.0

package/README.md

@@ -30,7 +30,7 @@
     Documentation
   </a>
   <span> · </span>
-  <a href="https://design.baloise.dev/?path=/docs/contributing--documentation">Contribute</a>
+  <a href="https://design.baloise.dev/?path=/docs/contributing-overview--documentation">Contribute</a>
   <span> · </span>
   <a href="https://github.com/baloise/design-system/blob/main/CHANGELOG.md">Changelog</a>
 </h3>

package/components/bal-accordion-summary.js

@@ -3,8 +3,9 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { s as stopEventBubbling } from './form-input.js';
+import { i as isEnterKey, a as isSpaceKey } from './index.esm.js';
 
-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 = /*@__PURE__*/ proxyCustomElement(class AccordionSummary extends HTMLElement {
@@ -26,6 +27,13 @@ const AccordionSummary = /*@__PURE__*/ proxyCustomElement(class AccordionSummary
             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;
@@ -74,12 +82,14 @@ const AccordionSummary = /*@__PURE__*/ proxyCustomElement(class AccordionSummary
             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 this; }
     static get style() { return BalAccordionSummaryStyle0; }

package/components/bal-accordion-trigger.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$4 } from './bal-button2.js';
 import { d as defineCustomElement$3 } from './bal-icon2.js';
 import { d as defineCustomElement$2 } from './bal-spinner2.js';
 
-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 = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger extends HTMLElement {
@@ -61,6 +61,10 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
         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
      * ------------------------------------------------------
@@ -77,7 +81,16 @@ const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger
         }
         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 this; }
     static get style() { return BalAccordionTriggerStyle0; }

package/components/bal-carousel-item2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { B as BEM } from './bem.js';
+import { b as waitAfterFramePaint } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 
 const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends HTMLElement {
@@ -23,6 +24,7 @@ const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends
         };
         this.src = undefined;
         this.label = '';
+        this.htmlRole = 'listitem';
         this.elementType = 'button';
         this.name = '';
         this.value = '';
@@ -41,12 +43,18 @@ const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends
             label: this.label,
         };
     }
+    async setFocus() {
+        await waitAfterFramePaint();
+        if (this.buttonEl) {
+            this.buttonEl.focus();
+        }
+    }
     render() {
         const block = BEM.block('carousel');
         const itemEl = block.element('item');
         const isProduct = !!this.color && !!this.label;
         if (!isProduct) {
-            return (h(Host, { class: Object.assign({}, itemEl.class()) }, this.src !== undefined ? (h("img", Object.assign({ draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), h("slot", null)));
+            return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, this.src !== undefined ? (h("img", Object.assign({ draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), h("slot", null)));
         }
         const button = itemEl.element('button');
         const image = button.element('image');
@@ -61,12 +69,13 @@ const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends
                 rel,
                 target,
             };
-        return (h(Host, { class: Object.assign({}, itemEl.class()) }, h(TagType, Object.assign({}, attrs, { class: Object.assign(Object.assign({}, button.class()), button.modifier(`color-${this.color}`).class()), part: "native", onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }), this.src !== undefined ? (h("img", Object.assign({ class: Object.assign({}, image.class()), loading: "lazy", draggable: false, onDragStart: () => false, src: this.src }, this.imageInheritAttributes))) : (''), this.label !== undefined ? h("span", { class: Object.assign({}, label.class()) }, this.label) : '', h("slot", null))));
+        return (h(Host, { role: this.htmlRole, class: Object.assign({}, itemEl.class()) }, h(TagType, Object.assign({}, attrs, { class: Object.assign(Object.assign({}, button.class()), button.modifier(`color-${this.color}`).class()), part: "native", onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, ref: el => (this.buttonEl = el) }), this.src !== undefined ? (h("img", Object.assign({ class: Object.assign({}, image.class()), loading: "lazy", draggable: false, onDragStart: () => false, "aria-hidden": "true", src: this.src }, this.imageInheritAttributes))) : (''), this.label !== undefined ? h("span", { class: Object.assign({}, label.class()) }, this.label) : '', h("slot", null))));
     }
     get el() { return this; }
 }, [4, "bal-carousel-item", {
         "src": [513],
         "label": [513],
+        "htmlRole": [1, "html-role"],
         "elementType": [1, "element-type"],
         "name": [513],
         "value": [520],
@@ -75,7 +84,8 @@ const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends
         "rel": [1],
         "download": [1],
         "color": [1],
-        "getData": [64]
+        "getData": [64],
+        "setFocus": [64]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/components/bal-carousel2.js

@@ -18,15 +18,15 @@ import { b as balBreakpoints } from './breakpoints.subject.js';
 import { d as defaultConfig } from './config.default.js';
 import { L as ListenToConfig } from './config.decorator.js';
 
-const TabControl = ({ value, items, onControlChange }) => {
+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)))))));
+            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)))))));
 };
 
-const DotControl = ({ value, items, onControlChange }) => {
+const DotControl = ({ value, items, containerId, onControlChange }) => {
     const block = BEM.block('carousel');
     const controls = block.element('controls');
     const onChange = (ev) => {
@@ -40,25 +40,25 @@ 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 })));
+        h("bal-pagination", { "aria-controls": containerId, interface: "small", value: value + 1, totalPages: items.length, onBalChange: onChange })));
 };
 
-const LargeControl = ({ isFirst, isLast, inverted, areControlsHidden, onNextClick, onPreviousClick, leftControlTitle, rightControlTitle, }) => {
+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 })));
+        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 })));
 };
 
-const SmallControl = ({ isFirst, isLast, inverted, leftControlTitle, rightControlTitle, onNextClick, onPreviousClick, }) => {
+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 })));
+        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 })));
 };
 
 const convert = (value) => parseInt(value.slice(0, -2), 10);
@@ -137,6 +137,7 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         this.balChange = createEvent(this, "balChange", 7);
         this.previousTransformValue = 0;
         this.carouselId = `bal-carousel-${CarouselIds++}`;
+        this.carouselContainerId = `bal-carousel-${CarouselIds++}-container`;
         this.mutationObserverActive = true;
         /**
          * EVENT BINDING
@@ -162,6 +163,7 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         this.steps = 1;
         this.itemsPerView = 1;
         this.controls = 'none';
+        this.htmlRole = 'list';
         this.controlsOverflow = false;
         this.inverted = false;
         this.fullHeight = false;
@@ -203,6 +205,18 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
     resizeListener() {
         this.itemsChanged();
     }
+    listenToKeyDown(ev) {
+        if (this.htmlRole !== 'tablist') {
+            if (ev.code === 'Tab') {
+                if (ev.shiftKey) {
+                    this.focusPreviousItem(ev);
+                }
+                else {
+                    this.focusNextItem(ev);
+                }
+            }
+        }
+    }
     /**
      * @internal define config for the component
      */
@@ -221,16 +235,12 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         const activeSlide = await this.buildSlide(previousValue);
         if (activeSlide) {
             const didAnimate = await this.animate(activeSlide.transformActive, true);
-            if (this.value > 0) {
+            if (didAnimate || this.value !== previousValue) {
                 this.value = previousValue;
-                if (!didAnimate) {
-                    this.previous();
-                }
-                else {
-                    this.balChange.emit(this.value);
-                }
+                this.balChange.emit(this.value);
             }
         }
+        return activeSlide;
     }
     async next(steps = this.steps) {
         const items = this.getAllItemElements();
@@ -242,11 +252,12 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         const activeSlide = await this.buildSlide(nextValue);
         if (activeSlide) {
             const didAnimate = await this.animate(activeSlide.transformActive, true);
-            if (didAnimate) {
+            if (didAnimate || this.value !== nextValue) {
                 this.value = nextValue;
                 this.balChange.emit(this.value);
             }
         }
+        return activeSlide;
     }
     /**
      * PRIVATE METHODS
@@ -329,6 +340,24 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
             this.animate(activeSlide.transformActive, false);
         }
     }
+    async focusNextItem(ev) {
+        if (!this.isLast) {
+            const slide = await this.next(1);
+            if (slide && slide.el) {
+                stopEventBubbling(ev);
+                await slide.el.setFocus();
+            }
+        }
+    }
+    async focusPreviousItem(ev) {
+        if (!this.isFirst) {
+            const slide = await this.previous(1);
+            if (slide && slide.el) {
+                stopEventBubbling(ev);
+                await slide.el.setFocus();
+            }
+        }
+    }
     /**
      * GETTERS
      * ------------------------------------------------------
@@ -370,7 +399,7 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         const leftControlTitle = i18nControlLabel[this.language].left;
         const rightControlTitle = i18nControlLabel[this.language].right;
         const controlItems = this.getAllControlItems();
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-${this.controls}`).class()) }, this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: controlItems, onControlChange: item => this.onControlChange(item.value) })) : (''), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, inner.class()), inner.modifier(`items-per-view-${this.itemsPerView}`).class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), inner.modifier(`shadow-left`).class(this.hasShadowLeft())), inner.modifier(`shadow-right`).class(this.hasShadowRight())), ref: el => (this.innerEl = el) }, h("div", { class: Object.assign(Object.assign(Object.assign({}, container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.containerEl = el) }, h("slot", null), this.border ? (h("div", { id: `${this.carouselId}-border`, class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.borderEl = el) })) : (''))), this.controls === 'dots' ? (h(DotControl, { value: this.value, items: controlItems, onControlChange: item => this.onControlChange(item.value) })) : (''), this.controls === 'large' ? (h(LargeControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, areControlsHidden: !this.isMobile, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : (''), this.controls === 'small' ? (h(SmallControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : ('')));
+        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-${this.controls}`).class()) }, this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, inner.class()), inner.modifier(`items-per-view-${this.itemsPerView}`).class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), inner.modifier(`shadow-left`).class(this.hasShadowLeft())), inner.modifier(`shadow-right`).class(this.hasShadowRight())), ref: el => (this.innerEl = el) }, h("div", { role: this.htmlRole, "aria-live": this.htmlRole !== '' ? 'polite' : undefined, id: this.carouselContainerId, class: Object.assign(Object.assign(Object.assign({}, container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.containerEl = el) }, h("slot", null), this.border ? (h("div", { id: `${this.carouselId}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.borderEl = el) })) : (''))), this.controls === 'dots' ? (h(DotControl, { value: this.value, items: controlItems, containerId: this.carouselContainerId, onControlChange: item => this.onControlChange(item.value) })) : (''), this.controls === 'large' ? (h(LargeControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, areControlsHidden: !this.isMobile, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : (''), this.controls === 'small' ? (h(SmallControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.inverted, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.carouselContainerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() })) : ('')));
     }
     get el() { return this; }
     static get style() { return BalCarouselStyle0; }
@@ -379,6 +408,7 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         "steps": [2],
         "itemsPerView": [8, "items-per-view"],
         "controls": [1],
+        "htmlRole": [1, "html-role"],
         "controlsOverflow": [4, "controls-overflow"],
         "inverted": [4],
         "fullHeight": [4, "full-height"],
@@ -393,7 +423,7 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         "configChanged": [64],
         "previous": [64],
         "next": [64]
-    }, [[8, "touchmove", "blockVerticalScrolling"]]]);
+    }, [[8, "touchmove", "blockVerticalScrolling"], [0, "keydown", "listenToKeyDown"]]]);
 __decorate([
     ListenToMutation({ tags: ['bal-carousel-item'], characterData: false }),
     __metadata("design:type", Function),

package/components/bal-checkbox-group.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { a as areArraysEqual } from './index.esm.js';
+import { b as areArraysEqual } from './index.esm.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { i as isDescendant, n as hasTagName } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';

package/components/bal-checkbox2.js

@@ -4,7 +4,7 @@ import { s as stopEventBubbling, i as inputSetFocus, a as inputSetBlur } from '.
 import { i as isDescendant } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
-import { i as isSpaceKey } from './index.esm.js';
+import { a as isSpaceKey } from './index.esm.js';
 import { L as Logger } from './log.js';
 import { F as FOCUS_KEYS } from './focus-visible.js';
 import { d as defaultBalAriaForm } from './form.js';
@@ -45,6 +45,9 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
             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();
@@ -62,6 +65,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
             this.balFocus.emit(ev);
             if (this.keyboardMode) {
                 this.focused = true;
+                this.wasFocused = true;
             }
         };
         this.onBlur = (ev) => {
@@ -72,11 +76,17 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
             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;
@@ -291,6 +301,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         "focused": [32],
         "buttonTabindex": [32],
         "ariaForm": [32],
+        "wasFocused": [32],
         "setFocus": [64],
         "setBlur": [64],
         "getInputElement": [64],

package/components/bal-close2.js

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
 import { i as i18nBalClose } from './bal-close.i18n.js';
 import { d as defineCustomElement$1 } from './bal-icon2.js';
@@ -14,15 +13,11 @@ const Close = /*@__PURE__*/ proxyCustomElement(class Close extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        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
      */
@@ -35,7 +30,7 @@ const Close = /*@__PURE__*/ proxyCustomElement(class Close extends HTMLElement {
         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()) }))));
     }
     get el() { return this; }
     static get style() { return BalCloseStyle0; }

package/components/bal-date.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { i as isSpaceKey } from './index.esm.js';
+import { a as isSpaceKey } from './index.esm.js';
 import { a as autoUpdate, c as computePosition, o as offset, f as flip } from './floating-ui.dom.esm.js';
 import { i as i18nBalDate } from './bal-date.i18n.js';
 import { B as BEM } from './bem.js';

package/components/bal-datepicker.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { k as rIC, m as debounceEvent } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
-import { r as requiredArgs, t as toDate, b as toInteger, g as getDefaultOptions, p as parse, f as formatDateString, c as isValidIsoString, e as format, i as isSpaceKey, h as isEnterKey, d as dateSeparator, j as getYear, n as now, k as getMonth, m as getDate } from './index.esm.js';
+import { r as requiredArgs, t as toDate, c as toInteger, g as getDefaultOptions, p as parse, f as formatDateString, e as isValidIsoString, h as format, a as isSpaceKey, i as isEnterKey, d as dateSeparator, j as getYear, n as now, k as getMonth, m as getDate } from './index.esm.js';
 import { l as lodash_isnil } from './index2.js';
 import { N as NUMBER_KEYS, A as ACTION_KEYS, i as isCtrlOrCommandKey } from './keys.constant.js';
 import { i as i18nBalDatepicker } from './bal-datepicker.i18n.js';

package/components/bal-dropdown.js

@@ -1,6 +1,6 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { a as areArraysEqual, o as isArrowDownKey, q as isArrowUpKey, h as isEnterKey, s as isEscapeKey, i as isSpaceKey } from './index.esm.js';
+import { b as areArraysEqual, o as isArrowDownKey, q as isArrowUpKey, i as isEnterKey, s as isEscapeKey, a as isSpaceKey } from './index.esm.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { s as stopEventBubbling } from './form-input.js';
@@ -257,13 +257,13 @@ 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/components/bal-file-upload.js

@@ -1,6 +1,6 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { a as areArraysEqual } from './index.esm.js';
+import { b as areArraysEqual } from './index.esm.js';
 import { s as stopEventBubbling, c as inputHandleHostClick, b as inputHandleFocus, e as inputHandleBlur, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
 import { L as Logger } from './log.js';
 import { B as BEM } from './bem.js';

package/components/bal-list-item-accordion-head2.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { L as Logger } from './log.js';
+import { a as isSpaceKey, i as isEnterKey } from './index.esm.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { d as defineCustomElement$1 } from './bal-list-item-icon2.js';
 
@@ -18,6 +19,11 @@ const ListItemAccordionHead = /*@__PURE__*/ proxyCustomElement(class ListItemAcc
                 this.accordionOpen = !this.accordionOpen;
             }
         };
+        this.onKeyDown = (ev) => {
+            if (isSpaceKey(ev) || isEnterKey(ev)) {
+                this.onClick();
+            }
+        };
         this.accordionOpen = false;
         this.icon = 'plus';
     }
@@ -38,7 +44,7 @@ const ListItemAccordionHead = /*@__PURE__*/ proxyCustomElement(class ListItemAcc
                 '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 }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-nav-menu-bar2.js

@@ -3,7 +3,7 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 
-const balNavMenuBarCss = ":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{-ms-flex-positive:1;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);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);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);-webkit-box-shadow:none;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);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);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);-webkit-box-shadow:none;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);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow)}}.bal-nav-menu-bar .bal-nav__logo{-ms-flex-item-align:start;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}";
+const balNavMenuBarCss = ":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{-ms-flex-positive:1;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);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);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);-webkit-box-shadow:none;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);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);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);-webkit-box-shadow:none;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);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow)}}.bal-nav-menu-bar .bal-nav__logo{-ms-flex-item-align:start;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}";
 const BalNavMenuBarStyle0 = balNavMenuBarCss;
 
 const NavMenuBar = /*@__PURE__*/ proxyCustomElement(class NavMenuBar extends HTMLElement {

package/components/bal-nav-menu-flyout2.js

@@ -12,17 +12,13 @@ const NavMenuFlyout = /*@__PURE__*/ proxyCustomElement(class NavMenuFlyout exten
     constructor() {
         super();
         this.__registerHost();
-        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
      * ------------------------------------------------------
@@ -60,11 +56,12 @@ const NavMenuFlyout = /*@__PURE__*/ proxyCustomElement(class NavMenuFlyout exten
     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))));
     }
     get el() { return this; }
     static get style() { return BalNavMenuFlyoutStyle0; }
 }, [4, "bal-nav-menu-flyout", {
+        "navId": [1, "nav-id"],
         "isHidden": [32]
     }]);
 __decorate([