@baloise/ds-core 19.8.3 → 19.8.4

package/components/bal-option.js

@@ -1,198 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { a as ariaBooleanToString } from './aria.js';
-import { B as BEM } from './bem.js';
-import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator.js';
-import { s as stopEventBubbling } from './form-input.js';
-import { L as Logger } from './log.js';
-import { d as defineCustomElement$4 } from './bal-check2.js';
-import { d as defineCustomElement$3 } from './bal-icon2.js';
-import { d as defineCustomElement$2 } from './bal-stack2.js';
-
-const balOptionCss = ":root{--bal-option-padding-x:var(--bal-space-small);--bal-option-min-height:1.5rem;--bal-option-background:var(--bal-color-white);--bal-option-background-hovered:var(--bal-color-grey-3);--bal-option-background-selected:var(--bal-color-primary-1);--bal-option-background-selected-hovered:#dddfeb;--bal-option-background-invalid:var(--bal-color-danger-1);--bal-option-background-invalid-hovered:#fbe0de;--bal-option-border-width:var(--bal-border-width-normal);--bal-option-border-color:var(--bal-color-grey-2);--bal-option-font-family:var(--bal-font-family-text);--bal-option-font-weight:var(--bal-font-weight-regular);--bal-option-line-height:1.125rem;--bal-option-text-hovered:var(--bal-color-text-primary-hovered);--bal-option-text-pressed:var(--bal-color-text-primary-pressed);--bal-option-text-disabled:var(--bal-color-text-grey-light)}.bal-option{font-size:16px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;list-style:none;cursor:pointer;border-bottom-width:var(--bal-option-border-width);border-bottom-color:var(--bal-option-border-color);border-bottom-style:solid;background:var(--bal-option-background);padding-left:var(--bal-option-padding-x);padding-right:var(--bal-option-padding-x);min-height:var(--bal-option-min-height)}.bal-option>bal-stack{min-height:var(--bal-option-min-height)}.bal-option:last-child{border-bottom:none}.bal-option::-moz-focus-inner{border:none}.bal-option--hidden{display:none;visibility:hidden}.bal-option__inner{font-family:var(--bal-option-font-family);font-weight:var(--bal-option-font-weight);line-height:var(--bal-option-line-height);word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-ms-flex:1;flex:1}.bal-option__inner--multiline{white-space:normal}.bal-option--focused{background:var(--bal-option-background-hovered)}@media (hover: hover)and (pointer: fine){.bal-option:hover{background:var(--bal-option-background-hovered);color:var(--bal-option-text-hovered)}}.bal-option:active{background:var(--bal-option-background-hovered);color:var(--bal-option-text-pressed)}.bal-option--selected{background:var(--bal-option-background-selected)}@media (hover: hover)and (pointer: fine){.bal-option--selected:hover{background:var(--bal-option-background-selected-hovered)}}.bal-option--selected:active{background:var(--bal-option-background-selected-hovered)}.bal-option--selected .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--selected.bal-option--focused{background:var(--bal-option-background-selected-hovered)}.bal-option--selected.bal-option--focused .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--invalid{background:var(--bal-option-background-invalid)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover{background:var(--bal-option-background-invalid-hovered)}}.bal-option--invalid:active{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid.bal-option--focused{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid .bal-option__inner{color:var(--bal-color-text-danger-hovered)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover .bal-option__inner{color:var(--bal-color-text-danger-hovered)}}.bal-option--invalid:active .bal-option__inner{color:var(--bal-color-text-danger-pressed)}.bal-option--disabled,.bal-option--disabled.bal-option--focused{background:var(--bal-option-background) !important;color:var(--bal-option-text-disabled) !important;cursor:default !important}.bal-option--disabled:hover,.bal-option--disabled.bal-option--focused:hover{background:var(--bal-option-background) !important}.bal-option{--bal-check-size:1.25rem}";
-
-const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.balOptionChange = createEvent(this, "balOptionChange", 7);
-        this.balOptionFocus = createEvent(this, "balOptionFocus", 7);
-        this.inputId = `bal-option-${balOptionIds++}`;
-        this.checkbox = false;
-        this.interactionState = BalElementStateListener.DefaultState;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * Label will be shown in the input element when it got selected
-         */
-        this.label = '';
-        /**
-         * The value of the select option. This value will be returned by the parent `<bal-select>` element.
-         */
-        this.value = '';
-        /**
-         * If `true`, the user cannot interact with the option.
-         */
-        this.disabled = false;
-        /**
-         * If `true`, the option can present in more than one line.
-         */
-        this.multiline = false;
-        /**
-         * If `true`, the option is shown in red.
-         */
-        this.invalid = false;
-        /**
-         * If `true`, the option is selected.
-         */
-        this.selected = false;
-        /**
-         * If `true`, the option is focused.
-         */
-        this.focused = false;
-        /**
-         * If `true`, the option is hidden.
-         */
-        this.hidden = false;
-        /**
-         * EVENT BINDING
-         * ------------------------------------------------------
-         */
-        this.onClick = (ev) => {
-            const listEl = this.el.closest('bal-option-list');
-            if (this.disabled || (listEl && listEl.disabled)) {
-                stopEventBubbling(ev);
-            }
-            else {
-                if (listEl && listEl.required && !listEl.multiple) {
-                    if (!this.selected) {
-                        this.select(true);
-                    }
-                }
-                else {
-                    this.select(!this.selected);
-                }
-            }
-        };
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    componentWillRender() {
-        if (this.el) {
-            const optionListEl = this.el.closest('bal-option-list');
-            if (optionListEl) {
-                this.checkbox = !!optionListEl.multiple;
-            }
-        }
-    }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
-    listenToMouseEnter() {
-        const { label, value, selected, disabled, hidden } = this;
-        if (!hidden && !disabled) {
-            this.balOptionFocus.emit({ label, value, selected });
-        }
-    }
-    elementStateListener(info) {
-        this.interactionChildElements.forEach(element => {
-            element.hovered = info.hovered;
-            element.pressed = info.pressed;
-        });
-    }
-    /**
-     * PUBLIC METHODS
-     * ------------------------------------------------------
-     */
-    /**
-     * Selects or deselects the option and informs other components
-     */
-    async select(selected = true) {
-        this.selected = selected;
-        const { label, value } = this;
-        this.balOptionChange.emit({ label, value, selected });
-    }
-    /**
-     * PRIVATE METHODS
-     * ------------------------------------------------------
-     */
-    get interactionChildElements() {
-        return Array.from(this.el.querySelectorAll('bal-check'));
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = BEM.block('option');
-        return (h(Host, { key: '23668a24757ff9d58d8bb3f657bbe500e1a8de4a', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: 'e82b712abed142e6a38b859b35593f54697693a6', py: "small", space: "x-small" }, this.checkbox ? (h("bal-check", { checked: this.selected, disabled: this.disabled, invalid: this.invalid, hovered: this.interactionState.hovered, pressed: this.interactionState.pressed, tabindex: -1 })) : (''), h("div", { key: '6c853f9670f7238a6b05c7ea9999a7d759c410f3', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '537b908ffc4b406ae6a60bf34003c8a67e194984' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
-    }
-    get el() { return this; }
-    static get style() { return balOptionCss; }
-}, [260, "bal-option", {
-        "label": [513],
-        "value": [513],
-        "disabled": [4],
-        "multiline": [4],
-        "invalid": [4],
-        "selected": [1028],
-        "focused": [1028],
-        "hidden": [4],
-        "checkbox": [32],
-        "interactionState": [32],
-        "select": [64]
-    }, [[1, "mouseenter", "listenToMouseEnter"]]]);
-__decorate([
-    Logger('bal-option'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], Option.prototype, "createLogger", null);
-__decorate([
-    ListenToElementStates(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], Option.prototype, "elementStateListener", null);
-let balOptionIds = 0;
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-option", "bal-check", "bal-icon", "bal-stack"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-option":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Option);
-            }
-            break;
-        case "bal-check":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "bal-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "bal-stack":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { O as Option, d as defineCustomElement$1 } from './bal-option2.js';
 
 const BalOption = Option;
 const defineCustomElement = defineCustomElement$1;

package/components/bal-option2.js

@@ -0,0 +1,197 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { a as ariaBooleanToString } from './aria.js';
+import { B as BEM } from './bem.js';
+import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator.js';
+import { s as stopEventBubbling } from './form-input.js';
+import { L as Logger } from './log.js';
+import { d as defineCustomElement$3 } from './bal-check2.js';
+import { d as defineCustomElement$2 } from './bal-icon2.js';
+import { d as defineCustomElement$1 } from './bal-stack2.js';
+
+const balOptionCss = ":root{--bal-option-padding-x:var(--bal-space-small);--bal-option-min-height:1.5rem;--bal-option-background:var(--bal-color-white);--bal-option-background-hovered:var(--bal-color-grey-3);--bal-option-background-selected:var(--bal-color-primary-1);--bal-option-background-selected-hovered:#dddfeb;--bal-option-background-invalid:var(--bal-color-danger-1);--bal-option-background-invalid-hovered:#fbe0de;--bal-option-border-width:var(--bal-border-width-normal);--bal-option-border-color:var(--bal-color-grey-2);--bal-option-font-family:var(--bal-font-family-text);--bal-option-font-weight:var(--bal-font-weight-regular);--bal-option-line-height:1.125rem;--bal-option-text-hovered:var(--bal-color-text-primary-hovered);--bal-option-text-pressed:var(--bal-color-text-primary-pressed);--bal-option-text-disabled:var(--bal-color-text-grey-light)}.bal-option{font-size:16px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;list-style:none;cursor:pointer;border-bottom-width:var(--bal-option-border-width);border-bottom-color:var(--bal-option-border-color);border-bottom-style:solid;background:var(--bal-option-background);padding-left:var(--bal-option-padding-x);padding-right:var(--bal-option-padding-x);min-height:var(--bal-option-min-height)}.bal-option>bal-stack{min-height:var(--bal-option-min-height)}.bal-option:last-child{border-bottom:none}.bal-option::-moz-focus-inner{border:none}.bal-option--hidden{display:none;visibility:hidden}.bal-option__inner{font-family:var(--bal-option-font-family);font-weight:var(--bal-option-font-weight);line-height:var(--bal-option-line-height);word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-ms-flex:1;flex:1}.bal-option__inner--multiline{white-space:normal}.bal-option--focused{background:var(--bal-option-background-hovered)}@media (hover: hover)and (pointer: fine){.bal-option:hover{background:var(--bal-option-background-hovered);color:var(--bal-option-text-hovered)}}.bal-option:active{background:var(--bal-option-background-hovered);color:var(--bal-option-text-pressed)}.bal-option--selected{background:var(--bal-option-background-selected)}@media (hover: hover)and (pointer: fine){.bal-option--selected:hover{background:var(--bal-option-background-selected-hovered)}}.bal-option--selected:active{background:var(--bal-option-background-selected-hovered)}.bal-option--selected .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--selected.bal-option--focused{background:var(--bal-option-background-selected-hovered)}.bal-option--selected.bal-option--focused .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--invalid{background:var(--bal-option-background-invalid)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover{background:var(--bal-option-background-invalid-hovered)}}.bal-option--invalid:active{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid.bal-option--focused{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid .bal-option__inner{color:var(--bal-color-text-danger-hovered)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover .bal-option__inner{color:var(--bal-color-text-danger-hovered)}}.bal-option--invalid:active .bal-option__inner{color:var(--bal-color-text-danger-pressed)}.bal-option--disabled,.bal-option--disabled.bal-option--focused{background:var(--bal-option-background) !important;color:var(--bal-option-text-disabled) !important;cursor:default !important}.bal-option--disabled:hover,.bal-option--disabled.bal-option--focused:hover{background:var(--bal-option-background) !important}.bal-option{--bal-check-size:1.25rem}";
+
+const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.balOptionChange = createEvent(this, "balOptionChange", 7);
+        this.balOptionFocus = createEvent(this, "balOptionFocus", 7);
+        this.inputId = `bal-option-${balOptionIds++}`;
+        this.checkbox = false;
+        this.interactionState = BalElementStateListener.DefaultState;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Label will be shown in the input element when it got selected
+         */
+        this.label = '';
+        /**
+         * The value of the select option. This value will be returned by the parent `<bal-select>` element.
+         */
+        this.value = '';
+        /**
+         * If `true`, the user cannot interact with the option.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the option can present in more than one line.
+         */
+        this.multiline = false;
+        /**
+         * If `true`, the option is shown in red.
+         */
+        this.invalid = false;
+        /**
+         * If `true`, the option is selected.
+         */
+        this.selected = false;
+        /**
+         * If `true`, the option is focused.
+         */
+        this.focused = false;
+        /**
+         * If `true`, the option is hidden.
+         */
+        this.hidden = false;
+        /**
+         * EVENT BINDING
+         * ------------------------------------------------------
+         */
+        this.onClick = (ev) => {
+            const listEl = this.el.closest('bal-option-list');
+            if (this.disabled || (listEl && listEl.disabled)) {
+                stopEventBubbling(ev);
+            }
+            else {
+                if (listEl && listEl.required && !listEl.multiple) {
+                    if (!this.selected) {
+                        this.select(true);
+                    }
+                }
+                else {
+                    this.select(!this.selected);
+                }
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentWillRender() {
+        if (this.el) {
+            const optionListEl = this.el.closest('bal-option-list');
+            if (optionListEl) {
+                this.checkbox = !!optionListEl.multiple;
+            }
+        }
+    }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToMouseEnter() {
+        const { label, value, selected, disabled, hidden } = this;
+        if (!hidden && !disabled) {
+            this.balOptionFocus.emit({ label, value, selected });
+        }
+    }
+    elementStateListener(info) {
+        this.interactionChildElements.forEach(element => {
+            element.hovered = info.hovered;
+            element.pressed = info.pressed;
+        });
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * Selects or deselects the option and informs other components
+     */
+    async select(selected = true) {
+        this.selected = selected;
+        const { label, value } = this;
+        this.balOptionChange.emit({ label, value, selected });
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    get interactionChildElements() {
+        return Array.from(this.el.querySelectorAll('bal-check'));
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = BEM.block('option');
+        return (h(Host, { key: 'dca805aa021ad35c2ea4153008a8a5ba4f37931c', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: 'cfcf978a82159a6e7ad2dcddccdb40dd6b9f74a4', py: "small", space: "x-small" }, this.checkbox ? (h("bal-check", { checked: this.selected, disabled: this.disabled, invalid: this.invalid, hovered: this.interactionState.hovered, pressed: this.interactionState.pressed, tabindex: -1 })) : (''), h("div", { key: 'e92a9c019432d29f6153371daca316c8136c75e9', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '639a99194ed6e86787e9eb2b3adc993161d58a07' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
+    }
+    get el() { return this; }
+    static get style() { return balOptionCss; }
+}, [260, "bal-option", {
+        "label": [513],
+        "value": [513],
+        "disabled": [4],
+        "multiline": [4],
+        "invalid": [4],
+        "selected": [1028],
+        "focused": [1028],
+        "hidden": [4],
+        "checkbox": [32],
+        "interactionState": [32],
+        "select": [64]
+    }, [[1, "mouseenter", "listenToMouseEnter"]]]);
+__decorate([
+    Logger('bal-option'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Option.prototype, "createLogger", null);
+__decorate([
+    ListenToElementStates(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Option.prototype, "elementStateListener", null);
+let balOptionIds = 0;
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-option", "bal-check", "bal-icon", "bal-stack"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-option":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Option);
+            }
+            break;
+        case "bal-check":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bal-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "bal-stack":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Option as O, defineCustomElement as d };

package/components/bal-pagination.js

@@ -265,10 +265,10 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
         const leftControlTitle = i18nControlLabel[this.language].left;
         const rightControlTitle = i18nControlLabel[this.language].right;
         const hasBasicNavigationButtons = this.interface === '' || (isSmall && this.totalPages <= 5);
-        const SmallWithText = () => (h("span", { key: '59ca5648f4cc6cf0469b3a4238515508f742a552', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: 'e8258fcfa29e3535f1b1da2dbf0e89266d6cec89' }, this._value), ' / ' + this.totalPages));
-        const PaginationTablet = () => (h("ul", { key: '9a53e78442f9ae97809217ca59c97ff70855968f', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
-        const PaginationMobile = () => (h("ul", { key: '1fe47c3d518b2ac04c5da482e91b581bed926f48', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
-        return (h(Host, { key: 'e7537b55e58f3a59c0092b6b63a9d66e37ae7fdf', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: 'e98779bf3ef44a0ddb9c037a557ef9c9f6120950', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, !this.disabled ? (h("button", { class: Object.assign(Object.assign({ 'button': true, 'is-square': true, 'is-disabled': this._value < 2, 'is-flat': flat, [buttonColor]: true, [buttonSize]: true }, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { name: "nav-go-left", size: "small", disabled: this._value < 2 }))) : (''), !this.disabled ? (h("button", { class: Object.assign(Object.assign({ 'button': true, 'is-square': true, 'is-disabled': this._value === this.totalPages, 'is-flat': flat, [buttonColor]: true, [buttonSize]: true }, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { name: "nav-go-right", size: "small", disabled: this._value === this.totalPages }))) : (''), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
+        const SmallWithText = () => (h("span", { key: '6851055924de8b04d1c2426851296fc43de9d5a8', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: '3c7b45ffc1b9844a54b05455444fc27f0947ed23' }, this._value), ' / ' + this.totalPages));
+        const PaginationTablet = () => (h("ul", { key: 'ac07986c347c110d113f46ceff2cb77ced99c5da', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
+        const PaginationMobile = () => (h("ul", { key: '9b83d79dd7bb63cfeb8d98ff940f2a91c9db72c8', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
+        return (h(Host, { key: 'c9f4756500a4f05b3d4756c0c568d6e7d930292c', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: '463f770907d3b73651eb525c951870d53afb3147', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, !this.disabled ? (h("button", { class: Object.assign(Object.assign({ 'button': true, 'is-square': true, 'is-disabled': this._value < 2, 'is-flat': flat, [buttonColor]: true, [buttonSize]: true }, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { name: "nav-go-left", size: "small", disabled: this._value < 2 }))) : (''), !this.disabled ? (h("button", { class: Object.assign(Object.assign({ 'button': true, 'is-square': true, 'is-disabled': this._value === this.totalPages, 'is-flat': flat, [buttonColor]: true, [buttonSize]: true }, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { name: "nav-go-right", size: "small", disabled: this._value === this.totalPages }))) : (''), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-popover-content2.js

@@ -86,7 +86,7 @@ const PopoverContent = /*@__PURE__*/ proxyCustomElement(class PopoverContent ext
     }
     render() {
         const block = BEM.block('popover').element('content');
-        return (h(Host, { key: '3c3fb634b5c83d40b1cc5b33654ec7c67eab2353', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: 'ee3888b9bb9e125102d8721b1e0ba1a487252faa', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: 'fd74aa5662fb85268cd615d8e74c8b4a8ad93e8c' })), h("div", { key: '52102edc41ca9da3db6d94a9ba8fb95ea9f583d8', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
+        return (h(Host, { key: 'bc08fb0e5736f9393c5396af4a84f1127b6e4c4e', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: 'f49ffa520c2e1cc95942973939eeff059900a9bc', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: '3394b3dd89ce64a0d379e66b1ffb169e9f0401c4' })), h("div", { key: '5f75d67a77ae49667c3863b738bdc03d1dcb8121', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
     }
     get el() { return this; }
 }, [260, "bal-popover-content", {

package/components/bal-popup2.js

@@ -647,7 +647,7 @@ const Popup = /*@__PURE__*/ proxyCustomElement(class Popup extends HTMLElement {
         const innerBlock = block.element('inner');
         const innerHeadBlock = innerBlock.element('head');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { key: 'f933f5fcad5422883743d27d5ec884310f97feca', 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: '9fc15384c844fa45fe32d2be780257357d47899e', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: 'ee8def20d0a8fd9cdcfe587d62a17d27b1f8c065', 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: '93d308f9ceef5bdf8c041d4c71f807f2310f58f0', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '5b93de3287bc6cac16769940895977ff44403d63', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()), ref: innerBlock => (this.innerEl = innerBlock) }, 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: '08dc53b3d3dea1c74d45742033594714c6f0f4d3', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content", tabindex: "-1" }, h("slot", { key: 'c9e2dc8db8ffd88e26776a2eef632d572a03c6e3' }))))));
+        return (h(Host, { key: '815e1a03c79472bb0913b4a28519802606bac73c', 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: 'effa9ca039cb7c5b27db07f23e02a464e5f09ce9', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: '343a483098c5d4b657298c3f0b5d14705a3e78bd', 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: 'dbcb76dfb93527828e6f73974cbfd62225bd26c3', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '119c391a7fa3081548740bf23b57a6ae05417188', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()), ref: innerBlock => (this.innerEl = innerBlock) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-testid": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-testid": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: 'ff97c08a3151dc9f71552eede345d84716ea7e3b', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-testid": "bal-popup-content", tabindex: "-1" }, h("slot", { key: '21e9b66eec4627f414c4802eccc5276c20a9c536' }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-progress-bar.js

@@ -80,7 +80,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
     render() {
         const block = BEM.block('progress-bar');
         const bemLineEl = block.element('line');
-        return (h(Host, { key: '4452ea701b96a45d8c29a644c76cbb1849284ca1', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, h("div", { key: 'c58656c6f9db6b8154681a70182e101007480a34', class: Object.assign(Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`color-${this.color}`).class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
+        return (h(Host, { key: '3560c076e654839526d357edec7f7d605793d9b0', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, h("div", { key: 'd89c4e6cf2d0c12abd70696606c47f03de988889', class: Object.assign(Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`color-${this.color}`).class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
     }
     get el() { return this; }
     static get style() { return balProgressBarCss; }

package/components/bal-radio-icon2.js

@@ -48,7 +48,7 @@ const RadioIcon = /*@__PURE__*/ proxyCustomElement(class RadioIcon extends HTMLE
         const disabled = !!this.disabled;
         const invalid = !!this.invalid;
         const inverted = !!this.inverted;
-        return (h(Host, { key: '0662e5a528a5dbadfaa8763a06acb7baa46b223d', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checked').class(checked)), block.modifier('disabled').class(disabled)), block.modifier('invalid').class(invalid)), block.modifier('inverted').class(inverted)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }));
+        return (h(Host, { key: '161bc840e553656a11a4f6c9aaedfa554dcdcf01', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checked').class(checked)), block.modifier('disabled').class(disabled)), block.modifier('invalid').class(invalid)), block.modifier('inverted').class(inverted)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }));
     }
     static get style() { return balRadioIconCss; }
 }, [256, "bal-radio-icon", {

package/components/bal-radio2.js

@@ -340,11 +340,11 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
         if (this.labelHidden) {
             inputAttributes['aria-labelledby'] = labelId;
         }
-        return (h(Host, { key: '382a76b43c4967878e796e20914faaad31c1cb9b', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-hidden": this.disabled ? 'true' : null, "aria-focused": focused ? 'true' : null, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, 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({ 'bal-focused': focused }, block.class()), block.modifier('button').class(this.interface === 'button')), block.modifier('tile').class(this.interface === 'tile')), block.modifier(`tile-color-${this.color}`).class(this.interface === 'tile' && !!this.color)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier(`column-${this.colSize}`).class(this.interface === 'tile' && this.colSize > 1)), block
+        return (h(Host, { key: 'faa44091416d0505e2d84a792bd49f5eab82f897', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-hidden": this.disabled ? 'true' : null, "aria-focused": focused ? 'true' : null, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, 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({ 'bal-focused': focused }, block.class()), block.modifier('button').class(this.interface === 'button')), block.modifier('tile').class(this.interface === 'tile')), block.modifier(`tile-color-${this.color}`).class(this.interface === 'tile' && !!this.color)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier(`column-${this.colSize}`).class(this.interface === 'tile' && this.colSize > 1)), block
                 .modifier(`column-tablet-${this.colSizeTablet}`)
                 .class(this.interface === 'tile' && this.colSizeTablet > 1)), block
                 .modifier(`column-mobile-${this.colSizeMobile}`)
-                .class(this.interface === 'tile' && this.colSizeMobile > 1)), onClick: this.onClick }, h(LabelTag, { key: '473e9946e24bcb342d728ea9401ca6306e6dac33', class: Object.assign({}, labelEl.class()), "data-testid": "bal-radio-label" }, hasFormControl ? (h("input", Object.assign({ id: id, type: "radio", "data-testid": "bal-radio-input", name: this.name, value: value, checked: this.checked, required: this.required, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, class: Object.assign({}, inputEl.class()), "aria-hidden": ariaBooleanToString(this.nonSubmit), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-describedby": this.ariaForm.messageId, onChange: ev => this.toggleChecked(ev), onFocus: ev => this.onFocus(ev), onBlur: ev => this.onBlur(ev), ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes))) : (''), this.interface !== 'tile' ? (h("div", { class: Object.assign({}, labelIconEl.class()) }, h("bal-radio-icon", { checked: this.checked, disabled: this.disabled || this.readonly, invalid: this.invalid, inverted: this.interface === 'button' && this.checked, hovered: this.mergedElementState.hovered, pressed: this.mergedElementState.pressed }))) : (''), h("div", { key: '443a97633b9a93c613218ff53ee97c6f37b2dc8f', class: Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)) }, h("slot", { key: '76cb543fed4b836d6b937d8ff016f8e14e2c6dcc' })))));
+                .class(this.interface === 'tile' && this.colSizeMobile > 1)), onClick: this.onClick }, h(LabelTag, { key: '3588b099302b821eccd777ae3149744f53a97834', class: Object.assign({}, labelEl.class()), "data-testid": "bal-radio-label" }, hasFormControl ? (h("input", Object.assign({ id: id, type: "radio", "data-testid": "bal-radio-input", name: this.name, value: value, checked: this.checked, required: this.required, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, class: Object.assign({}, inputEl.class()), "aria-hidden": ariaBooleanToString(this.nonSubmit), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-describedby": this.ariaForm.messageId, onChange: ev => this.toggleChecked(ev), onFocus: ev => this.onFocus(ev), onBlur: ev => this.onBlur(ev), ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes))) : (''), this.interface !== 'tile' ? (h("div", { class: Object.assign({}, labelIconEl.class()) }, h("bal-radio-icon", { checked: this.checked, disabled: this.disabled || this.readonly, invalid: this.invalid, inverted: this.interface === 'button' && this.checked, hovered: this.mergedElementState.hovered, pressed: this.mergedElementState.pressed }))) : (''), h("div", { key: '599fda9c376491dcb156c0b3fa8ecd41353027a8', class: Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)) }, h("slot", { key: '752d10816299c2f7840ae907b426501a76ae8d23' })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-segment-item.js

@@ -183,7 +183,7 @@ const SegmentItem = /*@__PURE__*/ proxyCustomElement(class SegmentItem extends H
                 'aria-describedby': this.ariaForm.messageId,
             };
         }
-        return (h(Host, { key: '4c8e5bfdefd09ee9fd23aa3d00b543a6db37e2f1', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('vertical').class(vertical)), block.modifier('disabled').class(disabled)), block.modifier('checked').class(checked)), block.modifier('invalid').class(invalid)), block.modifier('last').class(this.isLast && !checked)) }, h("button", Object.assign({ key: 'e8185838fac69ee7d26cdc49a22c4e9898669ee4', id: id, role: "radio", "aria-checked": checked ? 'true' : 'false' }, buttonAttributes, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, buttonBem.class()), buttonBem.modifier('checked').class(checked)), buttonBem.modifier('invalid').class(invalid)), buttonBem.modifier('disabled').class(disabled)), buttonBem.modifier('focused').class(focused)), buttonBem.modifier('vertical').class(vertical)), type: 'button', tabIndex: hasTabindex ? 0 : -1, part: "native", disabled: disabled, ref: el => (this.nativeEl = el) }, this.inheritedAttributes), h("bal-icon", { key: 'b5e01c28bde95757ade654e507690de2d322a575', name: "check", size: "small", class: Object.assign(Object.assign(Object.assign({}, buttonBem.element('icon').class()), buttonBem.element('icon').modifier('animated').class(checked)), buttonBem.element('icon').modifier('vertical').class(vertical)), color: disabled ? 'grey-dark' : invalid ? 'white' : 'primary' }), h("bal-stack", { key: '32c41a13672bcf94b2cc39c41ddeb40a9ccb9da6', space: "x-small", layout: 'horizontal' }, h("bal-content", { key: 'cf2b548c452e21e49e84079a63a2120e98149ff0', space: "none" }, h("bal-label", { key: '978e6878136444283fb9ff2179353151c23a7ddc', htmlId: `bal-si-${this.internalId}-label` }, label), h("span", { key: '26a568d5924f66ee51873b6f5e3e083340c56ff2', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { key: 'f37daf19eedcdc58edd6d7ea9a4820051a3bcb01', onSlotchange: this.onSlottedItemsChange }))))), h("div", { key: '6a9472725c179e4d139e5be83b3f294d9aa776fc', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, indicatorBem.class()), indicatorBem.modifier('animated').class()), indicatorBem.modifier('background').class()), indicatorBem.modifier('disabled').class(disabled)), indicatorBem.modifier('invalid').class(invalid)), indicatorBem.modifier('checked').class(checked)), indicatorBem.modifier('vertical').class(vertical)) })));
+        return (h(Host, { key: '54ab8ce0ab290fcbc238087789ce0bca3caedddc', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('vertical').class(vertical)), block.modifier('disabled').class(disabled)), block.modifier('checked').class(checked)), block.modifier('invalid').class(invalid)), block.modifier('last').class(this.isLast && !checked)) }, h("button", Object.assign({ key: 'be4e31f8a5b0da8cc9f70a867e546920127ba4b2', id: id, role: "radio", "aria-checked": checked ? 'true' : 'false' }, buttonAttributes, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, buttonBem.class()), buttonBem.modifier('checked').class(checked)), buttonBem.modifier('invalid').class(invalid)), buttonBem.modifier('disabled').class(disabled)), buttonBem.modifier('focused').class(focused)), buttonBem.modifier('vertical').class(vertical)), type: 'button', tabIndex: hasTabindex ? 0 : -1, part: "native", disabled: disabled, ref: el => (this.nativeEl = el) }, this.inheritedAttributes), h("bal-icon", { key: 'f6d56f256041be2a97822dcc424d887844bacc0e', name: "check", size: "small", class: Object.assign(Object.assign(Object.assign({}, buttonBem.element('icon').class()), buttonBem.element('icon').modifier('animated').class(checked)), buttonBem.element('icon').modifier('vertical').class(vertical)), color: disabled ? 'grey-dark' : invalid ? 'white' : 'primary' }), h("bal-stack", { key: '15df166b0d0d2b6a6b9447506755b9de3581c77d', space: "x-small", layout: 'horizontal' }, h("bal-content", { key: '056ba7bfb5d4f456f03f70e9f86e0269bd44a78b', space: "none" }, h("bal-label", { key: '055ca1dd2f698e5b3758fbc5535a221801d90642', htmlId: `bal-si-${this.internalId}-label` }, label), h("span", { key: '5a4ea620046a856959a811110f9c8ec5dfefa156', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { key: 'ceeb6506e86bde765a45497987759479b450c16f', onSlotchange: this.onSlottedItemsChange }))))), h("div", { key: '7384e9bec0b8c8337191b79a54a18cf5cc89a55b', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, indicatorBem.class()), indicatorBem.modifier('animated').class()), indicatorBem.modifier('background').class()), indicatorBem.modifier('disabled').class(disabled)), indicatorBem.modifier('invalid').class(invalid)), indicatorBem.modifier('checked').class(checked)), indicatorBem.modifier('vertical').class(vertical)) })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-segment.js

@@ -346,7 +346,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     render() {
         const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
         const block = BEM.block('segment');
-        return (h(Host, { key: '434850dee057a04f9d328103462b800848e3befa', role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { key: 'e62020bdcef145f923e7f99cdc8ab0adc57703f7', onSlotchange: this.onSlottedItemsChange })));
+        return (h(Host, { key: '08fb99b658d704d85ab181d55d7bdbce7ee40fd8', role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { key: '432741fe51dc5c83ea241506687de13469afc149', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-select-option2.js

@@ -22,7 +22,7 @@ const SelectOption = /*@__PURE__*/ proxyCustomElement(class SelectOption extends
         this.log = log;
     }
     render() {
-        return (h(Host, { key: '8829db26394b32b2a00ba288a944358c3f4e39be', style: { display: 'none' } }, h("slot", { key: '4ba8e9b7bdf68609d2e0ca5185a4e71943e66bda' })));
+        return (h(Host, { key: 'c479330ac26bcb19ddd41e7a99e635bf3ffc6170', style: { display: 'none' } }, h("slot", { key: '009baaefc29d307403edb10160c694dcc8495164' })));
     }
 }, [260, "bal-select-option", {
         "label": [513],

package/components/bal-select2.js

@@ -782,7 +782,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
      */
     render() {
         var _a;
-        const Chip = (props) => (h("bal-tag", { key: '2cdffc028c1bf2c7895b2bf6acf17d4d36403b53', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
+        const Chip = (props) => (h("bal-tag", { key: '77060284cad81e9801d4b0280b3cd1be126e2245', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
         const valuesArray = getValues(this.rawValue);
         const block = BEM.block('select');
         const nativeEl = block.element('native');
@@ -796,19 +796,19 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         const optionContentEl = optionEl.element('content');
         const optionContentCheckboxEl = optionContentEl.element('checkbox');
         const optionContentLabelEl = optionContentEl.element('label');
-        return (h(Host, { key: '2d16928c6a3383b0f00335b5662c4699210d87ff', role: "listbox", onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, h("select", { key: '1a356d4c1ba7694a732495198fc2d9bbdda40dea', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: '9ea8e39781ef2f49ef55e16735cb0c7852065108', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: 'a39326c63dbcac1ad82926f8760d5e07f070fe03', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, h("div", { key: 'e798517f1557a5be9162a4abaf0d84c5c663d881', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
+        return (h(Host, { key: '6b7354e770f231706b1e15360c671adfe16a8980', role: "listbox", onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, h("select", { key: '4564be01db70d71812c500f75534a52166edb41a', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: '7a77f7f60e2ddb3e524dfbf14021618ebf56d03b', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: 'c3759fb5c32e5a2737ef9b80ce9845b0071f2f74', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, h("div", { key: '9b7c8567cc7f0c463546a78cdd0b449900cbd315', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
                 .modifier('clickable')
                 .class(!this.isPopoverOpen && !this.disabled && !this.readonly)), onClick: this.handleInputClick, ref: el => (this.selectionEl = el) }, valuesArray
             .filter(_ => this.multiple)
-            .map((value) => (h(Chip, { value: value }))), h("input", Object.assign({ key: '3e8135f1e6297ccba9732ada6cab72d6470733bf', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) }, this.inheritedAttributes))), !this.freeSolo && !this.loading ? (h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
+            .map((value) => (h(Chip, { value: value }))), h("input", Object.assign({ key: '5defff3eda394ed0afaa105775b22231eb628fe1', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) }, this.inheritedAttributes))), !this.freeSolo && !this.loading ? (h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
                 ? 'grey-light'
                 : this.inverted
                     ? 'white'
                     : this.invalid
                         ? 'danger'
-                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), h("bal-popover-content", { key: '22217507fdedb75779041bb7ed95e19888c1642e', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index) => (h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
+                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), h("bal-popover-content", { key: '61e479d8c8b40af29300dcc7e3611a774aff6c31', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index) => (h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
                 .modifier('selected')
-                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: '8a6862c54398959fe4a020057880a154e232e1f2', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
+                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: 'f96e2f463966cef35a5c76b7a4c74dd2d16d4ed8', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
                 .modifier('hidden')
                 .class(this.noDataLabel === undefined || this.hasOptions() || !this.typeahead || this.selectionOptional)) }, this.noDataLabel)))));
     }