@baloise/ds-core 19.8.2 → 19.8.3-nightly.20251110

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

@@ -1,14 +1,14 @@
 import { __decorate, __metadata } from "tslib";
 import { Host, h } from "@stencil/core";
-import { debounceEvent } from "../../utils/helpers";
-import { BEM } from "../../utils/bem";
-import { Logger } from "../../utils/log";
 import { areArraysEqual } from "../../utils/array";
+import { BEM } from "../../utils/bem";
+import { ListenToBreakpoints, balBreakpoints } from "../../utils/breakpoints";
 import { stopEventBubbling } from "../../utils/form-input";
-import { StepButton } from "./components/step-button";
-import { newBalStepOption } from "./bal-step.util";
+import { debounceEvent } from "../../utils/helpers";
+import { Logger } from "../../utils/log";
 import { ListenToMutation } from "../../utils/mutation";
-import { ListenToBreakpoints, balBreakpoints } from "../../utils/breakpoints";
+import { newBalStepOption } from "./bal-step.util";
+import { StepButton } from "./components/step-button";
 export class Steps {
     constructor() {
         this.stepsId = `bal-steps-${StepsIds++}`;
@@ -219,7 +219,6 @@ export class Steps {
         return {
             "options": {
                 "type": "unknown",
-                "attribute": "options",
                 "mutable": false,
                 "complexType": {
                     "original": "BalStepOption[]",
@@ -244,7 +243,6 @@ export class Steps {
             },
             "clickable": {
                 "type": "boolean",
-                "attribute": "clickable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -260,11 +258,11 @@ export class Steps {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "clickable",
                 "defaultValue": "true"
             },
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalStepsColor",
@@ -285,11 +283,11 @@ export class Steps {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "color",
                 "defaultValue": "'primary'"
             },
             "debounce": {
                 "type": "number",
-                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -305,11 +303,11 @@ export class Steps {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "debounce",
                 "defaultValue": "0"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -325,6 +323,7 @@ export class Steps {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "undefined"
             }
         };

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: 'e649f646f51b2ff16ad47498e4338b4856c078de', class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", { key: 'cb13c3d6ef13e8fc4013683f60b4557a13fd4401' })));
+        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' })));
     }
     static get is() { return "bal-table"; }
     static get originalStyleUrls() {
@@ -28,7 +28,6 @@ export class Table {
         return {
             "expanded": {
                 "type": "boolean",
-                "attribute": "expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -44,6 +43,7 @@ export class Table {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "expanded",
                 "defaultValue": "false"
             }
         };

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritTrackingAttributes } from "../../../utils/attributes";
 export class TabItem {
     constructor() {
@@ -112,17 +112,16 @@ export class TabItem {
     render() {
         const hasPanel = !this.noPanel;
         const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (h(Host, { key: '4cca3771f21f5049d68fcb2da92a2a49972670c3', id: this.tabPanelID, class: {
+        return (h(Host, { key: '8faef74e951bde8c3e3be3348ce09ce614d321de', 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: 'e8521265c345ce4dfbc5e6e1f332d11004c7588b' })));
+            }, 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' })));
     }
     static get is() { return "bal-tab-item"; }
     static get properties() {
         return {
             "active": {
                 "type": "boolean",
-                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -138,11 +137,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "active",
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -158,11 +157,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "value",
                 "defaultValue": "''"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -178,11 +177,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "label",
                 "defaultValue": "''"
             },
             "rel": {
                 "type": "string",
-                "attribute": "rel",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -197,11 +196,11 @@ export class TabItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "rel"
             },
             "href": {
                 "type": "string",
-                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -217,11 +216,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "href",
                 "defaultValue": "undefined"
             },
             "target": {
                 "type": "string",
-                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalButtonTarget",
@@ -242,11 +241,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "target",
                 "defaultValue": "'_self'"
             },
             "bubble": {
                 "type": "any",
-                "attribute": "bubble",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean | string",
@@ -262,11 +261,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "bubble",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -282,11 +281,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "invisible": {
                 "type": "boolean",
-                "attribute": "invisible",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -302,11 +301,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "invisible",
                 "defaultValue": "false"
             },
             "prevent": {
                 "type": "boolean",
-                "attribute": "prevent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -322,11 +321,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "prevent",
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -342,11 +341,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "icon",
                 "defaultValue": "undefined"
             },
             "noPanel": {
                 "type": "boolean",
-                "attribute": "no-panel",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -362,11 +361,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "no-panel",
                 "defaultValue": "false"
             },
             "a11yControls": {
                 "type": "string",
-                "attribute": "a-1-1y-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -382,11 +381,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "a-1-1y-controls",
                 "defaultValue": "undefined"
             },
             "subLabel": {
                 "type": "string",
-                "attribute": "sub-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -402,11 +401,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "sub-label",
                 "defaultValue": "''"
             },
             "svg": {
                 "type": "string",
-                "attribute": "svg",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -422,6 +421,7 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "svg",
                 "defaultValue": "''"
             }
         };

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: 'cbce10198c6f32e4323ffabf9f2e95ed7c5671de', 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: '51096cdb6f56a75951792e036384e9891dba5f36', part: contentPart, class: Object.assign(Object.assign(Object.assign({}, contentEl.class()), contentEl.modifier('vertical').class(this.isVertical())), contentEl
+        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
                 .modifier('hidden')
-                .class(this.context === 'meta' || this.context === 'navbar' || this.context === 'navigation')) }, h("div", { key: 'bb0e4faeb94da487c315507fb6b05391147cd1da', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, h("slot", { key: 'fbb8d282dc68ea5889436792efa76e174be9cc9d' })))));
+                .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' })))));
     }
     static get is() { return "bal-tabs"; }
     static get originalStyleUrls() {
@@ -693,7 +693,6 @@ export class Tabs {
         return {
             "float": {
                 "type": "string",
-                "attribute": "float",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTabsFloat",
@@ -717,11 +716,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "float",
                 "defaultValue": "'left'"
             },
             "fullwidth": {
                 "type": "boolean",
-                "attribute": "fullwidth",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -737,11 +736,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "fullwidth",
                 "defaultValue": "false"
             },
             "accordion": {
                 "type": "boolean",
-                "attribute": "accordion",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -757,11 +756,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "accordion",
                 "defaultValue": "false"
             },
             "overflow": {
                 "type": "boolean",
-                "attribute": "overflow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -777,11 +776,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "overflow",
                 "defaultValue": "true"
             },
             "options": {
                 "type": "unknown",
-                "attribute": "options",
                 "mutable": false,
                 "complexType": {
                     "original": "BalTabOption[]",
@@ -806,7 +805,6 @@ export class Tabs {
             },
             "context": {
                 "type": "string",
-                "attribute": "context",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTabsContext",
@@ -826,11 +824,11 @@ export class Tabs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "context"
             },
             "iconPosition": {
                 "type": "string",
-                "attribute": "icon-position",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTabsIconPosition",
@@ -851,11 +849,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "icon-position",
                 "defaultValue": "'horizontal'"
             },
             "expanded": {
                 "type": "boolean",
-                "attribute": "expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -871,11 +869,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "expanded",
                 "defaultValue": "false"
             },
             "spaceless": {
                 "type": "boolean",
-                "attribute": "spaceless",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -891,11 +889,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "spaceless",
                 "defaultValue": "false"
             },
             "clickable": {
                 "type": "boolean",
-                "attribute": "clickable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -911,11 +909,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "clickable",
                 "defaultValue": "true"
             },
             "border": {
                 "type": "boolean",
-                "attribute": "border",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -931,11 +929,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "border",
                 "defaultValue": "false"
             },
             "inverted": {
                 "type": "boolean",
-                "attribute": "inverted",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -951,11 +949,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "inverted",
                 "defaultValue": "false"
             },
             "optionalTabSelection": {
                 "type": "boolean",
-                "attribute": "optional-tab-selection",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -971,11 +969,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "optional-tab-selection",
                 "defaultValue": "false"
             },
             "debounce": {
                 "type": "number",
-                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -991,11 +989,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "debounce",
                 "defaultValue": "0"
             },
             "vertical": {
                 "type": "any",
-                "attribute": "vertical",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTabsVertical",
@@ -1016,11 +1014,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "vertical",
                 "defaultValue": "false"
             },
             "verticalColSize": {
                 "type": "string",
-                "attribute": "vertical-col-size",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTabsColSize",
@@ -1041,11 +1039,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "vertical-col-size",
                 "defaultValue": "'one-third'"
             },
             "selectOnMobile": {
                 "type": "boolean",
-                "attribute": "select-on-mobile",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1061,11 +1059,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "select-on-mobile",
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1081,11 +1079,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "undefined"
             },
             "dimInactiveElements": {
                 "type": "boolean",
-                "attribute": "dim-inactive-elements",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1101,11 +1099,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "dim-inactive-elements",
                 "defaultValue": "false"
             },
             "handleAsTabList": {
                 "type": "boolean",
-                "attribute": "handle-as-tab-list",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1121,6 +1119,7 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "handle-as-tab-list",
                 "defaultValue": "false"
             }
         };

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}`));
+    });
+});