@baloise/ds-core 19.8.3 → 19.8.4

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

@@ -0,0 +1,32 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-button';
+const VARIANTS = [
+    'primary',
+    'colors',
+    'colors-alternatives',
+    'sizes',
+    'inverted',
+    'expanded',
+    'flat',
+    'icon-right',
+    'outlined',
+    'rounded',
+    'shadow',
+    'variants',
+    'states',
+    'alert',
+    'square',
+    'group',
+    'links',
+    'inverted-links',
+];
+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-card/test/bal-card.visual.play.js

@@ -0,0 +1,13 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-card';
+const VARIANTS = ['basic', 'colors', 'flat', 'square', 'border', '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-carousel/test/bal-carousel.visual.play.js

@@ -0,0 +1,13 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-carousel';
+const VARIANTS = ['basic', 'image', 'product', 'card', 'card-with-value', 'responsive'];
+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-checkbox/bal-switch/bal-switch.css

@@ -1 +1 @@
-: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:inline-flex;position:relative;justify-content:flex-start;align-items:center;cursor:pointer;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;transition:transform .3s ease-in-out}.bal-switch__toggle--checked{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;transition:opacity .3s ease-in-out}
+: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:inline-flex;position:relative;justify-content:flex-start;align-items:center;cursor:pointer;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;transition:transform .3s ease-in-out}.bal-switch__toggle--checked{transform:translateX(100%);background:var(--bal-checkbox-switch-label-background-checked-after)}.bal-switch .bal-icon{position:absolute}.bal-switch .bal-icon .bal-switch__icon--checked{opacity:1}.bal-switch .bal-icon .bal-switch__icon{opacity:0;transition:opacity .3s ease-in-out}

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

@@ -0,0 +1,13 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-checkbox';
+const VARIANTS = ['check', 'switch'];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}-icons.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-checkbox/test/bal-checkbox-tiles.visual.play.js

@@ -0,0 +1,13 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-checkbox';
+const VARIANTS = ['basic', 'grid', 'colors'];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}-tiles.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-checkbox/test/bal-checkbox.visual.play.js

@@ -0,0 +1,30 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-checkbox';
+const VARIANTS = [
+    'checkbox-basic',
+    'checkbox-invalid',
+    'checkbox-disabled',
+    'checkbox-others',
+    'checkbox-long-label',
+    'switch-basic',
+    'switch-invalid',
+    'switch-disabled',
+    'switch-others',
+    'switch-long-label',
+    'button-basic',
+    'button-invalid',
+    'button-disabled',
+    'button-long-label',
+    'group-vertical',
+    'group-vertical-on-mobile',
+];
+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-close/test/bal-close.visual.play.js

@@ -0,0 +1,13 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-close';
+const VARIANTS = ['basic', 'sizes', 'inverted'];
+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-content/test/bal-content.visual.play.js

@@ -0,0 +1,13 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-content';
+const VARIANTS = ['basic', 'alignment', 'direction', '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-data/test/bal-data.visual.play.js

@@ -0,0 +1,13 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-data';
+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-date/bal-date-calendar/components/bal-date-calendar__nav.js

@@ -7,7 +7,7 @@ export const CalendarNav = ({ language, onClickSelectMonthAndYear, monthFullName
     const nextMonthLabel = i18nBalDate[language].nextMonth;
     const previousMonthLabel = i18nBalDate[language].previousMonth;
     const selectMonthLabel = i18nBalDate[language].selectMonth;
-    return (h("div", { class: Object.assign({}, blockNav.class()) }, h("div", { class: Object.assign({}, blockNav.modifier('start').class()) }, h("button", { title: selectMonthLabel, "aria-label": selectMonthLabel, tabIndex: -1, "data-test": "change-year-month", onClick: onClickSelectMonthAndYear }, h("span", null, monthFullNames[month - 1], " ", year), h("bal-icon", { name: "caret-up", color: "primary", size: "small", turn: isCalendarVisible }))), h("div", { class: Object.assign({}, blockNav.modifier('end').class()), style: {
+    return (h("div", { class: Object.assign({}, blockNav.class()) }, h("div", { class: Object.assign({}, blockNav.modifier('start').class()) }, h("button", { title: selectMonthLabel, "aria-label": selectMonthLabel, tabIndex: -1, "data-testid": "change-year-month", onClick: onClickSelectMonthAndYear }, h("span", null, monthFullNames[month - 1], " ", year), h("bal-icon", { name: "caret-up", color: "primary", size: "small", turn: isCalendarVisible }))), h("div", { class: Object.assign({}, blockNav.modifier('end').class()), style: {
             display: isListVisible ? 'none' : 'flex',
-        } }, h("button", { title: previousMonthLabel, "aria-label": previousMonthLabel, onClick: onClickPreviousMonth, tabIndex: -1, "data-test": "previous-month" }, h("bal-icon", { name: "caret-left", color: "primary", size: "small" })), h("button", { title: nextMonthLabel, "aria-label": nextMonthLabel, onClick: onClickNextMonth, tabIndex: -1, "data-test": "next-month" }, h("bal-icon", { name: "caret-right", color: "primary", size: "small" })))));
+        } }, h("button", { title: previousMonthLabel, "aria-label": previousMonthLabel, onClick: onClickPreviousMonth, tabIndex: -1, "data-testid": "previous-month" }, h("bal-icon", { name: "caret-left", color: "primary", size: "small" })), h("button", { title: nextMonthLabel, "aria-label": nextMonthLabel, onClick: onClickNextMonth, tabIndex: -1, "data-testid": "next-month" }, h("bal-icon", { name: "caret-right", color: "primary", size: "small" })))));
 };

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

@@ -0,0 +1,24 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-date';
+const VARIANTS = [
+    'basic',
+    'basic-placeholder',
+    'basic-value',
+    'invalid',
+    'invalid-placeholder',
+    'invalid-invalid',
+    'disabled',
+    'disabled-placeholder',
+    'disabled-disabled',
+    'free-solo',
+];
+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-divider/test/bal-divider.visual.play.js

@@ -0,0 +1,13 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-divider';
+const VARIANTS = ['basic', 'stack', 'colors', 'spaces'];
+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-dropdown/bal-dropdown.js

@@ -4,7 +4,7 @@ import { inheritAttributes } from "../../utils/attributes";
 import { BEM } from "../../utils/bem";
 import { balBrowser } from "../../utils/browser";
 import { ListenToConfig, defaultConfig, } from "../../utils/config";
-import { DropdownAutoFillUtil, DropdownEventsUtil, DropdownFocusUtil, DropdownFormSubmitUtil, DropdownIcon, DropdownInput, DropdownNativeSelect, DropdownOptionList, DropdownOptionUtil, DropdownPopupUtil, DropdownValue, DropdownValueUtil, } from "../../utils/dropdown";
+import { DropdownAutoFillUtil, DropdownEventsUtil, DropdownFocusUtil, DropdownFormSubmitUtil, DropdownIcon, DropdownInput, DropdownNativeSelect, DropdownOptionUtil, DropdownPopupUtil, DropdownValue, DropdownValueUtil, } from "../../utils/dropdown";
 import { defaultBalAriaForm } from "../../utils/form";
 import { stopEventBubbling } from "../../utils/form-input";
 import { addEventListener, removeEventListener, waitAfterIdleCallback } from "../../utils/helpers";
@@ -350,13 +350,17 @@ export class Dropdown {
         const hasTheme = this.theme !== '';
         const theme = `theme-${this.theme}`;
         const focused = this.theme === 'purple' ? this.hasFocus && this.isKeyboardMode : this.hasFocus;
-        return (h(Host, { key: 'bbe24bccd7ec89cadd6928abbe42bc80a4838242', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: 'c4affbe59c4d38b281b28edef4510bf7f3432485', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(focused)), block.element('root').modifier('invalid').class(this.invalid)), block.element('root').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').modifier('autofill').class(this.isAutoFilled)), block.element('root').modifier(size).class(hasSize)), block.element('root').modifier(theme).class(hasTheme)), block
+        return (h(Host, { key: '3fe05ba6190dabe5fb8c297f4809659f7c24aa74', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: 'e0b038aa5b7ead381d271c5b7b04fd5bbaa3ea3b', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(focused)), block.element('root').modifier('invalid').class(this.invalid)), block.element('root').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').modifier('autofill').class(this.isAutoFilled)), block.element('root').modifier(size).class(hasSize)), block.element('root').modifier(theme).class(hasTheme)), block
                 .element('root')
                 .modifier(theme + '-filled')
                 .class(isFilled && hasTheme)), block
                 .element('root')
                 .modifier(theme + '-expanded')
-                .class(this.isExpanded && hasTheme)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { key: 'f99ffede973516ae00abca3596a2a60ed50d0cbe', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').element('content').class()), block.element('root').element('content').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').element('content').modifier('placeholder').class(!this.valueUtil.isFilled())), block.element('root').element('content').modifier(size).class(hasSize)) }, h(DropdownValue, { key: '50dd5893ff6cf84616d662c04d4a247c5ea4b5c2', filled: this.valueUtil.isFilled(), inlineLabel: this.inlineLabel, chips: this.chips, placeholder: this.placeholder, choices: this.choices, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, onRemoveChip: option => this.valueUtil.removeOption(option) })), h(DropdownInput, { key: 'ea346543eb9cea2bb66d6a9c7005bbf53b722aaf', inputId: this.inputId, httpFormSubmit: this.httpFormSubmit, ariaForm: this.ariaForm, rawValue: this.rawValue, autocomplete: this.autocomplete, required: this.required, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, expanded: this.isExpanded, invalid: this.invalid, language: this.language, inputLabel: this.inputLabel, inheritedAttributes: this.inheritedAttributes, refInputEl: el => (this.nativeEl = el), onChange: ev => this.handleAutoFill(ev), onFocus: ev => this.eventsUtil.handleFocus(ev), onBlur: ev => this.eventsUtil.handleBlur(ev), onKeyDown: ev => this.handleKeyDown(ev) }), h(DropdownNativeSelect, { key: 'b97890097df0ee23ba9b87fff0da40fc2ebdf7c6', name: this.name, httpFormSubmit: this.httpFormSubmit, multiple: this.multiple, required: this.required, disabled: this.valueUtil.isDisabled(), rawValue: this.rawValue, refSelectEl: el => (this.selectEl = el) }), h(DropdownIcon, { key: 'ef7da17a95ef45376fd43f8d5208fecf2b2c4e4f', icon: this.icon, size: this.size, theme: this.theme, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: isFilled, disabled: this.valueUtil.isDisabled() })), h(DropdownOptionList, { key: '9d7912639575048cecd19745c6d5a463499544ca', inputId: this.inputId, block: this.inputId, filter: this.filter, required: this.required, isExpanded: this.isExpanded, isDisabled: this.valueUtil.isDisabled(), hasPropOptions: this.optionUtil.hasPropOptions(), multiple: this.multiple, contentHeight: this.contentHeight, rawOptions: this.rawOptions, refPanelEl: el => (this.panelEl = el), refListEl: el => (this.listEl = el) }, h("slot", { key: '32b6a77941ec1b9eae24bd761244ecb726194aa5' }))));
+                .class(this.isExpanded && hasTheme)), "data-testid": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { key: 'a3499a9e2abcaa3b363385c475c3dcd91ed1a371', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').element('content').class()), block.element('root').element('content').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').element('content').modifier('placeholder').class(!this.valueUtil.isFilled())), block.element('root').element('content').modifier(size).class(hasSize)) }, h(DropdownValue, { key: '8ffc980c91386038c4ee9b9e6673a25a3609d674', filled: this.valueUtil.isFilled(), inlineLabel: this.inlineLabel, chips: this.chips, placeholder: this.placeholder, choices: this.choices, renderChip: option => {
+                return (h("bal-tag", { key: option.value, "data-testid": "bal-dropdown-chip", size: "small", invalid: this.invalid, disabled: this.disabled || this.readonly, closable: !(this.disabled || this.readonly), onBalCloseClick: () => this.valueUtil.removeOption(option) }, option.label));
+            } })), h(DropdownInput, { key: '9a97fc39a821d5dcca32eba522ae29e4aa6eedc0', inputId: this.inputId, httpFormSubmit: this.httpFormSubmit, ariaForm: this.ariaForm, rawValue: this.rawValue, autocomplete: this.autocomplete, required: this.required, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, expanded: this.isExpanded, invalid: this.invalid, language: this.language, inputLabel: this.inputLabel, inheritedAttributes: this.inheritedAttributes, refInputEl: el => (this.nativeEl = el), onChange: ev => this.handleAutoFill(ev), onFocus: ev => this.eventsUtil.handleFocus(ev), onBlur: ev => this.eventsUtil.handleBlur(ev), onKeyDown: ev => this.handleKeyDown(ev) }), h(DropdownNativeSelect, { key: '2a33a8ac7f336889197137fc741ed8a4a107fceb', name: this.name, httpFormSubmit: this.httpFormSubmit, multiple: this.multiple, required: this.required, disabled: this.valueUtil.isDisabled(), rawValue: this.rawValue, refSelectEl: el => (this.selectEl = el) }), h(DropdownIcon, { key: 'd0f6958fb47ad7f6d73d4f98482cb2102c344f20', icon: this.icon, size: this.size, theme: this.theme, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: isFilled, disabled: this.valueUtil.isDisabled() })), h("div", { key: '29e98d1f54ffb6ee913bd682d6531d45997fc1d0', id: `${this.inputId}-menu`, class: Object.assign(Object.assign({}, block.element('list').class()), block.element('list').modifier('expanded').class(this.isExpanded)), ref: el => (this.panelEl = el) }, h("bal-option-list", { key: '4e6fa69f9d9859208f83dd7bc86c17fc75d5eb60', multiple: this.multiple, disabled: this.valueUtil.isDisabled(), filter: this.filter, required: this.required, contentHeight: this.contentHeight, ref: el => (this.listEl = el) }, h("slot", { key: '1c169dc692632671f62410b2dadcbbc10b0fe36a' }), this.optionUtil.hasPropOptions()
+            ? this.rawOptions.map(option => (h("bal-option", { key: option.value, value: option.value, label: option.label, disabled: option.disabled, multiline: option.multiline, invalid: option.invalid, hidden: option.hidden, selected: option.selected, focused: option.focused }, option.label)))
+            : ''))));
     }
     static get is() { return "bal-dropdown"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,85 @@
+import { expect, screenshot, test, waitForChanges } from "../../../../../../playwright/src/index";
+const TAG = 'bal-dropdown';
+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-before'));
+    const inputEl = page.locator('input[placeholder="visual-basic"]');
+    await inputEl.click();
+    await waitForChanges(page);
+    await expect(el).toHaveScreenshot(image('basic-open'));
+    const optionEl = el.getByRole('option', { name: '1992' });
+    await optionEl.click();
+    await waitForChanges(page);
+    await expect(el).toHaveScreenshot(image('basic-selected'));
+});
+test('long-content', async ({ page }) => {
+    const el = page.getByTestId('long-content');
+    await expect(el).toHaveScreenshot(image('long-content-before'));
+    const inputEl = page.locator('input[placeholder="visual-long-content"]');
+    await inputEl.click();
+    await waitForChanges(page);
+    await expect(page).toHaveScreenshot(image('long-content-open'));
+});
+test('multiple', async ({ page }) => {
+    const el = page.getByTestId('multiple');
+    await expect(el).toHaveScreenshot(image('multiple-before'));
+    const inputEl = page.locator('input[placeholder="visual-multiple"]');
+    await inputEl.click();
+    await waitForChanges(page);
+    await expect(page).toHaveScreenshot(image('multiple-open'));
+    const optionFirstEl = el.getByRole('option', { name: '1991' });
+    await optionFirstEl.click();
+    await waitForChanges(page);
+    const optionSecondEl = el.getByRole('option', { name: '1992' });
+    await optionSecondEl.click();
+    await waitForChanges(page);
+    await expect(el).toHaveScreenshot(image('multiple-selected'));
+});
+test('multiple-chips', async ({ page }) => {
+    const el = page.getByTestId('multiple-chips');
+    await expect(el).toHaveScreenshot(image('multiple-chips-before'));
+    const inputEl = page.locator('input[placeholder="visual-multiple-chips"]');
+    await inputEl.click({ force: true });
+    await waitForChanges(page);
+    await expect(page).toHaveScreenshot(image('multiple-chips-open'));
+});
+test('form-field', async ({ page }) => {
+    const el = page.getByTestId('form-field');
+    await expect(el).toHaveScreenshot(image('form-field-before'));
+    const inputEl = page.locator('input[placeholder="visual-form-field"]');
+    await inputEl.click();
+    await waitForChanges(page);
+    await expect(page).toHaveScreenshot(image('form-field-open'));
+});
+test('small-purple', async ({ page }) => {
+    const el = page.getByTestId('small-purple');
+    await expect(el).toHaveScreenshot(image('small-purple-before'));
+});
+test('clearable', async ({ page }) => {
+    const el = page.getByTestId('clearable');
+    await expect(el).toHaveScreenshot(image('clearable-before'));
+    const inputEl = page.locator('input[placeholder="visual-clearable"]');
+    await inputEl.click();
+    await waitForChanges(page);
+    await expect(page).toHaveScreenshot(image('clearable-open'));
+    const optionEl = el.getByRole('option', { name: '1988' });
+    await optionEl.click();
+    await waitForChanges(page);
+    await expect(el).toHaveScreenshot(image('clearable-selected'));
+});
+test('loading', async ({ page }) => {
+    const el = page.getByTestId('loading');
+    await expect(el).toHaveScreenshot(image('loading-before'));
+});
+test('invalid', async ({ page }) => {
+    const el = page.getByTestId('invalid');
+    await expect(el).toHaveScreenshot(image('invalid-before'));
+});
+test('disabled', async ({ page }) => {
+    const el = page.getByTestId('disabled');
+    await expect(el).toHaveScreenshot(image('disabled-before'));
+});

package/dist/collection/components/bal-field/bal-field-control/bal-field-control.js

@@ -33,14 +33,14 @@ export class FieldControl {
         return '';
     }
     render() {
-        return (h(Host, { key: '4aecfd6cf7bc49df8feb26cd3161af9174097fcc', class: {
+        return (h(Host, { key: 'f2dbde868506b54d5b5e2fc14b5c29c417d42891', class: {
                 'bal-field-control': true,
                 'control': true,
                 'has-icons-left': !!this.iconLeft,
                 'has-icons-right': !!this.iconRight,
                 'is-loading': this.loading,
                 'bal-field-control--expanded-on-mobile': !!this.expandedOnMobile,
-            } }, h("slot", { key: 'b1d4c61b4ba0cbd96c11d5540e12dafcc4b2518e' }), this.buildIconLeftTemplate, this.buildIconRightTemplate));
+            } }, h("slot", { key: '274cd16bccefc825d85e4b1222da7c523a1aa937' }), this.buildIconLeftTemplate, this.buildIconRightTemplate));
     }
     static get is() { return "bal-field-control"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/bal-field/bal-field-hint/bal-field-hint.js

@@ -28,7 +28,7 @@ export class FieldHint {
     }
     render() {
         const block = BEM.block('field-hint');
-        return (h(Host, { key: 'a5f895c418c0dfa249da93d3bc39f5563d31b547', class: Object.assign({}, block.class()) }, h("bal-hint", { key: '83d9c59c6fce044b361fbd471bf83780314c62e9', class: Object.assign({}, block.element('hint').class()), "data-testid": "bal-field-hint", closeLabel: this.closeLabel, small: this.small }, this.subject && !(this.hideTitleOnDesktop && this.isDesktop) ? (h("bal-hint-title", null, this.subject)) : (''), h("bal-hint-text", { key: '38b6ef5120c8b5adef31a05ad54f474ed55305f5' }, h("slot", { key: '040d24c305badac88e0bb64d21e513a067f6e177' })))));
+        return (h(Host, { key: '90dbf0da0a0c7ec498538721135e2fdefc4ac238', class: Object.assign({}, block.class()) }, h("bal-hint", { key: '1976d07de449aa8b2897a375f61953f0c705e4ae', class: Object.assign({}, block.element('hint').class()), "data-testid": "bal-field-hint", closeLabel: this.closeLabel, small: this.small }, this.subject && !(this.hideTitleOnDesktop && this.isDesktop) ? (h("bal-hint-title", null, this.subject)) : (''), h("bal-hint-text", { key: 'ae2b48186e4f4c1adbfe7b3ed57a798a55a4cad0' }, h("slot", { key: 'e4a33e9e14ab86a15e78321fbd9f7325e0420ec5' })))));
     }
     static get is() { return "bal-field-hint"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/bal-field/bal-field-label/bal-field-label.js

@@ -64,7 +64,7 @@ export class FieldLabel {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '049f3e7c80126a7ffbc005e6c69a1bdc8203979b', class: "bal-field-label" }, h("bal-label", { key: '269ecb6de6a5daf2f4d4504b37f3980d05b1a121', multiline: true, size: this.size, htmlFor: this.htmlFor, required: this.required, valid: this.valid, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, weight: this.weight }, h("slot", { key: 'd832133cb85456ec6b7b1a999b5459044579e783' }))));
+        return (h(Host, { key: '6685a5711aba2152b975fe49fe114a9edb400679', class: "bal-field-label" }, h("bal-label", { key: 'f677ab02ba144832c6304dc99c3e2900079e38b7', multiline: true, size: this.size, htmlFor: this.htmlFor, required: this.required, valid: this.valid, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, weight: this.weight }, h("slot", { key: '687bfc73cab2cf7bef4e3e15b6a9090d5ba29d38' }))));
     }
     static get is() { return "bal-field-label"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/bal-field/bal-field-message/bal-field-message.js

@@ -35,14 +35,14 @@ export class FieldMessage {
         this.ariaForm = Object.assign({}, ariaForm);
     }
     render() {
-        return (h(Host, { key: 'f0425dd945959866c1edbfe0affa56a5c325a014', id: this.ariaForm.messageId, class: {
+        return (h(Host, { key: '24a1ad8e6d848841fd1e83428aa14430ed6fe5fc', id: this.ariaForm.messageId, class: {
                 'bal-field-message': true,
                 'help': true,
                 'is-danger': this.invalid,
                 'is-success': this.valid,
                 'is-disabled': this.disabled || this.readonly,
                 [`is-${this.color}`]: !!this.color,
-            }, style: { minHeight: this.noReservedSpace ? '0' : undefined } }, h("slot", { key: 'c693909e5e98a82db73d2884a4f804cf20e24ab3' })));
+            }, style: { minHeight: this.noReservedSpace ? '0' : undefined } }, h("slot", { key: '2cb9fb2480527f5b4ae63611f3a424fcc202bc36' })));
     }
     static get is() { return "bal-field-message"; }
     static get properties() {

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

@@ -188,12 +188,12 @@ export class Field {
         components.forEach(c => callback(c));
     }
     render() {
-        return (h(Host, { key: 'ce893d29bd46dbe6b7646c28410a86b9171661b9', id: this.fieldId, class: {
+        return (h(Host, { key: 'ef05b294a516d40c5089d051feeb46715f581bc1', id: this.fieldId, class: {
                 'bal-field': true,
                 'field': true,
                 'bal-field--invalid': this.invalid === true,
                 'bal-field--horizontal': this.horizontal === true,
-            } }, h("slot", { key: '9ed0398262848664e0b6e4491bb7c0af45da341d' }), h("span", { key: '6cddb052cb69b66ccb29f3c9e2f70723557da014', class: "bal-field-hidden" })));
+            } }, h("slot", { key: '5710d7fd141b21d699004d7982d5d5bb7238cd94' }), h("span", { key: 'e1b36343cdcb60960bcdac4d938c946f40041334', class: "bal-field-hidden" })));
     }
     static get is() { return "bal-field"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,13 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-field';
+const VARIANTS = ['horizontal', 'horizontal-long-label', 'horizontal-with-hint', 'horizontal-with-hint-hidden'];
+const image = screenshot(TAG);
+test.beforeEach('Setup', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}-horizontal.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-field/test/bal-field.visual.play.js

@@ -0,0 +1,26 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-field';
+const VARIANTS = [
+    'basic',
+    'disabled',
+    'invalid',
+    'readonly',
+    'required',
+    'valid',
+    'label-long',
+    'horizontal',
+    'horizontal-long-label',
+    'horizontal-with-hint-hidden',
+    'horizontal-with-hint',
+    'label-long-with-hint',
+];
+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-file-upload/bal-file-upload.js

@@ -234,16 +234,16 @@ export class FileUpload {
      */
     render() {
         const id = this.ariaForm.controlId || this.fileUploadId;
-        return (h(Host, { key: '438044d74c8a20cee269a65e7492a19c800c8f60', onClick: this.onHostClick, "aria-disabled": ariaBooleanToString(this.disabled), class: {
+        return (h(Host, { key: '05b754f351fce01410a7b962aac9df747a2199ff', onClick: this.onHostClick, "aria-disabled": ariaBooleanToString(this.disabled), class: {
                 'bal-file-upload': true,
-            } }, h("div", { key: 'ea6316e2f4765d3385c0fc38d1dd6e9b55d711d0', class: {
+            } }, h("div", { key: '9e2f871f72b1c666ed8d911e91cfedaf548c2519', class: {
                 'file': true,
                 'is-disabled': this.disabled || this.readonly || this.loading,
                 'is-danger': this.invalid,
-            } }, h("label", { key: 'a75f2f2f116c6c9f7672ddbbfe2d4636039d2c64', htmlFor: id, ref: el => (this.labelEl = el), class: {
+            } }, h("label", { key: '9976fcf5ba8dd68ff8d01bf0c963a0feee42fd21', htmlFor: id, ref: el => (this.labelEl = el), class: {
                 'file-label': true,
                 'is-disabled': this.disabled || this.loading || this.readonly,
-            } }, h("input", { key: '2ab53c147961166e12b4cab0fa0e0862557a325f', class: "file-input", type: "file", id: id, "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, multiple: this.multiple, disabled: this.disabled || this.loading || this.readonly, readonly: this.readonly, required: this.required, accept: this.accept, onClick: this.onInputClick, onChange: this.onInputChange, onFocus: this.onInputFocus, onBlur: this.onInputBlur, ref: el => (this.nativeInput = el), "data-testid": "bal-file-upload-input" }), this.loading ? (h("span", { class: "file-cta" }, h("bal-spinner", null))) : (h("span", { class: "file-cta" }, h("span", { class: "file-icon" }, h("bal-icon", { name: "upload", size: "medium", color: this.disabled || this.loading || this.readonly ? 'grey-light' : this.invalid ? 'danger' : 'blue' })), h("span", { class: "file-label", "data-testid": "bal-file-upload-label" }, this.label))))), this.hasFileList && this.files.length > 0 ? (h(FileListComponent, { files: this.files, disabled: this.disabled || this.readonly || this.loading, subTitle: this.subTitle, onRemoveFile: this.onRemoveFile })) : ('')));
+            } }, h("input", { key: '7596fa2c3174ac804b3b3b950c6e181a25080d80', class: "file-input", type: "file", id: id, "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, multiple: this.multiple, disabled: this.disabled || this.loading || this.readonly, readonly: this.readonly, required: this.required, accept: this.accept, onClick: this.onInputClick, onChange: this.onInputChange, onFocus: this.onInputFocus, onBlur: this.onInputBlur, ref: el => (this.nativeInput = el), "data-testid": "bal-file-upload-input" }), this.loading ? (h("span", { class: "file-cta" }, h("bal-spinner", null))) : (h("span", { class: "file-cta" }, h("span", { class: "file-icon" }, h("bal-icon", { name: "upload", size: "medium", color: this.disabled || this.loading || this.readonly ? 'grey-light' : this.invalid ? 'danger' : 'blue' })), h("span", { class: "file-label", "data-testid": "bal-file-upload-label" }, this.label))))), this.hasFileList && this.files.length > 0 ? (h(FileListComponent, { files: this.files, disabled: this.disabled || this.readonly || this.loading, subTitle: this.subTitle, onRemoveFile: this.onRemoveFile })) : ('')));
     }
     static get is() { return "bal-file-upload"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,13 @@
+import { expect, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'bal-file-upload';
+const VARIANTS = ['basic', 'disabled', 'invalid', 'readonly'];
+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-footer/bal-footer.js

@@ -120,14 +120,14 @@ export class Footer {
         const elWrapper = elLanguage.element('wrapper');
         const elLegalLinks = elLinksContainer.element('legal-links');
         const elSocialMediaLinks = elLinksContainer.element('social-media-links');
-        return (h(Host, { key: '04ec38780841ea9902e3f465b8fd4e3561a9092e', class: Object.assign({}, block.class()) }, h("footer", { key: 'dc1fa3c156ad78d3d05d3f5d219c81801bca5044', class: Object.assign({}, elInner.class()) }, h("div", { key: 'e8f1144c09a1b52fb956bc03438671086e801895', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: 'b6d1e0c4deed43eec0e0889cc4011cc5465db527', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: '6102cc926e8542a0a2802b1fa8914b054a9391b4', class: Object.assign({}, elLogo.class()) }, this.logoHref ? (h("img", { src: this.logoHref, alt: "Logo" })) : this.logoSvgContent ? (h("div", { innerHTML: this.logoSvgContent })) : (h("bal-logo", { color: "white" }))), h("div", { key: '5cd3a29dd8d40a4704f85635e32bcca1d0af0546', class: Object.assign({}, elLanguage.class()), style: {
+        return (h(Host, { key: 'ca5dacc6c906754b6bb466c448be4f6bb5b38dff', class: Object.assign({}, block.class()) }, h("footer", { key: '8d42cfff788350c5e5ae26f86b613fcd5144085d', class: Object.assign({}, elInner.class()) }, h("div", { key: 'a60281af0dcf73da3901cb605b49d35b3bb3e6ed', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: '857d35746558b5b0a5ec79562b3f2c0e30037141', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: 'c1e5bae12ba5449888156244789fd79dbdc3a388', class: Object.assign({}, elLogo.class()) }, this.logoHref ? (h("img", { src: this.logoHref, alt: "Logo" })) : this.logoSvgContent ? (h("div", { innerHTML: this.logoSvgContent })) : (h("bal-logo", { color: "white" }))), h("div", { key: 'de3b93d01ad75facf4219df8954016095aa143ab', class: Object.assign({}, elLanguage.class()), style: {
                 display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
-            } }, h("div", { key: '023ba95e77cc80681af23b8a0ed50b49a94b81fd', class: Object.assign({}, elWrapper.class()) }, h("bal-icon", { key: '3c5ce093f139a07def8c73fdfbcf6060de8893b3', class: Object.assign({}, elWrapper.element('icon').class()), name: "web", color: "white" }), h("select", { key: '7cd8af0cb134b8b8a9733333df37a1c9f909e9fb', class: Object.assign({}, elWrapper.element('select').class()), onChange: event => this.changeLanguage(event.target.value), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("option", { key: language, value: language, selected: language === this.language }, language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name))))))), h("div", { key: '017b017c8d5714e5b8568cf10e12a96a468b722e', class: Object.assign({}, elSlot.class()) }, h("slot", { key: 'e09a963ac71e749cecfe38751ae330759e626080' })), h("div", { key: '993161e25ae9c3fccc18fd7f2b032b74b3120106', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: 'eee88e5f349aebf4d16333462f7e18a029bfe82e', class: Object.assign({}, elSocialMediaLinks.class()), style: {
+            } }, h("div", { key: '7be8f0588d5da5e436b72214c67542316d325481', class: Object.assign({}, elWrapper.class()) }, h("bal-icon", { key: '935dfaa39b97f40cd946ce8c8a0a0f421b3876b6', class: Object.assign({}, elWrapper.element('icon').class()), name: "web", color: "white" }), h("select", { key: 'd8408623006a257fa422b0789bc1e021461f1b1e', class: Object.assign({}, elWrapper.element('select').class()), onChange: event => this.changeLanguage(event.target.value), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("option", { key: language, value: language, selected: language === this.language }, language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name))))))), h("div", { key: '422e8cae4fd1cd625afb3cc81bc7c0cfac99fe65', class: Object.assign({}, elSlot.class()) }, h("slot", { key: 'b7c73e907ffbe0b64eb4608143774bcf7c56ff30' })), h("div", { key: '7bc64923fe79674a26e96f263785abf96dba1af6', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '5e5c86e58b3df89978657217ba145555786becfb', class: Object.assign({}, elSocialMediaLinks.class()), style: {
                 display: !this.showSocialMedia ? 'none' : 'flex',
             } }, this.socialMediaLinks.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-inverted': true,
-            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { key: 'fdd8006cd0d1ec2f6e3fa6ee418705a7d607f9c8', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links &&
+            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { key: '610e34f952fd08cba92099a213371e45c5f7ebc6', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links &&
             this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                     'link': true,
                     'is-light': true,