@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/collection/components/navbar/navbar.js

@@ -0,0 +1,544 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { ListenToBreakpoints, dsBreakpoints, Logger, ScrollHandler, FocusHandler, ListenToResize, OneOf, Type, } from "../../utils/index";
+import { ListenToConfig, defaultConfig, } from "../../global/index";
+import { i18nDsNavbar } from "./navbar.i18n";
+import { NAVBAR_CONTAINERS } from "./navbar.interfaces";
+/**
+ * Navbar provides semantic navigation with responsive sidebar menu and keyboard support.
+ *
+ * @slot brand - Logo or branding element (always visible)
+ * @slot title - Page title or heading (visible on desktop and larger screens)
+ * @slot menu-start - Left navigation links (inline on desktop, in sidebar on mobile)
+ * @slot menu-end - Right navigation links and action buttons (inline on desktop, in sidebar on mobile)
+ * @slot actions - Action buttons (always visible, positioned on the right)
+ * @part nav - The semantic navigation container
+ * @part hamburger - The mobile hamburger button
+ * @part sidebar - The mobile menu sidebar (aside element)
+ */
+export class Navbar {
+    constructor() {
+        this.navEl = null;
+        this.sidebarEl = null;
+        this.burgerButton = null;
+        this.containerEl = null;
+        this.scrollHandler = new ScrollHandler();
+        this.focusHandler = new FocusHandler();
+        this.burgerModeThresholdWidth = null;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.isTouch = dsBreakpoints.isTouch;
+        this.isSidebarOpen = false;
+        this.isOverflowing = false;
+        /**
+         * If `true` the navbar will open the sidebar menu.
+         */
+        this.open = false;
+        /**
+         * If `true` the navbar will use a light color scheme.
+         */
+        this.light = false;
+        /**
+         * Sets the inner content container width. Accepts `'default'`, `'fluid'`, or `'compact'`.
+         * Matches the `ds-container` sizing variants.
+         */
+        this.container = '';
+        /**
+         * EVENT HANDLERS
+         * ─────────────────────────────────────────────────────
+         */
+        this.handleHamburgerClick = () => {
+            this.toggleSidebar();
+        };
+        this.handleBackdropClick = () => {
+            this.closeSidebar();
+        };
+        this.handleDrawerClickBound = (event) => {
+            this.handleDrawerClick(event);
+        };
+        this.handleDrawerClick = (event) => {
+            const target = event.target;
+            if (target.tagName === 'A' || target.closest('a')) {
+                this.closeSidebar();
+            }
+        };
+        this.handleDocumentKeyDown = (event) => {
+            if (event.key === 'Escape' && this.isSidebarOpen) {
+                event.preventDefault();
+                this.closeSidebar();
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    openChanged(newValue) {
+        if (newValue) {
+            this.openSidebar();
+        }
+        else {
+            this.closeSidebar();
+        }
+    }
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    connectedCallback() {
+        this.openChanged(this.open);
+        this.scrollHandler.connect();
+        this.focusHandler.connect();
+    }
+    componentDidLoad() {
+        this.checkNavbarOverflow();
+    }
+    disconnectedCallback() {
+        this.detachKeyboardListener();
+        this.detachSidebarClickListener();
+        this.focusHandler.disconnect();
+        this.scrollHandler.disconnect();
+    }
+    /**
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
+     */
+    listenToBreakpoint(breakpoints) {
+        this.isTouch = breakpoints.touch;
+        const isSidebarMode = this.isTouch || this.isOverflowing;
+        if (!isSidebarMode && this.isSidebarOpen) {
+            this.setIsSidebarOpen(false);
+        }
+    }
+    /**
+     * @internal Listens to config changes and updates language/region state
+     */
+    async configChanged(state) {
+        this.language = state.language;
+        this.region = state.region;
+    }
+    /**
+     * @internal Listens to resize events and checks for content overflow
+     */
+    async listenToResize() {
+        this.checkNavbarOverflow();
+    }
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * Toggles the sidebar menu open/closed state
+     */
+    async toggleSidebar() {
+        await this.setIsSidebarOpen(!this.isSidebarOpen);
+    }
+    /**
+     * Opens the sidebar menu
+     */
+    async openSidebar() {
+        await this.setIsSidebarOpen(true);
+    }
+    /**
+     * Closes the sidebar menu
+     */
+    async closeSidebar() {
+        await this.setIsSidebarOpen(false);
+    }
+    /**
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    attachKeyboardListener() {
+        document.addEventListener('keydown', this.handleDocumentKeyDown);
+    }
+    detachKeyboardListener() {
+        document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    }
+    attachSidebarClickListener() {
+        if (this.sidebarEl) {
+            this.sidebarEl.addEventListener('click', this.handleDrawerClickBound);
+        }
+    }
+    detachSidebarClickListener() {
+        if (this.sidebarEl) {
+            this.sidebarEl.removeEventListener('click', this.handleDrawerClickBound);
+        }
+    }
+    checkNavbarOverflow() {
+        if (!this.navEl)
+            return;
+        if (!this.containerEl)
+            return;
+        const scrollWidth = this.containerEl.scrollWidth;
+        const clientWidth = this.containerEl.clientWidth;
+        const isOverflowing = scrollWidth > clientWidth;
+        const hysteresisMargin = 100;
+        if (isOverflowing && !this.isOverflowing) {
+            this.burgerModeThresholdWidth = clientWidth;
+            this.isOverflowing = true;
+            if (this.isSidebarOpen) {
+                this.setIsSidebarOpen(false);
+            }
+        }
+        else if (!isOverflowing && this.isOverflowing && this.burgerModeThresholdWidth) {
+            if (clientWidth > this.burgerModeThresholdWidth + hysteresisMargin) {
+                this.isOverflowing = false;
+                this.burgerModeThresholdWidth = null;
+            }
+        }
+    }
+    async setIsSidebarOpen(value) {
+        var _a;
+        if (value === this.isSidebarOpen)
+            return;
+        const isSidebarMode = this.isTouch || this.isOverflowing;
+        if (value) {
+            this.dsMenuOpenStart.emit();
+            this.isSidebarOpen = true;
+            if (isSidebarMode) {
+                this.attachKeyboardListener();
+                this.attachSidebarClickListener();
+                this.focusHandler.enable({ target: this.navEl, restoreElement: this.burgerButton });
+                (_a = this.burgerButton) === null || _a === void 0 ? void 0 : _a.focus();
+                this.scrollHandler.disable();
+            }
+            this.dsMenuOpenEnd.emit();
+        }
+        else {
+            this.dsMenuCloseStart.emit();
+            if (isSidebarMode) {
+                this.detachKeyboardListener();
+                this.detachSidebarClickListener();
+                this.focusHandler.disable();
+                this.focusHandler.restoreFocus();
+                this.scrollHandler.enable();
+            }
+            this.isSidebarOpen = false;
+            this.dsMenuCloseEnd.emit();
+        }
+    }
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render() {
+        const isTouch = this.isTouch;
+        const isMenuOpen = this.isSidebarOpen;
+        const isSidebarMode = isTouch || this.isOverflowing;
+        const i18n = i18nDsNavbar[this.language];
+        return (h(Host, { key: 'd1d6fe2b8427f6685b71ac943c6c25a77cc7d29a', class: {
+                'is-open': isMenuOpen,
+                'is-sidebar-mode': isSidebarMode,
+                'is-light': this.light,
+            } }, h("nav", { key: 'ad444ede1a0403f07f444ea0690a462278c8cd2b', ref: el => (this.navEl = el), id: "nav", role: "navigation", "aria-label": i18n.mainNavigation }, h("div", { key: '1283a81c4aea12968c29ce7acea013e0f5bd9517', id: "container", class: {
+                'is-fluid': this.container === 'fluid',
+                'is-compact': this.container === 'compact',
+            }, ref: el => (this.containerEl = el) }, h("slot", { key: '5ee4b6dfb635e7da66d997e32c888f9938f534ed', name: "brand" }), h("slot", { key: '1842957278e926ebbad94af2be4ed9e307514f15', name: "title" }), h("div", { key: '9a0d72133cfacf2ee5c2fc7b667eb5c3f8b4ff4c', id: "content" }, !isSidebarMode && (h("div", { key: '888c531c11e5c6608037c3f2ed65fa70e092b3e1', id: "menu" }, h("div", { key: '6c67c0a018968a4b876fb0649cf771a4bc3be8f3', id: "menu-start" }, h("slot", { key: '36645b41db88550fba4d98d79f83f036136f2de1', name: "menu-start" })), h("div", { key: '01d1b694734f14b12893b6f9725d77bbd87494ea', id: "menu-end" }, h("slot", { key: '98be249966e4f0139944631052e2fd0c8c1209b1', name: "menu-end" })))), h("div", { key: '78e6833390750a161561412abb2db338034a14a9', id: "actions" }, h("slot", { key: 'e8bf50d3790e69523952060fff33aaf61e1a80ad', name: "actions" }), isSidebarMode && (h("button", { key: 'd7ed939c79ee98919a158e2b713386b031404550', ref: el => (this.burgerButton = el), id: "hamburger", type: "button", title: isMenuOpen ? i18n.closeMenu : i18n.openMenu, "aria-label": isMenuOpen ? i18n.closeMenu : i18n.openMenu, "aria-expanded": isMenuOpen, "aria-controls": "sidebar", onClick: () => this.handleHamburgerClick() }, h("ds-icon", { key: '0c8a7c53544d7c2c0b7aac5e91f7ab32bfa857a6', name: isMenuOpen ? 'close' : 'menu-bars', size: "", color: "white" })))))), isSidebarMode && (h("aside", { key: '40ac910cfa7c5610311883bd92cb743601570f04', id: "sidebar", role: "dialog", "aria-modal": "true", "aria-label": i18n.navigationMenu, class: { 'is-open': isMenuOpen }, ref: el => (this.sidebarEl = el) }, h("div", { key: '59262ffc7c7d40659584fe4ffcd41d32606e7501', id: "sidebar-backdrop", onClick: this.handleBackdropClick }), h("div", { key: '1debe69728a1868e0680066a6efd7ba9fa0a0a22', id: "sidebar-panel", tabindex: "-1" }, h("div", { key: 'f1d380906397ec3e959013284fb3feaa489800d7', id: "sidebar-content" }, h("div", { key: 'bbe972dc6f5e96d66473e4301706838dadb6e85e', id: "sidebar-start" }, h("slot", { key: '7177345c52b8bc829417db81fb3d107de920ce15', name: "menu-start" })), h("div", { key: 'a416d3e2a3b5fb87555e7b7bbe1020a4b1998bae', id: "sidebar-end" }, h("slot", { key: '953903c4a9ae1007ae5cd3a294e3c091b534945b', name: "menu-end" })))))))));
+    }
+    static get is() { return "ds-navbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["navbar.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["navbar.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the navbar will open the sidebar menu."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "light": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the navbar will use a light color scheme."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "light",
+                "defaultValue": "false"
+            },
+            "container": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "NavbarContainer",
+                    "resolved": "\"\" | \"compact\" | \"default\" | \"fluid\"",
+                    "references": {
+                        "NavbarContainer": {
+                            "location": "import",
+                            "path": "./navbar.interfaces",
+                            "id": "src/components/navbar/navbar.interfaces.ts::NavbarContainer",
+                            "referenceLocation": "NavbarContainer"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the inner content container width. Accepts `'default'`, `'fluid'`, or `'compact'`.\nMatches the `ds-container` sizing variants."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "container",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "language": {},
+            "region": {},
+            "isTouch": {},
+            "isSidebarOpen": {},
+            "isOverflowing": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsMenuOpenStart",
+                "name": "dsMenuOpenStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the sidebar menu starts opening"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dsMenuOpenEnd",
+                "name": "dsMenuOpenEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the sidebar menu finishes opening"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dsMenuCloseStart",
+                "name": "dsMenuCloseStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the sidebar menu starts closing"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dsMenuCloseEnd",
+                "name": "dsMenuCloseEnd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the sidebar menu finishes closing"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "configChanged": {
+                "complexType": {
+                    "signature": "(state: DsConfigState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "DsConfigState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DsConfigState": {
+                            "location": "import",
+                            "path": "@global",
+                            "id": "src/global/index.ts::DsConfigState",
+                            "referenceLocation": "DsConfigState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Listens to config changes and updates language/region state"
+                        }]
+                }
+            },
+            "listenToResize": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Listens to resize events and checks for content overflow"
+                        }]
+                }
+            },
+            "toggleSidebar": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the sidebar menu open/closed state",
+                    "tags": []
+                }
+            },
+            "openSidebar": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the sidebar menu",
+                    "tags": []
+                }
+            },
+            "closeSidebar": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the sidebar menu",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
+}
+__decorate([
+    Logger('navbar'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Navbar.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Navbar.prototype, "open", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Navbar.prototype, "light", void 0);
+__decorate([
+    OneOf(NAVBAR_CONTAINERS),
+    __metadata("design:type", String)
+], Navbar.prototype, "container", void 0);
+__decorate([
+    ListenToBreakpoints(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Navbar.prototype, "listenToBreakpoint", null);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Navbar.prototype, "configChanged", null);
+__decorate([
+    ListenToResize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Promise)
+], Navbar.prototype, "listenToResize", null);

package/dist/collection/components/navbar/test/navbar.a11y.play.js

@@ -0,0 +1,26 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { test } from "../../../../../../playwright/src/index";
+test('basic', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-navbar>
+      <a href="/" slot="brand">Logo</a>
+      <h1 slot="title">App Title</h1>
+      <a href="/about" slot="menu-start">About</a>
+      <button class="button" slot="menu-end">Sign In</button>
+    </ds-navbar>
+  `);
+    await a11y('ds-navbar');
+});
+test('light variant', async ({ page, a11y }) => {
+    await page.mount(`
+    <ds-navbar light>
+      <a href="/" slot="brand">Logo</a>
+      <h1 slot="title">App Title</h1>
+      <a href="/about" slot="menu-start">About</a>
+      <button class="button" slot="menu-end">Sign In</button>
+    </ds-navbar>
+  `);
+    await a11y('ds-navbar');
+});

package/dist/collection/components/navbar/test/navbar.component.play.js

@@ -0,0 +1,76 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsNavbar, test } from "../../../../../../playwright/src/index";
+import { expect } from "@playwright/test";
+test('should fire dsMenuOpenStart and dsMenuOpenEnd events', async ({ page }) => {
+    await page.setViewportSize({ width: 600, height: 600 });
+    await page.mount(`
+      <ds-navbar>
+        <a href="/" slot="brand">Logo</a>
+        <a href="/about" slot="menu-start">About</a>
+      </ds-navbar>
+    `);
+    const navbar = new DsNavbar(page.locator('ds-navbar'));
+    const openStartSpy = await navbar.el.spyOnEvent('dsMenuOpenStart');
+    const openEndSpy = await navbar.el.spyOnEvent('dsMenuOpenEnd');
+    await navbar.toggleSidebar();
+    expect(openStartSpy).toHaveReceivedEventTimes(1);
+    expect(openEndSpy).toHaveReceivedEventTimes(1);
+});
+test('should fire dsMenuCloseStart and dsMenuCloseEnd events', async ({ page }) => {
+    await page.setViewportSize({ width: 600, height: 600 });
+    await page.mount(`
+      <ds-navbar open>
+        <a href="/" slot="brand">Logo</a>
+        <a href="/about" slot="menu-start">About</a>
+      </ds-navbar>
+    `);
+    const navbar = new DsNavbar(page.locator('ds-navbar'));
+    const closeStartSpy = await navbar.el.spyOnEvent('dsMenuCloseStart');
+    const closeEndSpy = await navbar.el.spyOnEvent('dsMenuCloseEnd');
+    await navbar.toggleSidebar();
+    await page.waitForChanges();
+    expect(closeStartSpy).toHaveReceivedEventTimes(1);
+    expect(closeEndSpy).toHaveReceivedEventTimes(1);
+});
+test('toggleSidebar should toggle sidebar state', async ({ page }) => {
+    await page.setViewportSize({ width: 600, height: 600 });
+    await page.mount(`
+      <ds-navbar>
+        <a href="/" slot="brand">Logo</a>
+        <a href="/about" slot="menu-start">About</a>
+      </ds-navbar>
+    `);
+    const navbar = new DsNavbar(page.locator('ds-navbar'));
+    // Toggle to open
+    await navbar.toggleSidebar();
+    await navbar.assertSidebarIsOpen();
+    // Toggle to close
+    await navbar.toggleSidebar();
+    await navbar.assertSidebarIsClosed();
+});
+test('should open sidebar when hamburger is clicked', async ({ page }) => {
+    await page.setViewportSize({ width: 600, height: 600 });
+    await page.mount(`
+      <ds-navbar>
+        <a href="/" slot="brand">Logo</a>
+        <a href="/about" slot="menu-start">About</a>
+      </ds-navbar>
+    `);
+    const navbar = new DsNavbar(page.locator('ds-navbar'));
+    await navbar.toggleSidebar();
+    await navbar.assertSidebarIsOpen();
+});
+test('should close sidebar when backdrop is clicked', async ({ page }) => {
+    await page.setViewportSize({ width: 600, height: 600 });
+    await page.mount(`
+      <ds-navbar open>
+        <a href="/" slot="brand">Logo</a>
+        <a href="/about" slot="menu-start">About</a>
+      </ds-navbar>
+    `);
+    const navbar = new DsNavbar(page.locator('ds-navbar'));
+    await page.keyboard.press('Escape');
+    await navbar.assertSidebarIsClosed();
+});

package/dist/collection/components/navbar/test/navbar.visual.play.js

@@ -0,0 +1,14 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { test, expectScreenshot, screenshot } from "../../../../../../playwright/src/index";
+const TAG = 'navbar';
+const image = screenshot(TAG);
+test('basic', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+    await expectScreenshot(page, image('basic'));
+});
+test('light', async ({ page }) => {
+    await page.setupVisualTest(`/components/${TAG}/test/${TAG}-light.visual.html`);
+    await expectScreenshot(page, image('light'));
+});