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

package/components/bal-select2.js

@@ -722,7 +722,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
      */
     render() {
         var _a;
-        const Chip = (props) => (h("bal-tag", { key: '9c073d3c0b6e49a35723e1789fdfd4710e6c30d4', 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: 'a348dae32f7f0638b66dc2ceda8a26763fe18c07', 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');
@@ -736,19 +736,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: 'd48d8cd7b4d4d1cf1b1eaf0a81d181f69344d50b', 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: 'a59a6d21bcfbe6b4012cfa76ba847f41bd8fb1dc', 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: '0d02b30a84016c258ee4cecfcf48b8d77c258148', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: 'a9b04e732228e654e6e2ecd52a580ef8751e89cb', "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: '8dab5105cd37563af2d15b1aa4f71ef5f5eba49a', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
+        return (h(Host, { key: '126edf5ce107f3bd0c1e98ca7ec51382f5f93a8b', 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: '561e175063c2886f99fdef91d0e11c1c38affb4b', 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: '5ce86ac980b73f01227edaba951299f2c7caa1a3', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: '7fdaed7cbf590c937e67de98bf5c54e0ca62083a', "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: '3837bb760eaba758fe087195e9ca80ec298ae3f6', 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", { key: 'c4039aa21b75b7633be0b65c6a85abfd1bf6568e', 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.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", { key: 'd1134c3c0459c89b0952e47f5fac67e3753f3c75', 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.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: 'c81124a393d995c2f998ed1600f9b40b2e7480fd', 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: '36cdae574c4b7588c1f8c2816b0b872a9c4cc2bd', 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: 'c2ae92d7d4830a4e248b94ff50516753aca828d4', 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: '70eb78a2d378401f173ee8e62f37fbc602827fba', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
                 .modifier('hidden')
                 .class(this.noDataLabel === undefined || this.hasOptions() || !this.typeahead || this.selectionOptional)) }, this.noDataLabel)))));
     }

package/components/bal-shape2.js

@@ -48,11 +48,11 @@ const Shape = /*@__PURE__*/ proxyCustomElement(class Shape extends HTMLElement {
     render() {
         const block = BEM.block('shape');
         const shapes = [
-            h("g", { key: '7ffce26f2f8ff376d6f4a4281293b0cbce3d455e', id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, h("g", { key: '7f37e580d4a84007d6cec7b29850252a71fbd7db', id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, h("path", { key: '7e655256f9c76c6ed82b5dc1628d25065dc16161', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M191.6,0c2.2,0,3.4,0,4.2,0.4c0.7,0.4,1.4,1,1.7,1.7c0.4,0.9,0.4,2,0.4,4.2V66h-66V0H191.6z M0,125.6V66h66\n            v66H6.4H0 M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z" }))),
-            h("g", { key: '8720ba7f09f080a1e94475e8db5b465d280cd1cc', id: "b949d602-8478-437e-a171-ad3f26649cb4" }, h("g", { key: 'a471219e03f4af9f3b72ac7548e8a234fd798b41', id: "ae3574e0-2065-4681-8937-4318b8656147" }, h("path", { key: 'a0f545ab74264f3389f45ca3fbd8544427046216', class: "b9f37b2d-094d-4f18-b17c-7c5acf36f9a6", d: "M132,66v66H66V66ZM191.6,0c2.24,0,3.36,0,4.22.44a4,4,0,0,1,1.74,1.74c.44.86.44,2,.44,4.22V66H132V0ZM66,0V66H0V6.4C0,4.16,0,3,.44,2.18A4,4,0,0,1,2.18.44C3,0,4.16,0,6.4,0Zm0,132v66H6.4c-2.24,0-3.36,0-4.22-.44a4,4,0,0,1-1.74-1.74C0,195,0,193.84,0,191.6V132Zm66,0v66H66V132Zm66,0v59.6c0,2.24,0,3.36-.44,4.22a4,4,0,0,1-1.74,1.74c-.86.44-2,.44-4.22.44H132V132Zm0-66v66H132V66Z" }))),
-            h("g", { key: '3aabfd5d30f05b9ca4c03970a539bd4fce699d40', id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, h("g", { key: 'cb78639d0529e2df4f8028c8838d3251ecdec578', id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, h("path", { key: 'b891158c547001cf3a2af9a6752739d2002b2ad2', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M66,132v66H6.4c-2.2,0-3.4,0-4.2-0.4c-0.7-0.4-1.4-1-1.7-1.7C0,195,0,193.8,0,191.6V132H66z M132,132v66H66\n            v-66H132z M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z M198,66v66h-66V66" }))),
+            h("g", { key: 'bd098f8a0d60a01a901d6c7e0041945de00f7c84', id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, h("g", { key: '7ae53a770a1f0f915dcfee5836350fb43f43c83c', id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, h("path", { key: '27730d24993bf8f4ebb2180113d927f08d86c295', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M191.6,0c2.2,0,3.4,0,4.2,0.4c0.7,0.4,1.4,1,1.7,1.7c0.4,0.9,0.4,2,0.4,4.2V66h-66V0H191.6z M0,125.6V66h66\n            v66H6.4H0 M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z" }))),
+            h("g", { key: 'a39bebf5119896bb95137f99b31bd091461e4187', id: "b949d602-8478-437e-a171-ad3f26649cb4" }, h("g", { key: '8e9872fc0469e4227b39ce648713a79a0409d5c2', id: "ae3574e0-2065-4681-8937-4318b8656147" }, h("path", { key: '08e8eecb7e5da4cf009cf1ff82219faedb82f3fa', class: "b9f37b2d-094d-4f18-b17c-7c5acf36f9a6", d: "M132,66v66H66V66ZM191.6,0c2.24,0,3.36,0,4.22.44a4,4,0,0,1,1.74,1.74c.44.86.44,2,.44,4.22V66H132V0ZM66,0V66H0V6.4C0,4.16,0,3,.44,2.18A4,4,0,0,1,2.18.44C3,0,4.16,0,6.4,0Zm0,132v66H6.4c-2.24,0-3.36,0-4.22-.44a4,4,0,0,1-1.74-1.74C0,195,0,193.84,0,191.6V132Zm66,0v66H66V132Zm66,0v59.6c0,2.24,0,3.36-.44,4.22a4,4,0,0,1-1.74,1.74c-.86.44-2,.44-4.22.44H132V132Zm0-66v66H132V66Z" }))),
+            h("g", { key: '1176953bc3ee0cc6a799222c13b065d3ebc5eaf1', id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, h("g", { key: '51e40727714bc0adf3667d6769fe51611adbbcb4', id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, h("path", { key: '5d09a1cbc57fc21b1e62ddd4e263c18a7278c556', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M66,132v66H6.4c-2.2,0-3.4,0-4.2-0.4c-0.7-0.4-1.4-1-1.7-1.7C0,195,0,193.8,0,191.6V132H66z M132,132v66H66\n            v-66H132z M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z M198,66v66h-66V66" }))),
         ];
-        return (h(Host, { key: '12322c170148297bfb743e359817b27490530d9a', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, h("svg", { key: '701ece673d80f3096f3a447de10904f2f5560a37', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true", fill: this.getHex() }, shapes[parseInt(this.variation) - 1])));
+        return (h(Host, { key: '5aa4927f8682c07a13ab2fa9b56f1248141d7cd7', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, h("svg", { key: '99ee4d77c26e1cc4b84052907ef6d628f94b3937', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true", fill: this.getHex() }, shapes[parseInt(this.variation) - 1])));
     }
     get el() { return this; }
     static get style() { return BalShapeStyle0; }

package/components/bal-sheet.js

@@ -15,7 +15,7 @@ const Sheet = /*@__PURE__*/ proxyCustomElement(class Sheet extends HTMLElement {
         const container = block.element('container');
         const containerInner = container.element('inner');
         const containerModifier = this.containerSize !== '' ? `is-${this.containerSize}` : '';
-        return (h(Host, { key: '75dd6a91f8ac6d45412ae20453935668cb571e7f', class: Object.assign({}, block.class()) }, h("div", { key: '75aa66d83f6a6330b9e3d36a703fb82ab11bd015', class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, h("div", { key: 'd6a97321e5db3a2c8ba252fb845228ba6371de67', class: Object.assign({}, containerInner.class()) }, h("slot", { key: 'f16331a11a842d719d494fb72db56fe0423aeb05' })))));
+        return (h(Host, { key: 'e38d3e613314a1502b6b1a6eb77e212de467af3c', class: Object.assign({}, block.class()) }, h("div", { key: '7d71e2959eb213f6cc243d9b8e91d1c69a5f9e1a', class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, h("div", { key: '7712cfd94666fc628912db7b7f786bab530030e3', class: Object.assign({}, containerInner.class()) }, h("slot", { key: '0eebab4aa2bc379b4c7dd4fa0cd5a9f0ad2b76eb' })))));
     }
     static get style() { return BalSheetStyle0; }
 }, [4, "bal-sheet", {

package/components/bal-snackbar.js

@@ -80,7 +80,7 @@ const Snackbar = /*@__PURE__*/ proxyCustomElement(class Snackbar extends HTMLEle
             success: 'check-circle',
         };
         const icon = isIconDefined ? this.icon : colorIcons[this.color || 'info'];
-        return (h(Host, { key: 'b3915c5a567dc89a8ec7145a7ab98498ca97b66d', id: this.snackbarId, role: "alertdialog", class: Object.assign(Object.assign({}, block.class()), block.modifier(`color-${this.color}`).class(!!this.color)), "aria-labelledby": subjectId }, h("div", { key: 'ae6759e051630b2c9fe51c7d24d931e30737376d', class: Object.assign({}, detailsEl.class()) }, h("div", { key: 'dfb41b163dfb1ec063576c487769102bd2c52c40', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign({}, detailsEl.element('icon').class()), detailsEl.element('icon').modifier('masked').class(!isIconDefined)), detailsEl.element('icon').modifier(`color-${this.color}`).class(!isIconDefined)) }, isIconDefined ? h("bal-icon", { name: icon, color: 'primary', size: "medium" }) : ''), h("div", { key: '75a34eb777fbf3c9d8ffdc431a155183888fe5ad', class: Object.assign({}, detailsEl.element('content').class()) }, h("h2", { key: '7aecaed230c536db0771eb4060a20f8d89b737fa', id: subjectId }, this.subject), h("span", Object.assign({ key: '660cdb87938ee2d5e48bb103dbdb573deafbf088' }, messageAttributes), h("slot", { key: '8a9a874dca0cfce2771f4af4a356e7783d2efada' }), h("span", { key: '988af9ec4c07a0a07f82f0036931cd1dad15a13c', class: "hidden" }))), h("div", { key: 'be82a69b4dc2f4e42ba9f55e7f7af403ce0136cd', class: Object.assign({}, detailsEl.element('close').class()) }, h("bal-close", { key: '9b999204c4f1fbdb215161ae08ebec3c8ae21658', class: "bal-snackbar__close", "data-testid": "bal-snackbar-close", onClick: () => this.close() }))), this.action ? (h("div", { class: Object.assign({}, buttonWrapperEl.class()) }, h("bal-button", { color: "info", size: "small", href: this.href, target: this.target, onClick: () => this.onActionHandler(), "data-testid": "bal-snackbar-action" }, this.action))) : ('')));
+        return (h(Host, { key: '4a1920c0a2bd21295fd3c8b6f14204f2cffd24fc', id: this.snackbarId, role: "alertdialog", class: Object.assign(Object.assign({}, block.class()), block.modifier(`color-${this.color}`).class(!!this.color)), "aria-labelledby": subjectId }, h("div", { key: '07e829354ae42deae93d2514e8a1705ed2324333', class: Object.assign({}, detailsEl.class()) }, h("div", { key: '33ea4a6d4c6571f5584a13b32dd0814ee532a4e0', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign({}, detailsEl.element('icon').class()), detailsEl.element('icon').modifier('masked').class(!isIconDefined)), detailsEl.element('icon').modifier(`color-${this.color}`).class(!isIconDefined)) }, isIconDefined ? h("bal-icon", { name: icon, color: 'primary', size: "medium" }) : ''), h("div", { key: 'b5f9973bc16038dd0b1911758072c001cfa5dcea', class: Object.assign({}, detailsEl.element('content').class()) }, h("h2", { key: '015bed1adb93c84e224b85d95247a1706554e73f', id: subjectId }, this.subject), h("span", Object.assign({ key: 'c7bf53d336633441bd4ed3abbdf978a4c1587b9d' }, messageAttributes), h("slot", { key: 'd197c12700d991181e17efb90fafa3569fab1dcc' }), h("span", { key: 'a913b6adc15cad8ecfd76905e6047e3e51cecbc4', class: "hidden" }))), h("div", { key: '6eaea877dafb35eb0bb5a4d9c29540be35ca23e6', class: Object.assign({}, detailsEl.element('close').class()) }, h("bal-close", { key: '0e2aaef462aba47274903b304ddf340ec9a40032', class: "bal-snackbar__close", "data-testid": "bal-snackbar-close", onClick: () => this.close() }))), this.action ? (h("div", { class: Object.assign({}, buttonWrapperEl.class()) }, h("bal-button", { color: "info", size: "small", href: this.href, target: this.target, onClick: () => this.onActionHandler(), "data-testid": "bal-snackbar-action" }, this.action))) : ('')));
     }
     get element() { return this; }
     static get style() { return BalSnackbarStyle0; }

package/components/bal-spinner2.js

@@ -140,7 +140,7 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends HTMLEleme
      */
     render() {
         const block = BEM.block('spinner');
-        return (h(Host, { key: '61330569cf09ee4964ef809792f354d060419b62', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('circle').class(this.variation === 'circle')), block.modifier('small').class(this.small)), block.modifier('animated').class(this.animated)), block.modifier(`color-${this.color}`).class(this.variation === 'circle')), role: "progressbar", "aria-hidden": "true" }));
+        return (h(Host, { key: '5604f6e34571f92e51972754c5bb6d3cc894afbf', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('circle').class(this.variation === 'circle')), block.modifier('small').class(this.small)), block.modifier('animated').class(this.animated)), block.modifier(`color-${this.color}`).class(this.variation === 'circle')), role: "progressbar", "aria-hidden": "true" }));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-stack2.js

@@ -50,7 +50,7 @@ const Stack = /*@__PURE__*/ proxyCustomElement(class Stack extends HTMLElement {
         if (alignment) {
             alignValue = this.alignment.split(' ').join('-');
         }
-        return (h(Host, { key: '221668cc1bec71015c1616e156bd7805dc583c6c', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`use-wrap`).class(useWrap)), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`space-row-${this.spaceRow}`).class(spaceRow)), block.modifier(`space-row-${this.spaceColumn}`).class(spaceColumn)), block.modifier(`px-${this.px}`).class(px)), block.modifier(`py-${this.py}`).class(py)), block.modifier(`fit-content`).class(fitContent)) }, h("slot", { key: '2cd538d3e31d76403cbc1bd61ac518a5f2dcc6a5' })));
+        return (h(Host, { key: '8ad1e4d017a753e16e7aa4b2aeae237557294345', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`use-wrap`).class(useWrap)), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`space-row-${this.spaceRow}`).class(spaceRow)), block.modifier(`space-row-${this.spaceColumn}`).class(spaceColumn)), block.modifier(`px-${this.px}`).class(px)), block.modifier(`py-${this.py}`).class(py)), block.modifier(`fit-content`).class(fitContent)) }, h("slot", { key: '7b42c4eb98bf8936a5c23934858b3a41b763bba5' })));
     }
     static get style() { return BalStackStyle0; }
 }, [4, "bal-stack", {

package/components/bal-stage-back-link.js

@@ -13,10 +13,10 @@ const StageBackLink = /*@__PURE__*/ proxyCustomElement(class StageBackLink exten
     }
     render() {
         const block = BEM.block('stage-back-link');
-        return (h(Host, { key: '8a96e969901e8dbb9e29587c7bfac3aa475331f3', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: '488c839fe831fbaf64703a0e3ad3fe80caef2968', class: {
+        return (h(Host, { key: 'ebc6bf193fec51360b0d6fdd7c60a7edff47a1f7', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: '7504839dfd241c55cd2744db3da98f13dadc23f0', class: {
                 'link': true,
                 'is-inverted': this.inverted,
-            }, href: this.href, rel: this.rel }, h("bal-icon", { key: '12ced75ad0f38cb7a7ef0f70b9cf5babbaf13842', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: 'f9bb274429697778e37dab9d89f91315230c93f3' }))));
+            }, href: this.href, rel: this.rel }, h("bal-icon", { key: '8729a6d1227e15163242008bc27e94f275799b25', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: 'bc3f85fd7cd1b1b86320e16c2dc3626c608bf606' }))));
     }
     get el() { return this; }
 }, [4, "bal-stage-back-link", {

package/components/bal-stage-body.js

@@ -8,7 +8,7 @@ const StageBody = /*@__PURE__*/ proxyCustomElement(class StageBody extends HTMLE
     }
     render() {
         const block = BEM.block('stage-body');
-        return (h(Host, { key: '02186af6d627121ecd4f6e1ed64fe02f31f39c38', class: Object.assign({}, block.class()) }, h("slot", { key: '0c48731c5a7e2bbcdaddaf984dfa89e282ac437e' })));
+        return (h(Host, { key: 'fc3fafba94f4c87b7e88494e43acf9c5b080a375', class: Object.assign({}, block.class()) }, h("slot", { key: '4433e37642c9851fe966cedc3a19e310bd6d01e9' })));
     }
     get el() { return this; }
 }, [4, "bal-stage-body"]);

package/components/bal-stage-foot.js

@@ -6,7 +6,7 @@ const StageFoot = /*@__PURE__*/ proxyCustomElement(class StageFoot extends HTMLE
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '04004ec95c9a7698132f56c9efa511c02d157965', class: "hero-foot" }, h("slot", { key: '1bdac86f51886901490c1a8fe74fb53f1eb3568f' })));
+        return (h(Host, { key: '1d3ba006d2d6aafe5795cdb2f59d9cb02822c927', class: "hero-foot" }, h("slot", { key: '2c24fa40d9505b5b7b673d99d7b831161372e35b' })));
     }
     get el() { return this; }
 }, [4, "bal-stage-foot"]);

package/components/bal-stage-head.js

@@ -6,7 +6,7 @@ const StageHead = /*@__PURE__*/ proxyCustomElement(class StageHead extends HTMLE
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '77f405fb5a84be341f5709ea9451fd5b01eae1a5', class: "hero-head" }, h("slot", { key: '7b93751fe0fd796422cdf0d669404bf22f1312c8' })));
+        return (h(Host, { key: '833e55891f0d094860fe8b748f3021b79a026ad6', class: "hero-head" }, h("slot", { key: 'da91f59134b4ff29cd2a234875733ffd83213973' })));
     }
     get el() { return this; }
 }, [4, "bal-stage-head"]);

package/components/bal-stage-image.js

@@ -23,7 +23,7 @@ const StageImage = /*@__PURE__*/ proxyCustomElement(class StageImage extends HTM
     render() {
         const block = BEM.block('stage-image');
         const imageSrc = this.fallback ? this.fallback : this.srcSet.split(',')[0];
-        return (h(Host, { key: 'b587dc5614e4d0a355712bc09fd28d2848469ca5', class: Object.assign({}, block.class()) }, this.isOnLoadEventDone ? (h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
+        return (h(Host, { key: 'ff992ad8c9c0481c5f75670eecd472ca0e972bb5', class: Object.assign({}, block.class()) }, this.isOnLoadEventDone ? (h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
     }
     get el() { return this; }
 }, [0, "bal-stage-image", {

package/components/bal-stage.js

@@ -48,7 +48,7 @@ const Stage = /*@__PURE__*/ proxyCustomElement(class Stage extends HTMLElement {
     render() {
         const block = BEM.block('stage');
         const element = BEM.block('stage-content');
-        return (h(Host, { key: '0a0f187c1f276c239346ce3f8cebcc0dbb78aafb', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.size === '' ? 'medium' : this.size}`).class()), block.modifier(`is-${this.color}`).class(!!this.color)), block.modifier('has-shape').class(!!this.shape)), style: { '--bal-stage-container-width': this.getContainerWidth() } }, h("section", { key: '74dee713cafc1bb4bc420b8614f6a3cd5e938600', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, h("slot", { key: 'db3dcfa410828da23c0fcc888f53cd110992a847' }), this.shape && (h("div", { key: '586c8b26d0d00d7073bd4dde471302037f0446ea', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, h("bal-shape", { key: 'cf707bdfc9937d0fbe2a62080dbe2eda2771973d', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
+        return (h(Host, { key: '4a58b984bc3bd0603b2d6941ded244c9d3c851f7', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.size === '' ? 'medium' : this.size}`).class()), block.modifier(`is-${this.color}`).class(!!this.color)), block.modifier('has-shape').class(!!this.shape)), style: { '--bal-stage-container-width': this.getContainerWidth() } }, h("section", { key: 'a7a7774a676224d6c6b42b38b649c98d5ca52e6e', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, h("slot", { key: 'cf39f71e8a50bb22011b708226154f0ddd93fe6a' }), this.shape && (h("div", { key: '570123c02e53b5845efeec8ba5fe9e01423f9d36', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, h("bal-shape", { key: '85157c5c0b9fec1d3780dac60234842ad9654cef', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
     }
     static get style() { return BalStageStyle0; }
 }, [4, "bal-stage", {

package/components/bal-step-item.js

@@ -54,10 +54,10 @@ const StepItem = /*@__PURE__*/ proxyCustomElement(class StepItem extends HTMLEle
         };
     }
     render() {
-        return (h(Host, { key: '2345808b69d02adaa4c8398e9826accb724f0571', role: "tabpanel", class: {
+        return (h(Host, { key: '1aafa11a4ca3f70e99d4ae73ae57b5a97044a757', role: "tabpanel", class: {
                 'bal-step-item': true,
                 'bal-step-item--active': this.isActive,
-            } }, h("slot", { key: 'a79cdedd49fdac1b556a92e5c905b124a9583128' })));
+            } }, h("slot", { key: 'bed7fb1b783d7ab29c32d49c29e5143bbf1f0147' })));
     }
     get el() { return this; }
 }, [4, "bal-step-item", {

package/components/bal-steps.js

@@ -28,12 +28,17 @@ const StepButton = ({ item, color, isMobile, clickable, onSelectTab }) => {
     if (item.invisible) {
         return;
     }
-    return (h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`color-${color}`).class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, href: item.href === '' ? 'javascript:;' : item.href, rel: item.rel, target: item.target, onClick: (ev) => onSelectTab(ev, item) },
+    if (item.href) {
+        return (h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'is-link': true }, bemEl.class()), bemEl.modifier(`color-${color}`).class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, href: item.href, rel: item.rel, target: item.target, onClick: (ev) => onSelectTab(ev, item) },
+            h(StepIcon, { item: item, isMobile: isMobile }),
+            h(StepLabel, { item: item })));
+    }
+    return (h("button", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`color-${color}`).class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, onClick: (ev) => onSelectTab(ev, item) },
         h(StepIcon, { item: item, isMobile: isMobile }),
         h(StepLabel, { item: item })));
 };
 
-const balStepsCss = "@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background:var(--bal-color-white);--bal-steps-step-icon-background-active:var(--bal-color-primary);--bal-steps-step-icon-background-disabled:var(--bal-color-grey-2);--bal-steps-step-icon-background-done:var(--bal-color-primary);--bal-steps-step-icon-background-failed:var(--bal-color-danger);--bal-steps-step-button-progress-line-background:var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after:var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-progress-line-background-light-blue:var(--bal-color-primary-2);--bal-steps-step-button-passed-background-light-blue:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-purple:var(--bal-color-purple-2);--bal-steps-step-button-passed-background-purple:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-green:var(--bal-color-green-2);--bal-steps-step-button-passed-background-green:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-red:var(--bal-color-red-2);--bal-steps-step-button-passed-background-red:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-yellow:var(--bal-color-yellow-2);--bal-steps-step-button-passed-background-yellow:var(--bal-color-primary);--bal-steps-step-border-width:var(--bal-form-field-control-border-width);--bal-steps-step-border-style:var(--bal-form-field-control-border-style);--bal-steps-step-border-color:var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled:var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed:var(--bal-color-danger);--bal-steps-step-icon-radius:var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius:var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius:var(--bal-radius-rounded);--bal-steps-step-label-text-color:var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done:var(--bal-color-text-primary);--bal-steps-step-label-text-color-active:var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed:var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color:var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active:var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done:var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed:var(--bal-color-text-white)}.bal-steps__nav__item{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;gap:.5rem;-ms-flex-direction:column;flex-direction:column;-ms-flex-preferred-size:1rem;flex-basis:1rem;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;text-decoration:none;cursor:default;position:relative;min-width:3rem;padding-top:6px}.bal-steps__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-steps__nav__item--clickable{cursor:pointer;pointer-events:all}.bal-steps__nav__item:not(:last-child)::after{content:\" \";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-progress-line-background);border-radius:var(--bal-steps-step-button-progress-line-radius);margin-top:3px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.5rem}}.bal-steps__nav__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-passed-background)}.bal-steps__nav__item--color-light-blue:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-light-blue)}.bal-steps__nav__item--color-light-blue.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-light-blue);border-color:var(--bal-steps-step-button-progress-line-background-light-blue);color:var(--bal-color-primary-4)}.bal-steps__nav__item--color-light-blue.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-purple:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__item--color-purple.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-purple);border-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__item--color-purple.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-green:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__item--color-green.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-green);border-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__item--color-green.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-yellow:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__item--color-yellow.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-yellow);border-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__item--color-yellow.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-red:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__item--color-red.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-red);border-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__item--color-red.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item__icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;font-weight:var(--bal-font-weight-bold);border-radius:var(--bal-steps-step-icon-radius);font-size:var(--bal-text-size-small);height:1.5rem;width:1.5rem;left:calc(50% - .75rem);border:var(--bal-steps-step-border-width) var(--bal-steps-step-border-style) var(--bal-steps-step-border-color);background:var(--bal-steps-step-icon-background);color:var(--bal-steps-step-icon-text-color)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon{height:2rem;width:2rem;left:calc(50% - 1rem);font-size:var(--bal-text-size-normal)}}.bal-steps__nav__item__icon--active{border-color:var(--bal-steps-step-border-color-active);background:var(--bal-steps-step-icon-background-active);color:var(--bal-steps-step-icon-text-color-active)}.bal-steps__nav__item__icon--done{border-color:var(--bal-steps-step-border-color-done);background:var(--bal-steps-step-icon-background-done);color:var(--bal-steps-step-icon-text-color-done)}.bal-steps__nav__item__icon--failed{border-color:var(--bal-steps-step-border-color-failed);background:var(--bal-steps-step-icon-background-failed);color:var(--bal-steps-step-icon-text-color-failed);font-size:var(--bal-text-size-normal)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-tablet)}}@media screen and (min-width: 1024px){.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-desktop)}}.bal-steps__nav__item__icon--disabled{border-color:var(--bal-steps-step-border-color-disabled);background:var(--bal-steps-step-icon-background-disabled);color:var(--bal-steps-step-icon-text-color-disabled);opacity:.6}.bal-steps__nav__item__label{display:none}@media screen and (min-width: 769px),print{.bal-steps__nav__item__label{display:block;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);text-align:center;width:100%;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-steps-step-label-text-color)}.bal-steps__nav__item__label--done{color:var(--bal-steps-step-label-text-color-done)}.bal-steps__nav__item__label--active{color:var(--bal-steps-step-label-text-color-active)}.bal-steps__nav__item__label--failed{color:var(--bal-steps-step-label-text-color-failed)}.bal-steps__nav__item__label--disabled{color:var(--bal-steps-step-label-text-color-disabled);opacity:.6}}.bal-steps{display:block;position:static}.bal-steps__nav{-webkit-overflow-scrolling:touch;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-ms-flexbox;display:flex;overflow-x:auto}.bal-step-item{width:100%;display:none}.bal-step-item--active{display:block}";
+const balStepsCss = "@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background:var(--bal-color-white);--bal-steps-step-icon-background-active:var(--bal-color-primary);--bal-steps-step-icon-background-disabled:var(--bal-color-grey-2);--bal-steps-step-icon-background-done:var(--bal-color-primary);--bal-steps-step-icon-background-failed:var(--bal-color-danger);--bal-steps-step-button-progress-line-background:var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after:var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-progress-line-background-light-blue:var(--bal-color-primary-2);--bal-steps-step-button-passed-background-light-blue:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-purple:var(--bal-color-purple-2);--bal-steps-step-button-passed-background-purple:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-green:var(--bal-color-green-2);--bal-steps-step-button-passed-background-green:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-red:var(--bal-color-red-2);--bal-steps-step-button-passed-background-red:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-yellow:var(--bal-color-yellow-2);--bal-steps-step-button-passed-background-yellow:var(--bal-color-primary);--bal-steps-step-border-width:var(--bal-form-field-control-border-width);--bal-steps-step-border-style:var(--bal-form-field-control-border-style);--bal-steps-step-border-color:var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled:var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed:var(--bal-color-danger);--bal-steps-step-icon-radius:var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius:var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius:var(--bal-radius-rounded);--bal-steps-step-label-text-color:var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done:var(--bal-color-text-primary);--bal-steps-step-label-text-color-active:var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed:var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color:var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active:var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done:var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed:var(--bal-color-text-white)}.bal-steps__nav__item{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;gap:.5rem;-ms-flex-direction:column;flex-direction:column;-ms-flex-preferred-size:1rem;flex-basis:1rem;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;text-decoration:none;cursor:default;position:relative;min-width:3rem;padding-top:6px;border:none;background-color:rgba(0,0,0,0)}.bal-steps__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-steps__nav__item--clickable{cursor:pointer;pointer-events:all}.bal-steps__nav__item:not(:last-child)::after{content:\" \";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-progress-line-background);border-radius:var(--bal-steps-step-button-progress-line-radius);margin-top:3px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.5rem}}.bal-steps__nav__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-passed-background)}.bal-steps__nav__item--color-light-blue:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-light-blue)}.bal-steps__nav__item--color-light-blue.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-light-blue);border-color:var(--bal-steps-step-button-progress-line-background-light-blue);color:var(--bal-color-primary-4)}.bal-steps__nav__item--color-light-blue.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-purple:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__item--color-purple.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-purple);border-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__item--color-purple.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-green:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__item--color-green.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-green);border-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__item--color-green.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-yellow:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__item--color-yellow.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-yellow);border-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__item--color-yellow.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-red:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__item--color-red.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-red);border-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__item--color-red.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item__icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;font-weight:var(--bal-font-weight-bold);border-radius:var(--bal-steps-step-icon-radius);font-size:var(--bal-text-size-small);height:1.5rem;width:1.5rem;left:calc(50% - .75rem);border:var(--bal-steps-step-border-width) var(--bal-steps-step-border-style) var(--bal-steps-step-border-color);background:var(--bal-steps-step-icon-background);color:var(--bal-steps-step-icon-text-color)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon{height:2rem;width:2rem;left:calc(50% - 1rem);font-size:var(--bal-text-size-normal)}}.bal-steps__nav__item__icon--active{border-color:var(--bal-steps-step-border-color-active);background:var(--bal-steps-step-icon-background-active);color:var(--bal-steps-step-icon-text-color-active)}.bal-steps__nav__item__icon--done{border-color:var(--bal-steps-step-border-color-done);background:var(--bal-steps-step-icon-background-done);color:var(--bal-steps-step-icon-text-color-done)}.bal-steps__nav__item__icon--failed{border-color:var(--bal-steps-step-border-color-failed);background:var(--bal-steps-step-icon-background-failed);color:var(--bal-steps-step-icon-text-color-failed);font-size:var(--bal-text-size-normal)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-tablet)}}@media screen and (min-width: 1024px){.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-desktop)}}.bal-steps__nav__item__icon--disabled{border-color:var(--bal-steps-step-border-color-disabled);background:var(--bal-steps-step-icon-background-disabled);color:var(--bal-steps-step-icon-text-color-disabled);opacity:.6}.bal-steps__nav__item__label{display:none}@media screen and (min-width: 769px),print{.bal-steps__nav__item__label{display:block;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);text-align:center;width:100%;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-steps-step-label-text-color)}.bal-steps__nav__item__label--done{color:var(--bal-steps-step-label-text-color-done)}.bal-steps__nav__item__label--active{color:var(--bal-steps-step-label-text-color-active)}.bal-steps__nav__item__label--failed{color:var(--bal-steps-step-label-text-color-failed)}.bal-steps__nav__item__label--disabled{color:var(--bal-steps-step-label-text-color-disabled);opacity:.6}}.bal-steps{display:block;position:static}.bal-steps__nav{-webkit-overflow-scrolling:touch;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-ms-flexbox;display:flex;overflow-x:auto}.bal-step-item{width:100%;display:none}.bal-step-item--active{display:block}";
 const BalStepsStyle0 = balStepsCss;
 
 const Steps = /*@__PURE__*/ proxyCustomElement(class Steps extends HTMLElement {

package/components/bal-switch.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalSwitch extends Components.BalSwitch, HTMLElement {}
+export const BalSwitch: {
+    prototype: BalSwitch;
+    new (): BalSwitch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-switch.js

@@ -0,0 +1,59 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { B as BEM } from './bem.js';
+import { d as defineCustomElement$2 } from './bal-icon2.js';
+
+const balSwitchCss = ":root{--bal-checkbox-switch-label-background-before:var(--bal-color-primary-1);--bal-checkbox-switch-label-background-after:var(--bal-color-primary);--bal-checkbox-switch-label-background-hover-after:var(--bal-color-light-blue-5);--bal-checkbox-switch-label-background-active-after:var(--bal-color-primary-6);--bal-checkbox-switch-label-background-pressed-after:var(--bal-color-border-primary-pressed);--bal-checkbox-switch-label-background-checked-before:var(--bal-color-success-4);--bal-checkbox-switch-label-background-checked-after:var(--bal-color-white);--bal-checkbox-switch-label-background-checked-hover-before:var(--bal-color-success-5);--bal-checkbox-switch-label-background-checked-active-before:var(--bal-color-success-6);--bal-checkbox-switch-label-background-invalid-before:var(--bal-color-danger-1);--bal-checkbox-switch-label-background-invalid-after:var(--bal-color-border-danger);--bal-checkbox-switch-label-background-invalid-hover-after:var(--bal-color-border-danger-hovered);--bal-checkbox-switch-label-background-invalid-active-after:var(--bal-color-border-danger);--bal-checkbox-switch-label-background-invalid-pressed-after:var(--bal-color-border-danger-pressed);--bal-checkbox-switch-label-background-invalid-checked-before:var(--bal-color-danger-4);--bal-checkbox-switch-label-background-invalid-checked-after:var(--bal-color-white);--bal-checkbox-switch-label-background-invalid-checked-hover-before:var(--bal-color-danger-5);--bal-checkbox-switch-label-background-invalid-checked-active-before:var(--bal-color-danger-6);--bal-checkbox-switch-label-background-invalid-checked-hovered-before:var(--bal-color-border-danger-hovered);--bal-checkbox-switch-label-background-invalid-checked-pressed-before:var(--bal-color-border-danger-pressed);--bal-checkbox-switch-label-background-disabled-hover-active-before:var(--bal-color-grey-3);--bal-checkbox-switch-label-background-disabled-hover-active-after:var(--bal-color-border-grey-dark);--bal-checkbox-switch-label-background-disabled-checked-hover-active-before:var(--bal-color-border-grey-dark);--bal-checkbox-switch-label-background-disabled-checked-hover-active-after:var(--bal-color-white)}.bal-switch{display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:2.5rem;height:1.5rem;padding:.25rem;border-radius:var(--bal-radius-rounded);overflow:hidden;background:var(--bal-checkbox-switch-label-background-before)}@media (hover: hover)and (pointer: fine){.bal-switch--hovered,.bal-switch:hover{background:var(--bal-checkbox-switch-label-background-before)}.bal-switch--hovered .bal-switch__toggle,.bal-switch:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-hover-after)}}.bal-switch--pressed,.bal-switch:active{background:var(--bal-checkbox-switch-label-background-before)}.bal-switch--pressed .bal-switch__toggle,.bal-switch:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-pressed-after)}.bal-switch--checked{background:var(--bal-checkbox-switch-label-background-checked-before)}.bal-switch--checked .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}@media (hover: hover)and (pointer: fine){.bal-switch--checked.bal-switch--hovered,.bal-switch--checked:hover{background:var(--bal-checkbox-switch-label-background-checked-hover-before)}.bal-switch--checked.bal-switch--hovered .bal-switch__toggle,.bal-switch--checked:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}}.bal-switch--checked.bal-switch--pressed,.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-checked-active-before)}.bal-switch--checked.bal-switch--pressed .bal-switch__toggle,.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}.bal-switch--invalid{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-after)}@media (hover: hover)and (pointer: fine){.bal-switch--invalid.bal-switch--hovered,.bal-switch--invalid:hover{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid.bal-switch--hovered .bal-switch__toggle,.bal-switch--invalid:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-hover-after)}}.bal-switch--invalid.bal-switch--pressed,.bal-switch--invalid:active{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid.bal-switch--pressed .bal-switch__toggle,.bal-switch--invalid:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-pressed-after)}.bal-switch--invalid.bal-switch--checked.bal-switch,.bal-switch--invalid.bal-switch--checked{background:var(--bal-checkbox-switch-label-background-invalid-checked-before)}.bal-switch--invalid.bal-switch--checked.bal-switch .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--invalid.bal-switch--checked.bal-switch--hovered,.bal-switch--invalid.bal-switch--checked:hover{background:var(--bal-checkbox-switch-label-background-invalid-checked-hovered-before)}.bal-switch--invalid.bal-switch--checked.bal-switch--hovered .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--invalid.bal-switch--checked.bal-switch--pressed,.bal-switch--invalid.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-invalid-checked-pressed-before)}.bal-switch--invalid.bal-switch--checked.bal-switch--pressed .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--disabled,.bal-switch--disabled:hover,.bal-switch--disabled:active{background:var(--bal-checkbox-switch-label-background-disabled-hover-active-before)}.bal-switch--disabled .bal-switch__toggle,.bal-switch--disabled:hover .bal-switch__toggle,.bal-switch--disabled:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-disabled-hover-active-after)}.bal-switch--disabled.bal-switch--checked,.bal-switch--disabled.bal-switch--checked:hover,.bal-switch--disabled.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-disabled-checked-hover-active-before)}.bal-switch--disabled.bal-switch--checked .bal-switch__toggle,.bal-switch--disabled.bal-switch--checked:hover .bal-switch__toggle,.bal-switch--disabled.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-disabled-checked-hover-active-after)}.bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-after);border-radius:50%;position:absolute;top:.25rem;width:1rem;height:1rem;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out, -webkit-transform .3s ease-in-out}.bal-switch__toggle--checked{-webkit-transform:translateX(100%);transform:translateX(100%);background:var(--bal-checkbox-switch-label-background-checked-after)}.bal-icon{position:absolute}.bal-icon .bal-switch__icon--checked{opacity:1}.bal-icon .bal-switch__icon{opacity:0;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}";
+const BalSwitchStyle0 = balSwitchCss;
+
+const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.checked = false;
+        this.invalid = undefined;
+        this.disabled = undefined;
+        this.hovered = false;
+        this.pressed = false;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = BEM.block('switch');
+        const checked = !!this.checked;
+        const disabled = !!this.disabled;
+        const invalid = !!this.invalid;
+        return (h(Host, { key: '44e17aefdee7df228e92368c3863509a4dcd4bc8', class: 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('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }, h("bal-icon", { key: '1f27c8f3f92467ea80de321666e597c8ea7cde89', name: "check", color: "white", size: "small", "aria-hidden": "true", colorHovered: "white", colorPressed: "white", hovered: this.hovered, pressed: this.pressed, class: Object.assign({}, block.element('icon').modifier('checked').class(checked)) }), h("div", { key: 'd22b87a1a091669422db72acf16d48a4c4e8825f', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('toggle').class()), block.element('toggle').modifier('checked').class(checked)), block.element('toggle').modifier('disabled').class(disabled)), block.element('toggle').modifier('invalid').class(invalid)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) })));
+    }
+    static get style() { return BalSwitchStyle0; }
+}, [0, "bal-switch", {
+        "checked": [1028],
+        "invalid": [4],
+        "disabled": [4],
+        "hovered": [4],
+        "pressed": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-switch", "bal-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-switch":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Switch);
+            }
+            break;
+        case "bal-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const BalSwitch = Switch;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalSwitch, defineCustomElement };

package/components/bal-tab-item.js

@@ -13,6 +13,7 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
         this.active = false;
         this.value = '';
         this.label = '';
+        this.rel = undefined;
         this.href = undefined;
         this.target = '_self';
         this.bubble = false;
@@ -53,6 +54,7 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
             icon: this.icon,
             label: this.label,
             href: this.href,
+            rel: this.rel,
             target: this.target,
             active: this.active,
             disabled: this.disabled,
@@ -71,16 +73,17 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
     render() {
         const hasPanel = !this.noPanel;
         const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (h(Host, { key: '42b1a870a0a1e85d2d35b435636f63cb7689fb21', id: this.tabPanelID, class: {
+        return (h(Host, { key: 'fb75a99fe41ccd8bbac4e1d8c0c8bf8a116e3121', id: this.tabPanelID, class: {
                 'bal-tab-item': true,
                 'bal-tab-item--active': this.isActive,
-            }, role: hasPanel ? 'tabpanel' : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', "aria-labelledby": this.tabsId ? `${this.tabsId}-button-${this.value}` : undefined, tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: '09c7e500642020911200c12f5b3bbdd6483dcb3e' })));
+            }, role: hasPanel ? 'tabpanel' : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', "aria-labelledby": this.tabsId ? `${this.tabsId}-button-${this.value}` : undefined, tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: '5e8e7ce04a22af2fce844c4604c3a3277dbccce5' })));
     }
     get el() { return this; }
 }, [4, "bal-tab-item", {
         "active": [516],
         "value": [513],
         "label": [513],
+        "rel": [513],
         "href": [513],
         "target": [1],
         "bubble": [520],

package/components/bal-table.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { B as BEM } from './bem.js';
 
-const balTableCss = ".bal-table{display:block;position:static}.bal-table--is-fullwidth{display:-ms-flexbox;display:flex;width:100%}bal-checkbox .bal-radio-checkbox__label::before{top:0}bal-checkbox .bal-radio-checkbox__label::after{margin-top:0px}";
+const balTableCss = ".bal-table{display:block;position:static}.bal-table--is-fullwidth{display:-ms-flexbox;display:flex;width:100%}bal-checkbox .bal-checkbox__label::before{top:0}bal-checkbox .bal-checkbox__label::after{margin-top:0px}";
 const BalTableStyle0 = balTableCss;
 
 const Table = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
@@ -14,7 +14,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
         const block = BEM.block('table');
         const fullwidthClass = 'is-fullwidth';
         const hasFullwidth = this.expanded;
-        return (h(Host, { key: 'c3666abb26f5837aa6c7b3beda7cb86b12c513a6', class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", { key: 'b5c6c626cefffe3f170ebc1125ac7b26fff63b8b' })));
+        return (h(Host, { key: '21e3f6eb26b7cfb05a6fdf94a3ba32ca62052e4c', class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", { key: 'd5c278f8453e5b2795d32c2f0d18971a1b63203d' })));
     }
     get el() { return this; }
     static get style() { return BalTableStyle0; }

package/components/bal-tabs2.js

@@ -96,6 +96,7 @@ const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accord
         : {
             role: 'listitem',
             href: item.href,
+            rel: item.rel,
             target: item.target,
         };
     if (!isLinkList) {
@@ -389,6 +390,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         this.selectOnMobile = false;
         this.value = undefined;
         this.dimInactiveElements = false;
+        this.handleAsTabList = false;
     }
     createLogger(log) {
         this.log = log;
@@ -565,8 +567,12 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
     swiperGetAllChildrenElements() {
         return Array.from(this.el.querySelectorAll('.bal-tabs__nav__item'));
     }
+    /**
+     * Tells if the component acts as a tab or link list.
+     * If only one link is in the list and handleAsTabList has been set to false it will be a link list
+     */
     get isTabList() {
-        return this.store.filter(tab => !!tab.href).length === 0;
+        return this.store.filter(tab => !!tab.href).length === 0 || this.handleAsTabList;
     }
     get items() {
         return Array.from(this.el.querySelectorAll(`#${this.tabsId} > bal-tab-item`));
@@ -695,7 +701,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         }
     }
     async focus(tab) {
-        const hasKeyboardFocus = this.el.querySelector(`button.bal-focused`) !== null;
+        const hasKeyboardFocus = this.el.querySelector(`button.bal-focused, a.bal-focused`) !== null;
         if (this.swiper.isActive()) {
             const options = await this.getOptions();
             const index = options.findIndex(option => option.value === tab.value);
@@ -736,9 +742,9 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
             .filter(t => this.isTabActive(t))
             .map(t => t.label)
             .join(',');
-        return (h(Host, { key: '36b681df10b65c8663eba165bb629a2d41eff662', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated && this.isTabList)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": dataValue, "data-label": dataLabel }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { swiper: this.swiper, items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, ariaLabel: this.inheritAttributes['aria-label'], accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, lineHidden: !this.enableLineRender, inverted: isInverted, animated: this.animated && this.isTabList, context: this.context, border: hasBorder, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, iconPosition: this.iconPosition, showSwiperControls: !this.isVertical(), verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab, dimInactiveElements: this.dimInactiveElements })), h("div", { key: 'c39d5b7d0890d6e29a75c6d3b5e0e52caa8c1bcd', part: contentPart, class: Object.assign(Object.assign(Object.assign({}, contentEl.class()), contentEl.modifier('vertical').class(this.isVertical())), contentEl
+        return (h(Host, { key: '69d96a45fe17ef7cf2c6acf7a59acb080f434f37', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated && this.isTabList)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": dataValue, "data-label": dataLabel }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { swiper: this.swiper, items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, ariaLabel: this.inheritAttributes['aria-label'], accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, lineHidden: !this.enableLineRender, inverted: isInverted, animated: this.animated && this.isTabList, context: this.context, border: hasBorder, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, iconPosition: this.iconPosition, showSwiperControls: !this.isVertical(), verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab, dimInactiveElements: this.dimInactiveElements })), h("div", { key: 'e0f122fe69cde2029ef069fa99b7c08176e62a31', part: contentPart, class: Object.assign(Object.assign(Object.assign({}, contentEl.class()), contentEl.modifier('vertical').class(this.isVertical())), contentEl
                 .modifier('hidden')
-                .class(this.context === 'meta' || this.context === 'navbar' || this.context === 'navigation')) }, h("div", { key: '27b2361d0e64543c64486816d3f89a04b2dd07d8', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, h("slot", { key: 'f4a44b8ba0dab91a44b0cc9a7bec7287ec3df342' })))));
+                .class(this.context === 'meta' || this.context === 'navbar' || this.context === 'navigation')) }, h("div", { key: 'bbbaad45e23863e488b6f7246f7112596ba50f1d', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, h("slot", { key: 'e5dfe7d80380bc1f3eff95d5391375af110a1440' })))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -769,6 +775,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         "selectOnMobile": [4, "select-on-mobile"],
         "value": [1025],
         "dimInactiveElements": [4, "dim-inactive-elements"],
+        "handleAsTabList": [4, "handle-as-tab-list"],
         "isAccordionOpen": [32],
         "accordionState": [32],
         "isNavbarOpen": [32],

package/components/bal-tag-group.js

@@ -6,7 +6,7 @@ const TagGroup = /*@__PURE__*/ proxyCustomElement(class TagGroup extends HTMLEle
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '0ab0e65bef811da56fe8acea596100fa62a0167a', class: "bal-tag-group" }, h("slot", { key: '405f949e333e3e0995a1ec4eb4160b8513d20785' })));
+        return (h(Host, { key: '2f70efec055a3d379dd24376bd2f899b89475b0e', class: "bal-tag-group" }, h("slot", { key: '1d823341b709ae48b9b706644756f9729021c78d' })));
     }
 }, [4, "bal-tag-group"]);
 function defineCustomElement$1() {

package/components/bal-tag2.js

@@ -39,7 +39,7 @@ const Tag = /*@__PURE__*/ proxyCustomElement(class Tag extends HTMLElement {
         const hasDisabled = this.disabled;
         const positionClass = `is-${this.position}`;
         const hasPosition = this.position !== undefined;
-        return (h(Host, Object.assign({ key: 'b3dd6ad7f05f23340c3df01bd4f184edfb5ce37d', "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(sizeClass).class(hasSize)), block.modifier(colorClass).class(hasColor)), block.modifier(disabledClass).class(hasDisabled)), block.modifier(positionClass).class(hasPosition)), block.modifier('is-invalid').class(this.invalid)) }, this.inheritedAttributes), h("span", { key: '910e9044e5747f04dfc03e08adb1e2a76eaf8987', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, elLabel.class()), elLabel.modifier(sizeClass).class(hasSize)), elLabel.modifier(colorClass).class(hasColor)), elLabel.modifier(disabledClass).class(hasDisabled)), elLabel.modifier('is-invalid').class(this.invalid)), "data-testid": "bal-tag-label" }, h("slot", { key: '89969c3a499afe92277d50d98305069661cb0eb9' })), h("bal-close", Object.assign({ key: 'b56f1ade26b9b3225948a40b0f47b966477169cd', class: Object.assign({}, block.element('close').class()), style: {
+        return (h(Host, Object.assign({ key: '3871533f1c7f6decbaa5b4f64f76fe8f216cfff0', "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(sizeClass).class(hasSize)), block.modifier(colorClass).class(hasColor)), block.modifier(disabledClass).class(hasDisabled)), block.modifier(positionClass).class(hasPosition)), block.modifier('is-invalid').class(this.invalid)) }, this.inheritedAttributes), h("span", { key: 'acc42dcb6273fe49f6d094cd6a2ced41d81e8555', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, elLabel.class()), elLabel.modifier(sizeClass).class(hasSize)), elLabel.modifier(colorClass).class(hasColor)), elLabel.modifier(disabledClass).class(hasDisabled)), elLabel.modifier('is-invalid').class(this.invalid)), "data-testid": "bal-tag-label" }, h("slot", { key: '2a25dd578fe0694ea90e71167ee1f98b0298dea5' })), h("bal-close", Object.assign({ key: 'ac645b9a82109c39e9e509b78bd856b986699e9d', class: Object.assign({}, block.element('close').class()), style: {
                 display: this.closable && !this.disabled ? 'flex' : 'none',
             }, size: this.size === 'small' ? 'small' : '', inverted: (['blue', 'primary', 'info', 'success', 'warning', 'danger', 'red', 'purple', 'yellow', 'green'].includes(this.color) &&
                 !this.light) ||

package/components/bal-text2.js

@@ -56,10 +56,10 @@ const Text = /*@__PURE__*/ proxyCustomElement(class Text extends HTMLElement {
         const Text = this.inline ? 'span' : 'p';
         const color = this.parseColor();
         const block = BEM.block('text');
-        return (h(Host, { key: '8aceb26482ae28d7004f4bb81bdbad288dbbea71', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { key: 'efbe450accfb6df4813866cf7f64649c08ad2f07', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
+        return (h(Host, { key: '49275becd21961382642b6545611f8b7763d3010', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { key: '554500f4a7fdb830534fad06788e1d54375fb076', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
                 .element('text')
                 .modifier(`size-${this.size}`)
-                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: '33ad603fa81fe33512f02b5ed716bd4ec8e675cd' }))));
+                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: 'e508267e4a92701542dba64ecb4f9b488c4cd07a' }))));
     }
     static get style() { return BalTextStyle0; }
 }, [4, "bal-text", {

package/components/bal-textarea.js

@@ -118,7 +118,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
         const value = this.getValue();
         const block = BEM.block('textarea');
         const elNative = block.element('native');
-        return (h(Host, { key: 'a01f3beba2e446382ad3c9119fc60557fb47b079', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '0564a24c6cf54e62c1943ee0c3f1c50a0ad20c7b', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, 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), disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: 'fef46b6265d2662e61f14bebcecc2f95a89ae735' }))));
+        return (h(Host, { key: '58fb6cd0932b1ddedc979d160ad17c836b5f8af3', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: 'c30549a4a89ebd2f0f26eb1d79fca74a3ed0fd31', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, 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), disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: '3e42186b43bb6b7d535c008c74b03ef4981f2fd8' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-time-input.js

@@ -146,7 +146,7 @@ const TimeInput = /*@__PURE__*/ proxyCustomElement(class TimeInput extends HTMLE
         const value = this.focused ? this.getRawValue() : this.getFormattedValue();
         const block = BEM.block('time-input');
         const native = block.element('native');
-        return (h(Host, { key: '08e84d662869b2be26f27b063cc0d6557965f067', "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("bal-input-group", { key: 'b0eff519cc558bc6294c42690196f28c4320888a', disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ key: 'be986e3a300ecfb91bf76fc12b5efb372e9d6809', type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), 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), name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { key: '87b4d33a7e9e46d5ae6b719a7b0f4d1c145606e1', "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
+        return (h(Host, { key: '861d334de5dff26f7140820beeefbdaac4124dae', "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '68257b5929a1014a9d00a417d17e8a1c6968269b', disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ key: 'f4c1f2754aaabf8dacc047c6901aea70310520d4', type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), 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), name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { key: 'f1854a2f66fe680b5a36466b5158b9be1f72fa3c', "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
     }
     get el() { return this; }
     static get watchers() { return {