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

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: '4751141c9276638d58183322206828c49f38d67a', class: {
+                'is-open': isMenuOpen,
+                'is-sidebar-mode': isSidebarMode,
+                'is-light': this.light,
+            } }, h("nav", { key: 'b142ac6bf25cdd48aff78158ebc49cd79889db0f', ref: el => (this.navEl = el), id: "nav", role: "navigation", "aria-label": i18n.mainNavigation }, h("div", { key: '056bda2d8ba50d01e34f4c000be406cc6ed546fe', id: "container", class: {
+                'is-fluid': this.container === 'fluid',
+                'is-compact': this.container === 'compact',
+            }, ref: el => (this.containerEl = el) }, h("slot", { key: '837d06a2d3205deb6f155322cc5f1a9484835cbb', name: "brand" }), h("slot", { key: 'c50410f1c714b5f6d9aa9603312d3642aae3f342', name: "title" }), h("div", { key: '047cf2da3762320ab02e1ab305b58f3c074c6c0d', id: "content" }, !isSidebarMode && (h("div", { key: '2e0010d0470373050d84d0f099fc73156e3f3099', id: "menu" }, h("div", { key: 'f7b8c0e885f747ae2ee03f1ff223484be8699cf5', id: "menu-start" }, h("slot", { key: 'a7a172470428bfc5668f25d6387c33b281303aa1', name: "menu-start" })), h("div", { key: 'a31d2061cc68cfba618b1f7efd9200bcb88a237a', id: "menu-end" }, h("slot", { key: '2a7aa495db2db5313f84d4f98ab6f52151caaf95', name: "menu-end" })))), h("div", { key: 'c596c26adaa4fdef8063fc36f1470e4b0afc8b9c', id: "actions" }, h("slot", { key: 'a7b4f6c2522715aeb5c536c8f022b74913839969', name: "actions" }), isSidebarMode && (h("button", { key: '844afe3c1617c51f913b2b7b155fadf7dd788caa', 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: 'fea68d648cddd553deaea422f78738ffd33ae329', name: isMenuOpen ? 'close' : 'menu-bars', size: "", color: "white" })))))), isSidebarMode && (h("aside", { key: 'd7cca3a0a9c98262baf322ad17c8480142c4856f', id: "sidebar", role: "dialog", "aria-modal": "true", "aria-label": i18n.navigationMenu, class: { 'is-open': isMenuOpen }, ref: el => (this.sidebarEl = el) }, h("div", { key: 'e59e4562f388c3e17b757be5532292271bf97312', id: "sidebar-backdrop", onClick: this.handleBackdropClick }), h("div", { key: '7e1813c533e5ae1edb40b4a5f3cb89eff9198e2d', id: "sidebar-panel", tabindex: "-1" }, h("div", { key: '20989ff5635db54ec7e6a6e6c4fb8d9f0f95ee01', id: "sidebar-content" }, h("div", { key: '91b497cd27858444399806749434126d508551d7', id: "sidebar-start" }, h("slot", { key: '3666487b26799818741b7e5022a0c90e7485adb3', name: "menu-start" })), h("div", { key: 'f30d9b73f3b706acc184eb39b2e555d58259d813', id: "sidebar-end" }, h("slot", { key: '36d1d16c15f23413a5fcd8af087b4c5a8bf4f2fc', 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'));
+});