wcs-core 7.3.0 → 7.4.1

package/dist/cjs/wcs-tabs.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6f0140d8.js');
 const helpers = require('./helpers-2f1a8ddc.js');
 const selectArrow = require('./select-arrow-a8a47fe4.js');
-const popper = require('./popper-8d6e7fca.js');
+const popper = require('./popper-1b61df21.js');
 
 const tabsCss = ":host{--wcs-tabs-indicator-height:calc(var(--wcs-semantic-size-base) / 2);--wcs-tabs-indicator-background-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-indicator-border-radius:var(--wcs-semantic-border-radius-full);--wcs-tabs-color-default:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-color-hover:var(--wcs-semantic-color-foreground-action-secondary-hover);--wcs-tabs-color-press:var(--wcs-semantic-color-foreground-action-secondary-press);--wcs-tabs-color-selected:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-tabs-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-border-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-tabs-font-weight-default:var(--wcs-semantic-font-weight-roman);--wcs-tabs-font-weight-selected:var(--wcs-semantic-font-weight-roman);--wcs-tabs-padding-top:var(--wcs-semantic-spacing-base);--wcs-tabs-padding-right:var(--wcs-semantic-spacing-large);--wcs-tabs-padding-bottom:calc(var(--wcs-semantic-spacing-base) + var(--wcs-tabs-indicator-height));--wcs-tabs-padding-left:var(--wcs-semantic-spacing-large);--wcs-tabs-gutter-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-gutter-background-color:var(--wcs-semantic-color-border-secondary);--wcs-tabs-headers-border-bottom:var(--wcs-tabs-gutter-border-width) solid var(--wcs-tabs-gutter-background-color);--wcs-tabs-mobile-breakpoint:var(--wcs-phone-breakpoint-max-width, 575px);--wcs-tabs-mobile-overlay-border-width:var(--wcs-semantic-border-width-default);--wcs-tabs-mobile-overlay-border-color:var(--wcs-semantic-color-border-secondary);--wcs-tabs-mobile-overlay-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-tabs-mobile-overlay-padding:var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-overlay-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-mobile-gap:var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-padding:0 var(--wcs-semantic-spacing-base);--wcs-tabs-mobile-height:var(--wcs-semantic-size-m);--wcs-tabs-mobile-font-weight-default:var(--wcs-semantic-font-weight-medium);--wcs-tabs-mobile-font-weight-active:var(--wcs-semantic-font-weight-black);--wcs-tabs-mobile-font-size:var(--wcs-semantic-font-size-base);--wcs-tabs-mobile-color:var(--wcs-semantic-color-text-primary);--wcs-tabs-mobile-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-tabs-mobile-background-color-focus:var(--wcs-semantic-color-background-action-secondary-focus);--wcs-tabs-mobile-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-tabs-mobile-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-tabs-mobile-border-radius:var(--wcs-semantic-border-radius-base);--wcs-tabs-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:block}:host([align=start]) .wcs-tabs-headers{justify-content:start}:host([align=end]) .wcs-tabs-headers{justify-content:end}:host([align=center]) .wcs-tabs-headers{justify-content:center}.wcs-tabs-headers{overflow-x:auto;display:flex;flex-direction:row;position:relative}:host([gutter]) .wcs-tabs-headers{border-bottom:var(--wcs-tabs-headers-border-bottom)}.wcs-tab-header{position:relative;padding:var(--wcs-tabs-padding-top) var(--wcs-tabs-padding-right) var(--wcs-tabs-padding-bottom) var(--wcs-tabs-padding-left);border-radius:var(--wcs-tabs-border-radius) var(--wcs-tabs-border-radius) 0 0;display:flex;flex-shrink:0;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:all var(--wcs-tabs-transition-duration) ease-out}.wcs-tab-header span{text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default)}.wcs-tab-header:hover{background-color:var(--wcs-tabs-background-color-hover)}.wcs-tab-header:hover span{color:var(--wcs-tabs-color-hover)}.wcs-tab-header:focus-visible>span{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-tabs-border-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}.wcs-tab-header:active{background-color:var(--wcs-tabs-background-color-press)}.wcs-tab-header:active span{color:var(--wcs-tabs-color-press)}.active span{font-weight:var(--wcs-tabs-font-weight-selected);color:var(--wcs-tabs-color-selected)}.active::after{position:absolute;bottom:0;left:0;width:100%;content:\"\";height:var(--wcs-tabs-indicator-height);background-color:var(--wcs-tabs-indicator-background-color);border-radius:var(--wcs-tabs-indicator-border-radius)}button{background-color:inherit}#mobile-button{border:0;font-family:var(--wcs-font-sans-serif), sans-serif;text-align:center;color:var(--wcs-tabs-color-default);font-size:1rem;font-weight:var(--wcs-tabs-font-weight-default);padding-right:calc(0.75 * var(--wcs-tabs-padding-right));}#mobile-button span{display:flex;align-items:center}#mobile-button .arrow{fill:var(--wcs-tabs-color-default)}#mobile-button:hover .arrow{fill:var(--wcs-tabs-color-hover)}#mobile-button:active .arrow{fill:var(--wcs-tabs-color-press)}.popover{display:none;z-index:9999;overflow:hidden;border:var(--wcs-tabs-mobile-overlay-border-width) solid var(--wcs-tabs-mobile-overlay-border-color);border-radius:var(--wcs-tabs-mobile-overlay-border-radius);padding:var(--wcs-tabs-mobile-overlay-padding);background-color:var(--wcs-tabs-mobile-overlay-background-color)}.popover [role=tab]{display:flex;flex-direction:row;align-items:center;cursor:pointer;user-select:none;gap:var(--wcs-tabs-mobile-gap);padding:var(--wcs-tabs-mobile-padding);height:var(--wcs-tabs-mobile-height);font-weight:var(--wcs-tabs-mobile-font-weight-default);font-size:var(--wcs-tabs-mobile-font-size);color:var(--wcs-tabs-mobile-color);background-color:var(--wcs-tabs-mobile-background-color);border-radius:var(--wcs-tabs-mobile-border-radius);transition-duration:var(--wcs-tabs-transition-duration);transition-property:background-color, color;transition-timing-function:ease;overflow:hidden;white-space:nowrap}.popover [role=tab]:focus{background-color:var(--wcs-tabs-mobile-background-color-focus)}.popover [role=tab]:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-semantic-color-border-focus-base);outline-offset:0;border-radius:var(--wcs-tabs-mobile-border-radius)}.popover [role=tab]:hover{background-color:var(--wcs-tabs-mobile-background-color-hover)}.popover [role=tab]:active{background-color:var(--wcs-tabs-mobile-background-color-press)}.popover .mobile-active{font-weight:var(--wcs-tabs-mobile-font-weight-active)}.show{display:block}";
 const WcsTabsStyle0 = tabsCss;

package/dist/cjs/wcs-tooltip.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f0140d8.js');
-const popper = require('./popper-8d6e7fca.js');
+const popper = require('./popper-1b61df21.js');
 const helpers = require('./helpers-2f1a8ddc.js');
 const mutableAriaAttribute = require('./mutable-aria-attribute-342a2304.js');
 

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

@@ -0,0 +1,245 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('accordion', () => {
+    test('should open and close accordion panels', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-accordion>
+                <wcs-accordion-panel>
+                    <wcs-accordion-header>Panel 1</wcs-accordion-header>
+                    <wcs-accordion-content>Content 1</wcs-accordion-content>
+                </wcs-accordion-panel>
+                <wcs-accordion-panel>
+                    <wcs-accordion-header>Panel 2</wcs-accordion-header>
+                    <wcs-accordion-content>Content 2</wcs-accordion-content>
+                </wcs-accordion-panel>
+            </wcs-accordion>
+        `);
+        const panels = page.locator('wcs-accordion-panel');
+        // When
+        await panels.nth(0).click();
+        await page.waitForChanges();
+        // Then
+        await expect(panels.nth(0)).toHaveJSProperty('open', true);
+        await expect(panels.nth(1)).toHaveJSProperty('open', false);
+    });
+    test('should close other panels when opening a new one at the same level', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-accordion>
+                <wcs-accordion-panel>
+                    <wcs-accordion-header>Panel 1</wcs-accordion-header>
+                    <wcs-accordion-content>Content 1</wcs-accordion-content>
+                </wcs-accordion-panel>
+                <wcs-accordion-panel>
+                    <wcs-accordion-header>Panel 2</wcs-accordion-header>
+                    <wcs-accordion-content>Content 2</wcs-accordion-content>
+                </wcs-accordion-panel>
+            </wcs-accordion>
+        `);
+        const panels = page.locator('wcs-accordion-panel');
+        // When - Open first panel
+        await panels.nth(0).click();
+        await page.waitForChanges();
+        // Then
+        await expect(panels.nth(0)).toHaveJSProperty('open', true);
+        await expect(panels.nth(1)).toHaveJSProperty('open', false);
+        // When - Open second panel
+        await panels.nth(1).click();
+        await page.waitForChanges();
+        // Then - First panel should be closed
+        await expect(panels.nth(0)).toHaveJSProperty('open', false);
+        await expect(panels.nth(1)).toHaveJSProperty('open', true);
+    });
+    test('should not close parent accordion when opening nested accordion', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-accordion>
+                <wcs-accordion-panel>
+                    <wcs-accordion-header>Parent Panel 1</wcs-accordion-header>
+                    <wcs-accordion-content>
+                        <p>Parent content</p>
+                        <wcs-accordion>
+                            <wcs-accordion-panel>
+                                <wcs-accordion-header>Child Panel 1</wcs-accordion-header>
+                                <wcs-accordion-content>Child content 1</wcs-accordion-content>
+                            </wcs-accordion-panel>
+                            <wcs-accordion-panel>
+                                <wcs-accordion-header>Child Panel 2</wcs-accordion-header>
+                                <wcs-accordion-content>Child content 2</wcs-accordion-content>
+                            </wcs-accordion-panel>
+                        </wcs-accordion>
+                    </wcs-accordion-content>
+                </wcs-accordion-panel>
+                <wcs-accordion-panel>
+                    <wcs-accordion-header>Parent Panel 2</wcs-accordion-header>
+                    <wcs-accordion-content>Parent content 2</wcs-accordion-content>
+                </wcs-accordion-panel>
+            </wcs-accordion>
+        `);
+        const parentPanels = page.locator('wcs-accordion > wcs-accordion-panel');
+        // When - Open parent panel first
+        await parentPanels.nth(0).click();
+        await page.waitForChanges();
+        // Then
+        await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);
+        // When - Open nested accordion panel
+        const nestedPanels = page.locator('wcs-accordion wcs-accordion wcs-accordion-panel');
+        await nestedPanels.nth(0).click();
+        await page.waitForChanges();
+        // Then - Parent should remain open, nested panel should be open
+        await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);
+        await expect(nestedPanels.nth(0)).toHaveJSProperty('open', true);
+    });
+    test('should not close nested accordions when opening another parent panel', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-accordion id="parent-accordion">
+                <wcs-accordion-panel>
+                    <wcs-accordion-header>Parent Panel 1</wcs-accordion-header>
+                    <wcs-accordion-content>
+                        <wcs-accordion>
+                            <wcs-accordion-panel>
+                                <wcs-accordion-header>Child Panel 1</wcs-accordion-header>
+                                <wcs-accordion-content>Child content 1</wcs-accordion-content>
+                            </wcs-accordion-panel>
+                        </wcs-accordion>
+                    </wcs-accordion-content>
+                </wcs-accordion-panel>
+                <wcs-accordion-panel>
+                    <wcs-accordion-header>Parent Panel 2</wcs-accordion-header>
+                    <wcs-accordion-content>
+                        <wcs-accordion>
+                            <wcs-accordion-panel>
+                                <wcs-accordion-header>Child Panel 2</wcs-accordion-header>
+                                <wcs-accordion-content>Child content 2</wcs-accordion-content>
+                            </wcs-accordion-panel>
+                        </wcs-accordion>
+                    </wcs-accordion-content>
+                </wcs-accordion-panel>
+            </wcs-accordion>
+        `);
+        const parentPanels = page.locator('#parent-accordion > wcs-accordion-panel');
+        // When - Open first parent and its nested panel
+        await parentPanels.nth(0).click();
+        await page.waitForChanges();
+        const firstNestedPanel = page.locator('wcs-accordion > wcs-accordion-panel:first-child wcs-accordion-panel');
+        await firstNestedPanel.click();
+        await page.waitForChanges();
+        // Then
+        await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);
+        await expect(firstNestedPanel).toHaveJSProperty('open', true);
+        // When - Open second parent
+        await parentPanels.nth(1).click();
+        await page.waitForChanges();
+        const secondNestedPanel = page.locator('wcs-accordion > wcs-accordion-panel:nth-child(2) wcs-accordion-panel');
+        // Then - First parent should close but nested panel state should be preserved
+        await expect(parentPanels.nth(0)).toHaveJSProperty('open', false);
+        await expect(parentPanels.nth(1)).toHaveJSProperty('open', true);
+        await expect(firstNestedPanel).toHaveJSProperty('open', true); // Nested panel keeps its state
+        await expect(secondNestedPanel).toHaveJSProperty('open', false);
+    });
+    test('should handle deeply nested accordions independently', async ({ page, }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-accordion id="level1-accordion">
+                <wcs-accordion-panel id="level1-panel">
+                    <wcs-accordion-header>Level 1</wcs-accordion-header>
+                    <wcs-accordion-content>
+                        <wcs-accordion id="level2-accordion">
+                            <wcs-accordion-panel id="level2-panel">
+                                <wcs-accordion-header>Level 2</wcs-accordion-header>
+                                <wcs-accordion-content>
+                                    <wcs-accordion id="level3-accordion">
+                                        <wcs-accordion-panel id="level3-panel">
+                                            <wcs-accordion-header>Level 3</wcs-accordion-header>
+                                            <wcs-accordion-content>Deep content</wcs-accordion-content>
+                                        </wcs-accordion-panel>
+                                    </wcs-accordion>
+                                </wcs-accordion-content>
+                            </wcs-accordion-panel>
+                        </wcs-accordion>
+                    </wcs-accordion-content>
+                </wcs-accordion-panel>
+            </wcs-accordion>
+        `);
+        // When - Open all levels progressively
+        const level1Panel = page.locator('#level1-panel');
+        await level1Panel.click();
+        await page.waitForChanges();
+        const level2Panel = page.locator('#level2-panel');
+        await level2Panel.click();
+        await page.waitForChanges();
+        const level3Panel = page.locator('#level3-panel');
+        await level3Panel.click();
+        await page.waitForChanges();
+        // Then - All levels should be open
+        await expect(level1Panel).toHaveJSProperty('open', true);
+        await expect(level2Panel).toHaveJSProperty('open', true);
+        await expect(level3Panel).toHaveJSProperty('open', true);
+    });
+    test('should close other panels when dynamically adding a new open panel', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-accordion id="parent-accordion">
+                <wcs-accordion-panel id="parent-panel">
+                    <wcs-accordion-header>Configuration générale</wcs-accordion-header>
+                    <wcs-accordion-content>
+                        <wcs-accordion id="nested-accordion">
+                            <wcs-accordion-panel id="static-panel">
+                                <wcs-accordion-header>Paramètres utilisateur</wcs-accordion-header>
+                                <wcs-accordion-content>Gestion des préférences utilisateur</wcs-accordion-content>
+                            </wcs-accordion-panel>
+                        </wcs-accordion>
+                    </wcs-accordion-content>
+                </wcs-accordion-panel>
+            </wcs-accordion>
+        `);
+        // When - Open parent panel first
+        const parentPanel = page.locator('#parent-panel');
+        await parentPanel.click();
+        await page.waitForChanges();
+        // Then
+        await expect(parentPanel).toHaveJSProperty('open', true);
+        // When - Add first dynamic panel with open=true
+        await page.evaluate(() => {
+            const nestedAccordion = document.querySelector('#nested-accordion');
+            const dynamicPanel1 = document.createElement('wcs-accordion-panel');
+            dynamicPanel1.id = 'dynamic-panel-1';
+            dynamicPanel1.setAttribute('open', 'true');
+            dynamicPanel1.innerHTML = `
+                <wcs-accordion-header>Panel dynamique #1</wcs-accordion-header>
+                <wcs-accordion-content>Contenu dynamique 1</wcs-accordion-content>
+            `;
+            nestedAccordion.appendChild(dynamicPanel1);
+        });
+        await page.waitForChanges();
+        const staticPanel = page.locator('#static-panel');
+        const dynamicPanel1 = page.locator('#dynamic-panel-1');
+        // Then - Static panel should be closed, dynamic panel 1 should be open
+        await expect(staticPanel).toHaveJSProperty('open', false);
+        await expect(dynamicPanel1).toHaveJSProperty('open', true);
+        // When - Add second dynamic panel with open=true
+        await page.evaluate(() => {
+            const nestedAccordion = document.querySelector('#nested-accordion');
+            const dynamicPanel2 = document.createElement('wcs-accordion-panel');
+            dynamicPanel2.id = 'dynamic-panel-2';
+            dynamicPanel2.setAttribute('open', 'true');
+            dynamicPanel2.innerHTML = `
+                <wcs-accordion-header>Panel dynamique #2</wcs-accordion-header>
+                <wcs-accordion-content>Contenu dynamique 2</wcs-accordion-content>
+            `;
+            nestedAccordion.appendChild(dynamicPanel2);
+        });
+        await page.waitForChanges();
+        const dynamicPanel2 = page.locator('#dynamic-panel-2');
+        // Then - Dynamic panel 1 should be closed, dynamic panel 2 should be open
+        await expect(staticPanel).toHaveJSProperty('open', false);
+        await expect(dynamicPanel1).toHaveJSProperty('open', false);
+        await expect(dynamicPanel2).toHaveJSProperty('open', true);
+        // And - Parent panel should remain open (different accordion level)
+        await expect(parentPanel).toHaveJSProperty('open', true);
+    });
+});
+//# sourceMappingURL=accordion.e2e.playwright.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\nimport { expect } from \"@playwright/test\";\n\ntest.describe('accordion', () => {\n    test('should open and close accordion panels', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-accordion>\n                <wcs-accordion-panel>\n                    <wcs-accordion-header>Panel 1</wcs-accordion-header>\n                    <wcs-accordion-content>Content 1</wcs-accordion-content>\n                </wcs-accordion-panel>\n                <wcs-accordion-panel>\n                    <wcs-accordion-header>Panel 2</wcs-accordion-header>\n                    <wcs-accordion-content>Content 2</wcs-accordion-content>\n                </wcs-accordion-panel>\n            </wcs-accordion>\n        `);\n\n        const panels = page.locator('wcs-accordion-panel');\n\n        // When\n        await panels.nth(0).click();\n        await page.waitForChanges();\n\n        // Then\n        await expect(panels.nth(0)).toHaveJSProperty('open', true);\n        await expect(panels.nth(1)).toHaveJSProperty('open', false);\n    });\n\n    test('should close other panels when opening a new one at the same level', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-accordion>\n                <wcs-accordion-panel>\n                    <wcs-accordion-header>Panel 1</wcs-accordion-header>\n                    <wcs-accordion-content>Content 1</wcs-accordion-content>\n                </wcs-accordion-panel>\n                <wcs-accordion-panel>\n                    <wcs-accordion-header>Panel 2</wcs-accordion-header>\n                    <wcs-accordion-content>Content 2</wcs-accordion-content>\n                </wcs-accordion-panel>\n            </wcs-accordion>\n        `);\n\n        const panels = page.locator('wcs-accordion-panel');\n\n        // When - Open first panel\n        await panels.nth(0).click();\n        await page.waitForChanges();\n\n        // Then\n        await expect(panels.nth(0)).toHaveJSProperty('open', true);\n        await expect(panels.nth(1)).toHaveJSProperty('open', false);\n\n        // When - Open second panel\n        await panels.nth(1).click();\n        await page.waitForChanges();\n\n        // Then - First panel should be closed\n        await expect(panels.nth(0)).toHaveJSProperty('open', false);\n        await expect(panels.nth(1)).toHaveJSProperty('open', true);\n    });\n\n    test('should not close parent accordion when opening nested accordion', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-accordion>\n                <wcs-accordion-panel>\n                    <wcs-accordion-header>Parent Panel 1</wcs-accordion-header>\n                    <wcs-accordion-content>\n                        <p>Parent content</p>\n                        <wcs-accordion>\n                            <wcs-accordion-panel>\n                                <wcs-accordion-header>Child Panel 1</wcs-accordion-header>\n                                <wcs-accordion-content>Child content 1</wcs-accordion-content>\n                            </wcs-accordion-panel>\n                            <wcs-accordion-panel>\n                                <wcs-accordion-header>Child Panel 2</wcs-accordion-header>\n                                <wcs-accordion-content>Child content 2</wcs-accordion-content>\n                            </wcs-accordion-panel>\n                        </wcs-accordion>\n                    </wcs-accordion-content>\n                </wcs-accordion-panel>\n                <wcs-accordion-panel>\n                    <wcs-accordion-header>Parent Panel 2</wcs-accordion-header>\n                    <wcs-accordion-content>Parent content 2</wcs-accordion-content>\n                </wcs-accordion-panel>\n            </wcs-accordion>\n        `);\n\n        const parentPanels = page.locator('wcs-accordion > wcs-accordion-panel');\n\n        // When - Open parent panel first\n        await parentPanels.nth(0).click();\n        await page.waitForChanges();\n\n        // Then\n        await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);\n\n        // When - Open nested accordion panel\n        const nestedPanels = page.locator('wcs-accordion wcs-accordion wcs-accordion-panel');\n        await nestedPanels.nth(0).click();\n        await page.waitForChanges();\n\n        // Then - Parent should remain open, nested panel should be open\n        await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);\n        await expect(nestedPanels.nth(0)).toHaveJSProperty('open', true);\n    });\n\n    test('should not close nested accordions when opening another parent panel', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-accordion id=\"parent-accordion\">\n                <wcs-accordion-panel>\n                    <wcs-accordion-header>Parent Panel 1</wcs-accordion-header>\n                    <wcs-accordion-content>\n                        <wcs-accordion>\n                            <wcs-accordion-panel>\n                                <wcs-accordion-header>Child Panel 1</wcs-accordion-header>\n                                <wcs-accordion-content>Child content 1</wcs-accordion-content>\n                            </wcs-accordion-panel>\n                        </wcs-accordion>\n                    </wcs-accordion-content>\n                </wcs-accordion-panel>\n                <wcs-accordion-panel>\n                    <wcs-accordion-header>Parent Panel 2</wcs-accordion-header>\n                    <wcs-accordion-content>\n                        <wcs-accordion>\n                            <wcs-accordion-panel>\n                                <wcs-accordion-header>Child Panel 2</wcs-accordion-header>\n                                <wcs-accordion-content>Child content 2</wcs-accordion-content>\n                            </wcs-accordion-panel>\n                        </wcs-accordion>\n                    </wcs-accordion-content>\n                </wcs-accordion-panel>\n            </wcs-accordion>\n        `);\n\n        const parentPanels = page.locator('#parent-accordion > wcs-accordion-panel');\n\n        // When - Open first parent and its nested panel\n        await parentPanels.nth(0).click();\n        await page.waitForChanges();\n\n        const firstNestedPanel = page.locator('wcs-accordion > wcs-accordion-panel:first-child wcs-accordion-panel');\n        await firstNestedPanel.click();\n        await page.waitForChanges();\n\n        // Then\n        await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);\n        await expect(firstNestedPanel).toHaveJSProperty('open', true);\n\n        // When - Open second parent\n        await parentPanels.nth(1).click();\n        await page.waitForChanges();\n\n        const secondNestedPanel = page.locator('wcs-accordion > wcs-accordion-panel:nth-child(2) wcs-accordion-panel');\n\n        // Then - First parent should close but nested panel state should be preserved\n        await expect(parentPanels.nth(0)).toHaveJSProperty('open', false);\n        await expect(parentPanels.nth(1)).toHaveJSProperty('open', true);\n        await expect(firstNestedPanel).toHaveJSProperty('open', true); // Nested panel keeps its state\n        await expect(secondNestedPanel).toHaveJSProperty('open', false);\n    });\n\n    test('should handle deeply nested accordions independently', async ({ page,  }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-accordion id=\"level1-accordion\">\n                <wcs-accordion-panel id=\"level1-panel\">\n                    <wcs-accordion-header>Level 1</wcs-accordion-header>\n                    <wcs-accordion-content>\n                        <wcs-accordion id=\"level2-accordion\">\n                            <wcs-accordion-panel id=\"level2-panel\">\n                                <wcs-accordion-header>Level 2</wcs-accordion-header>\n                                <wcs-accordion-content>\n                                    <wcs-accordion id=\"level3-accordion\">\n                                        <wcs-accordion-panel id=\"level3-panel\">\n                                            <wcs-accordion-header>Level 3</wcs-accordion-header>\n                                            <wcs-accordion-content>Deep content</wcs-accordion-content>\n                                        </wcs-accordion-panel>\n                                    </wcs-accordion>\n                                </wcs-accordion-content>\n                            </wcs-accordion-panel>\n                        </wcs-accordion>\n                    </wcs-accordion-content>\n                </wcs-accordion-panel>\n            </wcs-accordion>\n        `);\n\n        // When - Open all levels progressively\n        const level1Panel = page.locator('#level1-panel');\n        await level1Panel.click();\n        await page.waitForChanges();\n\n        const level2Panel = page.locator('#level2-panel');\n        await level2Panel.click();\n        await page.waitForChanges();\n\n        const level3Panel = page.locator('#level3-panel');\n        await level3Panel.click();\n        await page.waitForChanges();\n\n        // Then - All levels should be open\n        await expect(level1Panel).toHaveJSProperty('open', true);\n        await expect(level2Panel).toHaveJSProperty('open', true);\n        await expect(level3Panel).toHaveJSProperty('open', true);\n    });\n\n    test('should close other panels when dynamically adding a new open panel', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-accordion id=\"parent-accordion\">\n                <wcs-accordion-panel id=\"parent-panel\">\n                    <wcs-accordion-header>Configuration générale</wcs-accordion-header>\n                    <wcs-accordion-content>\n                        <wcs-accordion id=\"nested-accordion\">\n                            <wcs-accordion-panel id=\"static-panel\">\n                                <wcs-accordion-header>Paramètres utilisateur</wcs-accordion-header>\n                                <wcs-accordion-content>Gestion des préférences utilisateur</wcs-accordion-content>\n                            </wcs-accordion-panel>\n                        </wcs-accordion>\n                    </wcs-accordion-content>\n                </wcs-accordion-panel>\n            </wcs-accordion>\n        `);\n\n        // When - Open parent panel first\n        const parentPanel = page.locator('#parent-panel');\n        await parentPanel.click();\n        await page.waitForChanges();\n\n        // Then\n        await expect(parentPanel).toHaveJSProperty('open', true);\n\n        // When - Add first dynamic panel with open=true\n        await page.evaluate(() => {\n            const nestedAccordion = document.querySelector('#nested-accordion');\n            const dynamicPanel1 = document.createElement('wcs-accordion-panel');\n            dynamicPanel1.id = 'dynamic-panel-1';\n            dynamicPanel1.setAttribute('open', 'true');\n            dynamicPanel1.innerHTML = `\n                <wcs-accordion-header>Panel dynamique #1</wcs-accordion-header>\n                <wcs-accordion-content>Contenu dynamique 1</wcs-accordion-content>\n            `;\n            nestedAccordion.appendChild(dynamicPanel1);\n        });\n        await page.waitForChanges();\n\n        const staticPanel = page.locator('#static-panel');\n        const dynamicPanel1 = page.locator('#dynamic-panel-1');\n\n        // Then - Static panel should be closed, dynamic panel 1 should be open\n        await expect(staticPanel).toHaveJSProperty('open', false);\n        await expect(dynamicPanel1).toHaveJSProperty('open', true);\n\n        // When - Add second dynamic panel with open=true\n        await page.evaluate(() => {\n            const nestedAccordion = document.querySelector('#nested-accordion');\n            const dynamicPanel2 = document.createElement('wcs-accordion-panel');\n            dynamicPanel2.id = 'dynamic-panel-2';\n            dynamicPanel2.setAttribute('open', 'true');\n            dynamicPanel2.innerHTML = `\n                <wcs-accordion-header>Panel dynamique #2</wcs-accordion-header>\n                <wcs-accordion-content>Contenu dynamique 2</wcs-accordion-content>\n            `;\n            nestedAccordion.appendChild(dynamicPanel2);\n        });\n        await page.waitForChanges();\n\n        const dynamicPanel2 = page.locator('#dynamic-panel-2');\n\n        // Then - Dynamic panel 1 should be closed, dynamic panel 2 should be open\n        await expect(staticPanel).toHaveJSProperty('open', false);\n        await expect(dynamicPanel1).toHaveJSProperty('open', false);\n        await expect(dynamicPanel2).toHaveJSProperty('open', true);\n\n        // And - Parent panel should remain open (different accordion level)\n        await expect(parentPanel).toHaveJSProperty('open', true);\n    });\n});\n"]}

package/dist/collection/components/accordion/accordion.js

@@ -38,8 +38,12 @@ export class Accordion {
             opt.groupContentWithHeader = this.groupContentWithHeader;
         });
     }
+    handleSlotChange() {
+        // Refresh the list of accordion panels to include dynamically added ones
+        this.accordionPanels = this.getAllAccordionPanelsFromHostElement();
+    }
     render() {
-        return (h(Host, { key: '0f1933aeff3cc2d73e6fc5051bac74656e418a02' }, h("slot", { key: 'effc61fd6ac1edcb598d9bc4053363030a1fc2e9' })));
+        return (h(Host, { key: 'ba2036b6e1aef2af13f96172fcf39726490c09ab' }, h("slot", { key: '89202c68bf64011fb0f6a8b7e487934a6129c9ea', onSlotchange: this.handleSlotChange.bind(this) })));
     }
     getAllAccordionPanelsFromHostElement() {
         return Array.from(this.el.children)

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEjF;;;;GAIG;AAMH,MAAM,OAAO,SAAS;;QAEV,oBAAe,GAAmC,EAAE,CAAC;8BAMZ,IAAI;yBAOT,KAAK;sCASQ,KAAK;;IAE9D,iBAAiB;QACb,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,oCAAoC,EAAE,CAAC;QAEnE,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACnC,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,4BAA4B,EAAE,CAAC;IACxC,CAAC;IAGD,oBAAoB,CAAC,KAA2B;QAC5C,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACjC,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACf,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAChD,CAAC;IACL,CAAC;IAGO,2BAA2B;QAC/B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAC7C,CAAC,CAAC,CAAA;IACN,CAAC;IAGO,sBAAsB;QAC1B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACnC,CAAC,CAAC,CAAA;IACN,CAAC;IAEO,4BAA4B;QAChC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC;QAC7D,CAAC,CAAC,CAAA;IACN,CAAC;IAGD,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,8DAAO,CACJ,CACV,CAAC;IACN,CAAC;IAEO,oCAAoC;QACxC,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;aAC9B,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,KAAK,qBAAqB,CAAmC,CAAC;IAC9F,CAAC;IAED;;OAEG;IACK,wBAAwB,CAAC,WAAwB;QACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;IAChF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * The accordion component is a vertical stack of interactive headings used to toggle the display of further information.\n * \n * @cssprop --wcs-accordion-gap - Gap between accordion panels\n */\n@Component({\n    tag: 'wcs-accordion',\n    styleUrl: 'accordion.scss',\n    shadow: true\n})\nexport class Accordion {\n    @Element() private el!: HTMLWcsAccordionElement;\n    private accordionPanels: HTMLWcsAccordionPanelElement[] = [];\n\n    /**\n     * Specifies whether accordion-panel components should display the open/close text.\n     * if false, it won't show the open/close text in all accordion-panel.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = true;\n\n    /**\n     * Specifies whether accordion-panel components should highlight when open with primary color.\n     * if true, the background color of the accordion-panel will be the primary color.\n     * if false, the background color of the accordion-panel will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * @deprecated **The content is now always grouped with the panel header**\n     * \n     * ~~Specifies whether accordion-panel components should group the content with header in one card~~\n     * ~~if true, there will be only one card with the header and the content~~\n     * ~~Nothing change when the panel is close~~\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    componentWillLoad(): Promise<void> | void {\n        this.accordionPanels = this.getAllAccordionPanelsFromHostElement();\n\n        this.updateHideActiontextOnPanel();\n        this.updateHighlightOnPanel();\n        this.updateGroupContentWithHeader();\n    }\n\n    @Listen('wcsOpenChange')\n    wcsOpenChangeHandler(event: CustomEvent<boolean>) {\n        event.stopImmediatePropagation();\n        if (event.detail) {\n            this.closeAllAccordionsExcept(event.target);\n        }\n    }\n\n    @Watch('hideActionText')\n    private updateHideActiontextOnPanel() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.hideActionText = this.hideActionText;\n        })\n    }\n\n    @Watch('highlight')\n    private updateHighlightOnPanel() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.highlight = this.highlight;\n        })\n    }\n    @Watch('groupContentWithHeader')\n    private updateGroupContentWithHeader() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.groupContentWithHeader = this.groupContentWithHeader;\n        })\n    }\n\n\n    render() {\n        return (\n            <Host>\n                <slot/>\n            </Host>\n        );\n    }\n\n    private getAllAccordionPanelsFromHostElement(): HTMLWcsAccordionPanelElement[] {\n        return Array.from(this.el.children)\n            .filter(el => el.tagName === 'WCS-ACCORDION-PANEL') as HTMLWcsAccordionPanelElement[];\n    }\n\n    /**\n     * Close all accordion panels except the one that match the eventTarget reference\n     */\n    private closeAllAccordionsExcept(eventTarget: EventTarget): void {\n        this.accordionPanels.filter(a => a !== eventTarget).forEach(a => a.close());\n    }\n}\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEjF;;;;GAIG;AAMH,MAAM,OAAO,SAAS;;QAEV,oBAAe,GAAmC,EAAE,CAAC;8BAMZ,IAAI;yBAOT,KAAK;sCASQ,KAAK;;IAE9D,iBAAiB;QACb,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,oCAAoC,EAAE,CAAC;QAEnE,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACnC,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,4BAA4B,EAAE,CAAC;IACxC,CAAC;IAGD,oBAAoB,CAAC,KAA2B;QAC5C,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACjC,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACf,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAChD,CAAC;IACL,CAAC;IAGO,2BAA2B;QAC/B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;QAC7C,CAAC,CAAC,CAAA;IACN,CAAC;IAGO,sBAAsB;QAC1B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACnC,CAAC,CAAC,CAAA;IACN,CAAC;IAEO,4BAA4B;QAChC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,GAAiC,EAAE,EAAE;YAC/D,GAAG,CAAC,sBAAsB,GAAG,IAAI,CAAC,sBAAsB,CAAC;QAC7D,CAAC,CAAC,CAAA;IACN,CAAC;IAEO,gBAAgB;QACpB,yEAAyE;QACzE,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,oCAAoC,EAAE,CAAC;IACvE,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAI,CACrD,CACV,CAAC;IACN,CAAC;IAEO,oCAAoC;QACxC,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;aAC9B,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,KAAK,qBAAqB,CAAmC,CAAC;IAC9F,CAAC;IAED;;OAEG;IACK,wBAAwB,CAAC,WAAwB;QACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;IAChF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, Watch } from '@stencil/core';\n\n/**\n * The accordion component is a vertical stack of interactive headings used to toggle the display of further information.\n * \n * @cssprop --wcs-accordion-gap - Gap between accordion panels\n */\n@Component({\n    tag: 'wcs-accordion',\n    styleUrl: 'accordion.scss',\n    shadow: true\n})\nexport class Accordion {\n    @Element() private el!: HTMLWcsAccordionElement;\n    private accordionPanels: HTMLWcsAccordionPanelElement[] = [];\n\n    /**\n     * Specifies whether accordion-panel components should display the open/close text.\n     * if false, it won't show the open/close text in all accordion-panel.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = true;\n\n    /**\n     * Specifies whether accordion-panel components should highlight when open with primary color.\n     * if true, the background color of the accordion-panel will be the primary color.\n     * if false, the background color of the accordion-panel will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * @deprecated **The content is now always grouped with the panel header**\n     * \n     * ~~Specifies whether accordion-panel components should group the content with header in one card~~\n     * ~~if true, there will be only one card with the header and the content~~\n     * ~~Nothing change when the panel is close~~\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    componentWillLoad(): Promise<void> | void {\n        this.accordionPanels = this.getAllAccordionPanelsFromHostElement();\n\n        this.updateHideActiontextOnPanel();\n        this.updateHighlightOnPanel();\n        this.updateGroupContentWithHeader();\n    }\n\n    @Listen('wcsOpenChange')\n    wcsOpenChangeHandler(event: CustomEvent<boolean>) {\n        event.stopImmediatePropagation();\n        if (event.detail) {\n            this.closeAllAccordionsExcept(event.target);\n        }\n    }\n\n    @Watch('hideActionText')\n    private updateHideActiontextOnPanel() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.hideActionText = this.hideActionText;\n        })\n    }\n\n    @Watch('highlight')\n    private updateHighlightOnPanel() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.highlight = this.highlight;\n        })\n    }\n    @Watch('groupContentWithHeader')\n    private updateGroupContentWithHeader() {\n        this.accordionPanels.forEach((opt: HTMLWcsAccordionPanelElement) => {\n            opt.groupContentWithHeader = this.groupContentWithHeader;\n        })\n    }\n\n    private handleSlotChange() {\n        // Refresh the list of accordion panels to include dynamically added ones\n        this.accordionPanels = this.getAllAccordionPanelsFromHostElement();\n    }\n\n    render() {\n        return (\n            <Host>\n                <slot onSlotchange={this.handleSlotChange.bind(this)} />\n            </Host>\n        );\n    }\n\n    private getAllAccordionPanelsFromHostElement(): HTMLWcsAccordionPanelElement[] {\n        return Array.from(this.el.children)\n            .filter(el => el.tagName === 'WCS-ACCORDION-PANEL') as HTMLWcsAccordionPanelElement[];\n    }\n\n    /**\n     * Close all accordion panels except the one that match the eventTarget reference\n     */\n    private closeAllAccordionsExcept(eventTarget: EventTarget): void {\n        this.accordionPanels.filter(a => a !== eventTarget).forEach(a => a.close());\n    }\n}\n"]}

package/dist/collection/components/accordion-panel/accordion-panel.js

@@ -45,6 +45,7 @@ export class AccordionPanel {
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ACCORDION_INHERITED_ATTRS));
+        this.openChange(this.open);
     }
     async setAriaAttribute(attr, value) {
         setOrRemoveAttribute(this.nativeButton, attr, value);
@@ -53,7 +54,7 @@ export class AccordionPanel {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: 'bcd77b8240481d974555978566472aa28fd374d4' }, h("button", Object.assign({ key: '5fde3c3d7fe95a9a685ef3b9f03b0344fdf7d1be', "aria-expanded": this.open ? "true" : "false", "aria-controls": "content", class: "header", ref: (el) => this.nativeButton = el, onClick: () => this.open = !this.open }, this.inheritedAttributes), h("slot", { key: '05bd17435fa8821e26d7df49305f2dd331783fb4', name: "header" }), h("span", { key: 'a25b3acc00d4c00675fadfdbabb3c6173d0b9efa', class: "header-action" }, !this.hideActionText && (h("span", { key: '5979042236883a5181471bad831dbe90d7518047' }, this.open ? 'Fermez' : 'Ouvrez')), h(SelectArrow, { key: '8f918ddaef3b7d01c271ce39e0ffe614af33fe8e', up: this.open }))), h("div", { key: '594f012cfe62aa5eb1d8cd2184af7a87ff9f3adb', class: "content", id: "content" }, h("slot", { key: '040d3ba0ec7d879341fc3c7a563f1b3b84659564', name: "content" }))));
+        return (h(Host, { key: 'e8a0d26ab4355bad7a351a672de03a9be460db41' }, h("button", Object.assign({ key: '8a8b6657ffe8508fa8051e836289e262c248e20d', "aria-expanded": this.open ? "true" : "false", "aria-controls": "content", class: "header", ref: (el) => this.nativeButton = el, onClick: () => this.open = !this.open }, this.inheritedAttributes), h("slot", { key: '7addb6db5a516834dc2f27b7b00b655aa228548e', name: "header" }), h("span", { key: 'f97d43a2c46ea36fb19aacc35744f60abf3467ce', class: "header-action" }, !this.hideActionText && (h("span", { key: 'f40a6b43deccc8a4436d8f267b5763cb75a8c074' }, this.open ? 'Fermez' : 'Ouvrez')), h(SelectArrow, { key: '28f6eb62c4e99c4d5c82afffc222c07e65ac30a2', up: this.open }))), h("div", { key: '7950a5031c2b6319054bb237be7b5b5a709158cd', class: "content", id: "content" }, h("slot", { key: 'bddb7506e586b90552ce6211418d7d2852a431f1', name: "content" }))));
     }
     static get is() { return "wcs-accordion-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -168,7 +169,7 @@ export class AccordionPanel {
                     "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/accordion-panel/accordion-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-panel.js","sourceRoot":"","sources":["../../../src/components/accordion-panel/accordion-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAErG,MAAM,yBAAyB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAMH,MAAM,OAAO,cAAc;;QAGf,wBAAmB,GAAyB,EAAE,CAAC;oBAED,KAAK;8BAMV,KAAK;yBAOV,KAAK;sCAOQ,KAAK;;IAU9D,UAAU,CAAC,QAAiB;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,yBAAyB,CAAC,CAC3D,CAAC;IACN,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACzD,CAAC;IAGD,KAAK,CAAC,KAAK;QACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACtB,CAAC;IAED,MAAM;QAIF,OAAO,CACH,EAAC,IAAI;YACD,8FAAuB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAA,CAAC,CAAC,OAAO,mBAC5B,SAAS,EACvB,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IACjC,IAAI,CAAC,mBAAmB;gBAChC,6DAAM,IAAI,EAAC,QAAQ,GAAE;gBACrB,6DAAM,KAAK,EAAC,eAAe;oBACtB,CAAC,IAAI,CAAC,cAAc,IAAI,CACrB,+DAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAQ,CAAC;oBAEnD,EAAC,WAAW,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAC1B,CACF;YACT,4DAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS;gBAC7B,6DAAM,IAAI,EAAC,SAAS,GAAE,CACpB,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst ACCORDION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The accordion-panel is a subcomponent of `wcs-accordion`. It represents every panel of the accordion that can be expanded.\n * \n *\n * @cssprop --wcs-accordion-panel-color-default - Default color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-highlight - Highlight color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-hover - Hover color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-press - Press color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-default - Default action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-highlight - Highlight action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-hover - Hovered action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-press - Pressed action color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-default - Default background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-highlight - Highlight background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-hover - Hover background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-press - Press background color of the accordion panel\n * @cssprop --wcs-accordion-panel-header-font-size - Font size of the accordion panel header\n * @cssprop --wcs-accordion-panel-header-font-weight - Font weight of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-radius - Border radius of the accordion panel\n * @cssprop --wcs-accordion-panel-border-radius-open - Border radius of the open accordion panel\n * @cssprop --wcs-accordion-panel-padding-vertical - Vertical padding of the accordion panel\n * @cssprop --wcs-accordion-panel-padding-horizontal - Horizontal padding of the accordion panel\n * @cssprop --wcs-accordion-panel-header-border-width - Border width of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-width - Border width of the accordion panel\n * @cssprop --wcs-accordion-panel-border-width-focus - Border width of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-color - Border color of the accordion panel\n * @cssprop --wcs-accordion-panel-border-color-focus - Border color of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-style-focus - Border style of the accordion panel when focused\n * @cssprop --wcs-accordion-transition-duration - Transition duration of the accordion panel\n */\n@Component({\n    tag: 'wcs-accordion-panel',\n    styleUrl: 'accordion-panel.scss',\n    shadow: true\n})\nexport class AccordionPanel implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @Prop({reflect: true, mutable: true}) open: boolean = false;\n\n    /**\n     * Specifies whether the component should display the open/close text.\n     * if false, it won't show the open/close text.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = false;\n\n    /**\n     * Specifies whether the component should highlight when open with primary color.\n     * if true, the background color will be the primary color.\n     * if false, the background color will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * Specifies wether the component should group the content with header in one card\n     * if true, there will be only one card with the header and the content\n     * Nothing change when the panel is close\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    /**\n     * Emitted when the open property changes.  \n     * Note that this event is stopped from propagating when using the component inside a wcs-accordion as the \n     * accordion handles the open state of its accordion-panel children.\n     */\n    @Event() wcsOpenChange!: EventEmitter<boolean>;\n\n    @Watch('open')\n    openChange(newValue: boolean) {\n        this.wcsOpenChange.emit(newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, ACCORDION_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    @Method()\n    async close() {\n        this.open = false;\n    }\n\n    render() {\n  \n  \n  \n        return (\n            <Host>\n                <button aria-expanded={this.open ? \"true\": \"false\"}\n                        aria-controls=\"content\"\n                        class=\"header\"\n                        ref={(el) => this.nativeButton = el}\n                        onClick={() => this.open = !this.open}\n                        {...this.inheritedAttributes}>\n                    <slot name=\"header\"/>\n                    <span class=\"header-action\">\n                        {!this.hideActionText && (\n                            <span>{this.open ? 'Fermez' : 'Ouvrez'}</span>)\n                        }\n                        <SelectArrow up={this.open}/>\n                    </span>\n                </button>\n                <div class=\"content\" id=\"content\">\n                    <slot name=\"content\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"accordion-panel.js","sourceRoot":"","sources":["../../../src/components/accordion-panel/accordion-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAErG,MAAM,yBAAyB,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAMH,MAAM,OAAO,cAAc;;QAGf,wBAAmB,GAAyB,EAAE,CAAC;oBAED,KAAK;8BAMV,KAAK;yBAOV,KAAK;sCAOQ,KAAK;;IAU9D,UAAU,CAAC,QAAiB;QACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC;IAED,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,yBAAyB,CAAC,CAC3D,CAAC;QACF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACzD,CAAC;IAGD,KAAK,CAAC,KAAK;QACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACtB,CAAC;IAED,MAAM;QAIF,OAAO,CACH,EAAC,IAAI;YACD,8FAAuB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAA,CAAC,CAAC,OAAO,mBAC5B,SAAS,EACvB,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IACjC,IAAI,CAAC,mBAAmB;gBAChC,6DAAM,IAAI,EAAC,QAAQ,GAAE;gBACrB,6DAAM,KAAK,EAAC,eAAe;oBACtB,CAAC,IAAI,CAAC,cAAc,IAAI,CACrB,+DAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAQ,CAAC;oBAEnD,EAAC,WAAW,qDAAC,EAAE,EAAE,IAAI,CAAC,IAAI,GAAG,CAC1B,CACF;YACT,4DAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS;gBAC7B,6DAAM,IAAI,EAAC,SAAS,GAAE,CACpB,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport { SelectArrow } from '../select/select-arrow';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst ACCORDION_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The accordion-panel is a subcomponent of `wcs-accordion`. It represents every panel of the accordion that can be expanded.\n * \n *\n * @cssprop --wcs-accordion-panel-color-default - Default color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-highlight - Highlight color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-hover - Hover color of the accordion panel\n * @cssprop --wcs-accordion-panel-color-press - Press color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-default - Default action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-highlight - Highlight action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-hover - Hovered action color of the accordion panel\n * @cssprop --wcs-accordion-panel-action-color-press - Pressed action color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-default - Default background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-highlight - Highlight background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-hover - Hover background color of the accordion panel\n * @cssprop --wcs-accordion-panel-background-color-press - Press background color of the accordion panel\n * @cssprop --wcs-accordion-panel-header-font-size - Font size of the accordion panel header\n * @cssprop --wcs-accordion-panel-header-font-weight - Font weight of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-radius - Border radius of the accordion panel\n * @cssprop --wcs-accordion-panel-border-radius-open - Border radius of the open accordion panel\n * @cssprop --wcs-accordion-panel-padding-vertical - Vertical padding of the accordion panel\n * @cssprop --wcs-accordion-panel-padding-horizontal - Horizontal padding of the accordion panel\n * @cssprop --wcs-accordion-panel-header-border-width - Border width of the accordion panel header\n * @cssprop --wcs-accordion-panel-border-width - Border width of the accordion panel\n * @cssprop --wcs-accordion-panel-border-width-focus - Border width of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-color - Border color of the accordion panel\n * @cssprop --wcs-accordion-panel-border-color-focus - Border color of the accordion panel when focused\n * @cssprop --wcs-accordion-panel-border-style-focus - Border style of the accordion panel when focused\n * @cssprop --wcs-accordion-transition-duration - Transition duration of the accordion panel\n */\n@Component({\n    tag: 'wcs-accordion-panel',\n    styleUrl: 'accordion-panel.scss',\n    shadow: true\n})\nexport class AccordionPanel implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeButton?: HTMLButtonElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    @Prop({reflect: true, mutable: true}) open: boolean = false;\n\n    /**\n     * Specifies whether the component should display the open/close text.\n     * if false, it won't show the open/close text.\n     */\n    @Prop({reflect: true}) hideActionText: boolean = false;\n\n    /**\n     * Specifies whether the component should highlight when open with primary color.\n     * if true, the background color will be the primary color.\n     * if false, the background color will be wcs-light.\n     */\n    @Prop({reflect: true}) highlight: boolean = false;\n\n    /**\n     * Specifies wether the component should group the content with header in one card\n     * if true, there will be only one card with the header and the content\n     * Nothing change when the panel is close\n     */\n    @Prop({reflect: true}) groupContentWithHeader: boolean = false;\n\n    /**\n     * Emitted when the open property changes.  \n     * Note that this event is stopped from propagating when using the component inside a wcs-accordion as the \n     * accordion handles the open state of its accordion-panel children.\n     */\n    @Event() wcsOpenChange!: EventEmitter<boolean>;\n\n    @Watch('open')\n    openChange(newValue: boolean) {\n        this.wcsOpenChange.emit(newValue);\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, ACCORDION_INHERITED_ATTRS),\n        };\n        this.openChange(this.open);\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeButton, attr, value);\n    }\n\n    @Method()\n    async close() {\n        this.open = false;\n    }\n\n    render() {\n  \n  \n  \n        return (\n            <Host>\n                <button aria-expanded={this.open ? \"true\": \"false\"}\n                        aria-controls=\"content\"\n                        class=\"header\"\n                        ref={(el) => this.nativeButton = el}\n                        onClick={() => this.open = !this.open}\n                        {...this.inheritedAttributes}>\n                    <slot name=\"header\"/>\n                    <span class=\"header-action\">\n                        {!this.hideActionText && (\n                            <span>{this.open ? 'Fermez' : 'Ouvrez'}</span>)\n                        }\n                        <SelectArrow up={this.open}/>\n                    </span>\n                </button>\n                <div class=\"content\" id=\"content\">\n                    <slot name=\"content\"/>\n                </div>\n            </Host>\n        );\n    }\n}\n"]}

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

@@ -0,0 +1,125 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+const WAITING_DELAY_BEFORE_ASSERTIONS = 4000;
+test.describe('alert', () => {
+    test('should display title and subtitle content', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-alert>
+                <span slot="title">Test Title</span>
+                <span slot="subtitle">Test Subtitle</span>
+            </wcs-alert>
+        `);
+        // Then
+        const title = page.locator('wcs-alert > [slot="title"]');
+        const subtitle = page.locator('wcs-alert > [slot="subtitle"]');
+        await expect(title).toHaveText('Test Title');
+        await expect(subtitle).toHaveText('Test Subtitle');
+    });
+    test('should emit wcsAlertDismiss event when close button is clicked', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-alert>
+                <span slot="title">Test Title</span>
+                <span slot="subtitle">Test Subtitle</span>
+            </wcs-alert>
+        `);
+        const alertDismissSpy = await page.spyOnEvent('wcsAlertDismiss');
+        const alert = page.locator('wcs-alert');
+        const closeButton = alert.locator('.close-button');
+        // When
+        await closeButton.click();
+        await page.waitForChanges();
+        // Then
+        expect(alertDismissSpy).toHaveReceivedEventTimes(1);
+        await expect(alert).toHaveJSProperty('show', false);
+    });
+    test('should auto-dismiss after timeout', async ({ page }) => {
+        // Given
+        const timeout = 500;
+        await setWcsContent(page, `
+            <wcs-alert timeout="${timeout}">
+                <span slot="title">Test Title</span>
+                <span slot="subtitle">Test Subtitle</span>
+            </wcs-alert>
+        `);
+        const alertDismissSpy = await page.spyOnEvent('wcsAlertDismiss');
+        const alert = page.locator('wcs-alert');
+        // Wait longer than the specified timeout to account for processing time
+        await page.waitForTimeout(timeout + WAITING_DELAY_BEFORE_ASSERTIONS);
+        await page.waitForChanges();
+        // Then
+        expect(alertDismissSpy).toHaveReceivedEventTimes(1);
+        await expect(alert).toHaveJSProperty('show', false);
+    });
+    test('should not auto-dismiss if timeout is 0', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-alert timeout="0">
+                <span slot="title">Test Title</span>
+                <span slot="subtitle">Test Subtitle</span>
+            </wcs-alert>
+        `);
+        const alertDismissSpy = await page.spyOnEvent('wcsAlertDismiss');
+        const alert = page.locator('wcs-alert');
+        // Wait for some time to ensure the alert doesn't auto-dismiss
+        await page.waitForTimeout(WAITING_DELAY_BEFORE_ASSERTIONS);
+        await page.waitForChanges();
+        // Then
+        expect(alertDismissSpy).toHaveReceivedEventTimes(0);
+        await expect(alert).toHaveJSProperty('show', true);
+    });
+    test('should display progress bar when showProgressBar is true', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-alert show-progress-bar>
+                <span slot="title">Test Title</span>
+                <span slot="subtitle">Test Subtitle</span>
+            </wcs-alert>
+        `);
+        // Then
+        const progressBar = page.locator('wcs-alert').locator('.progress-bar:not(.hidden)');
+        await expect(progressBar).toBeVisible();
+    });
+    test('should not display progress bar when showProgressBar is false', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-alert>
+                <span slot="title">Test Title</span>
+                <span slot="subtitle">Test Subtitle</span>
+            </wcs-alert>
+        `);
+        // Then
+        const progressBar = page.locator('wcs-alert').locator('.progress-bar.hidden');
+        await expect(progressBar).toHaveCount(1);
+    });
+    test('should not auto-dismiss when mouse is hovering', async ({ page }) => {
+        // Given
+        const timeout = 500;
+        await setWcsContent(page, `
+            <wcs-alert timeout="${timeout}">
+                <span slot="title">Test Title</span>
+                <span slot="subtitle">Test Subtitle</span>
+            </wcs-alert>
+        `);
+        const alertDismissHover = await page.spyOnEvent('wcsAlertDismiss');
+        const alert = page.locator('wcs-alert');
+        await expect(alert).toHaveJSProperty('show', true);
+        // Simulate mouse hover
+        await alert.dispatchEvent('mouseover');
+        // Wait longer than the component timeout
+        await page.waitForTimeout(timeout + 500);
+        await page.waitForChanges();
+        // Then - The alert should still be visible while mouse is hovering
+        expect(alertDismissHover).toHaveReceivedEventTimes(0);
+        await expect(alert).toHaveJSProperty('show', true);
+        // When - Mouse leaves using dispatchEvent
+        await alert.dispatchEvent('mouseout');
+        await page.waitForChanges();
+        // Then - The alert should dismiss
+        expect(alertDismissHover).toHaveReceivedEventTimes(1);
+        await expect(alert).toHaveJSProperty('show', false);
+    });
+});
+//# sourceMappingURL=alert.e2e.playwright.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/alert/alert.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\nimport { expect } from \"@playwright/test\";\nconst WAITING_DELAY_BEFORE_ASSERTIONS = 4_000;\n\ntest.describe('alert', () => {\n    test('should display title and subtitle content', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-alert>\n                <span slot=\"title\">Test Title</span>\n                <span slot=\"subtitle\">Test Subtitle</span>\n            </wcs-alert>\n        `);\n\n        // Then\n        const title = page.locator('wcs-alert > [slot=\"title\"]');\n        const subtitle = page.locator('wcs-alert > [slot=\"subtitle\"]');\n        await expect(title).toHaveText('Test Title');\n        await expect(subtitle).toHaveText('Test Subtitle');\n    });\n\n    test('should emit wcsAlertDismiss event when close button is clicked', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-alert>\n                <span slot=\"title\">Test Title</span>\n                <span slot=\"subtitle\">Test Subtitle</span>\n            </wcs-alert>\n        `);\n\n        const alertDismissSpy = await page.spyOnEvent('wcsAlertDismiss');\n\n        const alert = page.locator('wcs-alert');\n        const closeButton = alert.locator('.close-button');\n\n        // When\n        await closeButton.click();\n        await page.waitForChanges();\n\n        // Then\n        expect(alertDismissSpy).toHaveReceivedEventTimes(1);\n        await expect(alert).toHaveJSProperty('show', false);\n    });\n\n    test('should auto-dismiss after timeout', async ({ page }: { page: E2EPage }) => {\n        // Given\n        const timeout = 500;\n        await setWcsContent(page, `\n            <wcs-alert timeout=\"${timeout}\">\n                <span slot=\"title\">Test Title</span>\n                <span slot=\"subtitle\">Test Subtitle</span>\n            </wcs-alert>\n        `);\n\n        const alertDismissSpy = await page.spyOnEvent('wcsAlertDismiss');\n\n        const alert = page.locator('wcs-alert');\n\n        // Wait longer than the specified timeout to account for processing time\n        await page.waitForTimeout(timeout + WAITING_DELAY_BEFORE_ASSERTIONS);\n        await page.waitForChanges();\n\n        // Then\n        expect(alertDismissSpy).toHaveReceivedEventTimes(1);\n        await expect(alert).toHaveJSProperty('show', false);\n    });\n\n    test('should not auto-dismiss if timeout is 0', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-alert timeout=\"0\">\n                <span slot=\"title\">Test Title</span>\n                <span slot=\"subtitle\">Test Subtitle</span>\n            </wcs-alert>\n        `);\n\n        const alertDismissSpy = await page.spyOnEvent('wcsAlertDismiss');\n\n        const alert = page.locator('wcs-alert');\n\n        // Wait for some time to ensure the alert doesn't auto-dismiss\n        await page.waitForTimeout(WAITING_DELAY_BEFORE_ASSERTIONS);\n        await page.waitForChanges();\n\n        // Then\n        expect(alertDismissSpy).toHaveReceivedEventTimes(0);\n        await expect(alert).toHaveJSProperty('show', true);\n    });\n\n    test('should display progress bar when showProgressBar is true', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-alert show-progress-bar>\n                <span slot=\"title\">Test Title</span>\n                <span slot=\"subtitle\">Test Subtitle</span>\n            </wcs-alert>\n        `);\n\n        // Then\n        const progressBar = page.locator('wcs-alert').locator('.progress-bar:not(.hidden)');\n        await expect(progressBar).toBeVisible();\n    });\n\n    test('should not display progress bar when showProgressBar is false', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-alert>\n                <span slot=\"title\">Test Title</span>\n                <span slot=\"subtitle\">Test Subtitle</span>\n            </wcs-alert>\n        `);\n\n        // Then\n        const progressBar = page.locator('wcs-alert').locator('.progress-bar.hidden');\n        await expect(progressBar).toHaveCount(1);\n    });\n\n    test('should not auto-dismiss when mouse is hovering', async ({ page }: { page: E2EPage }) => {\n        // Given\n        const timeout = 500;\n        await setWcsContent(page, `\n            <wcs-alert timeout=\"${timeout}\">\n                <span slot=\"title\">Test Title</span>\n                <span slot=\"subtitle\">Test Subtitle</span>\n            </wcs-alert>\n        `);\n\n        const alertDismissHover = await page.spyOnEvent('wcsAlertDismiss');\n\n        const alert = page.locator('wcs-alert');\n\n        await expect(alert).toHaveJSProperty('show', true);\n\n        // Simulate mouse hover\n        await alert.dispatchEvent('mouseover');\n\n        // Wait longer than the component timeout\n        await page.waitForTimeout(timeout + 500);\n        await page.waitForChanges();\n\n        // Then - The alert should still be visible while mouse is hovering\n        expect(alertDismissHover).toHaveReceivedEventTimes(0);\n        await expect(alert).toHaveJSProperty('show', true);\n\n        // When - Mouse leaves using dispatchEvent\n        await alert.dispatchEvent('mouseout');\n        await page.waitForChanges();\n\n        // Then - The alert should dismiss\n        expect(alertDismissHover).toHaveReceivedEventTimes(1);\n        await expect(alert).toHaveJSProperty('show', false);\n    });\n});\n"]}