wcs-core 7.3.0 → 7.4.0

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.js → accordion.e2e.playwright.js}

@@ -1,9 +1,9 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { setWcsContent } from "../../utils/tests";
-describe('accordion', () => {
-    it('should open and close accordion panels', async () => {
+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
-        const page = await newE2EPage();
         await setWcsContent(page, `
             <wcs-accordion>
                 <wcs-accordion-panel>
@@ -16,17 +16,16 @@ describe('accordion', () => {
                 </wcs-accordion-panel>
             </wcs-accordion>
         `);
-        const panels = await page.findAll('wcs-accordion-panel');
+        const panels = page.locator('wcs-accordion-panel');
         // When
-        await panels[0].click();
+        await panels.nth(0).click();
         await page.waitForChanges();
         // Then
-        expect(await panels[0].getProperty('open')).toBe(true);
-        expect(await panels[1].getProperty('open')).toBe(false);
+        await expect(panels.nth(0)).toHaveJSProperty('open', true);
+        await expect(panels.nth(1)).toHaveJSProperty('open', false);
     });
-    it('should close other panels when opening a new one at the same level', async () => {
+    test('should close other panels when opening a new one at the same level', async ({ page }) => {
         // Given
-        const page = await newE2EPage();
         await setWcsContent(page, `
             <wcs-accordion>
                 <wcs-accordion-panel>
@@ -39,23 +38,22 @@ describe('accordion', () => {
                 </wcs-accordion-panel>
             </wcs-accordion>
         `);
-        const panels = await page.findAll('wcs-accordion-panel');
+        const panels = page.locator('wcs-accordion-panel');
         // When - Open first panel
-        await panels[0].click();
+        await panels.nth(0).click();
         await page.waitForChanges();
         // Then
-        expect(await panels[0].getProperty('open')).toBe(true);
-        expect(await panels[1].getProperty('open')).toBe(false);
+        await expect(panels.nth(0)).toHaveJSProperty('open', true);
+        await expect(panels.nth(1)).toHaveJSProperty('open', false);
         // When - Open second panel
-        await panels[1].click();
+        await panels.nth(1).click();
         await page.waitForChanges();
         // Then - First panel should be closed
-        expect(await panels[0].getProperty('open')).toBe(false);
-        expect(await panels[1].getProperty('open')).toBe(true);
+        await expect(panels.nth(0)).toHaveJSProperty('open', false);
+        await expect(panels.nth(1)).toHaveJSProperty('open', true);
     });
-    it('should not close parent accordion when opening nested accordion', async () => {
+    test('should not close parent accordion when opening nested accordion', async ({ page }) => {
         // Given
-        const page = await newE2EPage();
         await setWcsContent(page, `
             <wcs-accordion>
                 <wcs-accordion-panel>
@@ -80,23 +78,22 @@ describe('accordion', () => {
                 </wcs-accordion-panel>
             </wcs-accordion>
         `);
-        const parentPanels = await page.findAll('wcs-accordion > wcs-accordion-panel');
+        const parentPanels = page.locator('wcs-accordion > wcs-accordion-panel');
         // When - Open parent panel first
-        await parentPanels[0].click();
+        await parentPanels.nth(0).click();
         await page.waitForChanges();
         // Then
-        expect(await parentPanels[0].getProperty('open')).toBe(true);
+        await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);
         // When - Open nested accordion panel
-        const nestedPanels = await page.findAll('wcs-accordion wcs-accordion wcs-accordion-panel');
-        await nestedPanels[0].click();
+        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
-        expect(await parentPanels[0].getProperty('open')).toBe(true);
-        expect(await nestedPanels[0].getProperty('open')).toBe(true);
+        await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);
+        await expect(nestedPanels.nth(0)).toHaveJSProperty('open', true);
     });
-    it('should not close nested accordions when opening another parent panel', async () => {
+    test('should not close nested accordions when opening another parent panel', async ({ page }) => {
         // Given
-        const page = await newE2EPage();
         await setWcsContent(page, `
             <wcs-accordion id="parent-accordion">
                 <wcs-accordion-panel>
@@ -123,40 +120,39 @@ describe('accordion', () => {
                 </wcs-accordion-panel>
             </wcs-accordion>
         `);
-        const parentPanels = await page.findAll('#parent-accordion > wcs-accordion-panel');
+        const parentPanels = page.locator('#parent-accordion > wcs-accordion-panel');
         // When - Open first parent and its nested panel
-        await parentPanels[0].click();
+        await parentPanels.nth(0).click();
         await page.waitForChanges();
-        const firstNestedPanel = await page.find('wcs-accordion > wcs-accordion-panel:first-child wcs-accordion-panel');
+        const firstNestedPanel = page.locator('wcs-accordion > wcs-accordion-panel:first-child wcs-accordion-panel');
         await firstNestedPanel.click();
         await page.waitForChanges();
         // Then
-        expect(await parentPanels[0].getProperty('open')).toBe(true);
-        expect(await firstNestedPanel.getProperty('open')).toBe(true);
+        await expect(parentPanels.nth(0)).toHaveJSProperty('open', true);
+        await expect(firstNestedPanel).toHaveJSProperty('open', true);
         // When - Open second parent
-        await parentPanels[1].click();
+        await parentPanels.nth(1).click();
         await page.waitForChanges();
-        const secondNestedPanel = await page.find('wcs-accordion > wcs-accordion-panel:nth-child(2) wcs-accordion-panel');
+        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
-        expect(await parentPanels[0].getProperty('open')).toBe(false);
-        expect(await parentPanels[1].getProperty('open')).toBe(true);
-        expect(await firstNestedPanel.getProperty('open')).toBe(true); // Nested panel keeps its state
-        expect(await secondNestedPanel.getProperty('open')).toBe(false);
+        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);
     });
-    it('should handle deeply nested accordions independently', async () => {
+    test('should handle deeply nested accordions independently', async ({ page, }) => {
         // Given
-        const page = await newE2EPage();
         await setWcsContent(page, `
-            <wcs-accordion>
-                <wcs-accordion-panel>
+            <wcs-accordion id="level1-accordion">
+                <wcs-accordion-panel id="level1-panel">
                     <wcs-accordion-header>Level 1</wcs-accordion-header>
                     <wcs-accordion-content>
-                        <wcs-accordion>
-                            <wcs-accordion-panel>
+                        <wcs-accordion id="level2-accordion">
+                            <wcs-accordion-panel id="level2-panel">
                                 <wcs-accordion-header>Level 2</wcs-accordion-header>
                                 <wcs-accordion-content>
-                                    <wcs-accordion>
-                                        <wcs-accordion-panel>
+                                    <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>
@@ -169,19 +165,19 @@ describe('accordion', () => {
             </wcs-accordion>
         `);
         // When - Open all levels progressively
-        const level1Panel = await page.find('wcs-accordion > wcs-accordion-panel');
+        const level1Panel = page.locator('#level1-panel');
         await level1Panel.click();
         await page.waitForChanges();
-        const level2Panel = await page.find('wcs-accordion wcs-accordion > wcs-accordion-panel');
+        const level2Panel = page.locator('#level2-panel');
         await level2Panel.click();
         await page.waitForChanges();
-        const level3Panel = await page.find('wcs-accordion wcs-accordion wcs-accordion > wcs-accordion-panel');
+        const level3Panel = page.locator('#level3-panel');
         await level3Panel.click();
         await page.waitForChanges();
         // Then - All levels should be open
-        expect(await level1Panel.getProperty('open')).toBe(true);
-        expect(await level2Panel.getProperty('open')).toBe(true);
-        expect(await level3Panel.getProperty('open')).toBe(true);
+        await expect(level1Panel).toHaveJSProperty('open', true);
+        await expect(level2Panel).toHaveJSProperty('open', true);
+        await expect(level3Panel).toHaveJSProperty('open', true);
     });
 });
-//# sourceMappingURL=accordion.e2e.js.map
+//# 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"]}

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

@@ -168,7 +168,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/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"]}

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

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

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

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