@vaadin/radio-group 24.0.0-alpha9 → 24.0.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/radio-group",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -38,20 +38,20 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha9",
-    "@vaadin/field-base": "24.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha9"
+    "@vaadin/component-base": "24.0.0-beta2",
+    "@vaadin/field-base": "24.0.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-beta2",
+    "@vaadin/vaadin-material-styles": "24.0.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-beta2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "cc3f747164041566b300bde4b105d2475649e93f"
+  "gitHead": "00086f1f6d487f042f189c9b9ecd7ba736960888"
 }

package/src/vaadin-radio-button.js

@@ -85,30 +85,41 @@ class RadioButton extends LabelMixin(
           align-items: baseline;
         }
 
-        .vaadin-radio-button-wrapper {
-          position: relative;
-          height: 100%;
+        [part='radio'],
+        ::slotted(input),
+        ::slotted(label) {
+          grid-row: 1;
+        }
+
+        [part='radio'],
+        ::slotted(input) {
+          grid-column: 1;
+        }
+
+        [part='radio'] {
+          width: var(--vaadin-radio-button-size, 1em);
+          height: var(--vaadin-radio-button-size, 1em);
+        }
+
+        [part='radio']::before {
+          display: block;
+          content: '\\202F';
+          line-height: var(--vaadin-radio-button-size, 1em);
+          contain: paint;
         }
 
         /* visually hidden */
         ::slotted(input) {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          width: 100%;
-          height: 100%;
           opacity: 0;
           cursor: inherit;
           margin: 0;
+          align-self: stretch;
+          -webkit-appearance: none;
         }
       </style>
       <div class="vaadin-radio-button-container">
-        <div class="vaadin-radio-button-wrapper">
-          <div part="radio"></div>
-          <slot name="input"></slot>
-        </div>
-
+        <div part="radio" aria-hidden="true"></div>
+        <slot name="input"></slot>
         <slot name="label"></slot>
       </div>
     `;

package/src/vaadin-radio-group.js

@@ -169,6 +169,34 @@ class RadioGroup extends FieldMixin(
     this.__onRadioButtonCheckedChange = this.__onRadioButtonCheckedChange.bind(this);
   }
 
+  /**
+   * A collection of the group's radio buttons.
+   *
+   * @return {!Array<!RadioButton>}
+   * @private
+   */
+  get __radioButtons() {
+    return this.__filterRadioButtons([...this.children]);
+  }
+
+  /**
+   * A currently selected radio button.
+   *
+   * @return {!RadioButton | undefined}
+   * @private
+   */
+  get __selectedRadioButton() {
+    return this.__radioButtons.find((radioButton) => radioButton.checked);
+  }
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  get isHorizontalRTL() {
+    return this.__isRTL && this._theme !== 'vertical';
+  }
+
   /** @protected */
   ready() {
     super.ready();
@@ -202,34 +230,6 @@ class RadioGroup extends FieldMixin(
     return nodes.filter((child) => child instanceof RadioButton);
   }
 
-  /**
-   * A collection of the group's radio buttons.
-   *
-   * @return {!Array<!RadioButton>}
-   * @private
-   */
-  get __radioButtons() {
-    return this.__filterRadioButtons([...this.children]);
-  }
-
-  /**
-   * A currently selected radio button.
-   *
-   * @return {!RadioButton | undefined}
-   * @private
-   */
-  get __selectedRadioButton() {
-    return this.__radioButtons.find((radioButton) => radioButton.checked);
-  }
-
-  /**
-   * @return {boolean}
-   * @private
-   */
-  get isHorizontalRTL() {
-    return this.__isRTL && this._theme !== 'vertical';
-  }
-
   /**
    * Override method inherited from `KeyboardMixin`
    * to implement the custom keyboard navigation as a replacement for the native one

package/theme/lumo/vaadin-radio-button-styles.js

@@ -21,34 +21,33 @@ registerStyles(
       user-select: none;
       cursor: default;
       outline: none;
+      --_radio-button-size: var(--vaadin-radio-button-size, calc(var(--lumo-size-m) / 2));
     }
 
     :host([has-label]) ::slotted(label) {
-      padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);
+      padding-block: var(--lumo-space-xs);
+      padding-inline: var(--lumo-space-xs) var(--lumo-space-s);
     }
 
     [part='radio'] {
-      width: calc(var(--lumo-size-m) / 2);
-      height: calc(var(--lumo-size-m) / 2);
+      width: var(--_radio-button-size);
+      height: var(--_radio-button-size);
       margin: var(--lumo-space-xs);
       position: relative;
       border-radius: 50%;
       background-color: var(--lumo-contrast-20pct);
       transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s;
       will-change: transform;
-      line-height: 1.2;
       cursor: var(--lumo-clickable-cursor);
     }
 
     /* Used for activation "halo" */
     [part='radio']::before {
-      /* Needed to align the radio-button nicely on the baseline */
-      content: '\\2003';
       pointer-events: none;
       color: transparent;
-      display: inline-block;
       width: 100%;
       height: 100%;
+      line-height: var(--_radio-button-size);
       border-radius: inherit;
       background-color: inherit;
       transform: scale(1.4);

package/theme/material/vaadin-radio-button-styles.js

@@ -11,6 +11,7 @@ registerStyles(
       user-select: none;
       outline: none;
       -webkit-tap-highlight-color: transparent;
+      --_radio-button-size: var(--vaadin-radio-button-size, 16px);
     }
 
     :host([has-label]) ::slotted(label) {
@@ -18,9 +19,8 @@ registerStyles(
     }
 
     [part='radio'] {
-      display: inline-block;
-      width: 16px;
-      height: 16px;
+      width: var(--_radio-button-size);
+      height: var(--_radio-button-size);
       margin: 4px;
       position: relative;
       border: 2px solid;
@@ -28,18 +28,15 @@ registerStyles(
       background-color: transparent;
       transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s;
       will-change: transform;
-      line-height: 1.2;
     }
 
     /* Used for activation "halo" */
     [part='radio']::before {
-      /* Needed to align the radio-button nicely on the baseline */
-      content: '\\2003';
       pointer-events: none;
       color: transparent;
-      display: inline-block;
       width: 100%;
       height: 100%;
+      line-height: var(--_radio-button-size);
       border-radius: inherit;
       background-color: var(--material-primary-color);
       transform: scale(2.5);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/radio-group",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/radio-group",
-  "version": "24.0.0-alpha9",
+  "version": "24.0.0-beta2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {