wcs-core 7.3.0 → 7.4.1

package/dist/collection/components/alert-drawer/alert-drawer.e2e.playwright.js

@@ -0,0 +1,107 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+const WAITING_DELAY_BEFORE_ASSERTIONS = 1000;
+test.describe('alert-drawer', () => {
+    test('should show an alert when using show() method', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-alert-drawer position="bottom-right"></wcs-alert-drawer>
+        `);
+        const alertDrawer = page.locator('wcs-alert-drawer');
+        // When
+        await alertDrawer.evaluate((el) => el.show({
+            title: 'Test Title',
+            subtitle: 'Test Subtitle',
+            intent: 'success',
+            showProgressBar: false,
+            timeout: 0
+        }));
+        await page.waitForChanges();
+        // Then
+        const alert = alertDrawer.locator('wcs-alert');
+        await expect(alert).toHaveCount(1);
+        const title = alertDrawer.locator('wcs-alert > [slot="title"]');
+        const subtitle = alertDrawer.locator('wcs-alert > [slot="subtitle"]');
+        await expect(title).toHaveText('Test Title');
+        await expect(subtitle).toHaveText('Test Subtitle');
+    });
+    test('should close the alert after timeout', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-alert-drawer></wcs-alert-drawer>
+        `);
+        const alertDrawer = page.locator('wcs-alert-drawer');
+        // When
+        await alertDrawer.evaluate((el) => el.show({
+            title: 'Test Title',
+            subtitle: 'Test Subtitle',
+            intent: 'success',
+            showProgressBar: false,
+            timeout: 100 // Short timeout for testing
+        }));
+        // Wait for the alert to be removed
+        await page.waitForTimeout(WAITING_DELAY_BEFORE_ASSERTIONS); // Wait a bit longer than the timeout
+        await page.waitForChanges();
+        // Then
+        const alert = alertDrawer.locator('wcs-alert');
+        await expect(alert).toHaveCount(0);
+    });
+    test('should show progress bar when showProgressBar is true', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-alert-drawer></wcs-alert-drawer>
+        `);
+        const alertDrawer = page.locator('wcs-alert-drawer');
+        // When
+        await alertDrawer.evaluate((el) => el.show({
+            title: 'Test Title',
+            subtitle: 'Test Subtitle',
+            intent: 'success',
+            showProgressBar: true,
+            timeout: 5000
+        }));
+        await page.waitForChanges();
+        // Then
+        const progressBar = alertDrawer.locator('wcs-alert').locator('.progress-bar');
+        await expect(progressBar).toBeVisible();
+    });
+    test('should have correct ARIA attributes for accessibility', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-alert-drawer></wcs-alert-drawer>
+        `);
+        const alertDrawer = page.locator('wcs-alert-drawer');
+        // Then
+        await expect(alertDrawer).toHaveAttribute('role', 'region');
+        await expect(alertDrawer).toHaveAttribute('aria-live', 'polite');
+        await expect(alertDrawer).toHaveAttribute('aria-atomic', 'true');
+    });
+    test('should handle multiple alerts', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-alert-drawer></wcs-alert-drawer>
+        `);
+        const alertDrawer = page.locator('wcs-alert-drawer');
+        // When
+        await alertDrawer.evaluate((el) => el.show({
+            title: 'First Alert',
+            subtitle: 'First Subtitle',
+            intent: 'success',
+            showProgressBar: false,
+            timeout: 0
+        }));
+        await alertDrawer.evaluate((el) => el.show({
+            title: 'Second Alert',
+            subtitle: 'Second Subtitle',
+            intent: 'warning',
+            showProgressBar: false,
+            timeout: 0
+        }));
+        await page.waitForChanges();
+        // Then
+        const alerts = alertDrawer.locator('wcs-alert');
+        await expect(alerts).toHaveCount(2);
+    });
+});
+//# sourceMappingURL=alert-drawer.e2e.playwright.js.map

package/dist/collection/components/alert-drawer/alert-drawer.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-drawer.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/alert-drawer/alert-drawer.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\nimport { expect } from \"@playwright/test\";\nconst WAITING_DELAY_BEFORE_ASSERTIONS = 1_000;\n\ntest.describe('alert-drawer', () => {\n    test('should show an alert when using show() method', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-alert-drawer position=\"bottom-right\"></wcs-alert-drawer>\n        `);\n\n        const alertDrawer = page.locator('wcs-alert-drawer');\n\n        // When\n        await alertDrawer.evaluate((el: any) => el.show({\n            title: 'Test Title',\n            subtitle: 'Test Subtitle',\n            intent: 'success',\n            showProgressBar: false,\n            timeout: 0\n        }));\n        await page.waitForChanges();\n\n        // Then\n        const alert = alertDrawer.locator('wcs-alert');\n        await expect(alert).toHaveCount(1);\n\n        const title = alertDrawer.locator('wcs-alert > [slot=\"title\"]');\n        const subtitle = alertDrawer.locator('wcs-alert > [slot=\"subtitle\"]');\n        await expect(title).toHaveText('Test Title');\n        await expect(subtitle).toHaveText('Test Subtitle');\n    });\n\n    test('should close the alert after timeout', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-alert-drawer></wcs-alert-drawer>\n        `);\n\n        const alertDrawer = page.locator('wcs-alert-drawer');\n\n        // When\n        await alertDrawer.evaluate((el: any) => el.show({\n            title: 'Test Title',\n            subtitle: 'Test Subtitle',\n            intent: 'success',\n            showProgressBar: false,\n            timeout: 100 // Short timeout for testing\n        }));\n\n        // Wait for the alert to be removed\n        await page.waitForTimeout(WAITING_DELAY_BEFORE_ASSERTIONS); // Wait a bit longer than the timeout\n        await page.waitForChanges();\n\n        // Then\n        const alert = alertDrawer.locator('wcs-alert');\n        await expect(alert).toHaveCount(0);\n    });\n\n    test('should show progress bar when showProgressBar is true', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-alert-drawer></wcs-alert-drawer>\n        `);\n\n        const alertDrawer = page.locator('wcs-alert-drawer');\n\n        // When\n        await alertDrawer.evaluate((el: any) => el.show({\n            title: 'Test Title',\n            subtitle: 'Test Subtitle',\n            intent: 'success',\n            showProgressBar: true,\n            timeout: 5000\n        }));\n        await page.waitForChanges();\n\n        // Then\n        const progressBar = alertDrawer.locator('wcs-alert').locator('.progress-bar');\n        await expect(progressBar).toBeVisible();\n    });\n\n    test('should have correct ARIA attributes for accessibility', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-alert-drawer></wcs-alert-drawer>\n        `);\n\n        const alertDrawer = page.locator('wcs-alert-drawer');\n\n        // Then\n        await expect(alertDrawer).toHaveAttribute('role', 'region');\n        await expect(alertDrawer).toHaveAttribute('aria-live', 'polite');\n        await expect(alertDrawer).toHaveAttribute('aria-atomic', 'true');\n    });\n\n    test('should handle multiple alerts', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-alert-drawer></wcs-alert-drawer>\n        `);\n\n        const alertDrawer = page.locator('wcs-alert-drawer');\n\n        // When\n        await alertDrawer.evaluate((el: any) => el.show({\n            title: 'First Alert',\n            subtitle: 'First Subtitle',\n            intent: 'success',\n            showProgressBar: false,\n            timeout: 0\n        }));\n        await alertDrawer.evaluate((el: any) => el.show({\n            title: 'Second Alert',\n            subtitle: 'Second Subtitle',\n            intent: 'warning',\n            showProgressBar: false,\n            timeout: 0\n        }));\n        await page.waitForChanges();\n\n        // Then\n        const alerts = alertDrawer.locator('wcs-alert');\n        await expect(alerts).toHaveCount(2);\n    });\n});\n"]}

package/dist/collection/components/breadcrumb/breadcrumb.e2e.playwright.js

@@ -0,0 +1,188 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('breadcrumb collapse', () => {
+    test('should hide breadcrumb item and respect default values for itemsBeforeCollapse and itemsAfterCollapse props', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb max-items="3">
+                <wcs-breadcrumb-item class="home-item">Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="train-item">Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="ticket-item">Tickets</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="detail-item">Details</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        const homeItem = page.locator('.home-item');
+        const trainItem = page.locator('.train-item');
+        const ticketItem = page.locator('.ticket-item');
+        const detail = page.locator('.detail-item');
+        await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');
+        await expect(trainItem).toHaveAttribute('slot', 'hidden-items');
+        await expect(ticketItem).toHaveAttribute('slot', 'items-after-expand-btn');
+        await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');
+    });
+    test('should hide breadcrumb item and respect user values for itemsBeforeCollapse and itemsAfterCollapse props', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb max-items="3" items-before-collapse="2" items-after-collapse="1">
+                <wcs-breadcrumb-item class="home-item">Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="train-item">Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="ticket-item">Tickets</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="detail-item">Details</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        const homeItem = page.locator('.home-item');
+        const trainItem = page.locator('.train-item');
+        const ticketItem = page.locator('.ticket-item');
+        const detail = page.locator('.detail-item');
+        await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');
+        await expect(trainItem).toHaveAttribute('slot', 'items-before-expand-btn');
+        await expect(ticketItem).toHaveAttribute('slot', 'hidden-items');
+        await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');
+    });
+    test('shouldn\'t hide breadcrumb item if max item attribute is not defined', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb>
+                <wcs-breadcrumb-item class="home-item">Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="train-item">Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="ticket-item">Tickets</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="detail-item">Details</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        const homeItem = page.locator('.home-item');
+        const trainItem = page.locator('.train-item');
+        const ticketItem = page.locator('.ticket-item');
+        const detail = page.locator('.detail-item');
+        await expect(homeItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(trainItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(ticketItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(detail).toHaveAttribute('slot', 'non-collapsed');
+    });
+    test('sould hide appended breadcrumb item', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb max-items="3">
+                <wcs-breadcrumb-item class="home-item">Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="train-item">Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="ticket-item">Tickets</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        await page.evaluate(() => {
+            const breadcrumbItem = document.createElement('wcs-breadcrumb-item');
+            breadcrumbItem.classList.add('detail-item');
+            breadcrumbItem.textContent = 'Details';
+            const breadcrumb = document.querySelector('wcs-breadcrumb');
+            breadcrumb.appendChild(breadcrumbItem);
+        });
+        const homeItem = page.locator('.home-item');
+        const trainItem = page.locator('.train-item');
+        const ticketItem = page.locator('.ticket-item');
+        const detail = page.locator('.detail-item');
+        await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');
+        await expect(trainItem).toHaveAttribute('slot', 'hidden-items');
+        await expect(ticketItem).toHaveAttribute('slot', 'items-after-expand-btn');
+        await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');
+    });
+    test('should display all breadcrumb items when the max-items prop is mutated in js', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb max-items="3">
+                <wcs-breadcrumb-item class="home-item">Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="train-item">Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="ticket-item">Tickets</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="detail-item">Details</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        const homeItem = page.locator('.home-item');
+        const trainItem = page.locator('.train-item');
+        const ticketItem = page.locator('.ticket-item');
+        const detail = page.locator('.detail-item');
+        await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');
+        await expect(trainItem).toHaveAttribute('slot', 'hidden-items');
+        await expect(ticketItem).toHaveAttribute('slot', 'items-after-expand-btn');
+        await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');
+        const breadcrumb = page.locator('wcs-breadcrumb');
+        await breadcrumb.evaluate((el) => el.maxItems = undefined);
+        await expect(homeItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(trainItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(ticketItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(detail).toHaveAttribute('slot', 'non-collapsed');
+    });
+    test('should collapse all breadcrumb items when the max-items prop is mutated in js', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb>
+                <wcs-breadcrumb-item class="home-item">Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="train-item">Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="ticket-item">Tickets</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="detail-item">Details</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        const homeItem = page.locator('.home-item');
+        const trainItem = page.locator('.train-item');
+        const ticketItem = page.locator('.ticket-item');
+        const detail = page.locator('.detail-item');
+        await expect(homeItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(trainItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(ticketItem).toHaveAttribute('slot', 'non-collapsed');
+        await expect(detail).toHaveAttribute('slot', 'non-collapsed');
+        const breadcrumb = page.locator('wcs-breadcrumb');
+        await breadcrumb.evaluate((el) => el.maxItems = 3);
+        await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');
+        await expect(trainItem).toHaveAttribute('slot', 'hidden-items');
+        await expect(ticketItem).toHaveAttribute('slot', 'items-after-expand-btn');
+        await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');
+    });
+    test('should expand collapsed items when user click on expand button', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb max-items="3">
+                <wcs-breadcrumb-item class="home-item">Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="train-item">Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="ticket-item">Tickets</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="detail-item">Details</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        const nav = page.locator('wcs-breadcrumb nav');
+        const expandBtn = page.locator(`wcs-breadcrumb wcs-button`);
+        await expandBtn.click();
+        await page.waitForChanges();
+        await expect(nav).toHaveClass(/show-hidden-items/);
+    });
+    test('should update aria-label attribute after the first render', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb>
+                <wcs-breadcrumb-item>Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item>Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item>Tickets</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        const wcsBreadcrumb = page.locator('wcs-breadcrumb');
+        // When
+        await wcsBreadcrumb.evaluate((el) => el.setAriaAttribute('aria-label', 'new label'));
+        // Then
+        const navEl = page.locator('wcs-breadcrumb nav');
+        await expect(navEl).toHaveAttribute('aria-label', 'new label');
+    });
+    test('should update expand button aria-label attribute', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-breadcrumb max-items="3">
+                <wcs-breadcrumb-item class="home-item">Home</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="train-item">Train</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="ticket-item">Tickets</wcs-breadcrumb-item>
+                <wcs-breadcrumb-item class="detail-item">Details</wcs-breadcrumb-item>
+            </wcs-breadcrumb>
+        `);
+        const wcsBreadcrumb = page.locator('wcs-breadcrumb');
+        // When
+        const newAriaLabelValue = 'New label';
+        await wcsBreadcrumb.evaluate((el, value) => el.ariaLabelExpandButton = value, newAriaLabelValue);
+        // Then
+        const expandBtn = page.locator('wcs-breadcrumb button.wcs-inner-button');
+        await expect(expandBtn).toHaveAttribute('aria-label', newAriaLabelValue);
+    });
+});
+//# sourceMappingURL=breadcrumb.e2e.playwright.js.map

package/dist/collection/components/breadcrumb/breadcrumb.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('breadcrumb collapse', () => {\n    test('should hide breadcrumb item and respect default values for itemsBeforeCollapse and itemsAfterCollapse props', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-breadcrumb max-items=\"3\">\n                <wcs-breadcrumb-item class=\"home-item\">Home</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"train-item\">Train</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"ticket-item\">Tickets</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"detail-item\">Details</wcs-breadcrumb-item>\n            </wcs-breadcrumb>\n        `);\n\n        const homeItem = page.locator('.home-item');\n        const trainItem = page.locator('.train-item');\n        const ticketItem = page.locator('.ticket-item');\n        const detail = page.locator('.detail-item');\n\n        await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');\n        await expect(trainItem).toHaveAttribute('slot', 'hidden-items');\n        await expect(ticketItem).toHaveAttribute('slot', 'items-after-expand-btn');\n        await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');\n    });\n\n    test('should hide breadcrumb item and respect user values for itemsBeforeCollapse and itemsAfterCollapse props', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-breadcrumb max-items=\"3\" items-before-collapse=\"2\" items-after-collapse=\"1\">\n                <wcs-breadcrumb-item class=\"home-item\">Home</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"train-item\">Train</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"ticket-item\">Tickets</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"detail-item\">Details</wcs-breadcrumb-item>\n            </wcs-breadcrumb>\n        `);\n\n        const homeItem = page.locator('.home-item');\n        const trainItem = page.locator('.train-item');\n        const ticketItem = page.locator('.ticket-item');\n        const detail = page.locator('.detail-item');\n\n        await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');\n        await expect(trainItem).toHaveAttribute('slot', 'items-before-expand-btn');\n        await expect(ticketItem).toHaveAttribute('slot', 'hidden-items');\n        await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');\n    });\n\n    test('shouldn\\'t hide breadcrumb item if max item attribute is not defined', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-breadcrumb>\n                <wcs-breadcrumb-item class=\"home-item\">Home</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"train-item\">Train</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"ticket-item\">Tickets</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"detail-item\">Details</wcs-breadcrumb-item>\n            </wcs-breadcrumb>\n        `);\n\n        const homeItem = page.locator('.home-item');\n        const trainItem = page.locator('.train-item');\n        const ticketItem = page.locator('.ticket-item');\n        const detail = page.locator('.detail-item');\n\n        await expect(homeItem).toHaveAttribute('slot', 'non-collapsed');\n        await expect(trainItem).toHaveAttribute('slot', 'non-collapsed');\n        await expect(ticketItem).toHaveAttribute('slot', 'non-collapsed');\n        await expect(detail).toHaveAttribute('slot', 'non-collapsed');\n    });\n\n    test('sould hide appended breadcrumb item', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-breadcrumb max-items=\"3\">\n                <wcs-breadcrumb-item class=\"home-item\">Home</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"train-item\">Train</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"ticket-item\">Tickets</wcs-breadcrumb-item>\n            </wcs-breadcrumb>\n        `);\n\n        await page.evaluate(() => {\n            const breadcrumbItem = document.createElement('wcs-breadcrumb-item');\n            breadcrumbItem.classList.add('detail-item');\n            breadcrumbItem.textContent = 'Details';\n            const breadcrumb = document.querySelector('wcs-breadcrumb');\n            breadcrumb!.appendChild(breadcrumbItem);\n        });\n\n        const homeItem = page.locator('.home-item');\n        const trainItem = page.locator('.train-item');\n        const ticketItem = page.locator('.ticket-item');\n        const detail = page.locator('.detail-item');\n\n        await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');\n        await expect(trainItem).toHaveAttribute('slot', 'hidden-items');\n        await expect(ticketItem).toHaveAttribute('slot', 'items-after-expand-btn');\n        await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');\n    });\n\n    test('should display all breadcrumb items when the max-items prop is mutated in js', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-breadcrumb max-items=\"3\">\n                <wcs-breadcrumb-item class=\"home-item\">Home</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"train-item\">Train</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"ticket-item\">Tickets</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"detail-item\">Details</wcs-breadcrumb-item>\n            </wcs-breadcrumb>\n        `);\n\n        const homeItem = page.locator('.home-item');\n        const trainItem = page.locator('.train-item');\n        const ticketItem = page.locator('.ticket-item');\n        const detail = page.locator('.detail-item');\n\n        await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');\n        await expect(trainItem).toHaveAttribute('slot', 'hidden-items');\n        await expect(ticketItem).toHaveAttribute('slot', 'items-after-expand-btn');\n        await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');\n\n        const breadcrumb = page.locator('wcs-breadcrumb');\n        await breadcrumb.evaluate((el: any) => el.maxItems = undefined);\n\n        await expect(homeItem).toHaveAttribute('slot', 'non-collapsed');\n        await expect(trainItem).toHaveAttribute('slot', 'non-collapsed');\n        await expect(ticketItem).toHaveAttribute('slot', 'non-collapsed');\n        await expect(detail).toHaveAttribute('slot', 'non-collapsed');\n    });\n\n    test('should collapse all breadcrumb items when the max-items prop is mutated in js', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-breadcrumb>\n                <wcs-breadcrumb-item class=\"home-item\">Home</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"train-item\">Train</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"ticket-item\">Tickets</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"detail-item\">Details</wcs-breadcrumb-item>\n            </wcs-breadcrumb>\n        `);\n\n        const homeItem = page.locator('.home-item');\n        const trainItem = page.locator('.train-item');\n        const ticketItem = page.locator('.ticket-item');\n        const detail = page.locator('.detail-item');\n\n        await expect(homeItem).toHaveAttribute('slot', 'non-collapsed');\n        await expect(trainItem).toHaveAttribute('slot', 'non-collapsed');\n        await expect(ticketItem).toHaveAttribute('slot', 'non-collapsed');\n        await expect(detail).toHaveAttribute('slot', 'non-collapsed');\n\n        const breadcrumb = page.locator('wcs-breadcrumb');\n        await breadcrumb.evaluate((el: any) => el.maxItems = 3);\n\n        await expect(homeItem).toHaveAttribute('slot', 'items-before-expand-btn');\n        await expect(trainItem).toHaveAttribute('slot', 'hidden-items');\n        await expect(ticketItem).toHaveAttribute('slot', 'items-after-expand-btn');\n        await expect(detail).toHaveAttribute('slot', 'items-after-expand-btn');\n    });\n\n    test('should expand collapsed items when user click on expand button', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-breadcrumb max-items=\"3\">\n                <wcs-breadcrumb-item class=\"home-item\">Home</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"train-item\">Train</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"ticket-item\">Tickets</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"detail-item\">Details</wcs-breadcrumb-item>\n            </wcs-breadcrumb>\n        `);\n\n        const nav = page.locator('wcs-breadcrumb nav');\n        const expandBtn = page.locator(`wcs-breadcrumb wcs-button`);\n        await expandBtn.click();\n        await page.waitForChanges();\n\n        await expect(nav).toHaveClass(/show-hidden-items/);\n    });\n\n    test('should update aria-label attribute after the first render', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-breadcrumb>\n                <wcs-breadcrumb-item>Home</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item>Train</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item>Tickets</wcs-breadcrumb-item>\n            </wcs-breadcrumb>\n        `);\n\n        const wcsBreadcrumb = page.locator('wcs-breadcrumb');\n\n        // When\n        await wcsBreadcrumb.evaluate((el: any) => el.setAriaAttribute('aria-label', 'new label'));\n\n        // Then\n        const navEl = page.locator('wcs-breadcrumb nav');\n        await expect(navEl).toHaveAttribute('aria-label', 'new label');\n    });\n\n    test('should update expand button aria-label attribute', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-breadcrumb max-items=\"3\">\n                <wcs-breadcrumb-item class=\"home-item\">Home</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"train-item\">Train</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"ticket-item\">Tickets</wcs-breadcrumb-item>\n                <wcs-breadcrumb-item class=\"detail-item\">Details</wcs-breadcrumb-item>\n            </wcs-breadcrumb>\n        `);\n\n        const wcsBreadcrumb = page.locator('wcs-breadcrumb');\n\n        // When\n        const newAriaLabelValue = 'New label';\n        await wcsBreadcrumb.evaluate((el: any, value: string) => el.ariaLabelExpandButton = value, newAriaLabelValue);\n\n        // Then\n        const expandBtn = page.locator('wcs-breadcrumb button.wcs-inner-button');\n        await expect(expandBtn).toHaveAttribute('aria-label', newAriaLabelValue);\n    });\n});\n"]}

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -131,7 +131,7 @@ export class Breadcrumb {
     }
     render() {
         const showExpandBtn = this.shouldCollapseItems() && !this.showHiddenItems;
-        return (h(Host, { key: 'f1c0ed14b8806df5c1ba717f6354d2e4c201dcd1' }, h("nav", Object.assign({ key: 'ae39ce6d5af6868105c1cb349d70d04da9931274', class: `wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`, "aria-label": NAV_ARIA_LABEL_DEFAULT }, this.inheritedAttributes, { ref: (el) => this.navEl = el }), h("div", { key: '82f4a76da057076e5d7299df7972bb918220b6ac', role: "list" }, h("slot", { key: 'e3180e059e1467c9821e5d10b0694f39194ce4f4', onSlotchange: this.handleSlotChange.bind(this) }), h("slot", { key: 'e865695a1082a503321d519193f47c54f2d86ba5', name: "non-collapsed" }), h("slot", { key: '53a846e67fe320236a8f0b80216c72fa676304bb', name: "items-before-expand-btn" }), h("slot", { key: 'a6f9243e94d5f4e05e6e3ca89a574ac37128689a', name: "hidden-items" }), showExpandBtn && this.renderExpandAllButton(), h("slot", { key: '0ca62fc184565b82a12d1314bdfb51161934775b', name: "items-after-expand-btn" })))));
+        return (h(Host, { key: '1707e6c3ee0cc621c75f85f927b543dea1af4342' }, h("nav", Object.assign({ key: 'b326c58b86feed5092f8a6c5d46c3cf2dd06a783', class: `wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`, "aria-label": NAV_ARIA_LABEL_DEFAULT }, this.inheritedAttributes, { ref: (el) => this.navEl = el }), h("div", { key: '9a4395f63e0895bca1918d7236a01dd9d0437f26', role: "list" }, h("slot", { key: 'b74aa1fc77ddfc892f0ba79bceffceab10e49c1f', onSlotchange: this.handleSlotChange.bind(this) }), h("slot", { key: 'c616f6281282a7088073ceb131f12f93d1126c8b', name: "non-collapsed" }), h("slot", { key: '0db22f440bc3956219c343e4dac60bfe09581d73', name: "items-before-expand-btn" }), h("slot", { key: 'a29809c5122d539d11c1e53e591ed4342c338810', name: "hidden-items" }), showExpandBtn && this.renderExpandAllButton(), h("slot", { key: 'aa906ec3b5805f78136b39e5d56937cdca7a7f38', name: "items-after-expand-btn" })))));
     }
     static get is() { return "wcs-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
@@ -232,7 +232,7 @@ export class Breadcrumb {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",
                     "parameters": [{
                             "name": "attr",
-                            "type": "\"role\" | `aria-${string}`",
+                            "type": "`aria-${string}` | \"role\"",
                             "docs": ""
                         }, {
                             "name": "value",

package/dist/collection/components/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element, forceUpdate,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\n\nimport { inheritAttributes, inheritAriaAttributes, setOrRemoveAttribute } from '../../utils/helpers';\nimport { AriaAttributeName, MutableAriaAttribute } from '../../utils/mutable-aria-attribute';\nimport {\n    ICONS_FONT_CHEVRON_UNICODE,\n    NAV_ARIA_LABEL_DEFAULT,\n    EXPAND_BTN_ARIA_LABEL_DEFAULT\n} from './breadcrumb-constants';\n\nconst BREADCRUMB_INHERITED_ATTRS = [];\n\n/**\n * A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order.  \n * It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.\n *\n * ## Accessibility guidelines 💡\n * > - If the last item is a link to the current page, you must set the `aria-current` attribute to `page` on `wcs-breadcrumb-item`.\n * > - If the element representing the current page is not a link, `aria-current` is optional.\n * > - You can set the attribute `aria-label` on `wcs-breadcrumb`, it will be passed to the native `nav` element located inside its shadow DOM. \n * >   You can find the `aria-label` default value in the table below. If your application is in English, you can set it to `Breadcrumb`.\n * > - You can do the same thing for the `aria-label` of the expand button when the breadcrumb is collapsed. You can find its default value\n * >   in the table below too.  \n * > - If you need to **dynamically change the `aria-label` attribute of `wcs-breadcrumb` after the first render**, you can use the \n * >   `setAriaAttribute` JS method (example below). For the expand button however, you can update the prop `ariaLabelExpandButton`.  \n * >   Note: we're working on updating the component automatically when attributes change. \n *\n * > ```javascript\n * > const wcsButton = document.querySelector('wcs-button');\n * > await wcsButton.setAriaAttribute('aria-label', 'new label');\n * > ```\n * \n * @cssprop --wcs-breadcrumb-icon-color - Icon color\n * @cssprop --wcs-breadcrumb-icon-font-size - Icon font size\n * @cssprop --wcs-breadcrumb-gap - Gap between breadcrumb items\n */\n@Component({\n    tag: 'wcs-breadcrumb',\n    styleUrl: 'breadcrumb.scss',\n    shadow: true,\n})\nexport class Breadcrumb implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLElement;\n    private navEl?: HTMLElement;\n    private expandBtnEl: HTMLWcsButtonElement;\n\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * If the number of breadcrumb items exceeds this maximum,\n     * the breadcrumb will collapse and show an expand button.  \n     * If this prop is `undefined`, breadcrumb items will never collapse.\n     */\n    @Prop() maxItems?: number;\n    /**\n     * The number of breadcrumb items to show before the expand button.\n     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\n     * the breadcrumb will not be collapsed.\n     */\n    @Prop() itemsBeforeCollapse: number = 1;\n    /**\n     * The number of breadcrumb items to show after the expand button.\n     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\n     * the breadcrumb will not be collapsed.\n     */\n    @Prop() itemsAfterCollapse: number = 2;\n    /** Set `aria-label` for the expand button when the breadcrumb is collapsed. */\n    @Prop() ariaLabelExpandButton?: string = EXPAND_BTN_ARIA_LABEL_DEFAULT;\n\n    /**\n     * Show breadcrumb items that are inside the hidden-items slot.\n     */\n    @State() private showHiddenItems: boolean = false;\n\n    @Watch('maxItems')\n    @Watch('itemsBeforeCollapse')\n    @Watch('itemsAfterCollapse')\n    handleCollapsePropsChange() {\n        this.updateCollapsedViewMode();\n    }\n\n    @Watch('ariaLabelExpandButton')\n    handleAriaLabelExpandBtnChange(newValue: string) {\n        this.expandBtnEl?.setAriaAttribute('aria-label', newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, BREADCRUMB_INHERITED_ATTRS),\n        };\n        this.updateCollapsedViewMode();\n    }\n\n    componentDidLoad(): void {\n        this.expandBtnEl?.setAriaAttribute('aria-label', this.ariaLabelExpandButton);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.navEl, attr, value);\n    }\n\n    private getBreadcrumbItems(): HTMLWcsBreadcrumbItemElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-breadcrumb-item'));\n    }\n\n    private shouldCollapseItems(): boolean {\n        return (\n            !!this.maxItems &&\n            this.getBreadcrumbItems().length > this.maxItems &&\n            this.itemsBeforeCollapse + this.itemsAfterCollapse <= this.maxItems\n        );\n    }\n\n    private updateCollapsedViewMode(): void {\n        if (this.shouldCollapseItems()) {\n            this.assignSlotNamesForCollapsedViewMode();\n        } else {\n            this.assignSlotNamesForNonCollapsedViewMode();\n        }\n    }\n\n    /**\n     * Setting slot names on breadcrumb items allows to leverage JSX in the render method.\n     */\n    private assignSlotNamesForCollapsedViewMode(): void {\n        const breadcrumbItems = this.getBreadcrumbItems();\n        const itemBeforeExpandBtnIndex = this.itemsBeforeCollapse - 1;\n        const itemAfterExpandBtnIndex = breadcrumbItems.length - this.itemsAfterCollapse;\n\n        breadcrumbItems.forEach((breadcrumbItem, index) => {\n            if (index <= itemBeforeExpandBtnIndex) {\n                breadcrumbItem.slot = 'items-before-expand-btn';\n                breadcrumbItem.last = false;\n            } else if (index > itemBeforeExpandBtnIndex && index < itemAfterExpandBtnIndex) {\n                breadcrumbItem.slot = 'hidden-items';\n                breadcrumbItem.last = false;\n            } else {\n                breadcrumbItem.slot = 'items-after-expand-btn';\n                breadcrumbItem.last = index === breadcrumbItems.length - 1;\n            }\n        });\n    }\n    \n    private assignSlotNamesForNonCollapsedViewMode(): void {\n        const breadcrumbItems = this.getBreadcrumbItems();\n        breadcrumbItems.forEach((breadcrumbItem, index) => {\n            breadcrumbItem.slot = 'non-collapsed';\n            breadcrumbItem.last = index === breadcrumbItems.length - 1;\n        });\n    }\n\n    private handleSlotChange(): void {\n        this.updateCollapsedViewMode();\n        this.showHiddenItems = false;\n        forceUpdate(this);\n    }\n\n    private handleOnExpandBtnClick(): void {\n        // We leave the breadcrumb items in the hidden-items slot, without passing them to\n        // the non-collapsed slot, so that we know which items to hide again later if needed.\n        // For future implementations, the expand button could show or hide hidden items on click,\n        // with a wcs-dropdown for example.\n        this.showHiddenItems = true;\n        // We wait for the first hidden item to be visible in the DOM again\n        // to be able to focus it.\n        requestAnimationFrame(() => this.setFocusToFirstHiddenItem());\n    }\n\n    /**\n     * Avoid losing focus after clicking the expand button.\n     * We need to give focus back to the first breadcrumb item link that was hidden before.\n     */\n    private setFocusToFirstHiddenItem(): void {\n        const breadcrumbItems = this.getBreadcrumbItems();\n        const firstHiddenItemIndex = this.itemsBeforeCollapse;\n        const firstHiddenItem = breadcrumbItems[firstHiddenItemIndex];\n        const firstHiddenItemSlot =\n            firstHiddenItem.shadowRoot.querySelector('slot') as HTMLSlotElement;\n        const breadcrumbItemLinkToFocus =\n            firstHiddenItemSlot.assignedElements()[0] as HTMLAnchorElement;\n        breadcrumbItemLinkToFocus?.focus();\n    }\n\n    private renderExpandAllButton(): JSX.Element {\n        const expandBtnIsLastItem = this.itemsAfterCollapse === 0;\n        return (\n            <div role=\"listitem\" class=\"item-not-slotted\">\n                <wcs-button\n                    mode=\"clear\"\n                    shape=\"square\"\n                    size=\"s\"\n                    onClick={this.handleOnExpandBtnClick.bind(this)}\n                    ref={(el) => this.expandBtnEl = el}\n                >\n                    <wcs-mat-icon icon=\"more_horiz\" />\n                </wcs-button>\n                {!expandBtnIsLastItem && (\n                    <span class=\"item-icon\" aria-hidden=\"true\">\n                        {ICONS_FONT_CHEVRON_UNICODE}\n                    </span>\n                )}\n            </div>\n        );\n    }\n\n    render() {\n        const showExpandBtn = this.shouldCollapseItems() && !this.showHiddenItems;\n        return (\n            <Host>\n                <nav\n                    class={`wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`}\n                    aria-label={NAV_ARIA_LABEL_DEFAULT}\n                    {...this.inheritedAttributes}\n                    ref={(el) => this.navEl = el}\n                >\n                    {/*\n                    * We use aria roles here instead of an <ol> tag\n                    * so that the list can be browsed correctly on Firefox with screen readers.\n                    * There seems to be an issue with Firefox and the Shadow DOM.\n                    */}\n                    <div role=\"list\">\n                        {/* Only the main slot shoud be used by consumers. */}\n                        <slot onSlotchange={this.handleSlotChange.bind(this)} />\n                        {/* Non collapsed view mode */}\n                        <slot name=\"non-collapsed\"></slot>\n                        {/* Collapsed view mode */}\n                        <slot name=\"items-before-expand-btn\" />\n                        <slot name=\"hidden-items\" />\n                        {showExpandBtn && this.renderExpandAllButton()}\n                        <slot name=\"items-after-expand-btn\" />\n                    </div>\n                </nav>\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EAET,OAAO,EAAE,WAAW,EACpB,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,EACR,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAErG,OAAO,EACH,0BAA0B,EAC1B,sBAAsB,EACtB,6BAA6B,EAChC,MAAM,wBAAwB,CAAC;AAEhC,MAAM,0BAA0B,GAAG,EAAE,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAMH,MAAM,OAAO,UAAU;;QAKX,wBAAmB,GAAyB,EAAE,CAAC;;mCAajB,CAAC;kCAMF,CAAC;qCAEG,6BAA6B;+BAK1B,KAAK;;IAKjD,yBAAyB;QACrB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACnC,CAAC;IAGD,8BAA8B,CAAC,QAAgB;;QAC3C,MAAA,IAAI,CAAC,WAAW,0CAAE,gBAAgB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAC/D,CAAC;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,0BAA0B,CAAC,CAC5D,CAAC;QACF,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACnC,CAAC;IAED,gBAAgB;;QACZ,MAAA,IAAI,CAAC,WAAW,0CAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACjF,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IAClD,CAAC;IAEO,kBAAkB;QACtB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,CAAC;IACvE,CAAC;IAEO,mBAAmB;QACvB,OAAO,CACH,CAAC,CAAC,IAAI,CAAC,QAAQ;YACf,IAAI,CAAC,kBAAkB,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ;YAChD,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,QAAQ,CACtE,CAAC;IACN,CAAC;IAEO,uBAAuB;QAC3B,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE,CAAC;YAC7B,IAAI,CAAC,mCAAmC,EAAE,CAAC;QAC/C,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,sCAAsC,EAAE,CAAC;QAClD,CAAC;IACL,CAAC;IAED;;OAEG;IACK,mCAAmC;QACvC,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAClD,MAAM,wBAAwB,GAAG,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC;QAC9D,MAAM,uBAAuB,GAAG,eAAe,CAAC,MAAM,GAAG,IAAI,CAAC,kBAAkB,CAAC;QAEjF,eAAe,CAAC,OAAO,CAAC,CAAC,cAAc,EAAE,KAAK,EAAE,EAAE;YAC9C,IAAI,KAAK,IAAI,wBAAwB,EAAE,CAAC;gBACpC,cAAc,CAAC,IAAI,GAAG,yBAAyB,CAAC;gBAChD,cAAc,CAAC,IAAI,GAAG,KAAK,CAAC;YAChC,CAAC;iBAAM,IAAI,KAAK,GAAG,wBAAwB,IAAI,KAAK,GAAG,uBAAuB,EAAE,CAAC;gBAC7E,cAAc,CAAC,IAAI,GAAG,cAAc,CAAC;gBACrC,cAAc,CAAC,IAAI,GAAG,KAAK,CAAC;YAChC,CAAC;iBAAM,CAAC;gBACJ,cAAc,CAAC,IAAI,GAAG,wBAAwB,CAAC;gBAC/C,cAAc,CAAC,IAAI,GAAG,KAAK,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC;YAC/D,CAAC;QACL,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,sCAAsC;QAC1C,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAClD,eAAe,CAAC,OAAO,CAAC,CAAC,cAAc,EAAE,KAAK,EAAE,EAAE;YAC9C,cAAc,CAAC,IAAI,GAAG,eAAe,CAAC;YACtC,cAAc,CAAC,IAAI,GAAG,KAAK,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC;QAC/D,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,gBAAgB;QACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,WAAW,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC;IAEO,sBAAsB;QAC1B,kFAAkF;QAClF,qFAAqF;QACrF,0FAA0F;QAC1F,mCAAmC;QACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,mEAAmE;QACnE,0BAA0B;QAC1B,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,yBAAyB,EAAE,CAAC,CAAC;IAClE,CAAC;IAED;;;OAGG;IACK,yBAAyB;QAC7B,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAClD,MAAM,oBAAoB,GAAG,IAAI,CAAC,mBAAmB,CAAC;QACtD,MAAM,eAAe,GAAG,eAAe,CAAC,oBAAoB,CAAC,CAAC;QAC9D,MAAM,mBAAmB,GACrB,eAAe,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAoB,CAAC;QACxE,MAAM,yBAAyB,GAC3B,mBAAmB,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAsB,CAAC;QACnE,yBAAyB,aAAzB,yBAAyB,uBAAzB,yBAAyB,CAAE,KAAK,EAAE,CAAC;IACvC,CAAC;IAEO,qBAAqB;QACzB,MAAM,mBAAmB,GAAG,IAAI,CAAC,kBAAkB,KAAK,CAAC,CAAC;QAC1D,OAAO,CACH,WAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB;YACzC,kBACI,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/C,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE;gBAElC,oBAAc,IAAI,EAAC,YAAY,GAAG,CACzB;YACZ,CAAC,mBAAmB,IAAI,CACrB,YAAM,KAAK,EAAC,WAAW,iBAAa,MAAM,IACrC,0BAA0B,CACxB,CACV,CACC,CACT,CAAC;IACN,CAAC;IAED,MAAM;QACF,MAAM,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;QAC1E,OAAO,CACH,EAAC,IAAI;YACD,0EACI,KAAK,EAAE,2BAA2B,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,EAAE,gBACxE,sBAAsB,IAC9B,IAAI,CAAC,mBAAmB,IAC5B,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE;gBAO5B,4DAAK,IAAI,EAAC,MAAM;oBAEZ,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI;oBAExD,6DAAM,IAAI,EAAC,eAAe,GAAQ;oBAElC,6DAAM,IAAI,EAAC,yBAAyB,GAAG;oBACvC,6DAAM,IAAI,EAAC,cAAc,GAAG;oBAC3B,aAAa,IAAI,IAAI,CAAC,qBAAqB,EAAE;oBAC9C,6DAAM,IAAI,EAAC,wBAAwB,GAAG,CACpC,CACJ,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element, forceUpdate,\n    h,\n    Host,\n    Method,\n    Prop,\n    State,\n    Watch\n} from '@stencil/core';\n\nimport { inheritAttributes, inheritAriaAttributes, setOrRemoveAttribute } from '../../utils/helpers';\nimport { AriaAttributeName, MutableAriaAttribute } from '../../utils/mutable-aria-attribute';\nimport {\n    ICONS_FONT_CHEVRON_UNICODE,\n    NAV_ARIA_LABEL_DEFAULT,\n    EXPAND_BTN_ARIA_LABEL_DEFAULT\n} from './breadcrumb-constants';\n\nconst BREADCRUMB_INHERITED_ATTRS = [];\n\n/**\n * A breadcrumb trail consists of a list of links to the parent pages of the current page in hierarchical order.  \n * It helps users find their place within a website or web application. Breadcrumbs are often placed horizontally before a page's main content.\n *\n * ## Accessibility guidelines 💡\n * > - If the last item is a link to the current page, you must set the `aria-current` attribute to `page` on `wcs-breadcrumb-item`.\n * > - If the element representing the current page is not a link, `aria-current` is optional.\n * > - You can set the attribute `aria-label` on `wcs-breadcrumb`, it will be passed to the native `nav` element located inside its shadow DOM. \n * >   You can find the `aria-label` default value in the table below. If your application is in English, you can set it to `Breadcrumb`.\n * > - You can do the same thing for the `aria-label` of the expand button when the breadcrumb is collapsed. You can find its default value\n * >   in the table below too.  \n * > - If you need to **dynamically change the `aria-label` attribute of `wcs-breadcrumb` after the first render**, you can use the \n * >   `setAriaAttribute` JS method (example below). For the expand button however, you can update the prop `ariaLabelExpandButton`.  \n * >   Note: we're working on updating the component automatically when attributes change. \n *\n * > ```javascript\n * > const wcsButton = document.querySelector('wcs-button');\n * > await wcsButton.setAriaAttribute('aria-label', 'new label');\n * > ```\n * \n * @cssprop --wcs-breadcrumb-icon-color - Icon color\n * @cssprop --wcs-breadcrumb-icon-font-size - Icon font size\n * @cssprop --wcs-breadcrumb-gap - Gap between breadcrumb items\n */\n@Component({\n    tag: 'wcs-breadcrumb',\n    styleUrl: 'breadcrumb.scss',\n    shadow: true,\n})\nexport class Breadcrumb implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLElement;\n    private navEl?: HTMLElement;\n    private expandBtnEl: HTMLWcsButtonElement;\n\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * If the number of breadcrumb items exceeds this maximum,\n     * the breadcrumb will collapse and show an expand button.  \n     * If this prop is `undefined`, breadcrumb items will never collapse.\n     */\n    @Prop() maxItems?: number;\n    /**\n     * The number of breadcrumb items to show before the expand button.\n     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\n     * the breadcrumb will not be collapsed.\n     */\n    @Prop() itemsBeforeCollapse: number = 1;\n    /**\n     * The number of breadcrumb items to show after the expand button.\n     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\n     * the breadcrumb will not be collapsed.\n     */\n    @Prop() itemsAfterCollapse: number = 2;\n    /** Set `aria-label` for the expand button when the breadcrumb is collapsed. */\n    @Prop() ariaLabelExpandButton?: string = EXPAND_BTN_ARIA_LABEL_DEFAULT;\n\n    /**\n     * Show breadcrumb items that are inside the hidden-items slot.\n     */\n    @State() private showHiddenItems: boolean = false;\n\n    @Watch('maxItems')\n    @Watch('itemsBeforeCollapse')\n    @Watch('itemsAfterCollapse')\n    handleCollapsePropsChange() {\n        this.updateCollapsedViewMode();\n    }\n\n    @Watch('ariaLabelExpandButton')\n    handleAriaLabelExpandBtnChange(newValue: string) {\n        this.expandBtnEl?.setAriaAttribute('aria-label', newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, BREADCRUMB_INHERITED_ATTRS),\n        };\n        this.updateCollapsedViewMode();\n    }\n\n    componentDidLoad(): void {\n        this.expandBtnEl?.setAriaAttribute('aria-label', this.ariaLabelExpandButton);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.navEl, attr, value);\n    }\n\n    private getBreadcrumbItems(): HTMLWcsBreadcrumbItemElement[] {\n        return Array.from(this.el.querySelectorAll('wcs-breadcrumb-item'));\n    }\n\n    private shouldCollapseItems(): boolean {\n        return (\n            !!this.maxItems &&\n            this.getBreadcrumbItems().length > this.maxItems &&\n            this.itemsBeforeCollapse + this.itemsAfterCollapse <= this.maxItems\n        );\n    }\n\n    private updateCollapsedViewMode(): void {\n        if (this.shouldCollapseItems()) {\n            this.assignSlotNamesForCollapsedViewMode();\n        } else {\n            this.assignSlotNamesForNonCollapsedViewMode();\n        }\n    }\n\n    /**\n     * Setting slot names on breadcrumb items allows to leverage JSX in the render method.\n     */\n    private assignSlotNamesForCollapsedViewMode(): void {\n        const breadcrumbItems = this.getBreadcrumbItems();\n        const itemBeforeExpandBtnIndex = this.itemsBeforeCollapse - 1;\n        const itemAfterExpandBtnIndex = breadcrumbItems.length - this.itemsAfterCollapse;\n\n        breadcrumbItems.forEach((breadcrumbItem, index) => {\n            if (index <= itemBeforeExpandBtnIndex) {\n                breadcrumbItem.slot = 'items-before-expand-btn';\n                breadcrumbItem.last = false;\n            } else if (index > itemBeforeExpandBtnIndex && index < itemAfterExpandBtnIndex) {\n                breadcrumbItem.slot = 'hidden-items';\n                breadcrumbItem.last = false;\n            } else {\n                breadcrumbItem.slot = 'items-after-expand-btn';\n                breadcrumbItem.last = index === breadcrumbItems.length - 1;\n            }\n        });\n    }\n    \n    private assignSlotNamesForNonCollapsedViewMode(): void {\n        const breadcrumbItems = this.getBreadcrumbItems();\n        breadcrumbItems.forEach((breadcrumbItem, index) => {\n            breadcrumbItem.slot = 'non-collapsed';\n            breadcrumbItem.last = index === breadcrumbItems.length - 1;\n        });\n    }\n\n    private handleSlotChange(): void {\n        this.updateCollapsedViewMode();\n        this.showHiddenItems = false;\n        forceUpdate(this);\n    }\n\n    private handleOnExpandBtnClick(): void {\n        // We leave the breadcrumb items in the hidden-items slot, without passing them to\n        // the non-collapsed slot, so that we know which items to hide again later if needed.\n        // For future implementations, the expand button could show or hide hidden items on click,\n        // with a wcs-dropdown for example.\n        this.showHiddenItems = true;\n        // We wait for the first hidden item to be visible in the DOM again\n        // to be able to focus it.\n        requestAnimationFrame(() => this.setFocusToFirstHiddenItem());\n    }\n\n    /**\n     * Avoid losing focus after clicking the expand button.\n     * We need to give focus back to the first breadcrumb item link that was hidden before.\n     */\n    private setFocusToFirstHiddenItem(): void {\n        const breadcrumbItems = this.getBreadcrumbItems();\n        const firstHiddenItemIndex = this.itemsBeforeCollapse;\n        const firstHiddenItem = breadcrumbItems[firstHiddenItemIndex];\n        const firstHiddenItemSlot =\n            firstHiddenItem.shadowRoot.querySelector('slot') as HTMLSlotElement;\n        const breadcrumbItemLinkToFocus =\n            firstHiddenItemSlot.assignedElements()[0] as HTMLAnchorElement;\n        breadcrumbItemLinkToFocus?.focus();\n    }\n\n    private renderExpandAllButton() {\n        const expandBtnIsLastItem = this.itemsAfterCollapse === 0;\n        return (\n            <div role=\"listitem\" class=\"item-not-slotted\">\n                <wcs-button\n                    mode=\"clear\"\n                    shape=\"square\"\n                    size=\"s\"\n                    onClick={this.handleOnExpandBtnClick.bind(this)}\n                    ref={(el) => this.expandBtnEl = el}\n                >\n                    <wcs-mat-icon icon=\"more_horiz\" />\n                </wcs-button>\n                {!expandBtnIsLastItem && (\n                    <span class=\"item-icon\" aria-hidden=\"true\">\n                        {ICONS_FONT_CHEVRON_UNICODE}\n                    </span>\n                )}\n            </div>\n        );\n    }\n\n    render() {\n        const showExpandBtn = this.shouldCollapseItems() && !this.showHiddenItems;\n        return (\n            <Host>\n                <nav\n                    class={`wcs-breadcrumb-container${this.showHiddenItems ? ' show-hidden-items' : ''}`}\n                    aria-label={NAV_ARIA_LABEL_DEFAULT}\n                    {...this.inheritedAttributes}\n                    ref={(el) => this.navEl = el}\n                >\n                    {/*\n                    * We use aria roles here instead of an <ol> tag\n                    * so that the list can be browsed correctly on Firefox with screen readers.\n                    * There seems to be an issue with Firefox and the Shadow DOM.\n                    */}\n                    <div role=\"list\">\n                        {/* Only the main slot shoud be used by consumers. */}\n                        <slot onSlotchange={this.handleSlotChange.bind(this)} />\n                        {/* Non collapsed view mode */}\n                        <slot name=\"non-collapsed\"></slot>\n                        {/* Collapsed view mode */}\n                        <slot name=\"items-before-expand-btn\" />\n                        <slot name=\"hidden-items\" />\n                        {showExpandBtn && this.renderExpandAllButton()}\n                        <slot name=\"items-after-expand-btn\" />\n                    </div>\n                </nav>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/button/button.e2e.playwright.js

@@ -0,0 +1,26 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('button', () => {
+    test('should trigger submit when in a form', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <form>
+                <wcs-button class="wcs-primary" type="wcs-submit"></wcs-button>
+            </form>
+        `);
+        const form = page.locator('form');
+        await form.evaluate((el) => {
+            el.addEventListener('submit', (e) => {
+                e.preventDefault(); // avoid page reload
+            });
+        });
+        const submitEventSpy = await form.spyOnEvent('submit');
+        // When
+        await page.locator('wcs-button').click();
+        await page.waitForChanges();
+        // Then
+        expect(submitEventSpy).toHaveReceivedEventTimes(1);
+    });
+});
+//# sourceMappingURL=button.e2e.playwright.js.map

package/dist/collection/components/button/button.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/button/button.e2e.playwright.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAW,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACzB,IAAI,CAAC,sCAAsC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QAC/E,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;;;SAIzB,CAAC,CAAC;QACH,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAClC,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE;YACvB,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBAChC,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,oBAAoB;YAC5C,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;QAEH,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QAEvD,OAAO;QACP,MAAM,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE,CAAC;QACzC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,OAAO;QACP,MAAM,CAAC,cAAc,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('button', () => {\n    test('should trigger submit when in a form', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <form>\n                <wcs-button class=\"wcs-primary\" type=\"wcs-submit\"></wcs-button>\n            </form>\n        `);\n        const form = page.locator('form');\n        await form.evaluate((el) => {\n            el.addEventListener('submit', (e) => {\n                e.preventDefault(); // avoid page reload\n            });\n        });\n\n        const submitEventSpy = await form.spyOnEvent('submit');\n\n        // When\n        await page.locator('wcs-button').click();\n        await page.waitForChanges();\n\n        // Then\n        expect(submitEventSpy).toHaveReceivedEventTimes(1);\n    });\n});\n"]}

package/dist/collection/components/button/button.js

@@ -331,7 +331,7 @@ export class Button {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",
                     "parameters": [{
                             "name": "attr",
-                            "type": "\"role\" | `aria-${string}`",
+                            "type": "`aria-${string}` | \"role\"",
                             "docs": ""
                         }, {
                             "name": "value",

package/dist/collection/components/checkbox/checkbox.e2e.playwright.js

@@ -0,0 +1,39 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('Checkbox component', () => {
+    test.describe('Events', () => {
+        test('should emit a wcsChange event when clicked on wcs-checkbox', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-checkbox name="checkbox-id">
+                    Checkbox
+                </wcs-checkbox>
+            `);
+            const checkbox = page.locator('wcs-checkbox');
+            const wcsChangeEventSpy = await checkbox.spyOnEvent('wcsChange');
+            // When
+            await checkbox.click();
+            await page.waitForChanges();
+            // Then
+            expect(wcsChangeEventSpy).toHaveReceivedEventTimes(1);
+            expect(wcsChangeEventSpy).toHaveReceivedEventDetail({ checked: true });
+        });
+        test('should emit a wcsChange event when space pressed on wcs-checkbox', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-checkbox name="checkbox-id">
+                    Checkbox
+                </wcs-checkbox>
+            `);
+            const checkbox = page.locator('wcs-checkbox');
+            const wcsChangeEventSpy = await checkbox.spyOnEvent('wcsChange');
+            // When
+            await checkbox.press('Space');
+            // Then
+            expect(wcsChangeEventSpy).toHaveReceivedEventTimes(1);
+            expect(wcsChangeEventSpy).toHaveReceivedEventDetail({ checked: true });
+        });
+    });
+});
+//# sourceMappingURL=checkbox.e2e.playwright.js.map

package/dist/collection/components/checkbox/checkbox.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.e2e.playwright.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAW,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,CAAC,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IACrC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;QACzB,IAAI,CAAC,4DAA4D,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;YACrG,QAAQ;YACR,MAAM,aAAa,CAAC,IAAI,EAAE;;;;aAIzB,CAAC,CAAC;YAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAC9C,MAAM,iBAAiB,GAAG,MAAM,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;YAEjE,OAAO;YACP,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;YACvB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;YAE5B,OAAO;YACP,MAAM,CAAC,iBAAiB,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;YACtD,MAAM,CAAC,iBAAiB,CAAC,CAAC,yBAAyB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3E,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,kEAAkE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;YAC3G,QAAQ;YACR,MAAM,aAAa,CAAC,IAAI,EAAE;;;;aAIzB,CAAC,CAAC;YAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;YAC9C,MAAM,iBAAiB,GAAG,MAAM,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;YAEjE,OAAO;YACP,MAAM,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAE9B,OAAO;YACP,MAAM,CAAC,iBAAiB,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;YACtD,MAAM,CAAC,iBAAiB,CAAC,CAAC,yBAAyB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3E,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Checkbox component', () => {\n    test.describe('Events', () => {\n        test('should emit a wcsChange event when clicked on wcs-checkbox', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-checkbox name=\"checkbox-id\">\n                    Checkbox\n                </wcs-checkbox>\n            `);\n\n            const checkbox = page.locator('wcs-checkbox');\n            const wcsChangeEventSpy = await checkbox.spyOnEvent('wcsChange');\n\n            // When\n            await checkbox.click();\n            await page.waitForChanges();\n\n            // Then\n            expect(wcsChangeEventSpy).toHaveReceivedEventTimes(1);\n            expect(wcsChangeEventSpy).toHaveReceivedEventDetail({ checked: true });\n        });\n\n        test('should emit a wcsChange event when space pressed on wcs-checkbox', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-checkbox name=\"checkbox-id\">\n                    Checkbox\n                </wcs-checkbox>\n            `);\n\n            const checkbox = page.locator('wcs-checkbox');\n            const wcsChangeEventSpy = await checkbox.spyOnEvent('wcsChange');\n\n            // When\n            await checkbox.press('Space');\n\n            // Then\n            expect(wcsChangeEventSpy).toHaveReceivedEventTimes(1);\n            expect(wcsChangeEventSpy).toHaveReceivedEventDetail({ checked: true });\n        });\n    });\n});\n"]}

package/dist/collection/components/checkbox/checkbox.js

@@ -322,7 +322,7 @@ export class Checkbox {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",
                     "parameters": [{
                             "name": "attr",
-                            "type": "\"role\" | `aria-${string}`",
+                            "type": "`aria-${string}` | \"role\"",
                             "docs": ""
                         }, {
                             "name": "value",