@vaadin/radio-group 24.8.0-alpha2 → 24.8.0-alpha20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/radio-group",
-  "version": "24.8.0-alpha2",
+  "version": "24.8.0-alpha20",
   "publishConfig": {
     "access": "public"
   },
@@ -39,17 +39,17 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.8.0-alpha2",
-    "@vaadin/component-base": "24.8.0-alpha2",
-    "@vaadin/field-base": "24.8.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha2",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha2",
+    "@vaadin/a11y-base": "24.8.0-alpha20",
+    "@vaadin/component-base": "24.8.0-alpha20",
+    "@vaadin/field-base": "24.8.0-alpha20",
+    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha20",
+    "@vaadin/vaadin-material-styles": "24.8.0-alpha20",
+    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha20",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha2",
-    "@vaadin/test-runner-commands": "24.8.0-alpha2",
+    "@vaadin/chai-plugins": "24.8.0-alpha20",
+    "@vaadin/test-runner-commands": "24.8.0-alpha20",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -57,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "f48777a6e3dcf605b700305a7142145e197bb416"
+  "gitHead": "f091548b1f079f0c9de4be2a8ded77fb18671a2e"
 }

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

@@ -10,6 +10,7 @@ import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js
 import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
 import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import type { CheckedMixinClass } from '@vaadin/field-base/src/checked-mixin.js';
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
@@ -40,6 +41,7 @@ export declare function RadioButtonMixin<T extends Constructor<HTMLElement>>(
   Constructor<KeyboardMixinClass> &
   Constructor<LabelMixinClass> &
   Constructor<RadioButtonMixinClass> &
+  Constructor<SlotStylesMixinClass> &
   T;
 
 export declare class RadioButtonMixinClass {

package/src/vaadin-radio-button-mixin.js

@@ -5,6 +5,7 @@
  */
 import { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
+import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
 import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
@@ -18,9 +19,12 @@ import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-c
  * @mixes CheckedMixin
  * @mixes DelegateFocusMixin
  * @mixes LabelMixin
+ * @mixes SlotStylesMixin
  */
 export const RadioButtonMixin = (superclass) =>
-  class RadioButtonMixinClass extends LabelMixin(CheckedMixin(DelegateFocusMixin(ActiveMixin(superclass)))) {
+  class RadioButtonMixinClass extends SlotStylesMixin(
+    LabelMixin(CheckedMixin(DelegateFocusMixin(ActiveMixin(superclass)))),
+  ) {
     static get properties() {
       return {
         /**
@@ -54,6 +58,21 @@ export const RadioButtonMixin = (superclass) =>
       this.tabindex = 0;
     }
 
+    /** @protected */
+    get slotStyles() {
+      const tag = this.localName;
+
+      // Needed to override `opacity: 1` set on `input` by Tailwind CSS.
+      // See https://github.com/vaadin/web-components/issues/8881
+      return [
+        `
+          ${tag} > input[slot='input'] {
+            opacity: 0;
+          }
+        `,
+      ];
+    }
+
     /** @protected */
     ready() {
       super.ready();

package/src/vaadin-radio-button-styles.js

@@ -52,7 +52,6 @@ export const radioButtonStyles = css`
 
   /* visually hidden */
   ::slotted(input) {
-    opacity: 0;
     cursor: inherit;
     margin: 0;
     align-self: stretch;

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/radio-group",
-  "version": "24.8.0-alpha2",
+  "version": "24.8.0-alpha20",
   "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.8.0-alpha2",
+  "version": "24.8.0-alpha20",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {

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

@@ -1,6 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-export * from './vaadin-radio-button.js';

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

@@ -1,6 +0,0 @@
-/**
- * @license
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-export * from './vaadin-radio-group.js';