@baloise/ds-core 19.8.3 → 19.8.4

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

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

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

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

package/dist/collection/components/bal-select/test/bal-select-multiple.visual.play.js

@@ -0,0 +1,28 @@
+import { expect, screenshot, test, waitForChanges } from "../../../../../../playwright/src/index";
+const TAG = 'bal-select';
+const VARIANTS = ['disabled', 'invalid', 'field'];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}-multiple.visual.html`);
+});
+test('basic', async ({ page }) => {
+    const el = page.getByTestId('basic');
+    const inputEl = page.getByTestId('basic-input');
+    await expect(el).toHaveScreenshot(image('basic-before'));
+    await inputEl.click();
+    await waitForChanges(page);
+    await expect(page).toHaveScreenshot(image('basic-open'));
+    const firstOption = el.getByTestId('bal-select-option').nth(1);
+    await firstOption.click();
+    await waitForChanges(page);
+    await expect(el).toHaveScreenshot(image('selected'));
+    await inputEl.click();
+    await waitForChanges(page);
+    await expect(page).toHaveScreenshot(image('selected-open'));
+});
+VARIANTS.forEach(variant => {
+    test(variant, async ({ page }) => {
+        const el = page.getByTestId(variant);
+        await expect(el).toHaveScreenshot(image(`${variant}`));
+    });
+});

package/dist/collection/components/bal-select/test/bal-select.visual.play.js

@@ -0,0 +1,28 @@
+import { expect, screenshot, test, waitForChanges } from "../../../../../../playwright/src/index";
+const TAG = 'bal-select';
+const VARIANTS = ['disabled', 'invalid', 'field', 'free-solo'];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+});
+test('basic', async ({ page }) => {
+    const el = page.getByTestId('basic');
+    const inputEl = page.getByTestId('basic-input');
+    await expect(el).toHaveScreenshot(image('basic-before'));
+    await inputEl.click();
+    await waitForChanges(page);
+    await expect(page).toHaveScreenshot(image('basic-open'));
+    const firstOption = el.getByTestId('bal-select-option').nth(1);
+    await firstOption.click();
+    await waitForChanges(page);
+    await expect(el).toHaveScreenshot(image('selected'));
+    await inputEl.click();
+    await waitForChanges(page);
+    await expect(page).toHaveScreenshot(image('selected-open'));
+});
+VARIANTS.forEach(variant => {
+    test(variant, async ({ page }) => {
+        const el = page.getByTestId(variant);
+        await expect(el).toHaveScreenshot(image(`${variant}`));
+    });
+});

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

@@ -51,11 +51,11 @@ export class Shape {
     render() {
         const block = BEM.block('shape');
         const shapes = [
-            h("g", { key: '87bcd10eb1794dd25b47e8a62bb0e612ce50ada9', id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, h("g", { key: '1539b43e12735fe7ebd960309c2fd0bd17bed96b', id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, h("path", { key: 'a19747dc616fa444df90a58f8a23c2acc5e51f69', 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: 'a619eb63257feaee21d507c6ead25166b220d17b', id: "b949d602-8478-437e-a171-ad3f26649cb4" }, h("g", { key: '5fa321b4284b7ab78e33b47cf8d0a0ec26ad23d1', id: "ae3574e0-2065-4681-8937-4318b8656147" }, h("path", { key: 'ab11d30aa0f11eba6b17748881fa7969619e9076', 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: '21ba9375eb288d7ca3acc8615ba435cc69866cb7', id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, h("g", { key: '1a498d427c784a1183e762d0f605a3409aa3ea89', id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, h("path", { key: 'f276af5ce57e926ccde0fe6c30bced7f6c97b50b', 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: '62a32221af7fcc15d60b43ab4aaa143fab7d311c', id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, h("g", { key: 'ad7a506509762ad7769586774fc10aa54fef80fa', id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, h("path", { key: '1f335e4e64feff4503a847358b87033f1b7d8aa2', 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: 'f974f1f708ff05106b3afcbb3f848a1dcf4e97fb', id: "b949d602-8478-437e-a171-ad3f26649cb4" }, h("g", { key: 'b212b8a5220cbefd36c5e9565bb2be3685658fc0', id: "ae3574e0-2065-4681-8937-4318b8656147" }, h("path", { key: '287b0c85fc2e5fb7b845288f13a2f308a3b3c8ca', 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: 'b653bea006236af44c31c719af98b7ac04bf93ad', id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, h("g", { key: '2cff6eea2c2b6891b4fef81d366869c31f87c5e6', id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, h("path", { key: '777d6655facf61980ec4ee5ea598191e5e273021', 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: '326adc6546e10823928ca9d33272d81f44c35d62', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, h("svg", { key: 'ee375e33bc72435360e229499c992f29aa038a7c', 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: 'cc915095d6cf923c3798033780f076c30a4b58ea', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, h("svg", { key: 'eb2afd20856fd2a7c4a318de4b0a4df1713f87b9', 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])));
     }
     static get is() { return "bal-shape"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-shape/test/bal-shape.visual.play.js

@@ -0,0 +1,13 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-shape';
+const VARIANTS = ['basic'];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+});
+VARIANTS.forEach(variant => {
+    test(variant, async ({ page }) => {
+        const el = page.getByTestId(variant);
+        await expect(el).toHaveScreenshot(image(`${variant}`));
+    });
+});

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

@@ -12,7 +12,7 @@ export class Sheet {
         const container = block.element('container');
         const containerInner = container.element('inner');
         const containerModifier = this.containerSize !== '' ? `is-${this.containerSize}` : '';
-        return (h(Host, { key: '1277fe42a8e474e6e6e56524e80c172057409e68', class: Object.assign({}, block.class()) }, h("div", { key: '489dfea1ce595b5f39871bff43f2bb2183ee2d0e', class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, h("div", { key: 'f8c101d9aeb9a4e95e4723c9a7d314b6117eaa99', class: Object.assign({}, containerInner.class()) }, h("slot", { key: 'd7c4dc1e3eb207ec9c34e8b1fd92aaa9301fcd16' })))));
+        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' })))));
     }
     static get is() { return "bal-sheet"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-sheet/test/bal-sheet.visual.play.js

@@ -0,0 +1,12 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-sheet';
+const VARIANTS = ['basic'];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+});
+VARIANTS.forEach(variant => {
+    test(variant, async ({ page }) => {
+        await expect(page).toHaveScreenshot(image(`${variant}`));
+    });
+});

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

@@ -95,7 +95,7 @@ export class Snackbar {
             success: 'check-circle',
         };
         const icon = isIconDefined ? this.icon : colorIcons[this.color || 'info'];
-        return (h(Host, { key: 'df929ed6cee25a1532d38271e670af91c0e863e0', 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: 'adec486c4921a5811db09ec333f97f1a910df834', class: Object.assign({}, detailsEl.class()) }, h("div", { key: '051a50017e348539aa62cfe754d46a7783251ec2', "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: '98a4577513a0bb2d01ae6a09aff30ed727e06edb', class: Object.assign({}, detailsEl.element('content').class()) }, h("h2", { key: 'accaabaf17294cd3e87a14009282fae9f593b388', id: subjectId }, this.subject), h("span", Object.assign({ key: 'c412b25f693f3bb3c09b89c6f49cc490a58cbc25' }, messageAttributes), h("slot", { key: 'bcbe998117686a604798040450a0e6e01029d9ad' }), h("span", { key: '4941bb6cadaa3f1c893622130b2dc602ca34d0b8', class: "hidden" }))), h("div", { key: '86248cf3065ce74ddb4896a850472f661faf0de7', class: Object.assign({}, detailsEl.element('close').class()) }, h("bal-close", { key: 'b04e7d7a75fb2a1f8eadbec4dc1f1ae7e218dd8c', 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: '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))) : ('')));
     }
     static get is() { return "bal-snackbar"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-snackbar/test/bal-snackbar.visual.play.js

@@ -0,0 +1,13 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-snackbar';
+const VARIANTS = ['basic', 'long-content', 'message'];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+});
+VARIANTS.forEach(variant => {
+    test(variant, async ({ page }) => {
+        const el = page.getByTestId(variant);
+        await expect(el).toHaveScreenshot(image(`${variant}`));
+    });
+});

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

@@ -152,7 +152,7 @@ export class Spinner {
      */
     render() {
         const block = BEM.block('spinner');
-        return (h(Host, { key: '60b00e36e8d9fd1862b3858f47f62265ce95c8f3', 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: 'bf00a08aaa12fd4a3473d6f277a62abe4537ee8f', 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" }));
     }
     static get is() { return "bal-spinner"; }
     static get originalStyleUrls() {

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

@@ -78,7 +78,7 @@ export class Stack {
         if (alignment) {
             alignValue = this.alignment.split(' ').join('-');
         }
-        return (h(Host, { key: 'e5776342476f8195c6d3d3e2c2c4ad07da858eee', 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: 'f96f6828740587f1238c84b08892e8459b017d37' })));
+        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' })));
     }
     static get is() { return "bal-stack"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-stack/test/bal-stack.visual.play.js

@@ -0,0 +1,13 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-stack';
+const VARIANTS = ['basic', 'alignment', 'direction', 'space', 'margins'];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+});
+VARIANTS.forEach(variant => {
+    test(variant, async ({ page }) => {
+        const el = page.getByTestId(variant);
+        await expect(el).toHaveScreenshot(image(`${variant}`));
+    });
+});

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

@@ -13,10 +13,10 @@ export class StageBackLink {
     }
     render() {
         const block = BEM.block('stage-back-link');
-        return (h(Host, { key: '4b980500cb525ce37993b2660d3e6f47afee0f4e', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: 'afadcd09a4c0c669d387d12a28c712d3de376a41', class: {
+        return (h(Host, { key: 'd3f7b6738547d41aa1768247cc35dab99f910ce7', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: 'd176f07817f6e739a23102e3635884c2ee6b999f', class: {
                 'link': true,
                 'is-inverted': this.inverted,
-            }, href: this.href, rel: this.rel }, h("bal-icon", { key: '764fd4ed183e8542d921d2a57e1850adc590b348', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: 'e3c1b6d3ede82a002ce474cb72ad888586502201' }))));
+            }, href: this.href, rel: this.rel }, h("bal-icon", { key: 'd782a08f95a20f3477e75dc80e51f7d762e34913', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: '8a5305d0e2145cf91cffcb7d9c627222ad623177' }))));
     }
     static get is() { return "bal-stage-back-link"; }
     static get properties() {

package/dist/collection/components/bal-stage/bal-stage-body/bal-stage-body.js

@@ -3,7 +3,7 @@ import { BEM } from "../../../utils/bem";
 export class StageBody {
     render() {
         const block = BEM.block('stage-body');
-        return (h(Host, { key: '3b059393f680516ee22d093cb77927211f1b2a2a', class: Object.assign({}, block.class()) }, h("slot", { key: '739898aeda435256a9cf052dfe265d6f28115b94' })));
+        return (h(Host, { key: '9fffb6dccae32661cbe75ba02ce7963b3ef82ba5', class: Object.assign({}, block.class()) }, h("slot", { key: '11831034684ac727427e498ec4892f9ba583145f' })));
     }
     static get is() { return "bal-stage-body"; }
     static get elementRef() { return "el"; }

package/dist/collection/components/bal-stage/bal-stage-foot/bal-stage-foot.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class StageFoot {
     render() {
-        return (h(Host, { key: '351793d066e2d3018a0a4c40cdb2b69495127199', class: "hero-foot" }, h("slot", { key: '76c2593eac606f7aed4c15ac6148780a37555b54' })));
+        return (h(Host, { key: '9cf1ea0d02d399cfa69ecc24af4184abec3df6b0', class: "hero-foot" }, h("slot", { key: 'bbe34ad9838a7a92d50ec23a59e50548b617d902' })));
     }
     static get is() { return "bal-stage-foot"; }
     static get elementRef() { return "el"; }

package/dist/collection/components/bal-stage/bal-stage-head/bal-stage-head.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class StageHead {
     render() {
-        return (h(Host, { key: '19fdb481ea37cab182e426f7582270ecdce23147', class: "hero-head" }, h("slot", { key: '69273fb5da2cd217de773a37eb5000adda15bbbf' })));
+        return (h(Host, { key: 'bdd7bfc5c154aa8fdb3c0a51ec38303faf981dd5', class: "hero-head" }, h("slot", { key: '72412afb15d629dea3c3ff8040b6e668fe92a241' })));
     }
     static get is() { return "bal-stage-head"; }
     static get elementRef() { return "el"; }

package/dist/collection/components/bal-stage/bal-stage-image/bal-stage-image.js

@@ -18,7 +18,7 @@ export class StageImage {
     render() {
         const block = BEM.block('stage-image');
         const imageSrc = this.fallback ? this.fallback : this.srcSet.split(',')[0];
-        return (h(Host, { key: 'a39983d891acebe4f05e5387445483940d0b29dc', class: Object.assign({}, block.class()) }, this.isOnLoadEventDone ? (h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
+        return (h(Host, { key: 'a328489d91f055d488a89e4e2f4297db63d2eec1', class: Object.assign({}, block.class()) }, this.isOnLoadEventDone ? (h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
     }
     static get is() { return "bal-stage-image"; }
     static get properties() {

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

@@ -51,7 +51,7 @@ export class Stage {
     render() {
         const block = BEM.block('stage');
         const element = BEM.block('stage-content');
-        return (h(Host, { key: '9bde68d498d4ed263cb6e7ec0f72505b66436c6a', 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: '0e96a3b8597f3607c98c6689b1658110d11dfa24', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, h("slot", { key: '3c2ca52c3a5750955adab54a9f7eed4c4da08d7c' }), this.shape && (h("div", { key: 'e69202693e9d45a5258c61c121d9499bde7b4bc8', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, h("bal-shape", { key: 'fea5cb01b1062316da0ca04a600dd5cae4f91be0', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
+        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 }))))));
     }
     static get is() { return "bal-stage"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-stage/test/bal-stage.visual.play.js

@@ -0,0 +1,11 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-stage';
+const image = screenshot(TAG);
+test('basic', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+    await expect(page).toHaveScreenshot(image('basic'), { maxDiffPixelRatio: 0.02, fullPage: true });
+});
+test('large', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}-large.visual.html`);
+    await expect(page).toHaveScreenshot(image('large'), { maxDiffPixelRatio: 0.02, fullPage: true });
+});

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

@@ -80,10 +80,10 @@ export class StepItem {
         };
     }
     render() {
-        return (h(Host, { key: '4d22b6691427503ce62c4a0846fa1bc8639654a9', role: "tabpanel", class: {
+        return (h(Host, { key: 'a0ddc77150d56b852231c285748de238aeda360a', role: "tabpanel", class: {
                 'bal-step-item': true,
                 'bal-step-item--active': this.isActive,
-            } }, h("slot", { key: '087ec315891c96985e14d4a94181563cd57b0b8f' })));
+            } }, h("slot", { key: 'f79435da222ca19525b56983ef2fc089610a2e0d' })));
     }
     static get is() { return "bal-step-item"; }
     static get properties() {

package/dist/collection/components/bal-steps/test/bal-steps.visual.play.js

@@ -0,0 +1,13 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-steps';
+const VARIANTS = ['steps', 'steps-links', 'steps-with-four', 'light-blue', 'purple', 'red', 'green', 'yellow'];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+});
+VARIANTS.forEach(variant => {
+    test(variant, async ({ page }) => {
+        const el = page.getByTestId(variant);
+        await expect(el).toHaveScreenshot(image(`${variant}`));
+    });
+});

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

@@ -11,7 +11,7 @@ export class Table {
         const block = BEM.block('table');
         const fullwidthClass = 'is-fullwidth';
         const hasFullwidth = this.expanded;
-        return (h(Host, { key: '02a18be55045376f238aeaaf4fdf0d1abd97788a', class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", { key: '33860f7409dc7b8ef772327022bed7978513a94a' })));
+        return (h(Host, { key: 'c2f174262e6fea2ff7072ba2ad9d64ef13efb6be', class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", { key: 'a59f7e117f987b1aae52d5e7f4f7b5e6cfbf1dc2' })));
     }
     static get is() { return "bal-table"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-table/test/bal-table.visual.play.js

@@ -0,0 +1,13 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-table';
+const VARIANTS = ['basic'];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+});
+VARIANTS.forEach(variant => {
+    test(variant, async ({ page }) => {
+        const el = page.getByTestId(variant);
+        await expect(el).toHaveScreenshot(image(`${variant}`));
+    });
+});

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

@@ -112,10 +112,10 @@ export class TabItem {
     render() {
         const hasPanel = !this.noPanel;
         const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (h(Host, { key: '8faef74e951bde8c3e3be3348ce09ce614d321de', id: this.tabPanelID, class: {
+        return (h(Host, { key: 'a7ebf68e3c2fed0d2068d33afe86cb642e1f111d', 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: '23bfff424e8da5faee77587e5bc6f46ea7cfb109' })));
+            }, 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: 'cfa012ad2c5f2a14a762e8a65872d99100602c3a' })));
     }
     static get is() { return "bal-tab-item"; }
     static get properties() {

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

@@ -674,9 +674,9 @@ export class Tabs {
             .filter(t => this.isTabActive(t))
             .map(t => t.label)
             .join(',');
-        return (h(Host, { key: 'adf5438fb91ca1ae24825612e717b22653e4b51b', 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: 'ef3a8707ffd193bb1a2ab0f76b140bd8ddf03010', part: contentPart, class: Object.assign(Object.assign(Object.assign({}, contentEl.class()), contentEl.modifier('vertical').class(this.isVertical())), contentEl
+        return (h(Host, { key: 'df9259a96b0763c4eae688a54a657ceaea8b39a2', 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: '47ff9e0e5e38a7361a928de8dc6a42aad8ab1cb8', 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: '9c2c2d354e1f9b1d71b85810e9ef5fccc1f3f683', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, h("slot", { key: 'ab7902280092861830088a06478049ac35befa2c' })))));
+                .class(this.context === 'meta' || this.context === 'navbar' || this.context === 'navigation')) }, h("div", { key: 'f7068bbf0aa5fb282d0ab93e3b3ffc740b8b998e', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, h("slot", { key: '12e2c4813faa77f774b5400501d114b0e9a57535' })))));
     }
     static get is() { return "bal-tabs"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-tabs/test/bal-tabs.visual.play.js

@@ -0,0 +1,25 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-tabs';
+const VARIANTS = [
+    'basic',
+    'expanded',
+    'meta',
+    'navbar',
+    'navigation',
+    'vertical',
+    'overflow-stack',
+    'overflow-flex',
+    'vertical-list',
+    'without-active-tab',
+    'brand-icons',
+];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+});
+VARIANTS.forEach(variant => {
+    test(variant, async ({ page }) => {
+        const el = page.getByTestId(variant);
+        await expect(el).toHaveScreenshot(image(`${variant}`));
+    });
+});

package/dist/collection/components/bal-tag/bal-tag-group/bal-tag-group.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TagGroup {
     render() {
-        return (h(Host, { key: '131973a110ac1b917a7010d3870c48558020a618', class: "bal-tag-group" }, h("slot", { key: '3595db4a1dbe182c0890054da5ad8c33ea4a818b' })));
+        return (h(Host, { key: '0ab0e65bef811da56fe8acea596100fa62a0167a', class: "bal-tag-group" }, h("slot", { key: '405f949e333e3e0995a1ec4eb4160b8513d20785' })));
     }
     static get is() { return "bal-tag-group"; }
 }

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

@@ -55,7 +55,7 @@ export class Tag {
         const hasDisabled = this.disabled;
         const positionClass = `is-${this.position}`;
         const hasPosition = this.position !== undefined;
-        return (h(Host, Object.assign({ key: '27a4f2f99a2ef7160c9239608a65fd035f07baac', "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: 'd67ec24e9286c0cd3539c87c3aec6fe2f539d178', 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: '6d9edd38cb609bb1ac630a31a066ce8a8b797f10' })), h("bal-close", Object.assign({ key: '5b10ce55af2a1ef7651fed5baa8a2a21ae0d5a6c', class: Object.assign({}, block.element('close').class()), style: {
+        return (h(Host, Object.assign({ key: 'd426597b70777eff0f582f7d443a9bc51ced1e53', "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: '3d84d8bfe73a633ebb83eaba536cb2cf4ed61c95', 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: '1d74104803bac4b5cf8ee296a2e9f1f9753bf762' })), h("bal-close", Object.assign({ key: 'cda8fcf97b298bbd453e7c665c4e4741e0a975ab', 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/dist/collection/components/bal-tag/test/bal-tag.component.play.js

@@ -1,6 +1,6 @@
-import { test, expect, BalTag } from "../../../../../../playwright/src/index";
+import { BalTag, expect, test } from "../../../../../../playwright/src/index";
 test.describe('component', () => {
-    test.beforeEach(async ({ page }) => {
+    test.beforeEach('Setup', async ({ page }) => {
         await page.mount(`
       <bal-tag closable>My tag</bal-tag>
     `);

package/dist/collection/components/bal-tag/test/bal-tag.visual.play.js

@@ -1,20 +1,18 @@
-import { test, expect, screenshot } from "../../../../../../playwright/src/index";
-test.describe('visual', () => {
-    const image = screenshot('bal-tag');
-    test.beforeEach(async ({ page }) => {
-        await page.goto('/components/bal-tag/test/bal-tag.visual.html');
-        await page.waitForSelector('bal-tag');
-    });
-    test('basic', async ({ page }) => {
-        const el = page.getByTestId('basic');
-        await expect(el).toHaveScreenshot(image('basic'));
-    });
-    test('colors', async ({ page }) => {
-        const el = page.getByTestId('colors');
-        await expect(el).toHaveScreenshot(image('colors'));
-    });
-    test('sizes', async ({ page }) => {
-        const el = page.getByTestId('sizes');
-        await expect(el).toHaveScreenshot(image('sizes'));
-    });
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-tag';
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+});
+test('basic', async ({ page }) => {
+    const el = page.getByTestId('basic');
+    await expect(el).toHaveScreenshot(image('basic'));
+});
+test('colors', async ({ page }) => {
+    const el = page.getByTestId('colors');
+    await expect(el).toHaveScreenshot(image('colors'));
+});
+test('sizes', async ({ page }) => {
+    const el = page.getByTestId('sizes');
+    await expect(el).toHaveScreenshot(image('sizes'));
 });

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

@@ -95,10 +95,10 @@ export class Text {
         const Text = this.inline ? 'span' : 'p';
         const color = this.parseColor();
         const block = BEM.block('text');
-        return (h(Host, { key: 'c3bdd081cc6545ea36b6e935a204deea17fa3c4e', 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: '1adac0420b875b03f4d42a631e0f0efb0df25b91', 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: '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
                 .element('text')
                 .modifier(`size-${this.size}`)
-                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: '1f827979acdbee7f9dda89bb9d0bd06a5cbaaaf6' }))));
+                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: '33ad603fa81fe33512f02b5ed716bd4ec8e675cd' }))));
     }
     static get is() { return "bal-text"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-text/test/bal-text.visual.play.js

@@ -0,0 +1,13 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-text';
+const VARIANTS = ['basic', 'no-wrap', 'colors', 'sizes', 'bold', 'heading', 'inline', 'inverted', 'shadow', 'space'];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+});
+VARIANTS.forEach(variant => {
+    test(variant, async ({ page }) => {
+        const el = page.getByTestId(variant);
+        await expect(el).toHaveScreenshot(image(`${variant}`));
+    });
+});

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

@@ -136,7 +136,7 @@ export class Textarea {
         const value = this.getValue();
         const block = BEM.block('textarea');
         const elNative = block.element('native');
-        return (h(Host, { key: 'd89d5925e65ffcf37caf62fdb8aef42361ceea7f', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '20f02fa458fd85ff4c7c880b11522011052ff2e4', 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: 'dfbd0670d3a5428b393bbdfb4778dbd4de5fddcc' }))));
+        return (h(Host, { key: 'd2abd56effb14131bdbf2a744555316439a18d5f', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '3690740a7250086b52c268a7fe1fd09bf59c3ca3', 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: 'd8bce218b9a67017b1de8e53e11548b9f258d217' }))));
     }
     static get is() { return "bal-textarea"; }
     static get originalStyleUrls() {