@baloise/ds-core 18.3.0 → 19.0.0-nightly.20250509

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

@@ -1,48 +1,49 @@
 import { __decorate, __metadata } from "tslib";
+import { isSpaceKey } from "@baloise/web-app-utils";
 import { h, Host, } from "@stencil/core";
-import { isDescendant } from "../../utils/helpers";
+import { ariaBooleanToString } from "../../utils/aria";
+import { inheritAttributes } from "../../utils/attributes";
 import { BEM } from "../../utils/bem";
+import { ListenToElementStates } from "../../utils/element-states";
 import { FOCUS_KEYS } from "../../utils/focus-visible";
-import { Logger } from "../../utils/log";
-import { inheritAttributes } from "../../utils/attributes";
-import { stopEventBubbling } from "../../utils/form-input";
-import { isSpaceKey } from "../../utils/keyboard";
 import { defaultBalAriaForm } from "../../utils/form";
-import { ariaBooleanToString } from "../../utils/aria";
+import { inputSetBlur, inputSetFocus, stopEventBubbling } from "../../utils/form-input";
+import { isDescendant } from "../../utils/helpers";
+import { Logger } from "../../utils/log";
 export class Radio {
     constructor() {
         this.inputId = `bal-rb-${radioIds++}`;
         this.inheritedAttributes = {};
         this.keyboardMode = true;
-        this.onKeypress = (ev) => {
-            if (isSpaceKey(ev)) {
-                const element = ev.target;
-                if (element.href) {
-                    return;
-                }
-                if (element.nodeName === 'INPUT' && !this.disabled && !this.readonly) {
-                    this.toggleChecked();
-                    ev.preventDefault();
-                }
-                else {
-                    stopEventBubbling(ev);
-                }
-            }
+        this.outerElementState = {
+            hovered: false,
+            pressed: false,
+        };
+        this.innerElementState = {
+            hovered: false,
+            pressed: false,
+        };
+        this.setChecked = (state) => {
+            this.checked = state;
+            this.balChange.emit(this.checked);
+        };
+        this.toggleChecked = (ev) => {
+            ev.preventDefault();
+            this.setFocus();
+            this.setChecked(!this.checked);
         };
         this.onClick = (ev) => {
-            var _a;
+            if (this.disabled) {
+                return;
+            }
             const element = ev.target;
             if (element.href) {
                 return;
             }
-            if (element.nodeName !== 'INPUT' && !this.disabled && !this.readonly) {
-                this.toggleChecked();
-                (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
-                ev.preventDefault();
-            }
-            else {
-                stopEventBubbling(ev);
+            if (this.wasFocused) {
+                this.focused = true;
             }
+            this.toggleChecked(ev);
         };
         this.onFocus = (ev) => {
             if (this.disabled || this.readonly) {
@@ -52,6 +53,7 @@ export class Radio {
             this.balFocus.emit(ev);
             if (this.keyboardMode) {
                 this.focused = true;
+                this.wasFocused = true;
             }
         };
         this.onBlur = (ev) => {
@@ -62,15 +64,24 @@ export class Radio {
             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.wasFocused = false;
         this.checked = false;
         this.focused = false;
         this.buttonTabindex = undefined;
         this.ariaForm = defaultBalAriaForm;
+        this.mergedElementState = {
+            hovered: false,
+            pressed: false,
+        };
         this.name = this.inputId;
         this.value = undefined;
         this.label = '';
-        this.invisible = false;
         this.labelHidden = false;
         this.flat = false;
         this.interface = 'radio';
@@ -81,25 +92,40 @@ export class Radio {
         this.invalid = false;
         this.hovered = false;
         this.pressed = false;
+        this.color = undefined;
+        this.colSize = 1;
+        this.colSizeTablet = 1;
+        this.colSizeMobile = 1;
     }
     createLogger(log) {
         this.log = log;
     }
+    hoveredChanged() {
+        this.innerElementState = {
+            hovered: this.hovered,
+            pressed: this.pressed,
+        };
+        this.mergeElementState();
+    }
+    pressedChanged() {
+        this.innerElementState = {
+            hovered: this.hovered,
+            pressed: this.pressed,
+        };
+        this.mergeElementState();
+    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
     connectedCallback() {
+        this.hoveredChanged();
         if (this.value === undefined) {
             this.value = this.inputId;
         }
-        const radioButton = this.radioButton;
-        const radioGroup = this.radioGroup;
-        if (radioButton || radioGroup) {
+        if (this.group) {
             this.updateState();
-        }
-        if (radioGroup) {
-            radioGroup.addEventListener('balInput', this.updateState);
+            this.group.addEventListener('balChange', this.updateState);
         }
         this.el.addEventListener('keydown', this.onKeydown);
         this.el.addEventListener('touchstart', this.onPointerDown);
@@ -108,10 +134,16 @@ export class Radio {
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
     }
+    componentWillRender() {
+        this.interactionChildElements.forEach(el => {
+            el.disabled = this.disabled || this.readonly;
+            el.invalid = this.invalid;
+            el.checked = this.checked;
+        });
+    }
     disconnectedCallback() {
-        const radioGroup = this.radioGroup;
-        if (radioGroup) {
-            radioGroup.removeEventListener('balInput', this.updateState);
+        if (this.group) {
+            this.group.removeEventListener('balChange', this.updateState);
         }
         this.el.removeEventListener('keydown', this.onKeydown);
         this.el.removeEventListener('touchstart', this.onPointerDown);
@@ -128,25 +160,31 @@ export class Radio {
             stopEventBubbling(ev);
         }
     }
+    elementStateListener(info) {
+        this.outerElementState = info;
+        this.mergeElementState();
+    }
     /**
      * PUBLIC METHODS
      * ------------------------------------------------------
      */
-    /** @internal */
-    async setFocus(ev) {
-        ev.stopPropagation();
-        ev.preventDefault();
-        this.nativeInput.focus();
-        this.focused = true;
+    /**
+     * Sets the focus on the checkbox input element.
+     */
+    async setFocus() {
+        inputSetFocus(this);
+    }
+    /**
+     * Sets blur on the native `input`. Use this method instead of the global
+     * `input.blur()`.
+     * @internal
+     */
+    async setBlur() {
+        inputSetBlur(this);
     }
     /** @internal */
     async setButtonTabindex(value) {
-        if (this.radioButton) {
-            this.buttonTabindex = -1;
-        }
-        else {
-            this.buttonTabindex = value;
-        }
+        this.buttonTabindex = value;
     }
     /**
      * Returns the native `<input>` element used under the hood.
@@ -165,18 +203,18 @@ export class Radio {
      * Options of the tab like label, value etc.
      */
     async updateState() {
-        if (this.radioGroup) {
-            const newChecked = this.radioGroup.value === this.value;
+        if (this.group) {
+            const newChecked = this.group.value === this.value;
             if (newChecked !== this.checked) {
                 this.checked = newChecked;
             }
         }
-        if (this.radioButton) {
-            this.buttonTabindex = -1;
-            if (this.radioButton.setChecked) {
-                this.radioButton.setChecked(this.checked);
-            }
-        }
+        // if (this.radioButton) {
+        //   this.buttonTabindex = -1
+        //   if (this.radioButton.setChecked) {
+        //     this.radioButton.setChecked(this.checked)
+        //   }
+        // }
     }
     /**
      * @internal
@@ -188,16 +226,12 @@ export class Radio {
      * GETTERS
      * ------------------------------------------------------
      */
-    get radioButton() {
-        return this.el.closest('bal-radio-button');
-    }
-    get radioGroup() {
+    get group() {
         return this.el.closest('bal-radio-group');
     }
-    /**
-     * PRIVATE METHODS
-     * ------------------------------------------------------
-     */
+    get interactionChildElements() {
+        return Array.from(this.el.querySelectorAll('bal-radio-icon, bal-icon'));
+    }
     get option() {
         return {
             name: this.name,
@@ -210,7 +244,6 @@ export class Radio {
             readonly: this.readonly,
             required: this.required,
             nonSubmit: this.nonSubmit,
-            invisible: this.invisible,
             invalid: this.invalid,
         };
     }
@@ -218,46 +251,55 @@ export class Radio {
      * EVENT BINDING
      * ------------------------------------------------------
      */
-    toggleChecked() {
-        this.checked = !this.checked;
-        this.balChange.emit(this.checked);
-        this.updateState();
+    mergeElementState() {
+        this.mergedElementState = {
+            hovered: this.outerElementState.hovered || this.innerElementState.hovered,
+            pressed: this.outerElementState.pressed || this.innerElementState.pressed,
+        };
+        this.interactionChildElements.forEach(el => {
+            ;
+            el.hovered = this.mergedElementState.hovered;
+            el.pressed = this.mergedElementState.pressed;
+        });
     }
     /**
      * RENDER
      * ------------------------------------------------------
      */
     render() {
-        const block = BEM.block('radio-checkbox');
+        const block = BEM.block('radio');
         const inputEl = block.element('input');
         const labelEl = block.element('label');
         const labelTextEl = labelEl.element('text');
+        const labelIconEl = labelEl.element('icon');
         const focused = this.focused && this.buttonTabindex !== -1;
         const value = typeof this.value === 'boolean' ? JSON.stringify(this.value) : this.value;
+        const hasFormControl = !this.nonSubmit;
+        const id = this.ariaForm.controlId || this.inputId;
+        const labelId = this.ariaForm.labelId || null;
+        const LabelTag = hasFormControl ? 'label' : 'span';
         const inputAttributes = this.inheritedAttributes;
         if (this.buttonTabindex !== undefined) {
             inputAttributes.tabIndex = this.buttonTabindex;
         }
-        const id = this.ariaForm.controlId || this.inputId;
-        let labelId = this.ariaForm.labelId || null;
-        const LabelTag = this.labelHidden ? 'span' : 'label';
-        const labelAttributes = {};
-        if (!this.labelHidden) {
-            labelId = `${labelId || ''} ${id}-lbl`.trim();
-            labelAttributes.id = `${id}-lbl`;
-            labelAttributes.htmlFor = id;
+        if (this.labelHidden) {
+            inputAttributes['aria-labelledby'] = labelId;
         }
-        return (h(Host, { key: '2547b04c87e22ecf4052211afb83932637ea451e', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-hidden": this.disabled ? 'true' : null, "aria-focused": focused ? 'true' : null, class: 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('radio').class()), block.modifier('select-button').class(this.interface === 'select-button')), 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('invisible').class(this.invisible)), onKeypress: this.onKeypress, onClick: this.onClick }, h("input", Object.assign({ key: 'f2c4043a068d86e4327cb801acca5b13dbfaa9bb', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-radio-input", type: "radio", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, name: this.name, value: value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('radio').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)) }, labelAttributes, { "data-testid": "bal-radio-label" }), h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-radio-text" }, this.label, h("slot", null)))) : ('')));
+        return (h(Host, { key: '9c108eed067c8d47d94180715714ed97d7c2df2d', "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: '4b3d8626b04257821c3fe1ef713fe9ff9bf0a925', 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: 'de3d15790b976a11a18435e5e7c816f9cc9918c3', class: Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)) }, h("slot", { key: '0a6ef4b1a0ebbdd01b1367c8965cfedf05b9acec' })))));
     }
     static get is() { return "bal-radio"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../bal-checkbox/radio-checkbox.sass"]
+            "$": ["bal-radio.sass"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../bal-checkbox/radio-checkbox.css"]
+            "$": ["bal-radio.css"]
         };
     }
     static get properties() {
@@ -321,26 +363,6 @@ export class Radio {
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "invisible": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the radio is invisible, but sill active"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "invisible",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "labelHidden": {
                 "type": "boolean",
                 "mutable": false,
@@ -386,7 +408,7 @@ export class Radio {
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalRadioInterface",
-                    "resolved": "\"radio\" | \"select-button\"",
+                    "resolved": "\"button\" | \"radio\" | \"tile\"",
                     "references": {
                         "BalProps": {
                             "location": "global",
@@ -551,15 +573,125 @@ export class Radio {
                 "attribute": "pressed",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalRadioTileColor",
+                    "resolved": "\"\" | \"green\" | \"purple\" | \"red\" | \"yellow\"",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the color of the tile radio."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color",
+                "reflect": false
+            },
+            "colSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalRadioGroupColumns",
+                    "resolved": "1 | 2 | 3 | 4",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "col-size",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "colSizeTablet": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalRadioGroupColumns",
+                    "resolved": "1 | 2 | 3 | 4",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "col-size-tablet",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "colSizeMobile": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalRadioGroupColumns",
+                    "resolved": "1 | 2 | 3 | 4",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "col-size-mobile",
+                "reflect": false,
+                "defaultValue": "1"
             }
         };
     }
     static get states() {
         return {
+            "wasFocused": {},
             "checked": {},
             "focused": {},
             "buttonTabindex": {},
-            "ariaForm": {}
+            "ariaForm": {},
+            "mergedElementState": {}
         };
     }
     static get events() {
@@ -629,12 +761,8 @@ export class Radio {
         return {
             "setFocus": {
                 "complexType": {
-                    "signature": "(ev: any) => Promise<void>",
-                    "parameters": [{
-                            "name": "ev",
-                            "type": "any",
-                            "docs": ""
-                        }],
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
@@ -644,7 +772,24 @@ export class Radio {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Sets the focus on the checkbox input element.",
+                    "tags": []
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets blur on the native `input`. Use this method instead of the global\n`input.blur()`.",
                     "tags": [{
                             "name": "internal",
                             "text": undefined
@@ -770,6 +915,15 @@ export class Radio {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "hovered",
+                "methodName": "hoveredChanged"
+            }, {
+                "propName": "pressed",
+                "methodName": "pressedChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "click",
@@ -786,4 +940,10 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Radio.prototype, "createLogger", null);
+__decorate([
+    ListenToElementStates(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Radio.prototype, "elementStateListener", null);
 let radioIds = 0;

package/dist/collection/components/bal-radio/utils/bal-radio.util.js

@@ -1,3 +1,3 @@
 export const newBalRadioOption = (option) => {
-    return Object.assign(Object.assign({ interface: 'radio', labelHidden: false, flat: false, disabled: false, readonly: false, required: false, nonSubmit: false, invisible: false, invalid: false }, option), { label: '', html: option.label });
+    return Object.assign(Object.assign({ interface: 'radio', labelHidden: false, flat: false, disabled: false, readonly: false, required: false, nonSubmit: false, invalid: false }, option), { label: '', html: option.label });
 };

package/dist/collection/components/bal-segment/bal-segment-item/bal-segment-item.js

@@ -152,7 +152,7 @@ export class SegmentItem {
                 'aria-describedby': this.ariaForm.messageId,
             };
         }
-        return (h(Host, { key: '55e0754b091fb723f2e5d90f7bdb50190abbea52', 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: '8b7d3b58c59e02b98eeb131696fc0b0540780353', 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: 'a8da51b21fe49d7e7dc56d1089710a905ebf5df7', 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: '47d5eb2ef471654c05343ae83b4ac2b4fb0e9839', space: "x-small", layout: 'horizontal' }, h("bal-content", { key: '833e34ce4261d88906d220ac92acf68691aa5d88', space: "none" }, h("bal-label", { key: 'a7fffd217d6823c4234c76f2e4a7fc645148a453', htmlId: `bal-si-${this.internalId}-label` }, label), h("span", { key: '695a0cf23d40a0b19ef4a76248838b27dbe481be', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { key: '2fb05a58ea4850f5196804f69fb0d84e3dc1145e', onSlotchange: this.onSlottedItemsChange }))))), h("div", { key: 'a6b5024e4e04af2be2d7830a656bdf0c2cb213a1', 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: '2f0eccf481abba284cae7bb7ebb9d9ca88f2339e', 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: '317c8da87c9e196082f46e69e639d7b5761401ba', 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: '749649163977298b320ebff6ff5dd5565c98bc4d', 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: '67a2bce84c38c0f49a47da1c6ec0189f8ac6b987', space: "x-small", layout: 'horizontal' }, h("bal-content", { key: '38eaad5948f5b034ba3567619533e67f2c6a3016', space: "none" }, h("bal-label", { key: 'a761aee3fad22f05cd0ce66f74710c3da61acd81', htmlId: `bal-si-${this.internalId}-label` }, label), h("span", { key: '99b2524c94a243b8f4c884008919fe9bd92271ff', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { key: 'e5a89b88d1c49ec722a83f2887215d69e6f43ebb', onSlotchange: this.onSlottedItemsChange }))))), h("div", { key: 'a7b16c5d48c09846fcb3103c1a5dd4f38dbf1b46', 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)) })));
     }
     static get is() { return "bal-segment-item"; }
     static get originalStyleUrls() {

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

@@ -313,7 +313,7 @@ export class Segment {
     render() {
         const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
         const block = BEM.block('segment');
-        return (h(Host, { key: 'b957d93e8bfd7d7dbbdb6261f793aa1af056116b', 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: 'ee706ef9db166e55e7074e11c76c37b3c4ac545b', onSlotchange: this.onSlottedItemsChange })));
+        return (h(Host, { key: 'd374c489107b4f4cea5994673d396392b4db7d6d', 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: 'e42649f221772809d983d614fc76738174e514b7', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "bal-segment"; }
     static get originalStyleUrls() {

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

@@ -12,7 +12,7 @@ export class SelectOption {
         this.log = log;
     }
     render() {
-        return (h(Host, { key: 'c479330ac26bcb19ddd41e7a99e635bf3ffc6170', style: { display: 'none' } }, h("slot", { key: '009baaefc29d307403edb10160c694dcc8495164' })));
+        return (h(Host, { key: '42c10fcd28b41d1158304ee9a7936c2fa0c52d85', style: { display: 'none' } }, h("slot", { key: 'da6a2841c0dd48aa662bf38926151669a4525048' })));
     }
     static get is() { return "bal-select-option"; }
     static get properties() {