wcs-core 7.3.0 → 7.4.0

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",

package/dist/collection/components/editable-field/editable-field.e2e.playwright.js

@@ -0,0 +1,156 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('wcs-editable-field', () => {
+    test('renders with input element and default props', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Test Input" value="Initial value" type="input" id="test">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await expect(displayContainer).toContainText('Initial value');
+        const label = page.locator('wcs-editable-field .label');
+        await expect(label).toHaveText('Test Input');
+    });
+    test('transitions from DISPLAY to EDIT state when clicked', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Test Input" value="Initial value" type="input" id="test">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await displayContainer.click();
+        const editContainer = page.locator('wcs-editable-field .edit-container:not(.display-none)');
+        await expect(editContainer).toBeVisible();
+    });
+    test('properly handles validation', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field id="validate-test" label="Test Validation" value="Valid" error-msg="Value is invalid" type="input">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        // Set up validation function
+        await page.evaluate(() => {
+            const el = document.querySelector('wcs-editable-field');
+            el.validateFn = (val) => val === 'Valid';
+        });
+        // Go to edit mode
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await displayContainer.click();
+        // Input invalid value
+        const wcsInput = page.locator('wcs-input');
+        const nativeInput = page.locator('wcs-input input');
+        await nativeInput.fill('Invalid');
+        // Trigger validation (simulate Enter key)
+        await wcsInput.press('Enter');
+        await page.waitForChanges();
+        // Check error message is displayed
+        const errorElement = page.locator('wcs-editable-field wcs-error');
+        await expect(errorElement).toBeVisible();
+        await expect(errorElement).toHaveText('Value is invalid');
+    });
+    test('emits wcsChange event with correct data', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Test Events" value="Old value" type="input" id="event-test">
+                <wcs-input id="test-input"></wcs-input>
+            </wcs-editable-field>
+        `);
+        const changeSpy = await page.spyOnEvent('wcsChange');
+        // Go to edit mode
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await displayContainer.click();
+        await page.waitForChanges();
+        const input = page.locator('wcs-input');
+        await input.press('Backspace'); // Clear value (backspace is easier than selecting all)
+        await input.pressSequentially('New value'); // send input event
+        await page.waitForChanges();
+        // Submit the form by pressing Enter
+        await input.press('Enter');
+        await page.waitForChanges();
+        // Note: Functions defined in the event's detail object (successHandler and errorHandler)
+        // are not cloned by the DOM's structured clone algorithm.
+        // This means that when the event is emitted, these functions will not be present in the
+        // event.detail object when accessed in E2E tests, even though they exist in the browser.
+        expect(changeSpy).toHaveNthReceivedEventDetail(0, {
+            newValue: 'New value',
+            successHandler: undefined,
+            errorHandler: undefined
+        });
+    });
+    test('respects readonly property', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Read Only Field" value="Readonly value" readonly="true" type="input" id="test">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        // Check readonly icon is displayed
+        const readonlyIcon = page.locator('wcs-editable-field .readonly-icon');
+        await expect(readonlyIcon).toBeVisible();
+        // Try clicking
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await displayContainer.click();
+        // Should still be in display mode
+        const editContainer = page.locator('wcs-editable-field .edit-container:not(.display-none)');
+        await expect(editContainer).toHaveCount(0);
+    });
+    test('works correctly with textarea', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Textarea Test" type="textarea" value="Multiline\nText" id="test">
+                <wcs-textarea></wcs-textarea>
+            </wcs-editable-field>
+        `);
+        // Check it renders correctly
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await expect(displayContainer).toContainText('Multiline\nText');
+        // Go to edit mode
+        await displayContainer.click();
+        // Should need Ctrl+Enter to submit with textarea
+        const textarea = page.locator('wcs-textarea');
+        await textarea.press('Enter'); // This should NOT submit
+        // Should still be in edit mode
+        const editContainerVisible = page.locator('wcs-editable-field .edit-container:not(.display-none)');
+        await expect(editContainerVisible).toBeVisible();
+    });
+    test('works correctly with select', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field label="Select Test" type="select" value="option1" id="test">
+                <wcs-select>
+                    <wcs-select-option value="option1">Option 1</wcs-select-option>
+                    <wcs-select-option value="option2">Option 2</wcs-select-option>
+                </wcs-select>
+            </wcs-editable-field>
+        `);
+        // Go to edit mode
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await displayContainer.click();
+        // We get the select element
+        const select = page.locator('wcs-select');
+        await select.focus();
+        await select.press('ArrowDown');
+        // press CTRL + ENTER (combined) to validate
+        await page.keyboard.down('Control');
+        await page.keyboard.press('Enter');
+        await page.keyboard.up('Control');
+        await page.waitForChanges();
+        // Should be in load state after change
+        const loadContainer = page.locator('wcs-editable-field .load-container:not(.display-none)');
+        await expect(loadContainer).toBeVisible();
+    });
+    test('properly handles custom formatting function', async ({ page }) => {
+        await setWcsContent(page, `
+            <wcs-editable-field id="format-test" label="Formatting Test" value="test value" type="input">
+                <wcs-input></wcs-input>
+            </wcs-editable-field>
+        `);
+        // Set custom formatter
+        await page.evaluate(() => {
+            const el = document.querySelector('wcs-editable-field');
+            el.formatFn = (val) => val ? val.toUpperCase() : '';
+        });
+        // Check formatted output
+        const displayContainer = page.locator('wcs-editable-field .display-container');
+        await expect(displayContainer).toContainText('TEST VALUE');
+    });
+});
+//# sourceMappingURL=editable-field.e2e.playwright.js.map

package/dist/collection/components/editable-field/editable-field.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable-field.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/editable-field/editable-field.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('wcs-editable-field', () => {\n    test('renders with input element and default props', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Test Input\" value=\"Initial value\" type=\"input\" id=\"test\">\n                <wcs-input></wcs-input>\n            </wcs-editable-field>\n        `);\n\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await expect(displayContainer).toContainText('Initial value');\n\n        const label = page.locator('wcs-editable-field .label');\n        await expect(label).toHaveText('Test Input');\n    });\n\n    test('transitions from DISPLAY to EDIT state when clicked', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Test Input\" value=\"Initial value\" type=\"input\" id=\"test\">\n                <wcs-input></wcs-input>\n            </wcs-editable-field>\n        `);\n\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await displayContainer.click();\n\n        const editContainer = page.locator('wcs-editable-field .edit-container:not(.display-none)');\n        await expect(editContainer).toBeVisible();\n    });\n\n    test('properly handles validation', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field id=\"validate-test\" label=\"Test Validation\" value=\"Valid\" error-msg=\"Value is invalid\" type=\"input\">\n                <wcs-input></wcs-input>\n            </wcs-editable-field>\n        `);\n\n        // Set up validation function\n        await page.evaluate(() => {\n            const el = document.querySelector('wcs-editable-field') as any;\n            el.validateFn = (val: string) => val === 'Valid';\n        });\n\n        // Go to edit mode\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await displayContainer.click();\n\n        // Input invalid value\n        const wcsInput = page.locator('wcs-input');\n        const nativeInput = page.locator('wcs-input input');\n        await nativeInput.fill('Invalid');\n\n        // Trigger validation (simulate Enter key)\n        await wcsInput.press('Enter');\n        await page.waitForChanges();\n\n        // Check error message is displayed\n        const errorElement = page.locator('wcs-editable-field wcs-error');\n        await expect(errorElement).toBeVisible();\n        await expect(errorElement).toHaveText('Value is invalid');\n    });\n\n    test('emits wcsChange event with correct data', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Test Events\" value=\"Old value\" type=\"input\" id=\"event-test\">\n                <wcs-input id=\"test-input\"></wcs-input>\n            </wcs-editable-field>\n        `);\n\n        const changeSpy = await page.spyOnEvent('wcsChange');\n\n        // Go to edit mode\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await displayContainer.click();\n        await page.waitForChanges();\n\n        const input = page.locator('wcs-input');\n        await input.press('Backspace'); // Clear value (backspace is easier than selecting all)\n        await input.pressSequentially('New value'); // send input event\n        await page.waitForChanges();\n\n        // Submit the form by pressing Enter\n        await input.press('Enter');\n        await page.waitForChanges();\n\n        // Note: Functions defined in the event's detail object (successHandler and errorHandler)\n        // are not cloned by the DOM's structured clone algorithm.\n        // This means that when the event is emitted, these functions will not be present in the\n        // event.detail object when accessed in E2E tests, even though they exist in the browser.\n\n        expect(changeSpy).toHaveNthReceivedEventDetail(0, {\n            newValue: 'New value',\n            successHandler: undefined,\n            errorHandler: undefined\n        });\n    });\n\n    test('respects readonly property', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Read Only Field\" value=\"Readonly value\" readonly=\"true\" type=\"input\" id=\"test\">\n                <wcs-input></wcs-input>\n            </wcs-editable-field>\n        `);\n\n        // Check readonly icon is displayed\n        const readonlyIcon = page.locator('wcs-editable-field .readonly-icon');\n        await expect(readonlyIcon).toBeVisible();\n\n        // Try clicking\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await displayContainer.click();\n\n        // Should still be in display mode\n        const editContainer = page.locator('wcs-editable-field .edit-container:not(.display-none)');\n        await expect(editContainer).toHaveCount(0);\n    });\n\n    test('works correctly with textarea', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Textarea Test\" type=\"textarea\" value=\"Multiline\\nText\" id=\"test\">\n                <wcs-textarea></wcs-textarea>\n            </wcs-editable-field>\n        `);\n\n        // Check it renders correctly\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await expect(displayContainer).toContainText('Multiline\\nText');\n\n        // Go to edit mode\n        await displayContainer.click();\n\n        // Should need Ctrl+Enter to submit with textarea\n        const textarea = page.locator('wcs-textarea');\n        await textarea.press('Enter'); // This should NOT submit\n\n        // Should still be in edit mode\n        const editContainerVisible = page.locator('wcs-editable-field .edit-container:not(.display-none)');\n        await expect(editContainerVisible).toBeVisible();\n    });\n\n    test('works correctly with select', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field label=\"Select Test\" type=\"select\" value=\"option1\" id=\"test\">\n                <wcs-select>\n                    <wcs-select-option value=\"option1\">Option 1</wcs-select-option>\n                    <wcs-select-option value=\"option2\">Option 2</wcs-select-option>\n                </wcs-select>\n            </wcs-editable-field>\n        `);\n\n        // Go to edit mode\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await displayContainer.click();\n\n        // We get the select element\n        const select = page.locator('wcs-select');\n        await select.focus();\n        await select.press('ArrowDown');\n\n        // press CTRL + ENTER (combined) to validate\n        await page.keyboard.down('Control');\n        await page.keyboard.press('Enter');\n        await page.keyboard.up('Control');\n        await page.waitForChanges();\n\n        // Should be in load state after change\n        const loadContainer = page.locator('wcs-editable-field .load-container:not(.display-none)');\n        await expect(loadContainer).toBeVisible();\n    });\n\n    test('properly handles custom formatting function', async ({ page }: { page: E2EPage }) => {\n        await setWcsContent(page, `\n            <wcs-editable-field id=\"format-test\" label=\"Formatting Test\" value=\"test value\" type=\"input\">\n                <wcs-input></wcs-input>\n            </wcs-editable-field>\n        `);\n\n        // Set custom formatter\n        await page.evaluate(() => {\n            const el = document.querySelector('wcs-editable-field') as any;\n            el.formatFn = (val: string) => val ? val.toUpperCase() : '';\n        });\n\n        // Check formatted output\n        const displayContainer = page.locator('wcs-editable-field .display-container');\n        await expect(displayContainer).toContainText('TEST VALUE');\n    });\n});\n"]}