@vaadin/radio-group 24.0.0-alpha1 → 24.0.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/radio-group",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,11 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha1",
-    "@vaadin/field-base": "24.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
+    "@vaadin/component-base": "24.0.0-alpha11",
+    "@vaadin/field-base": "24.0.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "641b3d96ceeb3e503a093682ebe686afdd8c3a68"
 }

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

@@ -1,13 +1,13 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-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 { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 

package/src/vaadin-radio-button.js

@@ -1,18 +1,17 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-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 { 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 { SlotTargetController } from '@vaadin/field-base/src/slot-target-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -86,35 +85,42 @@ 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"></div>
+        <slot name="input"></slot>
         <slot name="label"></slot>
-
-        <div style="display: none !important">
-          <slot id="noop"></slot>
-        </div>
       </div>
     `;
   }
@@ -161,21 +167,6 @@ class RadioButton extends LabelMixin(
       }),
     );
     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.`,
-    );
   }
 }
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';

package/src/vaadin-radio-group.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.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.getAttribute('dir') === 'rtl' && 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-alpha1",
+  "version": "24.0.0-alpha11",
   "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-alpha1",
+  "version": "24.0.0-alpha11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {