wcs-core 7.3.0 → 7.4.1

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

@@ -0,0 +1,187 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('counter', () => {
+    test('should increment the counter when click on plus button', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter></wcs-counter>
+        `);
+        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');
+        const incrementButton = page.locator('wcs-counter wcs-button').last();
+        // When
+        await incrementButton.click();
+        await page.waitForChanges();
+        // Then
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail({ value: 1 });
+    });
+    test('should decrement the counter when click on minus button', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter></wcs-counter>
+        `);
+        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');
+        const decrementButton = page.locator('wcs-counter wcs-button').first();
+        // When
+        await decrementButton.click();
+        await page.waitForChanges();
+        // Then
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail({ value: -1 });
+    });
+    test('should have 0 as default value', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter></wcs-counter>
+        `);
+        const currentDisplayedValue = page.locator('wcs-counter .current-value');
+        // Then
+        await expect(currentDisplayedValue).toHaveText('0');
+    });
+    test('should respect the step attribute', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter step="5"></wcs-counter>
+        `);
+        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');
+        const incrementButton = page.locator('wcs-counter wcs-button').last();
+        // When
+        await incrementButton.click();
+        await page.waitForChanges();
+        // Then
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail({ value: 5 });
+    });
+    test('should respect the min attribute', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter min="-1" value="0"></wcs-counter>
+        `);
+        const changeSpy = await page.spyOnEvent('wcsChange');
+        const decrementButton = page.locator('wcs-counter wcs-button').first();
+        // When
+        await decrementButton.click();
+        await decrementButton.click();
+        await page.waitForChanges();
+        // Then - Should only emit once since second click would go below min
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail({ value: -1 });
+    });
+    test('should use the min attribute as default value when value is not set', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter min="5"></wcs-counter>
+        `);
+        const currentDisplayedValue = page.locator('wcs-counter .current-value');
+        // Then
+        await expect(currentDisplayedValue).toHaveText('5');
+    });
+    test('should respect the max attribute', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter max="1"></wcs-counter>
+        `);
+        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');
+        const incrementButton = page.locator('wcs-counter wcs-button').last();
+        // When
+        await incrementButton.click();
+        await incrementButton.click();
+        await page.waitForChanges();
+        // Then - Should only emit once since second click would go above max
+        expect(changeSpy).toHaveReceivedEventTimes(1);
+        expect(changeSpy).toHaveReceivedEventDetail({ value: 1 });
+    });
+    test('should respect the value attribute', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter value="5"></wcs-counter>
+        `);
+        const currentDisplayedValue = page.locator('wcs-counter .current-value');
+        // Then
+        await expect(currentDisplayedValue).toHaveText('5');
+    });
+    test('should use the min value as default when min is greater than 0', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter min="5"></wcs-counter>
+        `);
+        const currentDisplayedValue = page.locator('wcs-counter .current-value');
+        // Then
+        await expect(currentDisplayedValue).toHaveText('5');
+    });
+    test('should use the min value as default when min is greater than value', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter min="5" value="3"></wcs-counter>
+        `);
+        const currentDisplayedValue = page.locator('wcs-counter .current-value');
+        // Then
+        await expect(currentDisplayedValue).toHaveText('5');
+    });
+    test('should fire wcsBlur event when the counter loose focus', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <button id="first">first</button>
+            <wcs-counter></wcs-counter>
+            <button id="last">last</button>
+        `);
+        const blurSpy = await page.locator('wcs-counter').spyOnEvent('wcsBlur');
+        const firstButton = page.locator('#first');
+        // When
+        await firstButton.click();
+        await page.keyboard.press('Tab');
+        await page.keyboard.press('Tab');
+        await page.waitForChanges();
+        // Then
+        expect(blurSpy).toHaveReceivedEventTimes(1);
+    });
+    test('should fire wcsBlur event when the user click on decrement button and leave', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter></wcs-counter>
+            <button>last</button>
+        `);
+        const blurSpy = await page.locator('wcs-counter').spyOnEvent('wcsBlur');
+        const decrementButton = page.locator('wcs-counter wcs-button').first();
+        const button = page.getByRole('button', { name: 'last' });
+        // When
+        await decrementButton.click();
+        await button.click();
+        await page.waitForChanges();
+        // Then
+        expect(blurSpy).toHaveReceivedEventTimes(1);
+    });
+    test('should fire wcsBlur event when the user click on increment button and leave', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter></wcs-counter>
+            <button>last</button>
+        `);
+        const blurSpy = await page.locator('wcs-counter').spyOnEvent('wcsBlur');
+        const incrementButton = page.locator('wcs-counter wcs-button').last();
+        const button = page.getByRole('button', { name: 'last' });
+        // When
+        await incrementButton.click();
+        await button.click();
+        await page.waitForChanges();
+        // Then
+        expect(blurSpy).toHaveReceivedEventTimes(1);
+    });
+    test('should not be interactive when disabled', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-counter disabled="true"></wcs-counter>
+        `);
+        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');
+        const incrementButton = page.locator('wcs-counter wcs-button').last();
+        // When
+        await incrementButton.click({ force: true });
+        await page.waitForChanges();
+        // Then
+        expect(changeSpy).toHaveReceivedEventTimes(0);
+        await expect(page.locator('wcs-counter')).toHaveJSProperty('value', 0);
+        await expect(incrementButton).toHaveJSProperty('disabled', true);
+    });
+});
+//# sourceMappingURL=counter.e2e.playwright.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"counter.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/counter/counter.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('counter', () => {\n    test('should increment the counter when click on plus button', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter></wcs-counter>\n        `);\n\n        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');\n\n        const incrementButton = page.locator('wcs-counter wcs-button').last();\n\n        // When\n        await incrementButton.click();\n        await page.waitForChanges();\n\n        // Then\n        expect(changeSpy).toHaveReceivedEventTimes(1);\n        expect(changeSpy).toHaveReceivedEventDetail({ value: 1 });\n    });\n\n    test('should decrement the counter when click on minus button', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter></wcs-counter>\n        `);\n\n        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');\n\n        const decrementButton = page.locator('wcs-counter wcs-button').first();\n\n        // When\n        await decrementButton.click();\n        await page.waitForChanges();\n\n        // Then\n        expect(changeSpy).toHaveReceivedEventTimes(1);\n        expect(changeSpy).toHaveReceivedEventDetail({ value: -1 });\n    });\n\n    test('should have 0 as default value', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter></wcs-counter>\n        `);\n\n        const currentDisplayedValue = page.locator('wcs-counter .current-value');\n\n        // Then\n        await expect(currentDisplayedValue).toHaveText('0');\n    });\n\n    test('should respect the step attribute', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter step=\"5\"></wcs-counter>\n        `);\n\n        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');\n\n        const incrementButton = page.locator('wcs-counter wcs-button').last();\n\n        // When\n        await incrementButton.click();\n        await page.waitForChanges();\n\n        // Then\n        expect(changeSpy).toHaveReceivedEventTimes(1);\n        expect(changeSpy).toHaveReceivedEventDetail({ value: 5 });\n    });\n\n    test('should respect the min attribute', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter min=\"-1\" value=\"0\"></wcs-counter>\n        `);\n\n        const changeSpy = await page.spyOnEvent('wcsChange');\n\n        const decrementButton = page.locator('wcs-counter wcs-button').first();\n\n        // When\n        await decrementButton.click();\n        await decrementButton.click();\n        await page.waitForChanges();\n\n        // Then - Should only emit once since second click would go below min\n        expect(changeSpy).toHaveReceivedEventTimes(1);\n        expect(changeSpy).toHaveReceivedEventDetail({ value: -1 });\n    });\n\n    test('should use the min attribute as default value when value is not set', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter min=\"5\"></wcs-counter>\n        `);\n\n        const currentDisplayedValue = page.locator('wcs-counter .current-value');\n\n        // Then\n        await expect(currentDisplayedValue).toHaveText('5');\n    });\n\n    test('should respect the max attribute', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter max=\"1\"></wcs-counter>\n        `);\n\n        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');\n\n        const incrementButton = page.locator('wcs-counter wcs-button').last();\n\n        // When\n        await incrementButton.click();\n        await incrementButton.click();\n        await page.waitForChanges();\n\n        // Then - Should only emit once since second click would go above max\n        expect(changeSpy).toHaveReceivedEventTimes(1);\n        expect(changeSpy).toHaveReceivedEventDetail({ value: 1 });\n    });\n\n    test('should respect the value attribute', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter value=\"5\"></wcs-counter>\n        `);\n\n        const currentDisplayedValue = page.locator('wcs-counter .current-value');\n\n        // Then\n        await expect(currentDisplayedValue).toHaveText('5');\n    });\n\n    test('should use the min value as default when min is greater than 0', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter min=\"5\"></wcs-counter>\n        `);\n\n        const currentDisplayedValue = page.locator('wcs-counter .current-value');\n\n        // Then\n        await expect(currentDisplayedValue).toHaveText('5');\n    });\n\n    test('should use the min value as default when min is greater than value', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter min=\"5\" value=\"3\"></wcs-counter>\n        `);\n\n        const currentDisplayedValue = page.locator('wcs-counter .current-value');\n\n        // Then\n        await expect(currentDisplayedValue).toHaveText('5');\n    });\n\n    test('should fire wcsBlur event when the counter loose focus', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <button id=\"first\">first</button>\n            <wcs-counter></wcs-counter>\n            <button id=\"last\">last</button>\n        `);\n\n        const blurSpy = await page.locator('wcs-counter').spyOnEvent('wcsBlur');\n\n        const firstButton = page.locator('#first');\n\n        // When\n        await firstButton.click();\n        await page.keyboard.press('Tab');\n        await page.keyboard.press('Tab');\n        await page.waitForChanges();\n\n        // Then\n        expect(blurSpy).toHaveReceivedEventTimes(1);\n    });\n\n    test('should fire wcsBlur event when the user click on decrement button and leave', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter></wcs-counter>\n            <button>last</button>\n        `);\n\n        const blurSpy = await page.locator('wcs-counter').spyOnEvent('wcsBlur');\n\n        const decrementButton = page.locator('wcs-counter wcs-button').first();\n        const button = page.getByRole('button', { name: 'last' });\n\n        // When\n        await decrementButton.click();\n        await button.click();\n        await page.waitForChanges();\n\n        // Then\n        expect(blurSpy).toHaveReceivedEventTimes(1);\n    });\n\n    test('should fire wcsBlur event when the user click on increment button and leave', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter></wcs-counter>\n            <button>last</button>\n        `);\n\n        const blurSpy = await page.locator('wcs-counter').spyOnEvent('wcsBlur');\n\n        const incrementButton = page.locator('wcs-counter wcs-button').last();\n        const button = page.getByRole('button', { name: 'last' });\n\n        // When\n        await incrementButton.click();\n        await button.click();\n        await page.waitForChanges();\n\n        // Then\n        expect(blurSpy).toHaveReceivedEventTimes(1);\n    });\n\n    test('should not be interactive when disabled', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-counter disabled=\"true\"></wcs-counter>\n        `);\n\n        const changeSpy = await page.locator('wcs-counter').spyOnEvent('wcsChange');\n\n        const incrementButton = page.locator('wcs-counter wcs-button').last();\n\n        // When\n        await incrementButton.click({ force: true });\n        await page.waitForChanges();\n\n        // Then\n        expect(changeSpy).toHaveReceivedEventTimes(0);\n        await expect(page.locator('wcs-counter')).toHaveJSProperty('value', 0);\n        await expect(incrementButton).toHaveJSProperty('disabled', true);\n    });\n});\n"]}

package/dist/collection/components/counter/counter.js

@@ -368,7 +368,7 @@ export class Counter {
                     "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/dropdown/dropdown.e2e.playwright.js

@@ -0,0 +1,320 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('Dropdown component', () => {
+    test.describe('keyboard interactions', () => {
+        test('Enter should open menu and move focus to the first item', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-dropdown mode="plain" shape="normal" size="m">
+                    <span slot="placeholder">Dropdown</span>
+                    <wcs-dropdown-item id="first-item">Premier item</wcs-dropdown-item>
+                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>
+                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>
+                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>
+                    <wcs-dropdown-divider></wcs-dropdown-divider>
+                    <wcs-dropdown-item id="last-item">Dernier item</wcs-dropdown-item>
+                </wcs-dropdown>
+            `);
+            const dropdown = page.locator('wcs-dropdown');
+            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');
+            const firstItem = page.locator('wcs-dropdown-item#first-item');
+            // When
+            await dropdown.focus();
+            await page.keyboard.press('Enter');
+            await page.waitForChanges();
+            // Then
+            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');
+            await expect(firstItem).toBeFocused();
+        });
+        test('SPACE should open menu and move focus to the first item', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-dropdown mode="plain" shape="normal" size="m">
+                    <span slot="placeholder">Dropdown</span>
+                    <wcs-dropdown-item id="first-item">Premier item</wcs-dropdown-item>
+                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>
+                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>
+                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>
+                    <wcs-dropdown-divider></wcs-dropdown-divider>
+                    <wcs-dropdown-item id="last-item">Dernier item</wcs-dropdown-item>
+                </wcs-dropdown>
+            `);
+            const dropdown = page.locator('wcs-dropdown');
+            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');
+            const firstItem = page.locator('wcs-dropdown-item#first-item');
+            // When
+            await dropdown.focus();
+            await page.keyboard.press('Space');
+            await page.waitForChanges();
+            // Then
+            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');
+            await expect(firstItem).toBeFocused();
+        });
+        test('DOWN_ARROW should open menu and move focus to the first item', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-dropdown mode="plain" shape="normal" size="m">
+                    <span slot="placeholder">Dropdown</span>
+                    <wcs-dropdown-item id="first-item">Premier item</wcs-dropdown-item>
+                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>
+                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>
+                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>
+                    <wcs-dropdown-divider></wcs-dropdown-divider>
+                    <wcs-dropdown-item id="last-item">Dernier item</wcs-dropdown-item>
+                </wcs-dropdown>
+            `);
+            const dropdown = page.locator('wcs-dropdown');
+            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');
+            const firstItem = page.locator('wcs-dropdown-item#first-item');
+            // When
+            await dropdown.focus();
+            await page.keyboard.press('ArrowDown');
+            await page.waitForChanges();
+            // Then
+            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');
+            await expect(firstItem).toBeFocused();
+        });
+        test('UP_ARROW should open menu and move focus to the last item', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-dropdown mode="plain" shape="normal" size="m">
+                    <span slot="placeholder">Dropdown</span>
+                    <wcs-dropdown-item id="first-item">Premier item</wcs-dropdown-item>
+                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>
+                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>
+                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>
+                    <wcs-dropdown-divider></wcs-dropdown-divider>
+                    <wcs-dropdown-item id="last-item">Dernier item</wcs-dropdown-item>
+                </wcs-dropdown>
+            `);
+            const dropdown = page.locator('wcs-dropdown');
+            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');
+            const lastItem = page.locator('wcs-dropdown-item#last-item');
+            // When
+            await dropdown.focus();
+            await page.keyboard.press('ArrowUp');
+            await page.waitForChanges();
+            // Then
+            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');
+            await expect(lastItem).toBeFocused();
+        });
+        test('HOME should focus the first item', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-dropdown mode="plain" shape="normal" size="m">
+                    <span slot="placeholder">Dropdown</span>
+                    <wcs-dropdown-item id="first-item">Premier item</wcs-dropdown-item>
+                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>
+                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>
+                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>
+                    <wcs-dropdown-divider></wcs-dropdown-divider>
+                    <wcs-dropdown-item id="last-item">Dernier item</wcs-dropdown-item>
+                </wcs-dropdown>
+            `);
+            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');
+            const firstItem = page.locator('wcs-dropdown-item#first-item');
+            // When
+            await dropdownButton.dispatchEvent('click');
+            await page.waitForChanges();
+            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open
+            await firstItem.focus(); // ensure focus is on an item before pressing Home
+            await page.keyboard.press('Home');
+            await page.waitForChanges();
+            // Then
+            await expect(firstItem).toBeFocused();
+        });
+        test('END should focus the last item', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-dropdown mode="plain" shape="normal" size="m">
+                    <span slot="placeholder">Dropdown</span>
+                    <wcs-dropdown-item id="first-item">Premier item</wcs-dropdown-item>
+                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>
+                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>
+                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>
+                    <wcs-dropdown-divider></wcs-dropdown-divider>
+                    <wcs-dropdown-item id="last-item">Dernier item</wcs-dropdown-item>
+                </wcs-dropdown>
+            `);
+            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');
+            const lastItem = page.locator('wcs-dropdown-item#last-item');
+            // When
+            await dropdownButton.dispatchEvent('click');
+            await page.waitForChanges();
+            const firstItem = page.locator('wcs-dropdown-item#first-item');
+            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open
+            await firstItem.focus(); // ensure focus is on an item before pressing End
+            await page.keyboard.press('End');
+            await page.waitForChanges();
+            // Then
+            await expect(lastItem).toBeFocused();
+        });
+        test('UP_ARROW should move focus to the previous item', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-dropdown mode="plain" shape="normal" size="m">
+                    <span slot="placeholder">Dropdown</span>
+                    <wcs-dropdown-item id="first-item">Premier item</wcs-dropdown-item>
+                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>
+                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>
+                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>
+                    <wcs-dropdown-divider></wcs-dropdown-divider>
+                    <wcs-dropdown-item id="last-item">Dernier item</wcs-dropdown-item>
+                </wcs-dropdown>
+            `);
+            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');
+            const lastItem = page.locator('wcs-dropdown-item#last-item');
+            // When
+            await dropdownButton.dispatchEvent('click'); // open the menu
+            await page.waitForChanges();
+            const firstItem = page.locator('wcs-dropdown-item#first-item');
+            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open
+            await firstItem.focus(); // ensure focus is on an item before pressing ArrowUp
+            await page.keyboard.press('ArrowUp');
+            await page.waitForChanges();
+            // Then
+            await expect(lastItem).toBeFocused();
+        });
+        test('DOWN_ARROW should move focus to the next item', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-dropdown mode="plain" shape="normal" size="m">
+                    <span slot="placeholder">Dropdown</span>
+                    <wcs-dropdown-item id="first-item">Premier item</wcs-dropdown-item>
+                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>
+                    <wcs-dropdown-item id="second-item">Second item test avec un long texte</wcs-dropdown-item>
+                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>
+                    <wcs-dropdown-divider></wcs-dropdown-divider>
+                    <wcs-dropdown-item id="last-item">Dernier item</wcs-dropdown-item>
+                </wcs-dropdown>
+            `);
+            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');
+            const secondItem = page.locator('wcs-dropdown-item#second-item');
+            // When
+            await dropdownButton.dispatchEvent('click');
+            await page.waitForChanges();
+            const firstItem = page.locator('wcs-dropdown-item#first-item');
+            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open
+            await firstItem.focus(); // ensure focus is on an item before pressing Escape
+            await page.keyboard.press('ArrowDown');
+            await page.waitForChanges();
+            // Then
+            await expect(secondItem).toBeFocused();
+        });
+        test('ESCAPE should close the menu and set focus on the dropdown button', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-dropdown mode="plain" shape="normal" size="m">
+                    <span slot="placeholder">Dropdown</span>
+                    <wcs-dropdown-item id="first-item">Premier item</wcs-dropdown-item>
+                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>
+                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>
+                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>
+                    <wcs-dropdown-divider></wcs-dropdown-divider>
+                    <wcs-dropdown-item id="last-item">Dernier item</wcs-dropdown-item>
+                </wcs-dropdown>
+            `);
+            const dropdown = page.locator('wcs-dropdown');
+            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');
+            // When
+            await dropdownButton.dispatchEvent('click');
+            await page.waitForChanges();
+            const firstItem = page.locator('wcs-dropdown-item#first-item');
+            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open
+            await firstItem.focus(); // ensure focus is on an item before pressing Escape
+            await page.keyboard.press('Escape');
+            await page.waitForChanges();
+            // Then
+            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');
+            await expect(dropdown).toBeFocused();
+        });
+        test('TAB should close the menu and set focus on the dropdown button', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-dropdown mode="plain" shape="normal" size="m">
+                    <span slot="placeholder">Dropdown</span>
+                    <wcs-dropdown-item id="first-item">Premier item</wcs-dropdown-item>
+                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>
+                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>
+                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>
+                    <wcs-dropdown-divider></wcs-dropdown-divider>
+                    <wcs-dropdown-item id="last-item">Dernier item</wcs-dropdown-item>
+                </wcs-dropdown>
+            `);
+            const dropdown = page.locator('wcs-dropdown');
+            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');
+            const firstItem = page.locator('wcs-dropdown-item#first-item');
+            // When
+            await dropdownButton.dispatchEvent('click'); // open the menu
+            await page.waitForChanges();
+            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open
+            await firstItem.focus(); // ensure focus is on an item before pressing Tab
+            await page.keyboard.press('Tab'); // should close the menu and focus back to button
+            await page.waitForChanges();
+            // Then
+            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');
+            await expect(dropdown).toBeFocused();
+        });
+        test('SHIFT+TAB should close the menu and set focus on the dropdown button', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-dropdown mode="plain" shape="normal" size="m">
+                    <span slot="placeholder">Dropdown</span>
+                    <wcs-dropdown-item id="first-item">Premier item</wcs-dropdown-item>
+                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>
+                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>
+                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>
+                    <wcs-dropdown-divider></wcs-dropdown-divider>
+                    <wcs-dropdown-item id="last-item">Dernier item</wcs-dropdown-item>
+                </wcs-dropdown>
+            `);
+            const dropdown = page.locator('wcs-dropdown');
+            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');
+            // When
+            await dropdownButton.dispatchEvent('click'); // open the menu
+            await page.waitForChanges();
+            const firstItem = page.locator('wcs-dropdown-item#first-item');
+            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open
+            await firstItem.focus(); // ensure focus is on an item before pressing Shift+Tab
+            await page.keyboard.down('Shift');
+            await page.keyboard.press('Tab');
+            await page.keyboard.up('Shift');
+            await page.waitForChanges();
+            // Then
+            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');
+            await expect(dropdown).toBeFocused();
+        });
+        test('ENTER should activate the item, close menu, and set focus on the dropdown button', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-dropdown mode="plain" shape="normal" size="m">
+                    <span slot="placeholder">Dropdown</span>
+                    <wcs-dropdown-item id="first-item">Premier item</wcs-dropdown-item>
+                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>
+                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>
+                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>
+                    <wcs-dropdown-divider></wcs-dropdown-divider>
+                    <wcs-dropdown-item id="last-item">Dernier item</wcs-dropdown-item>
+                </wcs-dropdown>
+            `);
+            const dropdown = page.locator('wcs-dropdown');
+            // spy on the custom event on the locator
+            const itemClickSpy = await dropdown.spyOnEvent('wcsDropdownItemClick');
+            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');
+            const firstItem = page.locator('wcs-dropdown-item#first-item');
+            // When
+            await dropdownButton.dispatchEvent('click');
+            await page.waitForChanges();
+            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open
+            await firstItem.focus();
+            await page.keyboard.press('Enter');
+            await page.waitForChanges();
+            // Then
+            expect(itemClickSpy).toHaveReceivedEventTimes(1);
+            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');
+            await expect(dropdown).toBeFocused();
+        });
+    });
+});
+//# sourceMappingURL=dropdown.e2e.playwright.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.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('Dropdown component', () => {\n    test.describe('keyboard interactions', () => {\n        test('Enter should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdown.focus();\n            await page.keyboard.press('Enter');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n            await expect(firstItem).toBeFocused();\n        });\n\n        test('SPACE should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdown.focus();\n            await page.keyboard.press('Space');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n            await expect(firstItem).toBeFocused();\n        });\n\n        test('DOWN_ARROW should open menu and move focus to the first item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdown.focus();\n            await page.keyboard.press('ArrowDown');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n            await expect(firstItem).toBeFocused();\n        });\n\n        test('UP_ARROW should open menu and move focus to the last item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n            // When\n            await dropdown.focus();\n            await page.keyboard.press('ArrowUp');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'true');\n            await expect(lastItem).toBeFocused();\n        });\n\n        test('HOME should focus the first item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click');\n            await page.waitForChanges();\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing Home\n            await page.keyboard.press('Home');\n            await page.waitForChanges();\n\n            // Then\n            await expect(firstItem).toBeFocused();\n        });\n\n        test('END should focus the last item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click');\n            await page.waitForChanges();\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing End\n            await page.keyboard.press('End');\n            await page.waitForChanges();\n\n            // Then\n            await expect(lastItem).toBeFocused();\n        });\n\n        test('UP_ARROW should move focus to the previous item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const lastItem = page.locator('wcs-dropdown-item#last-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click'); // open the menu\n            await page.waitForChanges();\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing ArrowUp\n            await page.keyboard.press('ArrowUp');\n            await page.waitForChanges();\n\n            // Then\n            await expect(lastItem).toBeFocused();\n        });\n\n        test('DOWN_ARROW should move focus to the next item', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item id=\"second-item\">Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const secondItem = page.locator('wcs-dropdown-item#second-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click');\n            await page.waitForChanges();\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing Escape\n            await page.keyboard.press('ArrowDown');\n            await page.waitForChanges();\n\n            // Then\n            await expect(secondItem).toBeFocused();\n        });\n\n        test('ESCAPE should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n            // When\n            await dropdownButton.dispatchEvent('click');\n            await page.waitForChanges();\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing Escape\n            await page.keyboard.press('Escape');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n            await expect(dropdown).toBeFocused();\n        });\n\n        test('TAB should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click'); // open the menu\n            await page.waitForChanges();\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing Tab\n            await page.keyboard.press('Tab'); // should close the menu and focus back to button\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n            await expect(dropdown).toBeFocused();\n        });\n\n        test('SHIFT+TAB should close the menu and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n\n            // When\n            await dropdownButton.dispatchEvent('click'); // open the menu\n            await page.waitForChanges();\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus(); // ensure focus is on an item before pressing Shift+Tab\n            await page.keyboard.down('Shift');\n            await page.keyboard.press('Tab');\n            await page.keyboard.up('Shift');\n            await page.waitForChanges();\n\n            // Then\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n            await expect(dropdown).toBeFocused();\n        });\n\n        test('ENTER should activate the item, close menu, and set focus on the dropdown button', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-dropdown mode=\"plain\" shape=\"normal\" size=\"m\">\n                    <span slot=\"placeholder\">Dropdown</span>\n                    <wcs-dropdown-item id=\"first-item\">Premier item</wcs-dropdown-item>\n                    <wcs-dropdown-header>ACTION HEADER</wcs-dropdown-header>\n                    <wcs-dropdown-item>Second item test avec un long texte</wcs-dropdown-item>\n                    <wcs-dropdown-item>Dernier item</wcs-dropdown-item>\n                    <wcs-dropdown-divider></wcs-dropdown-divider>\n                    <wcs-dropdown-item id=\"last-item\">Dernier item</wcs-dropdown-item>\n                </wcs-dropdown>\n            `);\n\n            const dropdown = page.locator('wcs-dropdown');\n            // spy on the custom event on the locator\n            const itemClickSpy = await dropdown.spyOnEvent('wcsDropdownItemClick');\n\n            const dropdownButton = page.locator('wcs-dropdown #dropdown-button');\n            const firstItem = page.locator('wcs-dropdown-item#first-item');\n\n            // When\n            await dropdownButton.dispatchEvent('click');\n            await page.waitForChanges();\n            await firstItem.waitFor({ state: 'visible' }); // wait for menu to open\n            await firstItem.focus();\n            await page.keyboard.press('Enter');\n            await page.waitForChanges();\n\n            // Then\n            expect(itemClickSpy).toHaveReceivedEventTimes(1);\n            await expect(dropdownButton).toHaveAttribute('aria-expanded', 'false');\n            await expect(dropdown).toBeFocused();\n        });\n    });\n});\n"]}

package/dist/collection/components/dropdown/dropdown.js

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