wcs-core 7.3.0 → 7.4.1

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

@@ -0,0 +1,190 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('Chip component', () => {
+    test.describe('Events', () => {
+        test('should emit wcsChipSelectChange with selected=true on click (selectable by default)', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-chip value="chip-id" label="Chip"></wcs-chip>
+            `);
+            const chip = page.locator('wcs-chip');
+            const wcsChipSelectChangeEventSpy = await chip.spyOnEvent('wcsChipSelectChange');
+            // When
+            await chip.click();
+            await page.waitForChanges();
+            // Then
+            expect(wcsChipSelectChangeEventSpy).toHaveReceivedEventDetail({ value: 'chip-id', selected: true });
+        });
+        test('should toggle selection and emit on Space/Enter (selectable)', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-chip value="chip-id" label="Chip"></wcs-chip>
+            `);
+            const chip = page.locator('wcs-chip');
+            const wcsChipSelectChangeEventSpy = await chip.spyOnEvent('wcsChipSelectChange');
+            // When - Space selects
+            await chip.focus();
+            await chip.press('Space');
+            // When - Enter toggles back
+            await chip.press('Enter');
+            await page.waitForChanges();
+            // Then
+            expect(wcsChipSelectChangeEventSpy).toHaveReceivedEventTimes(2);
+            expect(wcsChipSelectChangeEventSpy).toHaveNthReceivedEventDetail(1, { value: 'chip-id', selected: false });
+        });
+        test('should emit wcsChipDismiss when clicking dismiss button (dismissible)', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-chip mode="dismissible" value="chip-id" label="Chip"></wcs-chip>
+            `);
+            const chip = page.locator('wcs-chip');
+            const wcsChipDismissEventSpy = await chip.spyOnEvent('wcsChipDismiss');
+            const dismissBtn = page.locator('wcs-chip button');
+            // When
+            await dismissBtn.click();
+            await page.waitForChanges();
+            // Then
+            expect(wcsChipDismissEventSpy).toHaveReceivedEventDetail({ value: 'chip-id' });
+            // open prop should be false -> attribute removed
+            await expect(chip).not.toHaveAttribute('open');
+        });
+    });
+    test.describe('Keyboard', () => {
+        test('Delete/Backspace on dismiss button dismisses the chip', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-chip mode="dismissible" value="chip-id" label="Chip"></wcs-chip>
+            `);
+            const chip = page.locator('wcs-chip');
+            const wcsChipDismissEventSpy = await chip.spyOnEvent('wcsChipDismiss');
+            const dismissBtn = page.locator('wcs-chip button');
+            // When
+            await dismissBtn.focus();
+            await page.keyboard.press('Delete');
+            await page.waitForChanges();
+            // Then
+            await expect(wcsChipDismissEventSpy).toHaveReceivedEventTimes(1);
+            await expect(chip).not.toHaveAttribute('open');
+        });
+    });
+    test.describe('Accessibility', () => {
+        test('exposes proper ARIA for selectable: role=checkbox, aria-checked toggles, tabindex respects disabled', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-chip value="chip-id" label="Chip"></wcs-chip>
+            `);
+            const chip = page.locator('wcs-chip');
+            // Then default
+            await expect(chip).toHaveAttribute('role', 'checkbox');
+            await expect(chip).toHaveAttribute('aria-checked', 'false');
+            await expect(chip).toHaveAttribute('tabindex', '0');
+            // When
+            await chip.click();
+            await page.waitForChanges();
+            // Then toggled
+            await expect(chip).toHaveAttribute('aria-checked', 'true');
+        });
+        test('exposes proper ARIA/disabled for dismissible: button has label and respects disabled', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-chip mode="dismissible" value="chip-id" label="Chip"></wcs-chip>
+            `);
+            const chip = page.locator('wcs-chip');
+            const btn = page.locator('wcs-chip button');
+            // Then
+            await expect(btn).toHaveAttribute('aria-label', 'Supprimer Chip');
+            // When disabled
+            await chip.evaluate((el) => el.disabled = true);
+            await page.waitForChanges();
+            // Then
+            await expect(chip).toHaveAttribute('aria-disabled', 'true');
+            await expect(btn).toBeDisabled();
+        });
+    });
+    test.describe('Disabled state', () => {
+        test('does not emit select event when disabled (click and Space)', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-chip disabled value="chip-id" label="Chip"></wcs-chip>
+            `);
+            const chip = page.locator('wcs-chip');
+            const wcsChipSelectChangeEventSpy = await chip.spyOnEvent('wcsChipSelectChange');
+            // When
+            await chip.click({ force: true });
+            await chip.press('Space');
+            await page.waitForChanges();
+            // Then
+            expect(wcsChipSelectChangeEventSpy).toHaveReceivedEventTimes(0);
+            await expect(chip).toHaveAttribute('tabindex', '-1');
+            await expect(chip).toHaveAttribute('aria-checked', 'false');
+        });
+        test('does not emit dismiss event when disabled', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-chip disabled mode="dismissible" value="chip-id" label="Chip"></wcs-chip>
+            `);
+            const chip = page.locator('wcs-chip');
+            const wcsChipDismissEventSpy = await chip.spyOnEvent('wcsChipDismiss');
+            const btn = page.locator('wcs-chip button');
+            // When
+            await btn.click({ force: true });
+            await page.waitForChanges();
+            // Then
+            expect(wcsChipDismissEventSpy).toHaveReceivedEventTimes(0);
+            await expect(chip).toHaveAttribute('open', '');
+        });
+    });
+    test.describe('Focus management', () => {
+        test('after dismiss, focus moves to next actionable chip (selectable host)', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <div>
+                    <wcs-chip id="c1" mode="dismissible" value="c1" label="One"></wcs-chip>
+                    <wcs-chip id="c2" value="c2" label="Two"></wcs-chip>
+                </div>
+            `);
+            const btn = page.locator('#c1 button');
+            // When
+            await btn.click();
+            await page.waitForChanges();
+            // Then
+            const c2 = page.locator('#c2');
+            await expect(c2).toBeFocused();
+        });
+        test('after dismiss, focus moves to next actionable chip (dismissable host)', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <div>
+                    <wcs-chip id="c1" mode="dismissible" value="c1" label="One"></wcs-chip>
+                    <wcs-chip id="c2" mode="dismissible" value="c2" label="Two"></wcs-chip>
+                </div>
+            `);
+            const c1 = page.locator('#c1 button');
+            // When
+            await c1.click();
+            await page.waitForChanges();
+            // Then
+            const c2 = page.locator('#c2');
+            await expect(c2).toBeFocused();
+        });
+        test('skips disabled chips when moving focus after dismiss', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <div>
+                    <wcs-chip id="c1" mode="dismissible" value="c1" label="One"></wcs-chip>
+                    <wcs-chip id="c2" disabled value="c2" label="Two"></wcs-chip>
+                    <wcs-chip id="c3" value="c3" label="Three"></wcs-chip>
+                </div>
+            `);
+            const btn = page.locator('#c1 button');
+            // When
+            await btn.click();
+            await page.waitForChanges();
+            // Then
+            const c3 = page.locator('#c3');
+            await expect(c3).toBeFocused();
+        });
+    });
+});
+//# sourceMappingURL=chip.e2e.playwright.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/chip/chip.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('Chip component', () => {\n    test.describe('Events', () => {\n        test('should emit wcsChipSelectChange with selected=true on click (selectable by default)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipSelectChangeEventSpy = await chip.spyOnEvent('wcsChipSelectChange');\n\n            // When\n            await chip.click();\n            await page.waitForChanges();\n\n            // Then\n            expect(wcsChipSelectChangeEventSpy).toHaveReceivedEventDetail({ value: 'chip-id', selected: true });\n        });\n\n        test('should toggle selection and emit on Space/Enter (selectable)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipSelectChangeEventSpy = await chip.spyOnEvent('wcsChipSelectChange');\n\n            // When - Space selects\n            await chip.focus();\n            await chip.press('Space');\n            // When - Enter toggles back\n            await chip.press('Enter');\n            await page.waitForChanges();\n\n            // Then\n            expect(wcsChipSelectChangeEventSpy).toHaveReceivedEventTimes(2);\n            expect(wcsChipSelectChangeEventSpy).toHaveNthReceivedEventDetail(1, { value: 'chip-id', selected: false });\n        });\n\n        test('should emit wcsChipDismiss when clicking dismiss button (dismissible)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip mode=\"dismissible\" value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipDismissEventSpy = await chip.spyOnEvent('wcsChipDismiss');\n            const dismissBtn = page.locator('wcs-chip button');\n\n            // When\n            await dismissBtn.click();\n            await page.waitForChanges();\n\n            // Then\n            expect(wcsChipDismissEventSpy).toHaveReceivedEventDetail({ value: 'chip-id' });\n            // open prop should be false -> attribute removed\n            await expect(chip).not.toHaveAttribute('open');\n        });\n    });\n\n    test.describe('Keyboard', () => {\n        test('Delete/Backspace on dismiss button dismisses the chip', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip mode=\"dismissible\" value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipDismissEventSpy = await chip.spyOnEvent('wcsChipDismiss');\n            const dismissBtn = page.locator('wcs-chip button');\n\n            // When\n            await dismissBtn.focus();\n            await page.keyboard.press('Delete');\n            await page.waitForChanges();\n\n            // Then\n            await expect(wcsChipDismissEventSpy).toHaveReceivedEventTimes(1);\n            await expect(chip).not.toHaveAttribute('open');\n        });\n    });\n\n    test.describe('Accessibility', () => {\n        test('exposes proper ARIA for selectable: role=checkbox, aria-checked toggles, tabindex respects disabled', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n\n            // Then default\n            await expect(chip).toHaveAttribute('role', 'checkbox');\n            await expect(chip).toHaveAttribute('aria-checked', 'false');\n            await expect(chip).toHaveAttribute('tabindex', '0');\n\n            // When\n            await chip.click();\n            await page.waitForChanges();\n\n            // Then toggled\n            await expect(chip).toHaveAttribute('aria-checked', 'true');\n        });\n\n        test('exposes proper ARIA/disabled for dismissible: button has label and respects disabled', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip mode=\"dismissible\" value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const btn = page.locator('wcs-chip button');\n\n            // Then\n            await expect(btn).toHaveAttribute('aria-label', 'Supprimer Chip');\n\n            // When disabled\n            await chip.evaluate((el: any) => el.disabled = true);\n            await page.waitForChanges();\n\n            // Then\n            await expect(chip).toHaveAttribute('aria-disabled', 'true');\n            await expect(btn).toBeDisabled();\n        });\n    });\n\n    test.describe('Disabled state', () => {\n        test('does not emit select event when disabled (click and Space)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip disabled value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipSelectChangeEventSpy = await chip.spyOnEvent('wcsChipSelectChange');\n\n            // When\n            await chip.click({ force: true });\n            await chip.press('Space');\n            await page.waitForChanges();\n\n            // Then\n            expect(wcsChipSelectChangeEventSpy).toHaveReceivedEventTimes(0);\n            await expect(chip).toHaveAttribute('tabindex', '-1');\n            await expect(chip).toHaveAttribute('aria-checked', 'false');\n        });\n\n        test('does not emit dismiss event when disabled', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-chip disabled mode=\"dismissible\" value=\"chip-id\" label=\"Chip\"></wcs-chip>\n            `);\n\n            const chip = page.locator('wcs-chip');\n            const wcsChipDismissEventSpy = await chip.spyOnEvent('wcsChipDismiss');\n            const btn = page.locator('wcs-chip button');\n\n            // When\n            await btn.click({ force: true });\n            await page.waitForChanges();\n\n            // Then\n            expect(wcsChipDismissEventSpy).toHaveReceivedEventTimes(0);\n            await expect(chip).toHaveAttribute('open', '');\n        });\n    });\n\n    test.describe('Focus management', () => {\n        test('after dismiss, focus moves to next actionable chip (selectable host)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <div>\n                    <wcs-chip id=\"c1\" mode=\"dismissible\" value=\"c1\" label=\"One\"></wcs-chip>\n                    <wcs-chip id=\"c2\" value=\"c2\" label=\"Two\"></wcs-chip>\n                </div>\n            `);\n\n            const btn = page.locator('#c1 button');\n\n            // When\n            await btn.click();\n            await page.waitForChanges();\n\n            // Then\n            const c2 = page.locator('#c2');\n            await expect(c2).toBeFocused();\n        });\n\n        test('after dismiss, focus moves to next actionable chip (dismissable host)', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <div>\n                    <wcs-chip id=\"c1\" mode=\"dismissible\" value=\"c1\" label=\"One\"></wcs-chip>\n                    <wcs-chip id=\"c2\" mode=\"dismissible\" value=\"c2\" label=\"Two\"></wcs-chip>\n                </div>\n            `);\n\n            const c1 = page.locator('#c1 button');\n\n            // When\n            await c1.click();\n            await page.waitForChanges();\n\n            // Then\n            const c2 = page.locator('#c2');\n            await expect(c2).toBeFocused();\n        });\n\n        test('skips disabled chips when moving focus after dismiss', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <div>\n                    <wcs-chip id=\"c1\" mode=\"dismissible\" value=\"c1\" label=\"One\"></wcs-chip>\n                    <wcs-chip id=\"c2\" disabled value=\"c2\" label=\"Two\"></wcs-chip>\n                    <wcs-chip id=\"c3\" value=\"c3\" label=\"Three\"></wcs-chip>\n                </div>\n            `);\n\n            const btn = page.locator('#c1 button');\n\n            // When\n            await btn.click();\n            await page.waitForChanges();\n\n            // Then\n            const c3 = page.locator('#c3');\n            await expect(c3).toBeFocused();\n        });\n    });\n});\n"]}

package/dist/collection/components/com-nav/com-nav.css

@@ -61,6 +61,21 @@
   line-height: var(--wcs-com-nav-app-name-line-height);
   color: var(--wcs-com-nav-app-name-color);
 }
+:host .app-name ::slotted(a) {
+  user-select: none;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+  font-weight: inherit;
+}
+:host .app-name ::slotted(a:focus-visible) {
+  outline: none;
+}
+:host .app-name:focus-within {
+  outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);
+  outline-offset: var(--wcs-semantic-spacing-small);
+  border-radius: 0.1rem;
+}
 :host .menu-bar {
   display: none;
 }

package/dist/collection/components/com-nav/{com-nav.e2e.js → com-nav.e2e.playwright.js}

@@ -1,13 +1,12 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { setWcsContent } from "../../utils/tests";
-describe('Com nav', () => {
-    describe('Keyboard navigation', () => {
-        describe('Mobile menu', () => {
-            let page;
-            beforeEach(async () => {
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('Com nav', () => {
+    test.describe('Keyboard navigation', () => {
+        test.describe('Mobile menu', () => {
+            test.beforeEach(async ({ page }) => {
                 // Given
-                page = await newE2EPage();
-                await page.setViewport({
+                await page.setViewportSize({
                     width: 320,
                     height: 480,
                 });
@@ -65,49 +64,67 @@ describe('Com nav', () => {
                 </wcs-com-nav>
             `);
             });
-            it.each(['Enter', 'Space'])('should open menu when press %s key on mobile menu icon', async (key) => {
-                // Given the content is set in beforeEach method
+            test('should open menu when press Enter key on mobile menu icon', async ({ page }) => {
                 // When
-                const menuIcon = await page.find('wcs-com-nav >>> #mobile-menu-icon');
+                const menuIcon = page.locator('wcs-com-nav #mobile-menu-icon');
                 await menuIcon.focus();
-                await page.keyboard.press(key);
+                await page.keyboard.press('Enter');
                 await page.waitForChanges();
                 // Then
-                const menu = await page.find('wcs-com-nav >>> .mobile-overlay');
-                expect(menu).toBeDefined();
-                expect(menu).toHaveAttribute('data-mobile-open');
+                const menu = page.locator('wcs-com-nav .mobile-overlay');
+                await expect(menu).toHaveAttribute('data-mobile-open');
             });
-            it.each(['Enter', 'Space'])('should close menu when it opens and press %s key on mobile menu icon', async (key) => {
+            test('should open menu when press Space key on mobile menu icon', async ({ page }) => {
+                // When
+                const menuIcon = page.locator('wcs-com-nav #mobile-menu-icon');
+                await menuIcon.focus();
+                await page.keyboard.press('Space');
+                await page.waitForChanges();
+                // Then
+                const menu = page.locator('wcs-com-nav .mobile-overlay');
+                await expect(menu).toHaveAttribute('data-mobile-open');
+            });
+            test('should close menu when it opens and press Enter key on mobile menu icon', async ({ page }) => {
                 // Given
-                // the content is set in beforeEach method
-                const menuIcon = await page.find('wcs-com-nav >>> #mobile-menu-icon');
+                const menuIcon = page.locator('wcs-com-nav #mobile-menu-icon');
                 await menuIcon.focus();
-                await page.keyboard.press(key);
-                // Wait for menu to open
+                await page.keyboard.press('Enter');
                 await page.waitForChanges();
                 // Close the menu
-                await page.keyboard.press(key);
+                await page.keyboard.press('Enter');
                 await page.waitForChanges();
                 // Then
-                const menu = await page.find('wcs-com-nav >>> .mobile-overlay');
-                expect(menu).not.toHaveAttribute('data-mobile-open');
+                const menu = page.locator('wcs-com-nav .mobile-overlay');
+                await expect(menu).not.toHaveAttribute('data-mobile-open');
             });
-            it('should be touchable on mobile and open the menu', async () => {
+            test('should close menu when it opens and press Space key on mobile menu icon', async ({ page }) => {
                 // Given
-                // the content is set in beforeEach method
-                const menuIcon = await page.find('wcs-com-nav >>> #mobile-menu-icon');
-                await menuIcon.tap();
+                const menuIcon = page.locator('wcs-com-nav #mobile-menu-icon');
+                await menuIcon.focus();
+                await page.keyboard.press('Space');
+                await page.waitForChanges();
+                // Close the menu
+                await page.keyboard.press('Space');
+                await page.waitForChanges();
+                // Then
+                const menu = page.locator('wcs-com-nav .mobile-overlay');
+                await expect(menu).not.toHaveAttribute('data-mobile-open');
+            });
+            test('should be touchable on mobile and open the menu', async ({ page }) => {
+                // Given
+                const menuIcon = page.locator('wcs-com-nav #mobile-menu-icon');
+                await menuIcon.click();
+                await page.waitForChanges();
                 // Then
-                const menu = await page.find('wcs-com-nav >>> .mobile-overlay');
-                expect(menu).toBeDefined();
-                expect(menu).toHaveAttribute('data-mobile-open');
+                const menu = page.locator('wcs-com-nav .mobile-overlay');
+                await expect(menu).toHaveAttribute('data-mobile-open');
             });
-            it('should close menu when it opens and press escape key anywhere', async () => {
+            test('should close menu when it opens and press escape key anywhere', async ({ page }) => {
                 // Given
-                // the content is set in beforeEach method
-                const menuIcon = await page.find('wcs-com-nav >>> #mobile-menu-icon');
+                const menuIcon = page.locator('wcs-com-nav #mobile-menu-icon');
                 await menuIcon.focus();
                 await page.keyboard.press('Enter');
+                await page.waitForChanges();
                 // When
                 // Navigate on menu
                 await page.keyboard.press('Tab');
@@ -116,24 +133,23 @@ describe('Com nav', () => {
                 await page.keyboard.press('Escape');
                 await page.waitForChanges();
                 // Then
-                const menu = await page.find('wcs-com-nav >>> .mobile-overlay');
-                expect(menu).not.toHaveAttribute('data-mobile-open');
+                const menu = page.locator('wcs-com-nav .mobile-overlay');
+                await expect(menu).not.toHaveAttribute('data-mobile-open');
             });
-            it('should close the mobile menu when clicking on a wcs-com-nav-item', async () => {
+            test('should close the mobile menu when clicking on a wcs-com-nav-item', async ({ page }) => {
                 // Given
-                const menuIcon = await page.find('wcs-com-nav >>> #mobile-menu-icon');
-                await menuIcon.tap();
-                // Wait for menu to open
+                const menuIcon = page.locator('wcs-com-nav #mobile-menu-icon');
+                await menuIcon.click();
                 await page.waitForChanges();
                 // When
-                const navItem = await page.find('#com-nav-item-last-item');
+                const navItem = page.locator('#com-nav-item-last-item');
                 await navItem.click();
                 await page.waitForChanges();
                 // Then
-                const menu = await page.find('wcs-com-nav >>> .mobile-overlay');
-                expect(menu).not.toHaveAttribute('data-mobile-open');
+                const menu = page.locator('wcs-com-nav .mobile-overlay');
+                await expect(menu).not.toHaveAttribute('data-mobile-open');
             });
         });
     });
 });
-//# sourceMappingURL=com-nav.e2e.js.map
+//# sourceMappingURL=com-nav.e2e.playwright.js.map

package/dist/collection/components/com-nav/com-nav.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"com-nav.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/com-nav/com-nav.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('Com nav', () => {\n    test.describe('Keyboard navigation', () => {\n        test.describe('Mobile menu', () => {\n            test.beforeEach(async ({ page }: { page: E2EPage }) => {\n                // Given\n                await page.setViewportSize({\n                    width: 320,\n                    height: 480,\n                });\n\n                await setWcsContent(page, `\n                 <wcs-com-nav app-name=\"App Test\">\n                    <wcs-com-nav-submenu label=\"Sous menu\" panel-title=\"Sous Menu\"\n                                         panel-description=\"Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\">\n                        <wcs-com-nav-item>\n                            <a href=\"#\">Loisirs & Tourisme</a>\n                        </wcs-com-nav-item>\n                        <wcs-com-nav-item>\n                            <a href=\"#\">Toutes les lignes</a>\n                        </wcs-com-nav-item>\n                        <wcs-com-nav-item>\n                            <a href=\"#\">Services mobiles</a>\n                        </wcs-com-nav-item>\n                        <wcs-com-nav-item>\n                            <a href=\"#\">Au quotidien</a>\n                        </wcs-com-nav-item>\n                        <wcs-com-nav-item>\n                            <a href=\"#\">Le réseau</a>\n                        </wcs-com-nav-item>\n                    </wcs-com-nav-submenu>\n                    <wcs-com-nav-submenu label=\"Autre sous menu\" panel-title=\"Autre Sous Menu\"\n                                         panel-description=\"Un autre sous menu avec des catégories. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\">\n                        <wcs-com-nav-item>\n                            <a href=\"#\">Le réseau</a>\n                        </wcs-com-nav-item>\n                        <wcs-com-nav-category label=\"Une catégorie\">\n                            <wcs-com-nav-item>\n                                <a href=\"#\">Services mobiles text plus long</a>\n                            </wcs-com-nav-item>\n                            <wcs-com-nav-item>\n                                <a href=\"#\">Au quotidien</a>\n                            </wcs-com-nav-item>\n                            <wcs-com-nav-item>\n                                <a href=\"#\">Le réseau</a>\n                            </wcs-com-nav-item>\n                        </wcs-com-nav-category>\n                        <wcs-com-nav-category label=\"Une catégorie\">\n                            <wcs-com-nav-item>\n                                <a href=\"#\">1</a>\n                            </wcs-com-nav-item>\n                            <wcs-com-nav-item>\n                                <a href=\"#\">2</a>\n                            </wcs-com-nav-item>\n                        </wcs-com-nav-category>\n                    </wcs-com-nav-submenu>\n                    <wcs-com-nav-item id=\"com-nav-item-last-item\">\n                        <a href=\"https://sncf.com\" target=\"_blank\">Ressource externe</a>\n                    </wcs-com-nav-item>\n                    <div slot=\"actions\">\n                        <wcs-button mode=\"clear\" class=\"wcs-dark\">Connexion</wcs-button>\n                    </div>\n                </wcs-com-nav>\n            `);\n            });\n\n            test('should open menu when press Enter key on mobile menu icon', async ({ page }: { page: E2EPage }) => {\n                // When\n                const menuIcon = page.locator('wcs-com-nav #mobile-menu-icon');\n                await menuIcon.focus();\n                await page.keyboard.press('Enter');\n                await page.waitForChanges();\n\n                // Then\n                const menu = page.locator('wcs-com-nav .mobile-overlay');\n                await expect(menu).toHaveAttribute('data-mobile-open');\n            });\n\n            test('should open menu when press Space key on mobile menu icon', async ({ page }: { page: E2EPage }) => {\n                // When\n                const menuIcon = page.locator('wcs-com-nav #mobile-menu-icon');\n                await menuIcon.focus();\n                await page.keyboard.press('Space');\n                await page.waitForChanges();\n\n                // Then\n                const menu = page.locator('wcs-com-nav .mobile-overlay');\n                await expect(menu).toHaveAttribute('data-mobile-open');\n            });\n\n            test('should close menu when it opens and press Enter key on mobile menu icon', async ({ page }: { page: E2EPage }) => {\n                // Given\n                const menuIcon = page.locator('wcs-com-nav #mobile-menu-icon');\n                await menuIcon.focus();\n                await page.keyboard.press('Enter');\n                await page.waitForChanges();\n\n                // Close the menu\n                await page.keyboard.press('Enter');\n                await page.waitForChanges();\n\n                // Then\n                const menu = page.locator('wcs-com-nav .mobile-overlay');\n                await expect(menu).not.toHaveAttribute('data-mobile-open');\n            });\n\n            test('should close menu when it opens and press Space key on mobile menu icon', async ({ page }: { page: E2EPage }) => {\n                // Given\n                const menuIcon = page.locator('wcs-com-nav #mobile-menu-icon');\n                await menuIcon.focus();\n                await page.keyboard.press('Space');\n                await page.waitForChanges();\n\n                // Close the menu\n                await page.keyboard.press('Space');\n                await page.waitForChanges();\n\n                // Then\n                const menu = page.locator('wcs-com-nav .mobile-overlay');\n                await expect(menu).not.toHaveAttribute('data-mobile-open');\n            });\n\n            test('should be touchable on mobile and open the menu', async ({ page }: { page: E2EPage }) => {\n                // Given\n                const menuIcon = page.locator('wcs-com-nav #mobile-menu-icon');\n                await menuIcon.click();\n                await page.waitForChanges();\n\n                // Then\n                const menu = page.locator('wcs-com-nav .mobile-overlay');\n                await expect(menu).toHaveAttribute('data-mobile-open');\n            });\n\n            test('should close menu when it opens and press escape key anywhere', async ({ page }: { page: E2EPage }) => {\n                // Given\n                const menuIcon = page.locator('wcs-com-nav #mobile-menu-icon');\n                await menuIcon.focus();\n                await page.keyboard.press('Enter');\n                await page.waitForChanges();\n\n                // When\n                // Navigate on menu\n                await page.keyboard.press('Tab');\n                await page.keyboard.press('Tab');\n                await page.keyboard.press('Tab');\n                await page.keyboard.press('Escape');\n                await page.waitForChanges();\n\n                // Then\n                const menu = page.locator('wcs-com-nav .mobile-overlay');\n                await expect(menu).not.toHaveAttribute('data-mobile-open');\n            });\n\n            test('should close the mobile menu when clicking on a wcs-com-nav-item', async ({ page }: { page: E2EPage }) => {\n                // Given\n                const menuIcon = page.locator('wcs-com-nav #mobile-menu-icon');\n                await menuIcon.click();\n                await page.waitForChanges();\n\n                // When\n                const navItem = page.locator('#com-nav-item-last-item');\n                await navItem.click();\n                await page.waitForChanges();\n\n                // Then\n                const menu = page.locator('wcs-com-nav .mobile-overlay');\n                await expect(menu).not.toHaveAttribute('data-mobile-open');\n            });\n        });\n    });\n});\n"]}

package/dist/collection/components/com-nav/com-nav.js

@@ -78,11 +78,11 @@ export class ComNav {
     }
     render() {
         const menuAriaLabel = this.inheritedAttributes['aria-label'] || undefined;
-        return (h(Host, { key: 'b39ff3dbd6d304ad0252e0fcfd2e0c5716b666db' }, h("div", { key: 'f84b73c9cee6295a7776576afeb61b65b71ea34e', class: "container" }, h("div", { key: 'a39b867e9d102abb4e4c13503a544681cd9b7fd8', class: "container-left" }, h("div", { key: '49db5dd80f097a9b2ccaf39fc64be9f6100108be', class: "app-name" }, this.appName, h("slot", { key: '2936888d5a805c67a3be4079a7eea62d460d42fe', name: "app-name" })), this.currentActiveSizing === 'desktop' ?
+        return (h(Host, { key: 'b39ff3dbd6d304ad0252e0fcfd2e0c5716b666db' }, h("div", { key: 'f84b73c9cee6295a7776576afeb61b65b71ea34e', class: "container" }, h("div", { key: 'a39b867e9d102abb4e4c13503a544681cd9b7fd8', class: "container-left" }, h("div", { key: '49db5dd80f097a9b2ccaf39fc64be9f6100108be', class: "app-name" }, this.appName, h("slot", { key: '3cfe05e6e510826ffd2168e6edc3380bc92ad459', name: "app-name" })), this.currentActiveSizing === 'desktop' ?
             h("nav", Object.assign({ role: "navigation" }, this.inheritedAttributes), h("div", { class: "menu-bar", role: "list" }, this.currentActiveSizing === 'desktop'
                 ? h("slot", null)
                 : null))
-            : null), h("div", { key: 'c2c97d21d21d542a18fb141f90ce7ce91d0b12c0', class: "container-right" }, h("slot", { key: '51912b232ac4d51baf1d2c164e90ab59a787924e', name: "actions" }), this.currentActiveSizing === 'mobile' ?
+            : null), h("div", { key: '83496cccd32eec07f5a508dbf36b591442e668e2', class: "container-right" }, h("slot", { key: 'cf68946afcefa0b77fb57019f9734e5ff1e763aa', name: "actions" }), this.currentActiveSizing === 'mobile' ?
             h("nav", Object.assign({ id: "wcs-com-nav-mobile-menu", role: "navigation" }, this.inheritedAttributes), h("button", { id: "mobile-menu-icon", "aria-label": menuAriaLabel, "aria-expanded": this.mobileMenuOpen ? "true" : "false", "aria-controls": "wcs-com-nav-mobile-menu", onClick: () => this.mobileMenuIconClick() }), this.currentActiveSizing === 'mobile'
                 ? h("div", { class: "mobile-overlay", "data-mobile-open": this.mobileMenuOpen, role: "list" }, h("slot", null))
                 : null)
@@ -143,7 +143,7 @@ export class ComNav {
                     "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/com-nav/com-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"com-nav.js","sourceRoot":"","sources":["../../../src/components/com-nav/com-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    forceUpdate,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { comNavDidLoadWithResizeObserver, registerCloseHandlerForFocusOutEventOn } from \"./com-nav-utils\";\nimport { inheritAriaAttributes, inheritAttributes, isEscapeKey } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { ComNavSize } from \"./com-nav-size\";\n\n\nconst COM_NAV_INHERITED_ATTRS = ['title'];\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n/**\n * *Part of communication design system*\n *\n * The com-nav component is a container for navigation links to external or internal pages of the website.\n *\n * @slot <no-name> - Default slot containing all the menu declarations\n * @slot app-name - (Optional) Extra slot for the application name\n * @slot actions - Slot for actions placed on the right part of the container\n * \n * @cssprop --wcs-com-nav-menu-bar-height - Height of the menu bar\n * @cssprop --wcs-com-nav-border-color - Border color of the bottom border of the com-nav\n * @cssprop --wcs-com-nav-border-width - Border width of the border below com-nav\n * @cssprop --wcs-com-nav-background-color - Background color of the com-nav;\n * @cssprop --wcs-com-nav-app-name-color - App name color\n * @cssprop --wcs-com-nav-app-name-font-weight - App name font-weight\n * @cssprop --wcs-com-nav-app-name-font-size - Font size of the App name text\n * @cssprop --wcs-com-nav-app-name-line-height - Line height of the App name text\n * @cssprop --wcs-com-nav-item-color - Color of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-item-font-weight - Font weight of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-focus-outline-color - Focus outline color of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-horizontal-padding - Horizontal padding of wcs-com-nav\n * @cssprop --wcs-com-nav-vertical-padding - Vertical padding of wcs-com-nav\n * @cssprop --wcs-com-nav-mobile-overlay-gap - Gap between each items section in mobile overlay\n * @cssprop --wcs-com-nav-mobile-overlay-padding - Padding inside mobile overlay\n * @cssprop --wcs-com-nav-mobile-menu-icon-border-color - Bar border color on the left of icon mobile menu\n * @cssprop --wcs-com-nav-mobile-menu-icon-gap- Gap between icon mobile menu and separator on the left\n * @cssprop --wcs-com-nav-mobile-menu-icon-margin-left - Margin left of icon mobile menu\n * @cssprop --wcs-com-nav-menu-bar-gap - Gap between each item inside menu-bar\n * @cssprop --wcs-com-nav-menu-bar-margin-left - Margin left between menu bar and the app-name section\n */\n@Component({\n    tag: 'wcs-com-nav',\n    styleUrl: 'com-nav.scss',\n    shadow: true,\n})\nexport class ComNav implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsComNavElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /** Name of the application to be displayed in the menu bar */\n    @Prop() appName: string;\n\n    @State() private mobileMenuOpen: boolean = false;\n    @State() public currentActiveSizing: ComNavSize;\n    private resizeObserver: ResizeObserver;\n\n    private mobileMenuIconClick() {\n        this.mobileMenuOpen = !this.mobileMenuOpen;\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COM_NAV_INHERITED_ATTRS)\n        };\n\n        const slottedNavigableItems = this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(slottedNavigableItems, WCS_COM_NAV_SUBMENU_TAG_NAME);\n    }\n\n    componentDidLoad(): void {\n        if(!this.resizeObserver) {\n            this.resizeObserver = comNavDidLoadWithResizeObserver(this);\n            this.resizeObserver.observe(document.body);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        // XXX: Special case on this component because of the desktop / mobile mode that re-renders the <nav> element,\n        // making it lose all its attribute\n        this.inheritedAttributes[attr] = value;\n        forceUpdate(this);\n    }\n\n    private closeMobileMenu() {\n        this.mobileMenuOpen = false;\n    }\n\n    // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events\n    // in the root component (this component). In desktop mode, all submenus and categories manage their drawer its\n    // opening state.\n    //\n    // We listen to the click events fired by the submenu component and we close the mobile menu.\n    // In desktop mode, the submenu itself manages the closing of the menu.\n    @Listen('wcsClickOnFinalAction')\n    onClickOnFinalAction() {\n        this.closeMobileMenu();\n    }\n    \n    render() {\n        const menuAriaLabel = this.inheritedAttributes['aria-label'] || undefined;\n        \n        return (\n            <Host>\n                <div class=\"container\">\n                    <div class=\"container-left\">\n                        <div class=\"app-name\">{this.appName}\n                            <slot name=\"app-name\"/>\n                        </div>\n                        {this.currentActiveSizing === 'desktop' ?\n                            <nav role=\"navigation\" {...this.inheritedAttributes}>\n                                <div class=\"menu-bar\" role=\"list\">\n                                    {this.currentActiveSizing === 'desktop' \n                                        ? <slot/> \n                                        : null}\n                                </div>\n                            </nav>\n                            : null}\n                    </div>\n                    <div class=\"container-right\">\n                        <slot name=\"actions\"/>\n                        {this.currentActiveSizing === 'mobile' ?\n                            <nav id=\"wcs-com-nav-mobile-menu\" role=\"navigation\" {...this.inheritedAttributes}>\n                                <button id=\"mobile-menu-icon\"\n                                    aria-label={menuAriaLabel}\n                                    aria-expanded={this.mobileMenuOpen ? \"true\" : \"false\"}\n                                    aria-controls=\"wcs-com-nav-mobile-menu\"\n                                    onClick={() => this.mobileMenuIconClick()}></button>\n                                {this.currentActiveSizing === 'mobile'\n                                    ? <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen} role=\"list\"><slot /></div>\n                                    : null}\n                            </nav>\n                            : null}\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    /**\n     * Close the mobile menu if the user press escape.\n     * @param evt keydown event on window target.\n     */\n    @Listen('keydown', {target: 'window'})\n    exitMobileMenuOnKeyDown(evt: KeyboardEvent) {\n        if (isEscapeKey(evt)) {\n            this.closeMobileMenu();\n        }\n    }\n}\n"]}
+{"version":3,"file":"com-nav.js","sourceRoot":"","sources":["../../../src/components/com-nav/com-nav.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    forceUpdate,\n    h,\n    Host,\n    Listen,\n    Method,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { comNavDidLoadWithResizeObserver, registerCloseHandlerForFocusOutEventOn } from \"./com-nav-utils\";\nimport { inheritAriaAttributes, inheritAttributes, isEscapeKey } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { ComNavSize } from \"./com-nav-size\";\n\n\nconst COM_NAV_INHERITED_ATTRS = ['title'];\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n/**\n * *Part of communication design system*\n *\n * The com-nav component is a container for navigation links to external or internal pages of the website.\n *\n * @slot <no-name> - Default slot containing all the menu declarations\n * @slot app-name - (Optional) Extra slot for the application name\n * @slot actions - Slot for actions placed on the right part of the container\n * \n * @cssprop --wcs-com-nav-menu-bar-height - Height of the menu bar\n * @cssprop --wcs-com-nav-border-color - Border color of the bottom border of the com-nav\n * @cssprop --wcs-com-nav-border-width - Border width of the border below com-nav\n * @cssprop --wcs-com-nav-background-color - Background color of the com-nav;\n * @cssprop --wcs-com-nav-app-name-color - App name color\n * @cssprop --wcs-com-nav-app-name-font-weight - App name font-weight\n * @cssprop --wcs-com-nav-app-name-font-size - Font size of the App name text\n * @cssprop --wcs-com-nav-app-name-line-height - Line height of the App name text\n * @cssprop --wcs-com-nav-item-color - Color of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-item-font-weight - Font weight of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-focus-outline-color - Focus outline color of the wcs-nav-item inside menu-bar\n * @cssprop --wcs-com-nav-horizontal-padding - Horizontal padding of wcs-com-nav\n * @cssprop --wcs-com-nav-vertical-padding - Vertical padding of wcs-com-nav\n * @cssprop --wcs-com-nav-mobile-overlay-gap - Gap between each items section in mobile overlay\n * @cssprop --wcs-com-nav-mobile-overlay-padding - Padding inside mobile overlay\n * @cssprop --wcs-com-nav-mobile-menu-icon-border-color - Bar border color on the left of icon mobile menu\n * @cssprop --wcs-com-nav-mobile-menu-icon-gap- Gap between icon mobile menu and separator on the left\n * @cssprop --wcs-com-nav-mobile-menu-icon-margin-left - Margin left of icon mobile menu\n * @cssprop --wcs-com-nav-menu-bar-gap - Gap between each item inside menu-bar\n * @cssprop --wcs-com-nav-menu-bar-margin-left - Margin left between menu bar and the app-name section\n */\n@Component({\n    tag: 'wcs-com-nav',\n    styleUrl: 'com-nav.scss',\n    shadow: true,\n})\nexport class ComNav implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLWcsComNavElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /** Name of the application to be displayed in the menu bar */\n    @Prop() appName: string;\n\n    @State() private mobileMenuOpen: boolean = false;\n    @State() public currentActiveSizing: ComNavSize;\n    private resizeObserver: ResizeObserver;\n\n    private mobileMenuIconClick() {\n        this.mobileMenuOpen = !this.mobileMenuOpen;\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, COM_NAV_INHERITED_ATTRS)\n        };\n\n        const slottedNavigableItems = this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(slottedNavigableItems, WCS_COM_NAV_SUBMENU_TAG_NAME);\n    }\n\n    componentDidLoad(): void {\n        if(!this.resizeObserver) {\n            this.resizeObserver = comNavDidLoadWithResizeObserver(this);\n            this.resizeObserver.observe(document.body);\n        }\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        // XXX: Special case on this component because of the desktop / mobile mode that re-renders the <nav> element,\n        // making it lose all its attribute\n        this.inheritedAttributes[attr] = value;\n        forceUpdate(this);\n    }\n\n    private closeMobileMenu() {\n        this.mobileMenuOpen = false;\n    }\n\n    // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events\n    // in the root component (this component). In desktop mode, all submenus and categories manage their drawer its\n    // opening state.\n    //\n    // We listen to the click events fired by the submenu component and we close the mobile menu.\n    // In desktop mode, the submenu itself manages the closing of the menu.\n    @Listen('wcsClickOnFinalAction')\n    onClickOnFinalAction() {\n        this.closeMobileMenu();\n    }\n    \n    render() {\n        const menuAriaLabel = this.inheritedAttributes['aria-label'] || undefined;\n        \n        return (\n            <Host>\n                <div class=\"container\">\n                    <div class=\"container-left\">\n                        <div class=\"app-name\">\n                            {this.appName}\n                            <slot name=\"app-name\"/>\n                        </div>\n                        {this.currentActiveSizing === 'desktop' ?\n                            <nav role=\"navigation\" {...this.inheritedAttributes}>\n                                <div class=\"menu-bar\" role=\"list\">\n                                    {this.currentActiveSizing === 'desktop' \n                                        ? <slot/> \n                                        : null}\n                                </div>\n                            </nav>\n                            : null}\n                    </div>\n                    <div class=\"container-right\">\n                        <slot name=\"actions\"/>\n                        {this.currentActiveSizing === 'mobile' ?\n                            <nav id=\"wcs-com-nav-mobile-menu\" role=\"navigation\" {...this.inheritedAttributes}>\n                                <button id=\"mobile-menu-icon\"\n                                    aria-label={menuAriaLabel}\n                                    aria-expanded={this.mobileMenuOpen ? \"true\" : \"false\"}\n                                    aria-controls=\"wcs-com-nav-mobile-menu\"\n                                    onClick={() => this.mobileMenuIconClick()}></button>\n                                {this.currentActiveSizing === 'mobile'\n                                    ? <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen} role=\"list\"><slot /></div>\n                                    : null}\n                            </nav>\n                            : null}\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    /**\n     * Close the mobile menu if the user press escape.\n     * @param evt keydown event on window target.\n     */\n    @Listen('keydown', {target: 'window'})\n    exitMobileMenuOnKeyDown(evt: KeyboardEvent) {\n        if (isEscapeKey(evt)) {\n            this.closeMobileMenu();\n        }\n    }\n}\n"]}

package/dist/collection/components/com-nav-category/com-nav-category.js

@@ -177,7 +177,7 @@ export class ComNavCategory {
                     "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/com-nav-item/com-nav-item.css

@@ -5,7 +5,8 @@
 /**
     Applies all the outline properties useful to show a dashed-focus ring around a component.
     TODO: replace `$border-radius: 0.1rem` with semantic border-radius but keep in mind some components that must stay at 2px border-radius: checkbox, radio, links, ...
- */ /* Default style and mobile behaviour */
+ */
+/* Default style and mobile behaviour */
 :host {
   --wcs-com-nav-item-gap: var(--wcs-semantic-spacing-base);
   --wcs-com-nav-item-font-size: var(--wcs-semantic-font-size-label-1);
@@ -29,7 +30,6 @@
   user-select: none;
   cursor: pointer;
   text-decoration: none;
-  font-size: var(--wcs-com-nav-item-font-size);
   color: inherit;
   font-weight: inherit;
   display: flex;

package/dist/collection/components/com-nav-submenu/com-nav-submenu.js

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