wcs-core 7.2.2 → 7.4.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/input/input.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Input component', () => {\n    test('Should fire wcsInput event once when user typing one char', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-input name=\"wcs-input-1\" />\n        `);\n\n        const inputSpy = await page.spyOnEvent('wcsInput');\n        const input = page.locator('wcs-input');\n\n        // When\n        await input.click();\n        await input.press('B');\n        await page.waitForChanges();\n\n        // Then\n        expect(inputSpy).toHaveReceivedEventTimes(1);\n    });\n\n    test('Should fire wcsInput event multiple times when user typing multiple chars', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-input name=\"wcs-input-1\" />\n        `);\n\n        const inputSpy = await page.spyOnEvent('wcsInput');\n        const input = page.locator('wcs-input');\n\n        // When\n        await input.click();\n        await input.press('B');\n        await page.waitForChanges();\n        await input.press('o');\n        await page.waitForChanges();\n        await input.press('n');\n        await page.waitForChanges();\n        await input.press('j');\n        await page.waitForChanges();\n        await input.press('o');\n        await page.waitForChanges();\n        await input.press('u');\n        await page.waitForChanges();\n        await input.press('r');\n        await page.waitForChanges();\n\n        // Then\n        expect(inputSpy).toHaveReceivedEventTimes(7);\n    });\n\n    test('Should fire wcsChange event when user commit change with blur (tab)', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-input name=\"wcs-input-1\"></wcs-input>\n            <button>Focus</button>\n        `);\n\n        const changeSpy = await page.spyOnEvent('wcsChange');\n        const input = page.locator('wcs-input');\n        const button = page.locator('button');\n\n        // When\n        await input.click();\n        await expect(input).toBeFocused();\n        await input.press('B');\n        await input.press('l');\n        await input.press('u');\n        await input.press('r');\n        await button.focus();\n        await page.waitForChanges();\n\n        // Then\n        expect(changeSpy).toHaveReceivedEventTimes(1);\n        expect(changeSpy).toHaveReceivedEventDetail({ value: 'Blur' });\n    });\n\n    test('Should fire wcsChange event when user commit change with blur (click)', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-input name=\"wcs-input-1\"></wcs-input>\n            <button>Focus</button>\n        `);\n\n        const changeSpy = await page.spyOnEvent('wcsChange');\n        const input = page.locator('wcs-input');\n        const button = page.locator('button');\n\n        // When\n        await input.click();\n        await input.press('B');\n        await input.press('l');\n        await input.press('u');\n        await input.press('r');\n        await button.focus();\n        await page.waitForChanges();\n\n        // Then\n        expect(changeSpy).toHaveReceivedEventTimes(1);\n        expect(changeSpy).toHaveReceivedEventDetail({ value: 'Blur' });\n    });\n\n    test('Should fire wcsChange event when user commit change with enter', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-input name=\"wcs-input-1\" />\n        `);\n\n        const changeSpy = await page.spyOnEvent('wcsChange');\n        const input = page.locator('wcs-input');\n\n        // When\n        await input.click();\n        await input.press('E');\n        await input.press('n');\n        await input.press('t');\n        await input.press('e');\n        await input.press('r');\n        await input.press('Enter');\n        await page.waitForChanges();\n\n        // Then\n        expect(changeSpy).toHaveReceivedEventTimes(1);\n        expect(changeSpy).toHaveReceivedEventDetail({ value: 'Enter' });\n    });\n\n    test('Should not fire wcsChange event when value is programmatically set', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-input name=\"wcs-input-1\" />\n        `);\n\n        const changeSpy = await page.spyOnEvent('wcsChange');\n        const input = page.locator('wcs-input');\n\n        // When\n        await input.evaluate((el: any) => el.value = 'Programmatically set value');\n        await page.waitForChanges();\n\n        // Then\n        expect(changeSpy).toHaveReceivedEventTimes(0);\n    });\n\n    test('Should not fire wcsInput event when value is programmatically set', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-input name=\"wcs-input-1\" />\n        `);\n\n        const inputSpy = await page.spyOnEvent('wcsInput');\n        const input = page.locator('wcs-input');\n\n        // When\n        await input.evaluate((el: any) => el.value = 'Programmatically set value');\n        await page.waitForChanges();\n\n        // Then\n        expect(inputSpy).toHaveReceivedEventTimes(0);\n    });\n\n    test('Should have a default value when value attribute is set', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-input name=\"wcs-input-1\" value=\"Default value\" />\n        `);\n\n        const input = page.locator('wcs-input');\n\n        // Then\n        await expect(input).toHaveJSProperty('value', 'Default value');\n        await expect(page.locator('wcs-input input')).toHaveJSProperty('value', 'Default value');\n    });\n\n    test('Should have a default value when value property is set', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-input name=\"wcs-input-1\" />\n        `);\n\n        const input = page.locator('wcs-input');\n\n        // When\n        await input.evaluate((el: any) => el.value = 'Default value');\n\n        // Then\n        await expect(input).toHaveJSProperty('value', 'Default value');\n        await expect(page.locator('wcs-input input')).toHaveJSProperty('value', 'Default value');\n    });\n});\n"]}

package/dist/collection/components/input/input.js

@@ -250,7 +250,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "AutocompleteTypes",
-                    "resolved": "\"name\" | \"on\" | \"off\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
+                    "resolved": "\"on\" | \"off\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\"",
                     "references": {
                         "AutocompleteTypes": {
                             "location": "import",
@@ -917,7 +917,7 @@ export class Input {
                     "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/label/label.css

@@ -13,12 +13,10 @@
 }
 
 label {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wcs-label-gap);
+  line-height: 0;
   color: var(--wcs-label-color);
   font-weight: var(--wcs-label-font-weight);
-}
-label ::slotted(wcs-mat-icon) {
-  display: inline;
-  vertical-align: middle;
-  margin-left: var(--wcs-label-gap);
 }

package/dist/collection/components/label/label.js

@@ -71,7 +71,7 @@ export class Label {
                     "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/mat-icon/mat-icon.js

@@ -115,7 +115,7 @@ export class MatIcon {
                     "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/modal/modal.css

@@ -43,6 +43,10 @@ wcs-modal[without-backdrop] .wcs-modal-container {
   border: solid var(--wcs-modal-border-width) var(--wcs-modal-border-color);
 }
 
+wcs-modal[hide-actions] .wcs-modal-actions {
+  display: none;
+}
+
 /**
 Modal window
  */

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

@@ -0,0 +1,35 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('modal', () => {
+    test('should trap the focus inside', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-modal show-close-button>
+                <wcs-input id="first-input" type="text"></wcs-input>
+                <wcs-button id="last-button" disabled class="wcs-primary" type="button">Envoyer</wcs-button>
+            </wcs-modal>
+        `); // Modal is opened by default in this test
+        const modal = page.locator('wcs-modal');
+        await modal.evaluate((el) => el.show = true);
+        const showCloseButton = page.locator('wcs-modal .wcs-modal-header wcs-button');
+        const input = page.locator('wcs-modal wcs-input');
+        const button = page.locator('wcs-modal wcs-button#last-button');
+        // When / Then
+        // Focus should be on close button initially
+        await expect(showCloseButton).toBeFocused();
+        await page.keyboard.press('Tab');
+        await expect(input).toBeFocused();
+        await page.keyboard.press('Tab');
+        // Focus should cycle back to close button since the button is disabled
+        await expect(showCloseButton).toBeFocused();
+        await page.keyboard.press('Tab'); // input receives the focus
+        await expect(input).toBeFocused();
+        // Enable the button and wait for focus trap to update
+        await button.evaluate((el) => el.disabled = false);
+        await page.waitForTimeout(300); // Wait for focus trap to recalculate focusable elements
+        await page.keyboard.press('Tab');
+        await expect(button).toBeFocused();
+    });
+});
+//# sourceMappingURL=modal.e2e.playwright.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/modal/modal.e2e.playwright.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAW,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IACxB,IAAI,CAAC,8BAA8B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACvE,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;;;;SAKzB,CAAC,CAAC,CAAC,0CAA0C;QAE9C,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QACxC,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAO,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;QAElD,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,wCAAwC,CAAC,CAAC;QAC/E,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;QAClD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,kCAAkC,CAAC,CAAC;QAEhE,cAAc;QACd,4CAA4C;QAC5C,MAAM,MAAM,CAAC,eAAe,CAAC,CAAC,WAAW,EAAE,CAAC;QAE5C,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;QAElC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACjC,uEAAuE;QACvE,MAAM,MAAM,CAAC,eAAe,CAAC,CAAC,WAAW,EAAE,CAAC;QAE5C,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,2BAA2B;QAC7D,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;QAElC,sDAAsD;QACtD,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAO,EAAE,EAAE,CAAC,EAAE,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC;QACxD,MAAM,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,wDAAwD;QAExF,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACjC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC;IACvC,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('modal', () => {\n    test('should trap the focus inside', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-modal show-close-button>\n                <wcs-input id=\"first-input\" type=\"text\"></wcs-input>\n                <wcs-button id=\"last-button\" disabled class=\"wcs-primary\" type=\"button\">Envoyer</wcs-button>\n            </wcs-modal>\n        `); // Modal is opened by default in this test\n\n        const modal = page.locator('wcs-modal');\n        await modal.evaluate((el: any) => el.show = true);\n\n        const showCloseButton = page.locator('wcs-modal .wcs-modal-header wcs-button');\n        const input = page.locator('wcs-modal wcs-input');\n        const button = page.locator('wcs-modal wcs-button#last-button');\n\n        // When / Then\n        // Focus should be on close button initially\n        await expect(showCloseButton).toBeFocused();\n\n        await page.keyboard.press('Tab');\n        await expect(input).toBeFocused();\n\n        await page.keyboard.press('Tab');\n        // Focus should cycle back to close button since the button is disabled\n        await expect(showCloseButton).toBeFocused();\n\n        await page.keyboard.press('Tab'); // input receives the focus\n        await expect(input).toBeFocused();\n\n        // Enable the button and wait for focus trap to update\n        await button.evaluate((el: any) => el.disabled = false);\n        await page.waitForTimeout(300); // Wait for focus trap to recalculate focusable elements\n\n        await page.keyboard.press('Tab');\n        await expect(button).toBeFocused();\n    });\n});\n"]}

package/dist/collection/components/modal/modal.js

@@ -169,7 +169,7 @@ export class Modal {
     }
     render() {
         const modalTitleId = `wcs-modal-title-${this.modalId}`;
-        return (h(Host, { key: 'e609fe2024b73cab0bed97c0d3b7012d8deba893' }, h("div", Object.assign({ key: '23007c4ad4971263f7fd99d0e594216cd112f6ea', class: "wcs-modal-container", "data-size": this.size, "aria-modal": "true", role: "dialog", "aria-labelledby": modalTitleId, ref: (el) => (this.nativeDivDialog = el) }, this.inheritedAttributes), h("div", { key: 'bc3e2ead8e3e73da31882c5e87cde2780d9ef2f9', class: "wcs-modal-header" }, h("h1", { key: '87561fc92b0990d00e06463afc111e9bdeab6f20', id: modalTitleId }, h("slot", { key: 'dbf6d932257e7a264206ddf7caea8a80e4b2b069', name: "header" })), this.showCloseButton && (h("wcs-button", { key: '97036ea40d111c5ac737b1e3f789571cd524cb2d', shape: "round", mode: "clear", id: "wcs-modal-close-button", "aria-label": this.closeButtonAriaLabel, onClick: ($event) => this.onCloseButtonClick($event) }, h("wcs-mat-icon", { key: '24d6b531e788c2760c66804df96037714c9f854b', icon: "close" })))), h("div", { key: '34d9ddf3c4527395864a238f329d7b499eb9791b', class: "wcs-modal-content" }, h("slot", { key: '5bbd76fc7de9bc6f5aaec7257e7c73995d3e1447', onSlotchange: () => this.handleSlotContentChange() })), !this.hideActions && (h("div", { key: '0c082f533dd77e73721b3bcf29a6f3d3baac65b3', class: "wcs-modal-actions" }, h("slot", { key: '56bfb65b4784492747eda2f5eb87b29dc7704db3', name: "actions" }))))));
+        return (h(Host, { key: 'e609fe2024b73cab0bed97c0d3b7012d8deba893' }, h("div", Object.assign({ key: '23007c4ad4971263f7fd99d0e594216cd112f6ea', class: "wcs-modal-container", "data-size": this.size, "aria-modal": "true", role: "dialog", "aria-labelledby": modalTitleId, ref: (el) => (this.nativeDivDialog = el) }, this.inheritedAttributes), h("div", { key: 'bc3e2ead8e3e73da31882c5e87cde2780d9ef2f9', class: "wcs-modal-header" }, h("h1", { key: '87561fc92b0990d00e06463afc111e9bdeab6f20', id: modalTitleId }, h("slot", { key: 'dbf6d932257e7a264206ddf7caea8a80e4b2b069', name: "header" })), this.showCloseButton && (h("wcs-button", { key: '97036ea40d111c5ac737b1e3f789571cd524cb2d', shape: "round", mode: "clear", id: "wcs-modal-close-button", "aria-label": this.closeButtonAriaLabel, onClick: ($event) => this.onCloseButtonClick($event) }, h("wcs-mat-icon", { key: '24d6b531e788c2760c66804df96037714c9f854b', icon: "close" })))), h("div", { key: '34d9ddf3c4527395864a238f329d7b499eb9791b', class: "wcs-modal-content" }, h("slot", { key: '5bbd76fc7de9bc6f5aaec7257e7c73995d3e1447', onSlotchange: () => this.handleSlotContentChange() })), h("div", { key: '7c332e9d1c1b19b65fabb6f52bc14ab0ed9f4803', class: "wcs-modal-actions" }, h("slot", { key: '4c44f2337893ba9e8c852a1b8b16beab9da87e4e', name: "actions" })))));
     }
     static get is() { return "wcs-modal"; }
     static get originalStyleUrls() {
@@ -384,7 +384,7 @@ export class Modal {
                     "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/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,OAAO,EACP,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EAEJ,KAAK,EAAE,MAAM,EAChB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,QAAQ,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAG/G,MAAM,qBAAqB,GAAG,EAAE,CAAC;AAEjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAMH,MAAM,OAAO,KAAK;;QAGN,wBAAmB,GAAyB,EAAE,CAAC;QAmEvD;;;WAGG;QACK,YAAO,GAAW,QAAQ,EAAE,CAAC;QAIrC;;;;;WAKG;QACK,+BAA0B,GAAY,KAAK,CAAC;QACpD;;;;;;;WAOG;QACK,wBAAmB,GAAY,KAAK,CAAC;+BArFK,KAAK;oBAKD,KAAK;+BAWT,KAAK;oCAMhB,QAAQ;oBAMrB,GAAG;2BAKiB,KAAK;;qCAkBV,SAAS;gCASG,KAAK;;IA2B1D,iBAAiB;QACb,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC/B,OAAO,CAAC,IAAI,CAAC,8GAA8G,CAAC,CAAC;QACjI,CAAC;QAED,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,qBAAqB,CAAC,CACvD,CAAC;IACN,CAAC;IAED,gBAAgB;QACZ,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACnC,CAAC;IAED,kBAAkB;;QACd,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,0BAA0B,EAAE,CAAC;YAClC,IAAI,CAAC,0BAA0B,GAAG,KAAK,CAAC;YAExC,IAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBACvB,OAAO;YACX,CAAC;YAED,IAAG,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBAC7B,MAAA,IAAI,CAAC,qBAAqB,0CAAE,KAAK,EAAE,CAAC;YACxC,CAAC;iBAAM,CAAC;gBACJ,MAAM,4BAA4B,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;gBACzF,IAAG,CAAC,4BAA4B,EAAE,CAAC;oBAC/B,OAAO,CAAC,IAAI,CAAC,4CAA4C,IAAI,CAAC,qBAAqB,oBAAoB,CAAC,CAAC;gBAC7G,CAAC;gBAED,4BAA4B,aAA5B,4BAA4B,uBAA5B,4BAA4B,CAAE,KAAK,EAAE,CAAC;YAC1C,CAAC;QACL,CAAC;IACL,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IAC5D,CAAC;IAGD,YAAY;QACR,IAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YACX,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;YACjC,IAAI,CAAC,0BAA0B,GAAG,IAAI,CAAC;QAC3C,CAAC;aAAM,CAAC;YACJ,8EAA8E;YAC9E,IAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBAC1B,OAAO;YACX,CAAC;YAED,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAEhC,IAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;gBAC7B,MAAM,+BAA+B,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;gBAC7F,IAAG,CAAC,+BAA+B,EAAE,CAAC;oBAClC,OAAO,CAAC,IAAI,CAAC,+BAA+B,IAAI,CAAC,sBAAsB,sBAAsB,CAAC,CAAC;gBACnG,CAAC;gBACD,+BAA+B,aAA/B,+BAA+B,uBAA/B,+BAA+B,CAAE,KAAK,EAAE,CAAC;YAC7C,CAAC;QACL,CAAC;IACL,CAAC;IAEO,uBAAuB;QAC3B,MAAM,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;aAC9D,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;QAE7C,IAAI,CAAC,qBAAqB,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAgB,CAAC;QACjG,IAAI,CAAC,oBAAoB,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,iBAAiB,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAgB,CAAC;IAC/H,CAAC;IAEO,KAAK;QACT,iDAAiD;QACjD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC;IACL,CAAC;IAGD,SAAS,CAAC,KAAoB;QAC1B,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,eAAe,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC9D,IAAI,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;gBAClB,IAAI,CAAC,uBAAuB,EAAE,CAAC,CAAC,iCAAiC;gBACjE,MAAM,YAAY,GAAG,IAAI,CAAC,qBAAqB,CAAC;gBAChD,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC;gBAE9C,IAAI,KAAK,CAAC,QAAQ,IAAI,gBAAgB,CAAC,YAAY,CAAC,EAAE,CAAC;oBACnD,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,WAAW,CAAC,KAAK,EAAE,CAAC;gBACxB,CAAC;qBAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC;oBAC1D,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,YAAY,CAAC,KAAK,EAAE,CAAC;gBACzB,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC;IAEO,kBAAkB,CAAC,CAAa;QACpC,IAAI,CAAC,KAAK,EAAE,CAAC;IACjB,CAAC;IAEO,uBAAuB;QAC3B,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACnC,CAAC;IAED,MAAM;QACF,MAAM,YAAY,GAAG,mBAAmB,IAAI,CAAC,OAAO,EAAE,CAAC;QACvD,OAAO,CACH,EAAC,IAAI;YACD,0EAAK,KAAK,EAAC,qBAAqB,eAChB,IAAI,CAAC,IAAI,gBACT,MAAM,EACjB,IAAI,EAAE,QAAQ,qBACG,YAAY,EAC7B,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,IACpC,IAAI,CAAC,mBAAmB;gBAE7B,4DAAK,KAAK,EAAC,kBAAkB;oBACzB,2DAAI,EAAE,EAAE,YAAY;wBAChB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CAC1B;oBACJ,IAAI,CAAC,eAAe,IAAI,CACrB,mEAAY,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,wBAAwB,gBACf,IAAI,CAAC,oBAAoB,EACrC,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC;wBAC5D,qEAAc,IAAI,EAAC,OAAO,GAAgB,CACjC,CAAC,CAGhB;gBACN,4DAAK,KAAK,EAAC,mBAAmB;oBAC1B,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,GAAS,CAC/D;gBACL,CAAC,IAAI,CAAC,WAAW,IAAI,CAClB,4DAAK,KAAK,EAAC,mBAAmB;oBAC1B,6DAAM,IAAI,EAAC,SAAS,GAAQ,CAC1B,CAAC,CAET,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ;AAED,IAAI,QAAQ,GAAG,CAAC,CAAC","sourcesContent":["import {\n    Element,\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    ComponentInterface,\n    Watch, Method\n} from '@stencil/core';\nimport { ModalSize } from './modal-interface';\nimport { isElementFocused, isFocusable } from \"../../utils/accessibility\";\nimport { inheritAriaAttributes, inheritAttributes, isTabKey, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst MODAL_INHERITED_ATTRS = [];\n\n/**\n * The modal component (also named dialog or popup) is an interface element that appears on top of the page content.\n * Use it to show a message, a confirmation dialog, or any other content like forms.\n *\n * ## Accessibility guidelines 💡\n * > - Modal element has `role=\"dialog\"` and `aria-modal=\"true\"`\n * > - Keyboard navigation is trapped inside the modal\n * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order\n * > to focus it upon dialog dismissal.\n * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial \n * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you \n * > want to focus. You will see a story as example below\n * > - The modal can be closed at any time by pressing the Escape key.\n * >\n * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n *\n * @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-overflow-y - Overflow-y of the content\n *\n * @cssprop --wcs-modal-backdrop-color - Backdrop color of the modal\n * @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-background-color - Background color of the modal\n * @cssprop --wcs-modal-border-radius - Border radius of the modal\n * @cssprop --wcs-modal-padding - Padding inside the modal\n * @cssprop --wcs-modal-border-width - Border width of the modal\n * @cssprop --wcs-modal-border-color - Border color of the modal\n * @cssprop --wcs-modal-title-margin-bottom - Margin bottom of the modal title\n * @cssprop --wcs-modal-title-font-size - Font size of the modal title\n * @cssprop --wcs-modal-title-font-weight - Font weight of the modal title\n * @cssprop --wcs-modal-title-line-height - Line height of the modal title\n * @cssprop --wcs-modal-actions-margin-top - Margin top of the modal actions\n * @cssprop --wcs-modal-width-s - Width of the modal for size small\n * @cssprop --wcs-modal-width-m - Width of the modal for size medium\n * @cssprop --wcs-modal-width-l - Width of the modal for size large\n * @cssprop --wcs-modal-width-xl - Width of the modal for size extra large\n * \n * @slot <no-name> Main container slot\n * @slot header Header container slot (for title)\n * @slot actions Actions container slot (for buttons)\n */\n@Component({\n    tag: 'wcs-modal',\n    styleUrl: 'modal.scss',\n    shadow: false,\n})\nexport class Modal implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLElement;\n    private nativeDivDialog!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Specifies whether the component should display a backdrop on the entire page\n     */\n    @Prop({reflect: true}) withoutBackdrop: boolean = false;\n\n    /**\n     * Displays the modal\n     */\n    @Prop({reflect: true, mutable: true}) show: boolean = false;\n\n    /**\n     * Triggered when the user leaves the dialog with the closing button.\n     */\n    @Event() wcsDialogClosed: EventEmitter<void>;\n\n    /**\n     * Specifies whether the component should display a close button.\n     * if false, it won't close the modal when the escape key is pressed.\n     */\n    @Prop({reflect: true}) showCloseButton: boolean = false;\n\n    /**\n     * Specifies the aria-label present on the close button when the modal is opened.  \n     * Only use when `showCloseButton` is `true`.\n     */\n    @Prop() closeButtonAriaLabel: string = 'Fermer';\n\n    /**\n     * There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the\n     * size best suited for the content and screen size displaying the modal. Remember to test responsiveness.\n     */\n    @Prop() size: ModalSize = 'm';\n\n    /**\n     * Specifies whether the component should hide the actions slot or not\n     */\n    @Prop({reflect: true}) hideActions: boolean = false;\n\n    /**\n     * Specifies which element id controls the modal\n     * @private\n     */\n    @Prop() modalTriggerControlsId: string;\n    /**\n     * The ID of the element to automatically focus when the modal opens.\n     * \n     * If this property is not set and `disableAutoFocus` is false, the modal will\n     * automatically focus the first focusable element within its content.\n     * This follows accessibility best practices by ensuring keyboard navigation\n     * starts from a logical point when the modal opens.\n     * \n     * @example\n     * <wcs-modal initial-focus-element=\"cancel-button\"></wcs-modal>\n     */\n    @Prop() initialFocusElementId?: string = undefined;\n\n    /**\n     * Disables automatic focus behavior when the modal opens.\n     * \n     * When set to true, the modal will not automatically focus any element upon opening.\n     * Use this property with caution, as managing focus is important for accessibility.\n     * Consider providing an alternative focus management strategy if disabling the default behavior.\n     */\n    @Prop({ reflect: true }) disableAutoFocus: boolean = false;\n\n    /**\n     * Give an unique id\n     * @private\n     */\n    private modalId: number = modalIds++;\n\n    private firstFocusableElement: HTMLElement;\n    private lastFocusableElement: HTMLElement;\n    /**\n     * This attribute is used to determine whether the show attribute has changed since the last rendering. \n     * This allows us to call the focus method on the first element of the modal when the show attribute changes to true. \n     * This call is made in the componentDidRender method\n     * @private\n     */\n    private showAttributeChangedMarker: boolean = false;\n    /**\n     * This attribute is used to determine if the modal has been closed for the first time since its last activation.\n     * It is set to 'true' when the modal is first closed, and will be reset to 'false' when the modal is shown again.\n     * This state is important for accessibility reasons in order to focus the modal trigger element (like the button \n     * which controls the modal)\n     *\n     * @private\n     */\n    private hasBeenClosedBefore: boolean = false;\n\n    componentWillLoad(): Promise<void> | void {\n        if (!this.modalTriggerControlsId) {\n            console.warn('wcs-modal: You must provide the modal-trigger-controls-id attribute to the modal to make it to work properly');\n        }\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, MODAL_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.updateFocusableElements();\n    }\n\n    componentDidRender() {\n        this.updateFocusableElements();\n        if (this.showAttributeChangedMarker) {\n            this.showAttributeChangedMarker = false;\n            \n            if(this.disableAutoFocus) {\n                return;\n            }\n            \n            if(!this.initialFocusElementId) {\n                this.firstFocusableElement?.focus();\n            } else {\n                const modalElementToFocusOnOpening = document.getElementById(this.initialFocusElementId);\n                if(!modalElementToFocusOnOpening) {\n                    console.warn(`wcs-modal: Unable to focus element - ID '${this.initialFocusElementId}' not found in DOM`);\n                }\n                \n                modalElementToFocusOnOpening?.focus();\n            }\n        }\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeDivDialog, attr, value);\n    }\n    \n    @Watch(\"show\")\n    onShowChange() {\n        if(this.show) {\n            this.hasBeenClosedBefore = false;\n            this.showAttributeChangedMarker = true;\n        } else {\n            // if we already made actions when the modal was firstly closed, we do nothing\n            if(this.hasBeenClosedBefore) {\n                return;\n            }\n            \n            this.hasBeenClosedBefore = true;\n\n            if(this.modalTriggerControlsId) {\n                const modalTriggerControlsHtmlElement = document.getElementById(this.modalTriggerControlsId);\n                if(!modalTriggerControlsHtmlElement) {\n                    console.warn(`wcs-modal: Element with id '${this.modalTriggerControlsId}' could not be found`);\n                }\n                modalTriggerControlsHtmlElement?.focus();\n            }\n        }\n    }\n\n    private updateFocusableElements() {\n        const focusableElements = Array.from(this.el.querySelectorAll('*'))\n            .filter(element => isFocusable(element));\n\n        this.firstFocusableElement = focusableElements.length > 0 && focusableElements[0] as HTMLElement;\n        this.lastFocusableElement = focusableElements.length > 0 && focusableElements[focusableElements.length - 1] as HTMLElement;\n    }\n    \n    private close() {\n        // If the modal isn't shown, we don't do anything\n        if (this.show) {\n            this.show = false;\n            this.wcsDialogClosed.emit();\n        }\n    }\n\n    @Listen('keydown', {target: 'document'})\n    onKeyDown(event: KeyboardEvent) {\n        if (this.show && this.showCloseButton && event.key === 'Escape') {\n            this.close();\n        }\n\n        if (this.show) {\n            if (isTabKey(event)) {\n                this.updateFocusableElements(); // XXX: maybe a performance issue\n                const firstElement = this.firstFocusableElement;\n                const lastElement = this.lastFocusableElement;\n\n                if (event.shiftKey && isElementFocused(firstElement)) {\n                    event.preventDefault();\n                    lastElement.focus();\n                } else if (!event.shiftKey && isElementFocused(lastElement)) {\n                    event.preventDefault();\n                    firstElement.focus();\n                }\n            }\n        }\n    }\n\n    private onCloseButtonClick(_: MouseEvent) {\n        this.close();\n    }\n\n    private handleSlotContentChange() {\n        this.updateFocusableElements();\n    }\n\n    render() {\n        const modalTitleId = `wcs-modal-title-${this.modalId}`;\n        return (\n            <Host>\n                <div class=\"wcs-modal-container\"\n                     data-size={this.size}\n                     aria-modal=\"true\"\n                     role={\"dialog\"}\n                     aria-labelledby={modalTitleId}\n                     ref={(el) => (this.nativeDivDialog = el)}\n                     {...this.inheritedAttributes}\n                >\n                    <div class=\"wcs-modal-header\">\n                        <h1 id={modalTitleId}>\n                            <slot name=\"header\"></slot>\n                        </h1>\n                        {this.showCloseButton && (\n                            <wcs-button shape=\"round\" \n                                        mode=\"clear\" \n                                        id=\"wcs-modal-close-button\"\n                                        aria-label={this.closeButtonAriaLabel}\n                                        onClick={($event) => this.onCloseButtonClick($event)}>\n                                <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n                            </wcs-button>)\n                        }\n\n                    </div>\n                    <div class=\"wcs-modal-content\">\n                        <slot onSlotchange={() => this.handleSlotContentChange()}></slot>\n                    </div>\n                    {!this.hideActions && (\n                        <div class=\"wcs-modal-actions\">\n                            <slot name=\"actions\"></slot>\n                        </div>)\n                    }\n                </div>\n            </Host>\n        );\n    }\n}\n\nlet modalIds = 0;\n"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Element,\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n    ComponentInterface,\n    Watch, Method\n} from '@stencil/core';\nimport { ModalSize } from './modal-interface';\nimport { isElementFocused, isFocusable } from \"../../utils/accessibility\";\nimport { inheritAriaAttributes, inheritAttributes, isTabKey, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst MODAL_INHERITED_ATTRS = [];\n\n/**\n * The modal component (also named dialog or popup) is an interface element that appears on top of the page content.\n * Use it to show a message, a confirmation dialog, or any other content like forms.\n *\n * ## Accessibility guidelines 💡\n * > - Modal element has `role=\"dialog\"` and `aria-modal=\"true\"`\n * > - Keyboard navigation is trapped inside the modal\n * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order\n * > to focus it upon dialog dismissal.\n * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial \n * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you \n * > want to focus. You will see a story as example below\n * > - The modal can be closed at any time by pressing the Escape key.\n * >\n * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n *\n * @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-overflow-y - Overflow-y of the content\n *\n * @cssprop --wcs-modal-backdrop-color - Backdrop color of the modal\n * @cssprop --wcs-modal-max-height - Max height of the main container\n * @cssprop --wcs-modal-background-color - Background color of the modal\n * @cssprop --wcs-modal-border-radius - Border radius of the modal\n * @cssprop --wcs-modal-padding - Padding inside the modal\n * @cssprop --wcs-modal-border-width - Border width of the modal\n * @cssprop --wcs-modal-border-color - Border color of the modal\n * @cssprop --wcs-modal-title-margin-bottom - Margin bottom of the modal title\n * @cssprop --wcs-modal-title-font-size - Font size of the modal title\n * @cssprop --wcs-modal-title-font-weight - Font weight of the modal title\n * @cssprop --wcs-modal-title-line-height - Line height of the modal title\n * @cssprop --wcs-modal-actions-margin-top - Margin top of the modal actions\n * @cssprop --wcs-modal-width-s - Width of the modal for size small\n * @cssprop --wcs-modal-width-m - Width of the modal for size medium\n * @cssprop --wcs-modal-width-l - Width of the modal for size large\n * @cssprop --wcs-modal-width-xl - Width of the modal for size extra large\n * \n * @slot <no-name> Main container slot\n * @slot header Header container slot (for title)\n * @slot actions Actions container slot (for buttons)\n */\n@Component({\n    tag: 'wcs-modal',\n    styleUrl: 'modal.scss',\n    shadow: false,\n})\nexport class Modal implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLElement;\n    private nativeDivDialog!: HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n\n    /**\n     * Specifies whether the component should display a backdrop on the entire page\n     */\n    @Prop({reflect: true}) withoutBackdrop: boolean = false;\n\n    /**\n     * Displays the modal\n     */\n    @Prop({reflect: true, mutable: true}) show: boolean = false;\n\n    /**\n     * Triggered when the user leaves the dialog with the closing button.\n     */\n    @Event() wcsDialogClosed: EventEmitter<void>;\n\n    /**\n     * Specifies whether the component should display a close button.\n     * if false, it won't close the modal when the escape key is pressed.\n     */\n    @Prop({reflect: true}) showCloseButton: boolean = false;\n\n    /**\n     * Specifies the aria-label present on the close button when the modal is opened.  \n     * Only use when `showCloseButton` is `true`.\n     */\n    @Prop() closeButtonAriaLabel: string = 'Fermer';\n\n    /**\n     * There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the\n     * size best suited for the content and screen size displaying the modal. Remember to test responsiveness.\n     */\n    @Prop() size: ModalSize = 'm';\n\n    /**\n     * Specifies whether the component should hide the actions slot or not\n     */\n    @Prop({reflect: true}) hideActions: boolean = false;\n\n    /**\n     * Specifies which element id controls the modal\n     * @private\n     */\n    @Prop() modalTriggerControlsId: string;\n    /**\n     * The ID of the element to automatically focus when the modal opens.\n     * \n     * If this property is not set and `disableAutoFocus` is false, the modal will\n     * automatically focus the first focusable element within its content.\n     * This follows accessibility best practices by ensuring keyboard navigation\n     * starts from a logical point when the modal opens.\n     * \n     * @example\n     * <wcs-modal initial-focus-element=\"cancel-button\"></wcs-modal>\n     */\n    @Prop() initialFocusElementId?: string = undefined;\n\n    /**\n     * Disables automatic focus behavior when the modal opens.\n     * \n     * When set to true, the modal will not automatically focus any element upon opening.\n     * Use this property with caution, as managing focus is important for accessibility.\n     * Consider providing an alternative focus management strategy if disabling the default behavior.\n     */\n    @Prop({ reflect: true }) disableAutoFocus: boolean = false;\n\n    /**\n     * Give an unique id\n     * @private\n     */\n    private modalId: number = modalIds++;\n\n    private firstFocusableElement: HTMLElement;\n    private lastFocusableElement: HTMLElement;\n    /**\n     * This attribute is used to determine whether the show attribute has changed since the last rendering. \n     * This allows us to call the focus method on the first element of the modal when the show attribute changes to true. \n     * This call is made in the componentDidRender method\n     * @private\n     */\n    private showAttributeChangedMarker: boolean = false;\n    /**\n     * This attribute is used to determine if the modal has been closed for the first time since its last activation.\n     * It is set to 'true' when the modal is first closed, and will be reset to 'false' when the modal is shown again.\n     * This state is important for accessibility reasons in order to focus the modal trigger element (like the button \n     * which controls the modal)\n     *\n     * @private\n     */\n    private hasBeenClosedBefore: boolean = false;\n\n    componentWillLoad(): Promise<void> | void {\n        if (!this.modalTriggerControlsId) {\n            console.warn('wcs-modal: You must provide the modal-trigger-controls-id attribute to the modal to make it to work properly');\n        }\n\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, MODAL_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.updateFocusableElements();\n    }\n\n    componentDidRender() {\n        this.updateFocusableElements();\n        if (this.showAttributeChangedMarker) {\n            this.showAttributeChangedMarker = false;\n            \n            if(this.disableAutoFocus) {\n                return;\n            }\n            \n            if(!this.initialFocusElementId) {\n                this.firstFocusableElement?.focus();\n            } else {\n                const modalElementToFocusOnOpening = document.getElementById(this.initialFocusElementId);\n                if(!modalElementToFocusOnOpening) {\n                    console.warn(`wcs-modal: Unable to focus element - ID '${this.initialFocusElementId}' not found in DOM`);\n                }\n                \n                modalElementToFocusOnOpening?.focus();\n            }\n        }\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeDivDialog, attr, value);\n    }\n    \n    @Watch(\"show\")\n    onShowChange() {\n        if(this.show) {\n            this.hasBeenClosedBefore = false;\n            this.showAttributeChangedMarker = true;\n        } else {\n            // if we already made actions when the modal was firstly closed, we do nothing\n            if(this.hasBeenClosedBefore) {\n                return;\n            }\n            \n            this.hasBeenClosedBefore = true;\n\n            if(this.modalTriggerControlsId) {\n                const modalTriggerControlsHtmlElement = document.getElementById(this.modalTriggerControlsId);\n                if(!modalTriggerControlsHtmlElement) {\n                    console.warn(`wcs-modal: Element with id '${this.modalTriggerControlsId}' could not be found`);\n                }\n                modalTriggerControlsHtmlElement?.focus();\n            }\n        }\n    }\n\n    private updateFocusableElements() {\n        const focusableElements = Array.from(this.el.querySelectorAll('*'))\n            .filter(element => isFocusable(element));\n\n        this.firstFocusableElement = focusableElements.length > 0 && focusableElements[0] as HTMLElement;\n        this.lastFocusableElement = focusableElements.length > 0 && focusableElements[focusableElements.length - 1] as HTMLElement;\n    }\n    \n    private close() {\n        // If the modal isn't shown, we don't do anything\n        if (this.show) {\n            this.show = false;\n            this.wcsDialogClosed.emit();\n        }\n    }\n\n    @Listen('keydown', {target: 'document'})\n    onKeyDown(event: KeyboardEvent) {\n        if (this.show && this.showCloseButton && event.key === 'Escape') {\n            this.close();\n        }\n\n        if (this.show) {\n            if (isTabKey(event)) {\n                this.updateFocusableElements(); // XXX: maybe a performance issue\n                const firstElement = this.firstFocusableElement;\n                const lastElement = this.lastFocusableElement;\n\n                if (event.shiftKey && isElementFocused(firstElement)) {\n                    event.preventDefault();\n                    lastElement.focus();\n                } else if (!event.shiftKey && isElementFocused(lastElement)) {\n                    event.preventDefault();\n                    firstElement.focus();\n                }\n            }\n        }\n    }\n\n    private onCloseButtonClick(_: MouseEvent) {\n        this.close();\n    }\n\n    private handleSlotContentChange() {\n        this.updateFocusableElements();\n    }\n\n    render() {\n        const modalTitleId = `wcs-modal-title-${this.modalId}`;\n        return (\n            <Host>\n                <div class=\"wcs-modal-container\"\n                     data-size={this.size}\n                     aria-modal=\"true\"\n                     role={\"dialog\"}\n                     aria-labelledby={modalTitleId}\n                     ref={(el) => (this.nativeDivDialog = el)}\n                     {...this.inheritedAttributes}\n                >\n                    <div class=\"wcs-modal-header\">\n                        <h1 id={modalTitleId}>\n                            <slot name=\"header\"></slot>\n                        </h1>\n                        {this.showCloseButton && (\n                            <wcs-button shape=\"round\" \n                                        mode=\"clear\" \n                                        id=\"wcs-modal-close-button\"\n                                        aria-label={this.closeButtonAriaLabel}\n                                        onClick={($event) => this.onCloseButtonClick($event)}>\n                                <wcs-mat-icon icon=\"close\"></wcs-mat-icon>\n                            </wcs-button>)\n                        }\n\n                    </div>\n                    <div class=\"wcs-modal-content\">\n                        <slot onSlotchange={() => this.handleSlotContentChange()}></slot>\n                    </div>\n                    <div class=\"wcs-modal-actions\">\n                        <slot name=\"actions\"></slot>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n}\n\nlet modalIds = 0;\n"]}

package/dist/collection/components/native-select/native-select.js

@@ -263,7 +263,7 @@ export class NativeSelect {
                     "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/nav/nav.js

@@ -42,7 +42,7 @@ export class Nav {
                     "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/progress-bar/progress-bar.js

@@ -153,7 +153,7 @@ export class ProgressBar {
                     "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/progress-radial/progress-radial.js

@@ -137,7 +137,7 @@ export class ProgressRadial {
                     "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/radio/radio.js

@@ -370,7 +370,7 @@ export class Radio {
                     "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/radio-group/radio-group.e2e.playwright.js

@@ -0,0 +1,231 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('Radio Group', () => {
+    test('should navigate to the first not disabled radio when pressing tab key', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-input></wcs-input>
+            <wcs-radio-group>
+                <wcs-radio disabled id="radio-1" value="1"></wcs-radio>
+                <wcs-radio id="radio-2" value="2"></wcs-radio>
+                <wcs-radio id="radio-3" value="3"></wcs-radio>
+            </wcs-radio-group>
+        `);
+        const firstTabbableItem = page.locator('wcs-input');
+        await firstTabbableItem.focus();
+        const secondRadio = page.locator('#radio-2');
+        // When
+        await page.keyboard.press('Tab');
+        // Then
+        await expect(secondRadio).toBeFocused();
+    });
+    test('should not make unselected radios focusable when a radio is clicked', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-input></wcs-input>
+            <wcs-radio-group>
+                <wcs-radio disabled id="radio-1" value="1"></wcs-radio>
+                <wcs-radio id="radio-2" value="2"></wcs-radio>
+                <wcs-radio id="radio-3" value="3"></wcs-radio>
+            </wcs-radio-group>
+        `);
+        const input = page.locator('wcs-input');
+        const radio3 = page.locator('#radio-3');
+        // When
+        await radio3.click();
+        await input.focus();
+        // Then
+        await page.keyboard.press('Tab');
+        await expect(radio3).toBeFocused();
+    });
+    test('should checked the first radio when pressing space key', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-input></wcs-input>
+            <wcs-radio-group>
+                <wcs-radio id="radio-1" value="1"></wcs-radio>
+                <wcs-radio id="radio-2" value="2"></wcs-radio>
+                <wcs-radio id="radio-3" value="3"></wcs-radio>
+            </wcs-radio-group>
+        `);
+        const firstTabbableItem = page.locator('wcs-input');
+        await firstTabbableItem.focus();
+        const firstRadio = page.locator('#radio-1');
+        await page.keyboard.press('Tab');
+        // When
+        await page.keyboard.press('Space');
+        // Then
+        await expect(firstRadio).toBeFocused(); // Ensure focus is on the first radio
+        const firstRadioNativeInput = page.locator('#radio-1 input');
+        await expect(firstRadioNativeInput).toHaveAttribute('aria-checked', 'true');
+    });
+    test('should navigate to the checked radio when pressing tab key', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-input></wcs-input>
+            <wcs-radio-group value="3">
+                <wcs-radio disabled id="radio-1" value="1"></wcs-radio>
+                <wcs-radio id="radio-2" value="2"></wcs-radio>
+                <wcs-radio id="radio-3" value="3"></wcs-radio>
+            </wcs-radio-group>
+        `);
+        const firstTabbableItem = page.locator('wcs-input');
+        await firstTabbableItem.focus();
+        const thirdRadio = page.locator('#radio-3');
+        // When
+        await page.keyboard.press('Tab');
+        // Then
+        await expect(thirdRadio).toBeFocused();
+    });
+    test.describe('When pressing arrow down key', () => {
+        test('should checked the next radio not disabled when we are on the first radio and next radio is here', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-radio-group>
+                    <wcs-radio id="radio-1" value="1"></wcs-radio>
+                    <wcs-radio disabled id="radio-2" value="2"></wcs-radio>
+                    <wcs-radio id="radio-3" value="3"></wcs-radio>
+                </wcs-radio-group>
+            `);
+            const firstRadio = page.locator('#radio-1');
+            await firstRadio.focus();
+            const thirdRadioNativeInput = page.locator('#radio-3 input');
+            const thirdRadio = page.locator('#radio-3');
+            // When
+            await page.keyboard.press('ArrowDown');
+            // Then
+            await expect(thirdRadio).toBeFocused(); // Ensure focus is on the third radio
+            await expect(thirdRadioNativeInput).toHaveAttribute('aria-checked', 'true');
+        });
+        test('should checked the first not disabled radio when we are on the last radio', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-radio-group>
+                    <wcs-radio disabled id="radio-1" value="1"></wcs-radio>
+                    <wcs-radio id="radio-2" value="2"></wcs-radio>
+                    <wcs-radio id="radio-3" value="3"></wcs-radio>
+                </wcs-radio-group>
+            `);
+            const lastRadio = page.locator('#radio-3');
+            // Click to select, then focus explicitly for WebKit compatibility
+            await lastRadio.click();
+            await lastRadio.focus();
+            await expect(lastRadio).toBeFocused();
+            const secondRadio = page.locator('#radio-2');
+            const secondRadioNativeInputInput = page.locator('#radio-2 input');
+            // When
+            await page.keyboard.press('ArrowDown');
+            // Then
+            await expect(secondRadio).toBeFocused(); // Ensure focus is on the second radio
+            await expect(secondRadioNativeInputInput).toHaveAttribute('aria-checked', 'true');
+        });
+    });
+    test.describe('Events handling', () => {
+        test('should fire wcsRadioClick when we click on an unchecked radio', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-radio-group>
+                    <wcs-radio id="radio-1" value="1"></wcs-radio>
+                    <wcs-radio id="radio-2" value="2"></wcs-radio>
+                    <wcs-radio id="radio-3" value="3"></wcs-radio>
+                </wcs-radio-group>
+            `);
+            const radioClickSpy = await page.spyOnEvent('wcsRadioClick');
+            const radio2 = page.locator('#radio-2');
+            // When
+            await radio2.click();
+            await page.waitForChanges();
+            // Then
+            expect(radioClickSpy).toHaveReceivedEventTimes(1);
+        });
+        test('should fire wcsChange when we click or move to an unchecked radio', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-radio-group>
+                    <wcs-radio id="radio-1" value="1"></wcs-radio>
+                    <wcs-radio id="radio-2" value="2"></wcs-radio>
+                    <wcs-radio id="radio-3" value="3"></wcs-radio>
+                </wcs-radio-group>
+            `);
+            const changeSpy = await page.spyOnEvent('wcsChange');
+            const radio2 = page.locator('#radio-2');
+            // When: Clicking on an unchecked radio
+            await radio2.click();
+            await page.waitForChanges();
+            // Then
+            expect(changeSpy).toHaveReceivedEventTimes(1);
+            // When: Moving focus to another unchecked radio with keyboard
+            await radio2.focus();
+            await page.keyboard.press('ArrowDown'); // Move to the next radio
+            await page.waitForChanges();
+            // Then
+            const radio3 = page.locator('#radio-3');
+            await expect(radio3).toBeFocused(); // Ensure focus is on the third radio (next radio after radio2)
+            expect(changeSpy).toHaveReceivedEventTimes(2);
+        });
+        test('should fire wcsBlur and wcsFocus from the radios', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-radio-group>
+                    <wcs-radio id="radio-1" value="1"></wcs-radio>
+                    <wcs-radio id="radio-2" value="2"></wcs-radio>
+                    <wcs-radio id="radio-3" value="3"></wcs-radio>
+                </wcs-radio-group>
+            `);
+            const blurSpy = await page.spyOnEvent('wcsBlur');
+            const focusSpy = await page.spyOnEvent('wcsFocus');
+            const radio = page.locator('#radio-1');
+            // When: Focusing on the first radio
+            await radio.focus();
+            await page.waitForChanges();
+            // Then: Expect wcsFocus to be fired
+            expect(focusSpy).toHaveReceivedEventTimes(1);
+            // When: Moving to the next radio
+            await page.keyboard.press('ArrowDown');
+            await page.waitForChanges();
+            // When: Moving focus to another radio
+            await page.keyboard.press('Tab');
+            // Then
+            expect(blurSpy).toHaveReceivedEvent();
+            expect(focusSpy).toHaveReceivedEventTimes(2);
+        });
+    });
+    test.describe('When pressing arrow up key', () => {
+        test('should checked the previous radio when we are on the last radio and previous radio is here', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-radio-group>
+                    <wcs-radio id="radio-1" value="1"></wcs-radio>
+                    <wcs-radio id="radio-2" value="2"></wcs-radio>
+                    <wcs-radio id="radio-3" value="3"></wcs-radio>
+                </wcs-radio-group>
+            `);
+            const lastRadio = page.locator('#radio-3');
+            await lastRadio.focus();
+            // When
+            await page.keyboard.press('ArrowUp');
+            // Then
+            const secondRadioInput = page.locator('#radio-2 input');
+            await expect(secondRadioInput).toHaveAttribute('aria-checked', 'true');
+        });
+        test('should checked the last radio when we are on the first radio', async ({ page }) => {
+            // Given
+            await setWcsContent(page, `
+                <wcs-radio-group>
+                    <wcs-radio id="radio-1" value="1"></wcs-radio>
+                    <wcs-radio id="radio-2" value="2"></wcs-radio>
+                    <wcs-radio id="radio-3" value="3"></wcs-radio>
+                </wcs-radio-group>
+            `);
+            const firstRadio = page.locator('#radio-1');
+            await firstRadio.focus();
+            // When
+            await page.keyboard.press('ArrowUp');
+            // Then
+            const lastRadioInput = page.locator('#radio-3 input');
+            await expect(lastRadioInput).toHaveAttribute('aria-checked', 'true');
+        });
+    });
+});
+//# sourceMappingURL=radio-group.e2e.playwright.js.map

package/dist/collection/components/radio-group/radio-group.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setWcsContent } from '../../utils/playwright/test';\nimport { test, E2EPage } from \"@stencil/playwright\";\n\nimport { expect } from \"@playwright/test\";\n\ntest.describe('Radio Group', () => {\n    test('should navigate to the first not disabled radio when pressing tab key', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-input></wcs-input>\n            <wcs-radio-group>\n                <wcs-radio disabled id=\"radio-1\" value=\"1\"></wcs-radio>\n                <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n                <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n            </wcs-radio-group>\n        `);\n\n        const firstTabbableItem = page.locator('wcs-input');\n        await firstTabbableItem.focus();\n        const secondRadio = page.locator('#radio-2');\n\n        // When\n        await page.keyboard.press('Tab');\n\n        // Then\n        await expect(secondRadio).toBeFocused();\n    });\n\n    test('should not make unselected radios focusable when a radio is clicked', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-input></wcs-input>\n            <wcs-radio-group>\n                <wcs-radio disabled id=\"radio-1\" value=\"1\"></wcs-radio>\n                <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n                <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n            </wcs-radio-group>\n        `);\n\n        const input = page.locator('wcs-input');\n        const radio3 = page.locator('#radio-3');\n\n        // When\n        await radio3.click();\n        await input.focus();\n\n        // Then\n        await page.keyboard.press('Tab');\n        await expect(radio3).toBeFocused();\n    });\n\n    test('should checked the first radio when pressing space key', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-input></wcs-input>\n            <wcs-radio-group>\n                <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n                <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n                <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n            </wcs-radio-group>\n        `);\n\n        const firstTabbableItem = page.locator('wcs-input');\n        await firstTabbableItem.focus();\n        const firstRadio = page.locator('#radio-1');\n        await page.keyboard.press('Tab');\n\n        // When\n        await page.keyboard.press('Space');\n\n        // Then\n        await expect(firstRadio).toBeFocused(); // Ensure focus is on the first radio\n        const firstRadioNativeInput = page.locator('#radio-1 input');\n        await expect(firstRadioNativeInput).toHaveAttribute('aria-checked', 'true');\n    });\n\n    test('should navigate to the checked radio when pressing tab key', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-input></wcs-input>\n            <wcs-radio-group value=\"3\">\n                <wcs-radio disabled id=\"radio-1\" value=\"1\"></wcs-radio>\n                <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n                <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n            </wcs-radio-group>\n        `);\n\n        const firstTabbableItem = page.locator('wcs-input');\n        await firstTabbableItem.focus();\n        const thirdRadio = page.locator('#radio-3');\n\n        // When\n        await page.keyboard.press('Tab');\n\n        // Then\n        await expect(thirdRadio).toBeFocused();\n    });\n\n    test.describe('When pressing arrow down key', () => {\n        test('should checked the next radio not disabled when we are on the first radio and next radio is here', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-radio-group>\n                    <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n                    <wcs-radio disabled id=\"radio-2\" value=\"2\"></wcs-radio>\n                    <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n                </wcs-radio-group>\n            `);\n\n            const firstRadio = page.locator('#radio-1');\n            await firstRadio.focus();\n            const thirdRadioNativeInput = page.locator('#radio-3 input');\n            const thirdRadio = page.locator('#radio-3');\n\n            // When\n            await page.keyboard.press('ArrowDown');\n\n            // Then\n            await expect(thirdRadio).toBeFocused(); // Ensure focus is on the third radio\n            await expect(thirdRadioNativeInput).toHaveAttribute('aria-checked', 'true');\n        });\n\n        test('should checked the first not disabled radio when we are on the last radio', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-radio-group>\n                    <wcs-radio disabled id=\"radio-1\" value=\"1\"></wcs-radio>\n                    <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n                    <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n                </wcs-radio-group>\n            `);\n\n            const lastRadio = page.locator('#radio-3');\n            // Click to select, then focus explicitly for WebKit compatibility\n            await lastRadio.click();\n            await lastRadio.focus();\n            await expect(lastRadio).toBeFocused();\n            const secondRadio = page.locator('#radio-2');\n            const secondRadioNativeInputInput = page.locator('#radio-2 input');\n\n            // When\n            await page.keyboard.press('ArrowDown');\n\n            // Then\n            await expect(secondRadio).toBeFocused(); // Ensure focus is on the second radio\n            await expect(secondRadioNativeInputInput).toHaveAttribute('aria-checked', 'true');\n        });\n    });\n\n    test.describe('Events handling', () => {\n        test('should fire wcsRadioClick when we click on an unchecked radio', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-radio-group>\n                    <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n                    <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n                    <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n                </wcs-radio-group>\n            `);\n\n            const radioClickSpy = await page.spyOnEvent('wcsRadioClick');\n\n            const radio2 = page.locator('#radio-2');\n\n            // When\n            await radio2.click();\n            await page.waitForChanges();\n\n            // Then\n            expect(radioClickSpy).toHaveReceivedEventTimes(1);\n        });\n\n        test('should fire wcsChange when we click or move to an unchecked radio', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-radio-group>\n                    <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n                    <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n                    <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n                </wcs-radio-group>\n            `);\n\n            const changeSpy = await page.spyOnEvent('wcsChange');\n\n            const radio2 = page.locator('#radio-2');\n\n            // When: Clicking on an unchecked radio\n            await radio2.click();\n            await page.waitForChanges();\n\n            // Then\n            expect(changeSpy).toHaveReceivedEventTimes(1);\n\n            // When: Moving focus to another unchecked radio with keyboard\n            await radio2.focus();\n            await page.keyboard.press('ArrowDown'); // Move to the next radio\n            await page.waitForChanges();\n\n            // Then\n            const radio3 = page.locator('#radio-3');\n            await expect(radio3).toBeFocused(); // Ensure focus is on the third radio (next radio after radio2)\n            expect(changeSpy).toHaveReceivedEventTimes(2);\n        });\n\n        test('should fire wcsBlur and wcsFocus from the radios', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-radio-group>\n                    <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n                    <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n                    <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n                </wcs-radio-group>\n            `);\n\n            const blurSpy = await page.spyOnEvent('wcsBlur');\n            const focusSpy = await page.spyOnEvent('wcsFocus');\n\n            const radio = page.locator('#radio-1');\n\n            // When: Focusing on the first radio\n            await radio.focus();\n            await page.waitForChanges();\n\n            // Then: Expect wcsFocus to be fired\n            expect(focusSpy).toHaveReceivedEventTimes(1);\n\n            // When: Moving to the next radio\n            await page.keyboard.press('ArrowDown');\n            await page.waitForChanges();\n\n            // When: Moving focus to another radio\n            await page.keyboard.press('Tab');\n\n            // Then\n            expect(blurSpy).toHaveReceivedEvent();\n            expect(focusSpy).toHaveReceivedEventTimes(2);\n        });\n    });\n\n    test.describe('When pressing arrow up key', () => {\n        test('should checked the previous radio when we are on the last radio and previous radio is here', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-radio-group>\n                    <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n                    <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n                    <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n                </wcs-radio-group>\n            `);\n\n            const lastRadio = page.locator('#radio-3');\n            await lastRadio.focus();\n\n            // When\n            await page.keyboard.press('ArrowUp');\n\n            // Then\n            const secondRadioInput = page.locator('#radio-2 input');\n            await expect(secondRadioInput).toHaveAttribute('aria-checked', 'true');\n        });\n\n        test('should checked the last radio when we are on the first radio', async ({ page }: { page: E2EPage }) => {\n            // Given\n            await setWcsContent(page, `\n                <wcs-radio-group>\n                    <wcs-radio id=\"radio-1\" value=\"1\"></wcs-radio>\n                    <wcs-radio id=\"radio-2\" value=\"2\"></wcs-radio>\n                    <wcs-radio id=\"radio-3\" value=\"3\"></wcs-radio>\n                </wcs-radio-group>\n            `);\n\n            const firstRadio = page.locator('#radio-1');\n            await firstRadio.focus();\n\n            // When\n            await page.keyboard.press('ArrowUp');\n\n            // Then\n            const lastRadioInput = page.locator('#radio-3 input');\n            await expect(lastRadioInput).toHaveAttribute('aria-checked', 'true');\n        });\n    });\n});\n"]}

package/dist/collection/components/radio-group/radio-group.js

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