wcs-core 7.5.0 → 7.6.0

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

@@ -0,0 +1,104 @@
+import { setWcsContent } from "../../utils/playwright/test";
+import { test } from "@stencil/playwright";
+import { expect } from "@playwright/test";
+test.describe('Label component', () => {
+    test('Should wrap text correctly', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-label>Label loooooooooooooooooooooooooooooooooong text</wcs-label>
+        `);
+        page.setViewportSize({ width: 300, height: 300 });
+        const label = page.locator('label');
+        // Then
+        const box = await label.boundingBox();
+        expect(box.height).toBeGreaterThan(0);
+        // Assuming that the line height is around 20px, if the text is wrapped, the height should be greater than 20px
+        expect(box.height).toBeGreaterThan(20);
+    });
+    test('Should keep same height with and without icon', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-form-field id="form-field-with-icon">
+                <wcs-label>
+                    Enter your name
+                    <wcs-mat-icon id="icon-help" icon="help" family="filled" size="s"></wcs-mat-icon>
+                </wcs-label>
+                <wcs-input placeholder="John Doe"></wcs-input>
+            </wcs-form-field>
+
+            <wcs-form-field id="form-field-without-icon">
+                <wcs-label>Enter your name</wcs-label>
+                <wcs-input placeholder="John Doe"></wcs-input>
+            </wcs-form-field>
+        `);
+        const formFieldWithIcon = page.locator('#form-field-with-icon');
+        const formFieldWithoutIcon = page.locator('#form-field-without-icon');
+        // Then
+        const formFieldBoundingBoxWithIcon = await formFieldWithIcon.boundingBox();
+        const formFieldBoundingBoxWithoutIcon = await formFieldWithoutIcon.boundingBox();
+        expect(formFieldBoundingBoxWithIcon.height).toEqual(formFieldBoundingBoxWithoutIcon.height);
+    });
+    test('Should place required marker right after last word when label wraps', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-form-field style="width: 180px">
+                <wcs-label>
+                    This label is long enough to wrap on multiple lines and end with
+                    <span id="last-word">word</span>
+                </wcs-label>
+                <wcs-input required></wcs-input>
+            </wcs-form-field>
+        `);
+        const lastWord = page.locator('#last-word');
+        const requiredMarker = page.locator('.required-marker');
+        // Then
+        await expect(requiredMarker).toBeVisible();
+        const lastWordBox = await lastWord.boundingBox();
+        const requiredMarkerBox = await requiredMarker.boundingBox();
+        const horizontalGap = requiredMarkerBox.x - (lastWordBox.x + lastWordBox.width);
+        expect(horizontalGap).toBeGreaterThanOrEqual(0);
+        expect(horizontalGap).toBeLessThanOrEqual(8 + 2); // assuming a gap of Xpx plus some tolerance
+        expect(Math.abs((lastWordBox.y + lastWordBox.height) - (requiredMarkerBox.y + requiredMarkerBox.height))).toBeLessThanOrEqual(2);
+    });
+    test('Should keep same height with and without required marker', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-form-field id="form-field-with-required">
+                <wcs-label>Enter your name</wcs-label>
+                <wcs-input required placeholder="John Doe"></wcs-input>
+            </wcs-form-field>
+
+            <wcs-form-field id="form-field-without-required">
+                <wcs-label>Enter your name</wcs-label>
+                <wcs-input placeholder="John Doe"></wcs-input>
+            </wcs-form-field>
+        `);
+        const formFieldWithRequired = page.locator('#form-field-with-required');
+        const formFieldWithoutRequired = page.locator('#form-field-without-required');
+        // Then
+        const formFieldBoundingBoxWithRequired = await formFieldWithRequired.boundingBox();
+        const formFieldBoundingBoxWithoutRequired = await formFieldWithoutRequired.boundingBox();
+        expect(formFieldBoundingBoxWithRequired.height).toEqual(formFieldBoundingBoxWithoutRequired.height);
+    });
+    test('Should well update of the required marker when property required is toggled', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-form-field>
+                <wcs-label id="label">
+                    This label is long enough to wrap on multiple lines and end with
+                    <span id="last-word">word</span>
+                </wcs-label>
+                <wcs-input required></wcs-input>
+            </wcs-form-field>
+        `);
+        const wcsInput = page.locator('wcs-input');
+        const requiredMarker = page.locator('.required-marker');
+        // Then
+        await expect(requiredMarker).toBeVisible();
+        // When
+        await wcsInput.evaluate((el) => el.required = false);
+        // Then
+        await expect(requiredMarker).toBeHidden();
+    });
+});
+//# sourceMappingURL=label.e2e.playwright.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.e2e.playwright.js","sourceRoot":"","sources":["../../../src/components/label/label.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,iBAAiB,EAAE,GAAG,EAAE;IAClC,IAAI,CAAC,4BAA4B,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACrE,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;SAEzB,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;QAElD,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEpC,OAAO;QACP,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,WAAW,EAAE,CAAC;QACtC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QACtC,+GAA+G;QAC/G,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,+CAA+C,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACxF,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;;;;;;;;;;;;SAazB,CAAC,CAAC;QACH,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC;QAChE,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;QAEtE,OAAO;QACP,MAAM,4BAA4B,GAAG,MAAM,iBAAiB,CAAC,WAAW,EAAE,CAAC;QAC3E,MAAM,+BAA+B,GAAG,MAAM,oBAAoB,CAAC,WAAW,EAAE,CAAC;QACjF,MAAM,CAAC,4BAA4B,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,+BAA+B,CAAC,MAAM,CAAC,CAAC;IAChG,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,qEAAqE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QAC9G,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;;;;;;;SAQzB,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC5C,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAExD,OAAO;QACP,MAAM,MAAM,CAAC,cAAc,CAAC,CAAC,WAAW,EAAE,CAAC;QAE3C,MAAM,WAAW,GAAG,MAAM,QAAQ,CAAC,WAAW,EAAE,CAAC;QACjD,MAAM,iBAAiB,GAAG,MAAM,cAAc,CAAC,WAAW,EAAE,CAAC;QAE7D,MAAM,aAAa,GAAG,iBAAiB,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;QAChF,MAAM,CAAC,aAAa,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC;QAChD,MAAM,CAAC,aAAa,CAAC,CAAC,mBAAmB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,4CAA4C;QAE9F,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,GAAG,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;IACrI,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,0DAA0D,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACnG,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;;;;;;;;;SAUzB,CAAC,CAAC;QACH,MAAM,qBAAqB,GAAG,IAAI,CAAC,OAAO,CAAC,2BAA2B,CAAC,CAAC;QACxE,MAAM,wBAAwB,GAAG,IAAI,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAAC;QAE9E,OAAO;QACP,MAAM,gCAAgC,GAAG,MAAM,qBAAqB,CAAC,WAAW,EAAE,CAAC;QACnF,MAAM,mCAAmC,GAAG,MAAM,wBAAwB,CAAC,WAAW,EAAE,CAAC;QACzF,MAAM,CAAC,gCAAgC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,mCAAmC,CAAC,MAAM,CAAC,CAAC;IACxG,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6EAA6E,EAAE,KAAK,EAAE,EAAE,IAAI,EAAqB,EAAE,EAAE;QACtH,QAAQ;QACR,MAAM,aAAa,CAAC,IAAI,EAAE;;;;;;;;SAQzB,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAC3C,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAExD,OAAO;QACP,MAAM,MAAM,CAAC,cAAc,CAAC,CAAC,WAAW,EAAE,CAAC;QAE3C,OAAO;QACP,MAAM,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAO,EAAE,EAAE,CAAC,EAAE,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC;QAE1D,OAAO;QACP,MAAM,MAAM,CAAC,cAAc,CAAC,CAAC,UAAU,EAAE,CAAC;IAC9C,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('Label component', () => {\n    test('Should wrap text correctly', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-label>Label loooooooooooooooooooooooooooooooooong text</wcs-label>\n        `);\n        page.setViewportSize({ width: 300, height: 300 });\n\n        const label = page.locator('label');\n\n        // Then\n        const box = await label.boundingBox();\n        expect(box.height).toBeGreaterThan(0);\n        // Assuming that the line height is around 20px, if the text is wrapped, the height should be greater than 20px\n        expect(box.height).toBeGreaterThan(20);\n    });\n\n    test('Should keep same height with and without icon', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-form-field id=\"form-field-with-icon\">\n                <wcs-label>\n                    Enter your name\n                    <wcs-mat-icon id=\"icon-help\" icon=\"help\" family=\"filled\" size=\"s\"></wcs-mat-icon>\n                </wcs-label>\n                <wcs-input placeholder=\"John Doe\"></wcs-input>\n            </wcs-form-field>\n\n            <wcs-form-field id=\"form-field-without-icon\">\n                <wcs-label>Enter your name</wcs-label>\n                <wcs-input placeholder=\"John Doe\"></wcs-input>\n            </wcs-form-field>\n        `);\n        const formFieldWithIcon = page.locator('#form-field-with-icon');\n        const formFieldWithoutIcon = page.locator('#form-field-without-icon');\n\n        // Then\n        const formFieldBoundingBoxWithIcon = await formFieldWithIcon.boundingBox();\n        const formFieldBoundingBoxWithoutIcon = await formFieldWithoutIcon.boundingBox();\n        expect(formFieldBoundingBoxWithIcon.height).toEqual(formFieldBoundingBoxWithoutIcon.height);\n    });\n\n    test('Should place required marker right after last word when label wraps', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-form-field style=\"width: 180px\">\n                <wcs-label>\n                    This label is long enough to wrap on multiple lines and end with\n                    <span id=\"last-word\">word</span>\n                </wcs-label>\n                <wcs-input required></wcs-input>\n            </wcs-form-field>\n        `);\n\n        const lastWord = page.locator('#last-word');\n        const requiredMarker = page.locator('.required-marker');\n\n        // Then\n        await expect(requiredMarker).toBeVisible();\n\n        const lastWordBox = await lastWord.boundingBox();\n        const requiredMarkerBox = await requiredMarker.boundingBox();\n\n        const horizontalGap = requiredMarkerBox.x - (lastWordBox.x + lastWordBox.width);\n        expect(horizontalGap).toBeGreaterThanOrEqual(0);\n        expect(horizontalGap).toBeLessThanOrEqual(8 + 2); // assuming a gap of Xpx plus some tolerance\n\n        expect(Math.abs((lastWordBox.y + lastWordBox.height) - (requiredMarkerBox.y + requiredMarkerBox.height))).toBeLessThanOrEqual(2);\n    });\n\n    test('Should keep same height with and without required marker', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-form-field id=\"form-field-with-required\">\n                <wcs-label>Enter your name</wcs-label>\n                <wcs-input required placeholder=\"John Doe\"></wcs-input>\n            </wcs-form-field>\n\n            <wcs-form-field id=\"form-field-without-required\">\n                <wcs-label>Enter your name</wcs-label>\n                <wcs-input placeholder=\"John Doe\"></wcs-input>\n            </wcs-form-field>\n        `);\n        const formFieldWithRequired = page.locator('#form-field-with-required');\n        const formFieldWithoutRequired = page.locator('#form-field-without-required');\n\n        // Then\n        const formFieldBoundingBoxWithRequired = await formFieldWithRequired.boundingBox();\n        const formFieldBoundingBoxWithoutRequired = await formFieldWithoutRequired.boundingBox();\n        expect(formFieldBoundingBoxWithRequired.height).toEqual(formFieldBoundingBoxWithoutRequired.height);\n    });\n\n    test('Should well update of the required marker when property required is toggled', async ({ page }: { page: E2EPage }) => {\n        // Given\n        await setWcsContent(page, `\n            <wcs-form-field>\n                <wcs-label id=\"label\">\n                    This label is long enough to wrap on multiple lines and end with\n                    <span id=\"last-word\">word</span>\n                </wcs-label>\n                <wcs-input required></wcs-input>\n            </wcs-form-field>\n        `);\n\n        const wcsInput = page.locator('wcs-input');\n        const requiredMarker = page.locator('.required-marker');\n\n        // Then\n        await expect(requiredMarker).toBeVisible();\n\n        // When\n        await wcsInput.evaluate((el: any) => el.required = false);\n\n        // Then\n        await expect(requiredMarker).toBeHidden();\n    });\n});\n"]}

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

@@ -28,7 +28,7 @@ export class Label {
         setOrRemoveAttribute(this.nativeLabel, attr, value);
     }
     render() {
-        return (h(Host, { key: '62f8ca37637cc792483f24476dbbd63ff3c077e5', slot: "label" }, h("label", Object.assign({ key: '3cef9a517d57652b75af3157d2c96a34693b258f', ref: (el) => this.nativeLabel = el }, this.inheritedAttributes), h("slot", { key: 'a614b379b45ac3d4cc1d58c45d39b64c0312c1d7' }))));
+        return (h(Host, { key: 'bd18c1a58190a8a8ada92b47f3b77e58c89c3169', slot: "label" }, h("label", Object.assign({ key: '7fc3b63d96cf88eb8b31abd2b0055feebe02f696', ref: (el) => this.nativeLabel = el }, this.inheritedAttributes), h("slot", { key: 'b997f691e437b758f3ebe0f0899605430b10388a' }), this.required && h("span", { key: '529194ed383d724c570a9bca56ee23dc9b9f0fce', "aria-hidden": "true", class: "required-marker" }, "*"))));
     }
     static get is() { return "wcs-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../src/components/label/label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE9F,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAErG,MAAM,qBAAqB,GAAG,CAAC,OAAO,CAAC,CAAC;AAExC;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,KAAK;;QAGN,wBAAmB,GAAyB,EAAE,CAAC;wBAMV,KAAK;;IAElD,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,qBAAqB,CAAC,CACvD,CAAC;IACN,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACxD,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO;YACd,4EAAO,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,IAAM,IAAI,CAAC,mBAAmB;gBACnE,8DAAQ,CACJ,CACL,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/**\n * The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n *\n * ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n */\n@Component({\n    tag: 'wcs-label',\n    styleUrl: 'label.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeLabel?: HTMLLabelElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, marks the label with a red star.\n     * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n     */\n    @Prop({ reflect: true }) required: boolean = false;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeLabel, attr, value);\n    }\n\n    render() {\n        return (\n            <Host slot=\"label\">\n                <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n                    <slot />\n                </label>\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../src/components/label/label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE9F,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAErG,MAAM,qBAAqB,GAAG,CAAC,OAAO,CAAC,CAAC;AAExC;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,KAAK;;QAGN,wBAAmB,GAAyB,EAAE,CAAC;wBAMV,KAAK;;IAElD,iBAAiB;QACb,IAAI,CAAC,mBAAmB,mCACjB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,GAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,qBAAqB,CAAC,CACvD,CAAC;IACN,CAAC;IAGD,KAAK,CAAC,gBAAgB,CAAC,IAAuB,EAAE,KAAgC;QAC5E,oBAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IACxD,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO;YACd,4EAAO,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,IAAM,IAAI,CAAC,mBAAmB;gBACnE,8DAAQ;gBACP,IAAI,CAAC,QAAQ,IAAI,4EAAkB,MAAM,EAAC,KAAK,EAAC,iBAAiB,QAAS,CACvE,CACL,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, ComponentInterface, h, Host, Method, Prop, Element } from '@stencil/core';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\n\nconst LABEL_INHERITED_ATTRS = ['title'];\n\n/**\n * The `wcs-label` should always be wrapped in a `wcs-form-field`.\n * It is used to caption a form control component.\n *\n * ## Accessibility guidelines 💡\n * - Use concise name for the label. If you want to describe more your form control, add a `wcs-hint`\n * - Use the required flag only as an indication to inform users that the form control is required\n * \n * @cssprop --wcs-label-color - Color of the text\n * @cssprop --wcs-label-font-weight - Font weight of the text\n * \n * @cssprop --wcs-label-required-marker-color - Color of the required marker\n * \n * @cssprop --wcs-label-gap - Gap between text and required marker\n */\n@Component({\n    tag: 'wcs-label',\n    styleUrl: 'label.scss',\n    shadow: true,\n})\nexport class Label implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el!: HTMLElement;\n    private nativeLabel?: HTMLLabelElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, marks the label with a red star.\n     * Automatically added if the wrapped component inside the `wcs-form-field` already has the `required` attribute. \n     */\n    @Prop({ reflect: true }) required: boolean = false;\n\n    componentWillLoad() {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, LABEL_INHERITED_ATTRS),\n        };\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeLabel, attr, value);\n    }\n\n    render() {\n        return (\n            <Host slot=\"label\">\n                <label ref={(el) => this.nativeLabel = el} {...this.inheritedAttributes}>\n                    <slot />\n                    {this.required && <span aria-hidden=\"true\" class=\"required-marker\">*</span>}\n                </label>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/list-item/list-item.js

@@ -35,7 +35,7 @@ export class ListItem {
         this.activated = false;
     }
     render() {
-        return (h(Host, { key: '12f53246cdb5922136d782f186573f3558bebbed' }, h("slot", { key: 'e03247aafa44501292b6c86d58455dc91240151c', name: "icon" }), h("div", { key: '24b4b6b485457e2c37001360f55ce1f4e843366e', class: "content" }, h("div", { key: '736464f3f43ccbdd2a204c3a7b54b78f8ef79c4e', class: "header" }, h("div", { key: '13da0ca922bf545f5610326f5abfc135b66389c5' }, h("slot", { key: '1eb08b7d5aa3bef934f39527204f2633f51325df', name: "title" }), h("slot", { key: '3d506707345797e7e40246b18dc0aac557726d3c', name: "properties" })), h("slot", { key: '1a2afea410fe835bc8570e10e5f72a044d7a0218', name: "actions" })), h("slot", { key: 'b0e4e3ed4cb20abb4d80ac7ff8893cd7b6311aec', name: "description" }))));
+        return (h(Host, { key: '1137c9770d8b50d24e8bb3187e586aca7a1ee3b9' }, h("slot", { key: '0c44655427e84534f1d6932ac3458d828cd31159', name: "icon" }), h("div", { key: '369bbe90f5d5c7a332732c3ba819b5959d09a25b', class: "content" }, h("div", { key: 'cd9c45f16a2455d1fe227d7d1e7e077d0327617d', class: "header" }, h("div", { key: 'c51172bf63657b2dde77836600ba3940ddde092b' }, h("slot", { key: '32452ee6fe06aa7d1652c5246c42afa3a2a66fbf', name: "title" }), h("slot", { key: '0bc5cf05d0fae6688ebb842bdeff3d88aa8682d8', name: "properties" })), h("slot", { key: '57ad3703881078ebd491166d874bd9593f6a405f', name: "actions" })), h("slot", { key: '70f35aa3d2034a8fb04c934d2659997a8b4c268b', name: "description" }))));
     }
     static get is() { return "wcs-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list-item-properties/list-item-properties.js

@@ -11,7 +11,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ListItemProperties {
     render() {
-        return (h(Host, { key: 'c9403bd863f3fbd182426df25c089d61ac3e5986', slot: "properties" }, h("slot", { key: '23baae7bd7dc743b23fc5598c8a60b6edf37f9c4', name: "property" })));
+        return (h(Host, { key: '168f5a846e64177a50b350cb90bee3b15a7eb871', slot: "properties" }, h("slot", { key: 'f5f3a8caa0da9384d409340f51f41c11971a0904', name: "property" })));
     }
     static get is() { return "wcs-list-item-properties"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list-item-property/list-item-property.js

@@ -10,7 +10,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ListItemProperty {
     render() {
-        return (h(Host, { key: '8f87008b8f9a847e0ef6ca55d87b2eec24eb1763', slot: "property" }, h("slot", { key: '5ad7e2f0f44d93c9ba599f23a850648f88dbefb9' })));
+        return (h(Host, { key: '036366a768b3e90eb028cbdf18d006a595282420', slot: "property" }, h("slot", { key: 'f5ad277671ba35e014635562b97a279813e5bb0c' })));
     }
     static get is() { return "wcs-list-item-property"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mat-icon/mat-icon.js

@@ -25,7 +25,7 @@ export class MatIcon {
         setOrRemoveAttribute(this.nativeIcon, attr, value);
     }
     render() {
-        return (h(Host, { key: '57b0feb64492a614f69e255808dd5ae511e6b1f2' }, h("i", Object.assign({ key: '57475c2aaf39a6f719fc65a5c58f14df97c49db0', "aria-hidden": "true", class: ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size, ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes), this.icon)));
+        return (h(Host, { key: 'dec260ca9c57892e17402365e179a17a0e085b18' }, h("i", Object.assign({ key: 'f9e8fb980b2a99bff272b08c629347f6c1b28d49', "aria-hidden": "true", class: ICON_FAMILY_CLASS_NAME[this.family] + ' size-' + this.size, ref: (el) => (this.nativeIcon = el) }, this.inheritedAttributes), this.icon)));
     }
     static get is() { return "wcs-mat-icon"; }
     static get encapsulation() { return "shadow"; }

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() })), h("div", { key: '7c332e9d1c1b19b65fabb6f52bc14ab0ed9f4803', class: "wcs-modal-actions" }, h("slot", { key: '4c44f2337893ba9e8c852a1b8b16beab9da87e4e', name: "actions" })))));
+        return (h(Host, { key: '2d08c87dcf9936d24dae178ee6a9cf84fb181faf' }, h("div", Object.assign({ key: '51c1cbdb0bfc0fbba675508fb7e9fafdc6adc8e4', 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: 'b62c495d23a0040eb160a93ccf858f7f0f60f83f', class: "wcs-modal-header" }, h("h1", { key: '8ea9cf9b9623305b79ed8f7cab3c2bf7e8ff242d', id: modalTitleId }, h("slot", { key: '972069f3d03047d4c56d8ea3c129f4296de4eb16', name: "header" })), this.showCloseButton && (h("wcs-button", { key: '49bf558d8092030497d29b399efb84c78f1c8748', shape: "round", mode: "clear", id: "wcs-modal-close-button", "aria-label": this.closeButtonAriaLabel, onClick: ($event) => this.onCloseButtonClick($event) }, h("wcs-mat-icon", { key: '1f2354939c40f22c2661a8a7383dfb9416b9c9da', icon: "close" })))), h("div", { key: '8f3fca88fa36f779c3d67f8694bee5a6386346e8', class: "wcs-modal-content" }, h("slot", { key: '4a65490518cbb450e825a9149e8516a3102f8ae3', onSlotchange: () => this.handleSlotContentChange() })), h("div", { key: 'be4cb11ff95787c58c6ac690a46522fcc04a6249', class: "wcs-modal-actions" }, h("slot", { key: '13a989d259e04ecdb1f89fcaafb7ab13898aee71', name: "actions" })))));
     }
     static get is() { return "wcs-modal"; }
     static get originalStyleUrls() {

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

@@ -190,7 +190,7 @@ export class NativeSelect {
         this._updateStyles();
     }
     render() {
-        return (h(Host, { key: 'dedd08d93118cc5323b6d2062577275504972b12', class: `${this.expanded ? 'expanded' : ''}`, "data-disabled": this.disabled, "data-size": this.size }, h("div", { key: 'bd211e20d0ab314767729ab54611c3d28fb8cca7', class: "select-wrapper" }, h("slot", { key: 'b0e58a954d0212c19a05395065ad5ed76efa9f39' }), h("div", { key: '5f70166ee1756180982a43151b9762e1cfec51d4', class: "arrow-container" }, h(SelectArrow, { key: 'ed256e18a87ab7cf17af6b5226ee6f10779d5bb1', up: this.expanded })))));
+        return (h(Host, { key: '12431927c41eb386de134e92e5583fc0ff582b44', class: `${this.expanded ? 'expanded' : ''}`, "data-disabled": this.disabled, "data-size": this.size }, h("div", { key: 'b935ff599bc9829b0c771bf5aa13ae3605cddd98', class: "select-wrapper" }, h("slot", { key: 'c02ba432172f6b608f808a6365487b4ec7528a68' }), h("div", { key: '53841e3831eeb19165511caabe0f49e6b0a693d4', class: "arrow-container" }, h(SelectArrow, { key: '6b474db9957a98e8dada3ce4cda752a7299c5bf9', up: this.expanded })))));
     }
     static get is() { return "wcs-native-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nav/nav.js

@@ -21,7 +21,7 @@ export class Nav {
         setOrRemoveAttribute(this.nativeNav, attr, value);
     }
     render() {
-        return (h("nav", Object.assign({ key: '3461a64de9b036b1a970e58a26a70f70772491c8', role: "navigation", class: "wcs-nav-container", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), h("div", { key: 'aa68166f70a54e44e78c0fe8a61c224bed4bcb3e', role: "list" }, h("slot", { key: '9e6315dafb2038e8577b2402dae1a646587dbb5f' }), h("slot", { key: '8dcddd80f189c8ade3ceb24cd5e36b8d03083a80', name: "bottom" }))));
+        return (h("nav", Object.assign({ key: '73683911e6d8f624fb152a40e723d1b0920a6265', role: "navigation", class: "wcs-nav-container", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), h("div", { key: 'e381eab2ef05be7bf28c3eff3e02034d7605015d', role: "list" }, h("slot", { key: '714a44e78e9d8495e1da0fd3f002e9cf769cdf95' }), h("slot", { key: '570a520fd2f16386c14a250e5786bd97ed3ba293', name: "bottom" }))));
     }
     static get is() { return "wcs-nav"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nav-item/nav-item.js

@@ -45,7 +45,7 @@ export class NavItem {
         }
     }
     render() {
-        return (h(Host, { key: '79abea50c0964fd39358ecf7ed23030f9096b1fd', role: "listitem" }, h("slot", { key: 'dad7099b9fb08309052b2c35f2bc3a97c40b3ecb' })));
+        return (h(Host, { key: '3d329f63e895cf09a57e1a0d8304cf833b0ba434', role: "listitem" }, h("slot", { key: 'bc4dadc9a3b665412880da1671aa518d7ecf290f' })));
     }
     static get is() { return "wcs-nav-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/progress-bar/progress-bar.js

@@ -54,8 +54,8 @@ export class ProgressBar {
         const style = {
             width: this.value + '%'
         };
-        return (h("div", Object.assign({ key: '5fe4671aeaaf799d336e38c4bd49f021b4fbb27b', class: this.rootClasses(), role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', ref: (el) => (this.nativeProgress = el) }, this.inheritedAttributes), h("div", { key: '9278d7110c3fed850ddcf1a06ff29a60fb4ebbd8', class: "progress-bar", style: style }, this.showLabel &&
-            h("span", { key: 'ac5758b7b685fc08ecf4592b7194666d751c4b87', class: "progress-label" }, this.value, h("sup", { key: '313cec9fb8df686b3affb9a9002e1c6055249f0b' }, "%")))));
+        return (h("div", Object.assign({ key: 'f13a43d675ed082f811784a998e8bcd54e45a782', class: this.rootClasses(), role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', ref: (el) => (this.nativeProgress = el) }, this.inheritedAttributes), h("div", { key: '861383fa1ae516512a730cad52d1b9dc2ee55809', class: "progress-bar", style: style }, this.showLabel &&
+            h("span", { key: '0f0a9f0ce03562199f6a743f8dc653e276719b37', class: "progress-label" }, this.value, h("sup", { key: '8fa2735668eea7f46562e52748122e2e4fad9908' }, "%")))));
     }
     rootClasses() {
         let classes = 'progress';

package/dist/collection/components/progress-radial/progress-radial.js

@@ -45,8 +45,8 @@ export class ProgressRadial {
     }
     render() {
         const { backgroundImageSize, halfSize } = { backgroundImageSize: this.backgroundImageSize, halfSize: this.backgroundImageSize / 2 };
-        return (h("div", Object.assign({ key: '7da6ed9d04399e5ff473d112d6a111696c9b14bc', class: "progress-circle", "data-component": "radial-progress", style: this.getSize(), role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', ref: (el) => (this.nativeProgress = el) }, this.inheritedAttributes), h("svg", { key: '226ed7d14005563adc1e55e7ba28c3bb49ed1d95', "data-role": "figure", class: "circle-rail", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}` }, h("circle", { key: 'a50b905a8c36416ce3ede895affbda05a30b1c1b', cx: halfSize, cy: halfSize, r: 54, "stroke-width": 12 })), h("svg", { key: '7d58cf8a614acdff769c769ecca919b86792cd0d', class: "progress-circle-figure", "data-role": "figure", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}`, style: this.getSvgStyle() }, h("circle", { key: '11f22fd6a506b226a0e8a450163ac5c3a0fcbe44', class: "progress-circle-value", cx: halfSize, cy: halfSize, r: "54", "stroke-width": "12" })), this.showLabel &&
-            h("div", { key: 'a87680ab5a59f4e34072dde8a2f7d15ef4b671e9', class: "progress-circle-label", "data-role": "label" }, h("span", { key: 'fe65c818b10f58562d65f7f330a21a794f8b876f' }, h("span", { key: '337459684703272ec7817fe64226e2df10341e9c', "data-role": "labelvalue" }, this.value), h("sup", { key: '45f173f53dcfa8e85ea0986f28e8848f75d24434' }, "%")))));
+        return (h("div", Object.assign({ key: 'cd493dcab22c92a8683a89e394f51abfbabd0781', class: "progress-circle", "data-component": "radial-progress", style: this.getSize(), role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.value, "aria-valuetext": this.value + '%', ref: (el) => (this.nativeProgress = el) }, this.inheritedAttributes), h("svg", { key: 'e2c4ff80a735815ebbaf051f94108ca5e9a246fa', "data-role": "figure", class: "circle-rail", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}` }, h("circle", { key: '375db58b06b0f2c75dbd390e547ccc81258fdf43', cx: halfSize, cy: halfSize, r: 54, "stroke-width": 12 })), h("svg", { key: '6cf1fe11b1ec49d8f7cc7b1d53819bad47b24e3d', class: "progress-circle-figure", "data-role": "figure", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}`, style: this.getSvgStyle() }, h("circle", { key: '657a8ba78283a98c568eb436d9bfafdebf354934', class: "progress-circle-value", cx: halfSize, cy: halfSize, r: "54", "stroke-width": "12" })), this.showLabel &&
+            h("div", { key: '7ac452d83ad4bf88fc1e3d2bf63506e30185d115', class: "progress-circle-label", "data-role": "label" }, h("span", { key: 'e8827e91faeb2b1a36737ba35250ca0e9d64b830' }, h("span", { key: 'de2c9502060d10e020acbdc939efdcae4abc74d8', "data-role": "labelvalue" }, this.value), h("sup", { key: '9c872051b94e6ca06eae6a967c75173a0d03ee9a' }, "%")))));
     }
     getSvgStyle() {
         return {

package/dist/collection/components/radio/radio.css

@@ -53,6 +53,14 @@
   --wcs-radio-option-padding-right: var(--wcs-semantic-spacing-large);
   --wcs-radio-option-padding-bottom: var(--wcs-semantic-spacing-base);
   --wcs-radio-option-padding-left: var(--wcs-semantic-spacing-large);
+  /*
+  * DO NOT REMOVE:
+  * The native input is absolutely positioned.
+  * This `position: relative` makes `wcs-radio` its containing block.
+  * Without it, the input can be laid out relative to another ancestor higher in the DOM,
+  * so when the browser focuses the native control it may scroll the window unexpectedly.
+  */
+  position: relative;
 }
 
 :host([mode=radio]) input,
@@ -65,15 +73,15 @@
   clip-path: inset(50%);
   white-space: nowrap;
 }
-:host([mode=radio]) label,
-:host([mode=horizontal]) label {
+:host([mode=radio]) .label,
+:host([mode=horizontal]) .label {
   margin-bottom: 0;
   color: var(--wcs-radio-text-color-default);
   font-weight: var(--wcs-radio-text-font-weight-default) !important;
   display: inline-block;
 }
-:host([mode=radio]) label:before,
-:host([mode=horizontal]) label:before {
+:host([mode=radio]) .label:before,
+:host([mode=horizontal]) .label:before {
   border-radius: var(--wcs-radio-checkmark-border-radius);
   border: var(--wcs-radio-checkmark-border-width) solid var(--wcs-radio-checkmark-border-color-default);
   position: relative;
@@ -83,87 +91,90 @@
   content: "";
   background-color: var(--wcs-radio-checkmark-background-color-default);
 }
-:host([mode=radio]) input:focus-visible + label,
-:host([mode=horizontal]) input:focus-visible + label {
+
+:host(:focus-visible) {
+  outline: none;
+}
+:host(:focus-visible) .label {
   transition: none;
   outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);
   outline-offset: var(--wcs-semantic-spacing-small);
   border-radius: var(--wcs-radio-border-radius);
 }
 
-:host([disabled]) label {
+:host([disabled]) .label {
   color: var(--wcs-radio-text-color-disabled);
   cursor: not-allowed;
 }
-:host([disabled]) label:before {
+:host([disabled]) .label:before {
   border-color: var(--wcs-radio-checkmark-border-color-disabled);
 }
 
-:host(:not([disabled])) label {
+:host(:not([disabled])) .label {
   cursor: pointer;
 }
 
-:host([mode=radio].checked) label,
-:host([mode=horizontal].checked) label {
+:host([mode=radio].checked) .label,
+:host([mode=horizontal].checked) .label {
   color: var(--wcs-radio-text-color-selected);
   font-weight: var(--wcs-radio-text-font-weight-selected) !important;
 }
-:host([mode=radio].checked) label:before,
-:host([mode=horizontal].checked) label:before {
+:host([mode=radio].checked) .label:before,
+:host([mode=horizontal].checked) .label:before {
   border-color: var(--wcs-radio-checkmark-border-color-selected);
   background-color: var(--wcs-radio-checkmark-background-color-selected);
   outline: solid var(--wcs-radio-checkmark-outline-width) var(--wcs-radio-checkmark-outline-color);
   outline-offset: calc(-1 * var(--wcs-radio-checkmark-outline-distance-with-checkmark-circle));
 }
 
-:host([mode=radio][disabled].checked) label,
-:host([mode=horizontal][disabled].checked) label {
+:host([mode=radio][disabled].checked) .label,
+:host([mode=horizontal][disabled].checked) .label {
   color: var(--wcs-radio-text-color-disabled);
 }
-:host([mode=radio][disabled].checked) label:before,
-:host([mode=horizontal][disabled].checked) label:before {
+:host([mode=radio][disabled].checked) .label:before,
+:host([mode=horizontal][disabled].checked) .label:before {
   border-color: var(--wcs-radio-checkmark-border-color-disabled);
   background-color: var(--wcs-radio-checkmark-background-color-selected-disabled);
 }
 
-:host([mode=radio]:hover:not([disabled])) label,
-:host([mode=horizontal]:hover:not([disabled])) label {
+:host([mode=radio]:hover:not([disabled])) .label,
+:host([mode=horizontal]:hover:not([disabled])) .label {
   color: var(--wcs-radio-text-color-hover);
 }
-:host([mode=radio]:hover:not([disabled])) label:before,
-:host([mode=horizontal]:hover:not([disabled])) label:before {
+:host([mode=radio]:hover:not([disabled])) .label:before,
+:host([mode=horizontal]:hover:not([disabled])) .label:before {
   border-color: var(--wcs-radio-checkmark-border-color-hover);
   background-color: var(--wcs-radio-checkmark-background-color-selected-hover);
 }
 
-:host([mode=radio]:hover:not([disabled]):not(.checked)) label:before,
-:host([mode=horizontal]:hover:not([disabled]):not(.checked)) label:before {
+:host([mode=radio]:hover:not([disabled]):not(.checked)) .label:before,
+:host([mode=horizontal]:hover:not([disabled]):not(.checked)) .label:before {
   background-color: var(--wcs-radio-checkmark-background-color-default);
 }
 
-:host([mode=radio]) label {
+:host([mode=radio]) .label {
   border: none;
 }
-:host([mode=radio]) label:before {
+:host([mode=radio]) .label:before {
   transition: background-color var(--wcs-radio-transition-duration) ease-in-out;
   margin-right: var(--wcs-radio-gap);
   display: inline-block;
   top: 3px;
   box-sizing: border-box;
 }
-:host([mode=radio]) label:empty::before {
+:host([mode=radio]) .label:empty::before {
   margin-right: 0;
 }
 
 :host([mode=horizontal]) {
   height: fit-content;
 }
-:host([mode=horizontal]) label:before {
+:host([mode=horizontal]) .label:before {
   transition: background-color var(--wcs-radio-transition-duration) ease-in-out;
   margin: auto auto var(--wcs-radio-gap);
   display: block;
 }
-:host([mode=horizontal]) label:empty::before {
+:host([mode=horizontal]) .label:empty::before {
   margin-bottom: 0;
 }
 
@@ -177,7 +188,7 @@
   box-sizing: border-box;
   padding: 0;
 }
-:host([mode=option]) label {
+:host([mode=option]) .label {
   padding: var(--wcs-radio-option-padding-top) var(--wcs-radio-option-padding-right) var(--wcs-radio-option-padding-bottom) var(--wcs-radio-option-padding-left);
   margin-bottom: 0;
   color: var(--wcs-radio-option-text-color-default);
@@ -186,45 +197,45 @@
   transition: background-color var(--wcs-radio-transition-duration) ease-in-out;
   background-color: var(--wcs-radio-option-background-color-default);
 }
-:host([mode=option]) input:focus-visible + label {
+:host([mode=option]) input:focus-visible + .label {
   outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-radio-outline-color-focus);
   outline-offset: 0;
   border-radius: var(--wcs-radio-border-radius);
 }
 
-:host([mode=option][disabled]) label {
+:host([mode=option][disabled]) .label {
   color: var(--wcs-radio-option-text-color-disabled);
   background-color: var(--wcs-radio-option-background-color-disabled);
 }
 
-:host([mode=option][disabled].checked) label {
+:host([mode=option][disabled].checked) .label {
   color: var(--wcs-radio-option-text-color-disabled);
   background-color: var(--wcs-radio-option-background-color-selected-disabled);
 }
 
-:host([mode=option].checked) label {
+:host([mode=option].checked) .label {
   font-weight: var(--wcs-radio-option-text-font-weight-selected) !important;
   color: var(--wcs-radio-option-text-color-selected-default);
   background-color: var(--wcs-radio-option-background-color-selected-default);
 }
 
-:host([mode=option]:hover.checked:not([disabled])) label {
+:host([mode=option]:hover.checked:not([disabled])) .label {
   color: var(--wcs-radio-option-text-color-selected-hover);
   background-color: var(--wcs-radio-option-background-color-selected-hover);
 }
 
-:host([mode=option]:active.checked:not([disabled])) label {
+:host([mode=option]:active.checked:not([disabled])) .label {
   color: var(--wcs-radio-option-text-color-selected-press);
   background-color: var(--wcs-radio-option-background-color-selected-press);
 }
 
-:host([mode=option]:hover:not(.checked):not([disabled])) label {
+:host([mode=option]:hover:not(.checked):not([disabled])) .label {
   color: var(--wcs-radio-option-text-color-hover);
   background-color: var(--wcs-radio-option-background-color-hover);
   outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-hover);
 }
 
-:host([mode=option]:active:not(.checked):not([disabled])) label {
+:host([mode=option]:active:not(.checked):not([disabled])) .label {
   color: var(--wcs-radio-option-text-color-press);
   background-color: var(--wcs-radio-option-background-color-press);
   outline: var(--wcs-radio-option-border-width) solid var(--wcs-radio-option-border-color-press);

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

@@ -1,6 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from "../../utils/helpers";
-const RADIO_INHERITED_ATTRS = ['title'];
+import { setOrRemoveAttribute } from "../../utils/helpers";
 /**
  * The radio component should always be wrapped in a `wcs-radio-group`.
  *
@@ -69,8 +68,18 @@ const RADIO_INHERITED_ATTRS = ['title'];
  */
 export class Radio {
     constructor() {
-        this.inputId = `wcs-rb-${radioButtonIds++}`;
-        this.inheritedAttributes = {};
+        this.handleClick = () => {
+            this.selectRadio();
+        };
+        this.handleKeyDown = (event) => {
+            if (this.disabled)
+                return;
+            if (event.key === ' ' || event.key === 'Enter') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.selectRadio();
+            }
+        };
         this.checked = false;
         this.radioTabIndex = -1;
         this.value = undefined;
@@ -94,7 +103,7 @@ export class Radio {
         this.radioTabIndex = value;
     }
     async setAriaAttribute(attr, value) {
-        setOrRemoveAttribute(this.nativeRadio, attr, value);
+        setOrRemoveAttribute(this.el, attr, value);
     }
     onFocus(ev) {
         this.wcsFocus.emit(ev);
@@ -110,18 +119,6 @@ export class Radio {
             // If no value was given we use the text content instead.
             this.value = this.el.innerText || '';
         }
-        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, RADIO_INHERITED_ATTRS));
-    }
-    onChange(_) {
-        if (this.disabled)
-            return;
-        // If the radio is unchecked, then the change represents its transition to the check state.
-        // Only emit the change event when going from unchecked to checked, like the native behavior.
-        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
-        if (!this.checked) {
-            this.checked = true;
-            this.emitRadioChangeEvent();
-        }
     }
     emitRadioChangeEvent() {
         this.wcsRadioClick.emit({
@@ -130,12 +127,20 @@ export class Radio {
             value: this.value
         });
     }
+    selectRadio() {
+        if (this.disabled || this.checked) {
+            return;
+        }
+        this.checked = true;
+        // Only emit the change event when going from unchecked to checked, like the native behavior.
+        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
+        this.emitRadioChangeEvent();
+    }
     render() {
-        return (h(Host, { key: 'b753f4673fccbd2f0d7e1636be135da90e1850ef', slot: "option", tabIndex: this.disabled ? -1 : this.radioTabIndex, class: this.checked ? 'checked' : '' }, h("input", Object.assign({ key: '25ac2afe93bdde452db9226feb11587f76a4fd69', id: this.inputId, type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, ref: (el) => (this.nativeRadio = el) }, this.inheritedAttributes)), h("label", { key: '13b771ac257bcf81734cee12a85ffdf143e3c329', htmlFor: `${this.inputId}` }, this.label)));
+        return (h(Host, { key: '0720e7983a66998bef080116aec041f3309d70dd', slot: "option", role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : this.radioTabIndex, class: this.checked ? 'checked' : '', onClick: this.handleClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), onKeyDown: this.handleKeyDown.bind(this) }, h("span", { key: 'bb2fb56fa6c5354a54b4debba078b0c129534e74', class: "label" }, this.label)));
     }
     static get is() { return "wcs-radio"; }
     static get encapsulation() { return "shadow"; }
-    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["radio.scss"]
@@ -399,5 +404,4 @@ export class Radio {
     }
     static get elementRef() { return "el"; }
 }
-let radioButtonIds = 0;
 //# sourceMappingURL=radio.js.map