wcs-core 7.5.1 → 7.7.0

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: '8b3a10c56fd18186c5b2c008eaf89622dd4c5fb3', role: "navigation", class: "wcs-nav-container", ref: (el) => (this.nativeNav = el) }, this.inheritedAttributes), h("div", { key: 'b9da00e54fb3036e9895f5d5c7e643086c829b41', role: "list" }, h("slot", { key: '5e19bf73400b92757e9a33257649213ae7c4b0f9' }), h("slot", { key: '6870ba04c2a975acbbc2782c96aa27a8a20d013d', 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: '3e5ca93ea18059c67d5570ee407192c70b9a5af1', role: "listitem" }, h("slot", { key: '4ce442473084b0e18fe3cc19248c349f026715f1' })));
     }
     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: 'cd24dba649fb46f84967e857ef6e29a0eb521794', 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: 'd0e92be2503030a665daf0ee4be4022845a63355', class: "progress-bar", style: style }, this.showLabel &&
+            h("span", { key: '06b7517e88d8ebafd6a28fc4dfabe38b93d3f0c3', class: "progress-label" }, this.value, h("sup", { key: '0e53ebfa29c4ee42831e9432bede449a9f71b313' }, "%")))));
     }
     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: '41c91ae3fadd538ad2b7c201f8def9c32fba54fa', 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: 'b3487735133ac25fd54d315aae3c59d55a35be5c', "data-role": "figure", class: "circle-rail", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}` }, h("circle", { key: 'a10400986a13c10f05ecf809f596d9064bfca7e4', cx: halfSize, cy: halfSize, r: 54, "stroke-width": 12 })), h("svg", { key: '5ea4655662fe08b668fb5508243bd1fb955c4484', class: "progress-circle-figure", "data-role": "figure", viewBox: `0 0 ${backgroundImageSize} ${backgroundImageSize}`, style: this.getSvgStyle() }, h("circle", { key: 'e84165f37b549e4f30ad9242fa65e871f615f550', class: "progress-circle-value", cx: halfSize, cy: halfSize, r: "54", "stroke-width": "12" })), this.showLabel &&
+            h("div", { key: '2f982e974db32f833d5227e79641cc400a845b70', class: "progress-circle-label", "data-role": "label" }, h("span", { key: 'ec3f7ab4833a1b5f9f061dd17374e89f9040f00f' }, h("span", { key: '8707ff80a7160a681c3fb056adba8c65a6c5bd22', "data-role": "labelvalue" }, this.value), h("sup", { key: '5119ede23174dba5a0b13187b5abb37a6c1d785b' }, "%")))));
     }
     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: '19c87ecc30754b5534fe6fd0c10540d1701d9742', 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: '4dcb066b114426a822fb46f225d96c499b24e628', 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

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

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst RADIO_INHERITED_ATTRS = ['title'];\n\n/**\n * The radio component should always be wrapped in a `wcs-radio-group`.\n * \n * @cssprop --wcs-radio-transition-duration - Duration of the transition\n * \n * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected\n * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected\n * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected\n * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled\n * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered\n * \n * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused\n * \n * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected\n * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered\n * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled\n * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected\n * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled\n * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered\n *\n * @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle\n * \n * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label\n * \n * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode)\n *\n * @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected\n * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered\n * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed\n * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled\n * \n * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected\n * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered\n * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed\n * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled\n * \n * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected\n * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered\n * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed\n * \n * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected\n * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered\n * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed\n * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled\n * \n * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected\n *\n * @cssprop --wcs-radio-option-border-radius - Border radius of the radio option\n * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option\n * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered\n * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed\n * \n * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option\n * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option\n * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option\n * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option\n */\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: {\n        delegatesFocus: true\n    }\n})\nexport class Radio implements ComponentInterface, MutableAriaAttribute {\n    private inputId = `wcs-rb-${radioButtonIds++}`;\n    @Element() private el!: HTMLWcsRadioElement;\n    private nativeRadio!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    \n    /**\n     * If `true`, the radio is selected. \n     * @private\n     */\n    @State() private checked: boolean = false;\n\n    /**\n     * The tabindex of the radio button\n     * @private\n     */\n    @State() private radioTabIndex = -1;\n\n    /**\n     * Sets a unique value for each radio, used to identify which radio button in a group is selected\n     */\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The label text displayed for the user\n     */\n    @Prop({ mutable: true, reflect: true }) label: string;\n    \n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the radio is clicked or Space/Enter is pressed above an unchecked radio\n     */\n    @Event({ eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    /**\n     * Emitted when the radio loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the radio has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * The name of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ mutable: true }) name: string;\n\n\n    /**\n     * The display mode of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    /**\n     * @internal\n     * Checks of unchecks the radio according to it's radio-group value\n     */\n    @Method()\n    async updateState() {\n        const radioGroup = this.getClosestRadioGroup();\n        if (radioGroup) {\n            this.checked = radioGroup.name === this.name && radioGroup.value === this.value\n        }\n    }\n\n    /** @internal */\n    @Method()\n    async setTabIndex(value: number) {\n        this.radioTabIndex = value;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeRadio, attr, value);\n    }\n\n    onFocus(ev: FocusEvent) {\n        this.wcsFocus.emit(ev);\n    }\n\n    onBlur(ev: FocusEvent) {\n        this.wcsBlur.emit(ev);\n    }\n    \n    private getClosestRadioGroup(): HTMLWcsRadioGroupElement | null {\n        return this.el.closest('wcs-radio-group');\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n        \n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, RADIO_INHERITED_ATTRS),\n        };\n    }\n    \n    private onChange(_: Event) {\n        if (this.disabled) return;\n\n        // If the radio is unchecked, then the change represents its transition to the check state.\n        // Only emit the change event when going from unchecked to checked, like the native behavior.\n        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n        if (!this.checked) {\n            this.checked = true;\n            this.emitRadioChangeEvent();\n        }\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    render() {\n        \n        return (\n            <Host slot=\"option\"\n                  tabIndex={this.disabled ? -1 : this.radioTabIndex}\n                  class={this.checked ? 'checked' : ''}>\n                <input\n                    id={this.inputId}\n                    type=\"radio\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked} // Initial checked state of native input\n                    disabled={this.disabled}\n                    onChange={this.onChange.bind(this)}\n                    onFocus={this.onFocus.bind(this)}\n                    onBlur={this.onBlur.bind(this)}\n                    aria-disabled={this.disabled ? 'true' : null}\n                    aria-checked={`${this.checked}`}\n                    ref={(el) => (this.nativeRadio = el)}\n                    {...this.inheritedAttributes}\n                />\n                <label htmlFor={`${this.inputId}`}>{this.label}</label>\n            </Host>\n        );\n    }\n}\n\nlet radioButtonIds = 0;\n"]}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Method,\n    Prop,\n    State\n} from '@stencil/core';\nimport { RadioChosedEvent } from './radio-interface';\nimport { RadioGroupMode } from '../radio-group/radio-group-interface';\nimport { setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/**\n * The radio component should always be wrapped in a `wcs-radio-group`.\n * \n * @cssprop --wcs-radio-transition-duration - Duration of the transition\n * \n * @cssprop --wcs-radio-text-color-default - Color of the text when the radio is not selected\n * @cssprop --wcs-radio-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-text-color-selected - Color of the text when the radio is selected\n * @cssprop --wcs-radio-text-font-weight-selected - Font weight of the text when the radio is selected\n * @cssprop --wcs-radio-text-color-disabled - Color of the text when the radio is disabled\n * @cssprop --wcs-radio-text-color-hover - Color of the text when the radio is hovered\n * \n * @cssprop --wcs-radio-outline-color-focus - Color of the outline when the radio is focused\n * \n * @cssprop --wcs-radio-checkmark-size - Size of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-width - Width of the border of the checkmark circle\n * @cssprop --wcs-radio-checkmark-border-color-default - Color of the border of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-border-color-selected - Color of the border of the checkmark circle when the radio is selected\n * @cssprop --wcs-radio-checkmark-border-color-hover - Color of the border of the checkmark circle when the radio is hovered\n * @cssprop --wcs-radio-checkmark-border-color-disabled - Color of the border of the checkmark circle when the radio is disabled\n * @cssprop --wcs-radio-checkmark-background-color-default - Background color of the checkmark circle when the radio's is not selected\n * @cssprop --wcs-radio-checkmark-background-color-selected - Background color of the checkmark circle when the radio's is selected\n * @cssprop --wcs-radio-checkmark-background-color-selected-disabled - Background color of the checkmark circle when the radio is selected and disabled\n * @cssprop --wcs-radio-checkmark-background-color-selected-hover - Background color of the checkmark circle when the radio is selected and hovered\n *\n * @cssprop --wcs-radio-checkmark-outline-distance-with-checkmark-circle - Distance between the checkmark circle and the outline (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-width - Width of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-outline-color - Color of the outline of the checkmark circle (inside the background)\n * @cssprop --wcs-radio-checkmark-border-radius - Border radius of the checkmark circle\n * \n * @cssprop --wcs-radio-gap - Gap between the radio checkmark circle and the label\n * \n * @cssprop --wcs-radio-border-radius - Border radius of the radio (default mode)\n *\n * @cssprop --wcs-radio-option-background-color-default - Background color of the radio option when not selected\n * @cssprop --wcs-radio-option-background-color-hover - Background color of the radio option not selected when hovered\n * @cssprop --wcs-radio-option-background-color-press - Background color of the radio option when pressed\n * @cssprop --wcs-radio-option-background-color-disabled - Background color of the radio option when disabled\n * \n * @cssprop --wcs-radio-option-background-color-selected-default - Background color of the radio option when selected\n * @cssprop --wcs-radio-option-background-color-selected-hover - Background color of the radio option when selected and hovered\n * @cssprop --wcs-radio-option-background-color-selected-press - Background color of the radio option when selected and pressed\n * @cssprop --wcs-radio-option-background-color-selected-disabled - Background color of the radio option when selected and disabled\n * \n * @cssprop --wcs-radio-option-text-color-default - Color of the text when the radio option is not selected\n * @cssprop --wcs-radio-option-text-color-hover - Color of the text when the radio option not selected is hovered\n * @cssprop --wcs-radio-option-text-color-press - Color of the text when the radio option is pressed\n * \n * @cssprop --wcs-radio-option-text-color-selected-default - Color of the text when the radio option is selected\n * @cssprop --wcs-radio-option-text-color-selected-hover - Color of the text when the radio option is selected and hovered\n * @cssprop --wcs-radio-option-text-color-selected-press - Color of the text when the radio option is selected and pressed\n * @cssprop --wcs-radio-option-text-color-disabled - Color of the text when the radio option's is disabled\n * \n * @cssprop --wcs-radio-option-text-font-weight-default - Default font weight of the text\n * @cssprop --wcs-radio-option-text-font-weight-selected - Font weight of the text when the radio option is selected\n *\n * @cssprop --wcs-radio-option-border-radius - Border radius of the radio option\n * @cssprop --wcs-radio-option-border-width - Width of the border of the radio option\n * @cssprop --wcs-radio-option-border-color-hover - Color of the border of the radio option when not selected and hovered\n * @cssprop --wcs-radio-option-border-color-press - Color of the border of the radio option when not selected and pressed\n * \n * @cssprop --wcs-radio-option-padding-top - Padding top of the radio option\n * @cssprop --wcs-radio-option-padding-right - Padding right of the radio option\n * @cssprop --wcs-radio-option-padding-bottom - Padding bottom of the radio option\n * @cssprop --wcs-radio-option-padding-left - Padding left of the radio option\n */\n@Component({\n    tag: 'wcs-radio',\n    styleUrl: 'radio.scss',\n    shadow: true\n})\nexport class Radio implements ComponentInterface, MutableAriaAttribute {\n    @Element() private readonly el!: HTMLWcsRadioElement;\n    \n    /**\n     * If `true`, the radio is selected. \n     * @private\n     */\n    @State() private checked: boolean = false;\n\n    /**\n     * The tabindex of the radio button\n     * @private\n     */\n    @State() private radioTabIndex = -1;\n\n    /**\n     * Sets a unique value for each radio, used to identify which radio button in a group is selected\n     */\n    @Prop({ mutable: true, reflect: true }) value: any | any[] | undefined | null;\n\n    /**\n     * The label text displayed for the user\n     */\n    @Prop({ mutable: true, reflect: true }) label: string;\n    \n    /**\n     * If `true`, the user cannot interact with the radio.\n     */\n    @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the radio is clicked or Space/Enter is pressed above an unchecked radio\n     */\n    @Event({ eventName: 'wcsRadioClick' }) wcsRadioClick: EventEmitter<RadioChosedEvent>\n\n    /**\n     * Emitted when the radio loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the radio has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * The name of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ mutable: true }) name: string;\n\n\n    /**\n     * The display mode of the control, automatically set by the radio group.  \n     * (You shouldn't set this prop by yourself)\n     * @internal\n     */\n    @Prop({ reflect: true, mutable: false }) mode: RadioGroupMode = 'radio';\n\n    /**\n     * @internal\n     * Checks of unchecks the radio according to it's radio-group value\n     */\n    @Method()\n    async updateState() {\n        const radioGroup = this.getClosestRadioGroup();\n        if (radioGroup) {\n            this.checked = radioGroup.name === this.name && radioGroup.value === this.value\n        }\n    }\n\n    /** @internal */\n    @Method()\n    async setTabIndex(value: number) {\n        this.radioTabIndex = value;\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.el, attr, value);\n    }\n\n    onFocus(ev: FocusEvent) {\n        this.wcsFocus.emit(ev);\n    }\n\n    onBlur(ev: FocusEvent) {\n        this.wcsBlur.emit(ev);\n    }\n    \n    private getClosestRadioGroup(): HTMLWcsRadioGroupElement | null {\n        return this.el.closest('wcs-radio-group');\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        if (this.value === undefined) {\n            // If no value was given we use the text content instead.\n            this.value = this.el.innerText || '';\n        }\n    }\n\n    emitRadioChangeEvent() {\n        this.wcsRadioClick.emit({\n            label: this.label,\n            source: this.el,\n            value: this.value\n        });\n    }\n\n    private selectRadio() {\n        if (this.disabled || this.checked) {\n            return;\n        }\n\n        this.checked = true;\n        // Only emit the change event when going from unchecked to checked, like the native behavior.\n        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event\n        this.emitRadioChangeEvent();\n    }\n\n    private readonly handleClick = () => {\n        this.selectRadio();\n    };\n\n    private readonly handleKeyDown = (event: KeyboardEvent) => {\n        if (this.disabled) return;\n\n        if (event.key === ' ' || event.key === 'Enter') {\n            event.preventDefault();\n            event.stopPropagation();\n            this.selectRadio();\n        }\n    };\n\n    render() {\n        \n        return (\n            <Host slot=\"option\"\n                  role=\"radio\"\n                  aria-checked={this.checked ? 'true' : 'false'}\n                  aria-disabled={this.disabled ? 'true' : 'false'}\n                  tabIndex={this.disabled ? -1 : this.radioTabIndex}\n                  class={this.checked ? 'checked' : ''}\n                  onClick={this.handleClick.bind(this)}\n                  onFocus={this.onFocus.bind(this)}\n                  onBlur={this.onBlur.bind(this)}\n                  onKeyDown={this.handleKeyDown.bind(this)}>\n                <span class=\"label\">{this.label}</span>\n            </Host>\n        );\n    }\n}\n"]}

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

@@ -2,6 +2,18 @@ import { setWcsContent } from "../../utils/playwright/test";
 import { test } from "@stencil/playwright";
 import { expect } from "@playwright/test";
 test.describe('Radio Group', () => {
+    test('should not render an interactive radio descendant inside wcs-radio', async ({ page }) => {
+        // Given
+        await setWcsContent(page, `
+            <wcs-radio-group>
+                <wcs-radio id="radio-1" label="SNCF" value="1"></wcs-radio>
+            </wcs-radio-group>
+        `);
+        const radio = page.locator('#radio-1');
+        // Then
+        await expect(radio).toHaveAttribute('role', 'radio');
+        await expect(radio.locator('input[type="radio"]')).toHaveCount(0);
+    });
     test('should navigate to the first not disabled radio when pressing tab key', async ({ page }) => {
         // Given
         await setWcsContent(page, `
@@ -57,8 +69,7 @@ test.describe('Radio Group', () => {
         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');
+        await expect(firstRadio).toHaveAttribute('aria-checked', 'true');
     });
     test('should navigate to the checked radio when pressing tab key', async ({ page }) => {
         // Given
@@ -90,13 +101,12 @@ test.describe('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');
+            await expect(thirdRadio).toHaveAttribute('aria-checked', 'true');
         });
         test('should checked the first not disabled radio when we are on the last radio', async ({ page }) => {
             // Given
@@ -113,7 +123,7 @@ test.describe('Radio Group', () => {
             await lastRadio.focus();
             await expect(lastRadio).toBeFocused();
             const secondRadio = page.locator('#radio-2');
-            const secondRadioNativeInputInput = page.locator('#radio-2 input');
+            const secondRadioNativeInputInput = page.locator('#radio-2');
             // When
             await page.keyboard.press('ArrowDown');
             // Then
@@ -139,6 +149,26 @@ test.describe('Radio Group', () => {
             // Then
             expect(radioClickSpy).toHaveReceivedEventTimes(1);
         });
+        test('should keep only the last clicked radio checked in the same group', 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 radio1 = page.locator('#radio-1');
+            const radio2 = page.locator('#radio-2');
+            // When
+            await radio1.click();
+            await page.waitForChanges();
+            await radio2.click();
+            await page.waitForChanges();
+            // Then
+            await expect(radio1).toHaveAttribute('aria-checked', 'false');
+            await expect(radio2).toHaveAttribute('aria-checked', 'true');
+        });
         test('should fire wcsChange when we click or move to an unchecked radio', async ({ page }) => {
             // Given
             await setWcsContent(page, `
@@ -164,6 +194,30 @@ test.describe('Radio Group', () => {
             await expect(radio3).toBeFocused(); // Ensure focus is on the third radio (next radio after radio2)
             expect(changeSpy).toHaveReceivedEventTimes(2);
         });
+        test('should keep only the last keyboard-selected radio checked in the same group', 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 radio1 = page.locator('#radio-1');
+            const radio2 = page.locator('#radio-2');
+            const radio3 = page.locator('#radio-3');
+            // When
+            await radio1.focus();
+            await page.keyboard.press('Space');
+            await page.waitForChanges();
+            await page.keyboard.press('ArrowDown');
+            await page.waitForChanges();
+            // Then
+            await expect(radio2).toBeFocused();
+            await expect(radio1).toHaveAttribute('aria-checked', 'false');
+            await expect(radio2).toHaveAttribute('aria-checked', 'true');
+            await expect(radio3).toHaveAttribute('aria-checked', 'false');
+        });
         test('should fire wcsBlur and wcsFocus from the radios', async ({ page }) => {
             // Given
             await setWcsContent(page, `
@@ -206,7 +260,7 @@ test.describe('Radio Group', () => {
             // When
             await page.keyboard.press('ArrowUp');
             // Then
-            const secondRadioInput = page.locator('#radio-2 input');
+            const secondRadioInput = page.locator('#radio-2');
             await expect(secondRadioInput).toHaveAttribute('aria-checked', 'true');
         });
         test('should checked the last radio when we are on the first radio', async ({ page }) => {
@@ -223,9 +277,40 @@ test.describe('Radio Group', () => {
             // When
             await page.keyboard.press('ArrowUp');
             // Then
-            const lastRadioInput = page.locator('#radio-3 input');
+            const lastRadioInput = page.locator('#radio-3');
             await expect(lastRadioInput).toHaveAttribute('aria-checked', 'true');
         });
     });
+    test.describe('Behavior in window with scroll', () => {
+        [
+            { mode: 'radio' },
+            { mode: 'horizontal' },
+            { mode: 'option' }
+        ].forEach(({ mode }) => {
+            test(`should preserve the window scroll position when clicking a radio inside a scrollable container - mode: ${mode}`, async ({ page }) => {
+                // Given
+                await setWcsContent(page, `
+                    <div id="scroll-container" style="height: 100vh; overflow-y: auto;">
+                        <div style="margin-top: 150vh;">
+                            <wcs-radio-group mode="${mode}">
+                                <wcs-radio id="radio-1" value="1">Radio 1</wcs-radio>
+                                <wcs-radio id="radio-2" value="2">Radio 2</wcs-radio>
+                                <wcs-radio id="radio-3" value="3">Radio 3</wcs-radio>
+                            </wcs-radio-group>
+                        </div>
+                        <div style="margin-top: 200vh;">Other content</div>
+                    </div>
+            `);
+                const body = page.locator('body');
+                const radio2 = page.locator('#radio-2');
+                await radio2.scrollIntoViewIfNeeded();
+                // When
+                await radio2.click();
+                // Then
+                const scrollY = await body.evaluate(() => window.scrollY);
+                expect(scrollY).toBe(0);
+            });
+        });
+    });
 });
 //# sourceMappingURL=radio-group.e2e.playwright.js.map