@vaadin/radio-group 22.0.3 → 22.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/radio-group",
-  "version": "22.0.3",
+  "version": "22.0.6",
   "publishConfig": {
     "access": "public"
   },
@@ -35,16 +35,16 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^22.0.3",
-    "@vaadin/field-base": "^22.0.3",
-    "@vaadin/vaadin-lumo-styles": "^22.0.3",
-    "@vaadin/vaadin-material-styles": "^22.0.3",
-    "@vaadin/vaadin-themable-mixin": "^22.0.3"
+    "@vaadin/component-base": "^22.0.6",
+    "@vaadin/field-base": "^22.0.6",
+    "@vaadin/vaadin-lumo-styles": "^22.0.6",
+    "@vaadin/vaadin-material-styles": "^22.0.6",
+    "@vaadin/vaadin-themable-mixin": "^22.0.6"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.1"
   },
-  "gitHead": "935ad1ea65a79b0f9ecb10d767689479b36c4e07"
+  "gitHead": "18c55872d764e338e0f98e65826cbe895156251a"
 }

package/src/vaadin-radio-button.d.ts

@@ -8,7 +8,7 @@ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
-import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js';
+import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -57,7 +57,7 @@ export interface RadioButtonEventMap extends HTMLElementEventMap, RadioButtonCus
  *
  * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
  */
-declare class RadioButton extends SlotLabelMixin(
+declare class RadioButton extends LabelMixin(
   CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement))))))
 ) {
   /**

package/src/vaadin-radio-button.js

@@ -10,8 +10,9 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
+import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
-import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js';
+import { SlotTargetController } from '@vaadin/field-base/src/slot-target-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -55,9 +56,9 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes ElementMixin
  * @mixes ActiveMixin
  * @mixes CheckedMixin
- * @mixes SlotLabelMixin
+ * @mixes LabelMixin
  */
-class RadioButton extends SlotLabelMixin(
+class RadioButton extends LabelMixin(
   CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))))))
 ) {
   static get is() {
@@ -80,13 +81,14 @@ class RadioButton extends SlotLabelMixin(
         }
 
         .vaadin-radio-button-container {
-          display: inline-flex;
+          display: grid;
+          grid-template-columns: auto 1fr;
           align-items: baseline;
         }
 
         .vaadin-radio-button-wrapper {
           position: relative;
-          flex: none;
+          height: 100%;
         }
 
         /* visually hidden */
@@ -146,32 +148,6 @@ class RadioButton extends SlotLabelMixin(
     this.value = 'on';
   }
 
-  /**
-   * A reference to the default slot from which nodes are copied to the label node.
-   *
-   * @override
-   * @protected
-   * @type {HTMLSlotElement}
-   */
-  get _sourceSlot() {
-    return this.$.noop;
-  }
-
-  /**
-   * Override __copyNodesToSlotTarget from SlotTargetMixin to show a warning.
-   * @override
-   * @protected
-   * @param {!Array<!Node>} nodes
-   **/
-  __copyNodesToSlotTarget(nodes) {
-    super.__copyNodesToSlotTarget(nodes);
-
-    console.warn(
-      `WARNING: Since Vaadin 22, placing the label as a direct child of a <vaadin-radio-button> is deprecated.
-  Please use <label slot="label"> wrapper or the label property instead.`
-    );
-  }
-
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
@@ -185,8 +161,23 @@ class RadioButton extends SlotLabelMixin(
       });
       this.addController(this._inputController);
       this.addController(new LabelledInputController(this.inputElement, this._labelController));
+      this.addController(
+        new SlotTargetController(
+          this.$.noop,
+          () => this._labelController.node,
+          () => this.__warnDeprecated()
+        )
+      );
     }
   }
+
+  /** @private */
+  __warnDeprecated() {
+    console.warn(
+      `WARNING: Since Vaadin 22, placing the label as a direct child of a <vaadin-radio-button> is deprecated.
+  Please use <label slot="label"> wrapper or the label property instead.`
+    );
+  }
 }
 
 customElements.define(RadioButton.is, RadioButton);

package/src/vaadin-radio-group.js

@@ -293,7 +293,7 @@ class RadioGroup extends FieldMixin(FocusMixin(DisabledMixin(KeyboardMixin(DirMi
     radioButton.name = this._fieldName;
     radioButton.addEventListener('checked-changed', this.__onRadioButtonCheckedChange);
 
-    if (this.disabled) {
+    if (this.disabled || this.readonly) {
       radioButton.disabled = true;
     }