@vaadin/radio-group 24.0.5 → 24.1.0-alpha10

package/README.md

@@ -12,7 +12,7 @@ A web component that allows the user to choose one item from a group of choices.
 </vaadin-radio-group>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/radio-group/screenshot.png" width="370" alt="Screenshot of vaadin-radio-group">](https://vaadin.com/docs/latest/components/radio-button)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/main/packages/radio-group/screenshot.png" width="370" alt="Screenshot of vaadin-radio-group">](https://vaadin.com/docs/latest/components/radio-button)
 
 ## Installation
 
@@ -31,7 +31,7 @@ import '@vaadin/radio-group';
 ## Themes
 
 Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/radio-group/vaadin-radio-group.js) of the package uses the Lumo theme.
+The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/radio-group/vaadin-radio-group.js) of the package uses the Lumo theme.
 
 To use the Material theme, import the component from the `theme/material` folder:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/radio-group",
-  "version": "24.0.5",
+  "version": "24.1.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -38,11 +38,12 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~24.0.5",
-    "@vaadin/field-base": "~24.0.5",
-    "@vaadin/vaadin-lumo-styles": "~24.0.5",
-    "@vaadin/vaadin-material-styles": "~24.0.5",
-    "@vaadin/vaadin-themable-mixin": "~24.0.5"
+    "@vaadin/a11y-base": "24.1.0-alpha10",
+    "@vaadin/component-base": "24.1.0-alpha10",
+    "@vaadin/field-base": "24.1.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.1.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.1.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.1.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -53,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e384c1b5c02e01a4382a433f727d075de9a4ee97"
+  "gitHead": "12e39be7eb3b49c68708e8ca3de2fb22e91051a1"
 }

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

@@ -3,9 +3,9 @@
  * 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 { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';
+import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-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 { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';

package/src/vaadin-radio-button.js

@@ -4,9 +4,9 @@
  * 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 { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';
+import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-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 { InputController } from '@vaadin/field-base/src/input-controller.js';
@@ -99,6 +99,9 @@ class RadioButton extends LabelMixin(
         [part='radio'] {
           width: var(--vaadin-radio-button-size, 1em);
           height: var(--vaadin-radio-button-size, 1em);
+          --_input-border-width: var(--vaadin-input-field-border-width, 0);
+          --_input-border-color: var(--vaadin-input-field-border-color, transparent);
+          box-shadow: inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
         }
 
         [part='radio']::before {
@@ -116,6 +119,19 @@ class RadioButton extends LabelMixin(
           align-self: stretch;
           -webkit-appearance: none;
         }
+
+        @media (forced-colors: active) {
+          [part='radio'] {
+            outline: 1px solid;
+            outline-offset: -1px;
+          }
+          :host([focused]) [part='radio'] {
+            outline-width: 2px;
+          }
+          :host([disabled]) [part='radio'] {
+            outline-color: GrayText;
+          }
+        }
       </style>
       <div class="vaadin-radio-button-container">
         <div part="radio" aria-hidden="true"></div>

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

@@ -3,10 +3,10 @@
  * 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';
+import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
-import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 

package/src/vaadin-radio-group.js

@@ -5,10 +5,10 @@
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
+import { DisabledMixin } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
-import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';

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

@@ -39,6 +39,8 @@ registerStyles(
       transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s;
       will-change: transform;
       cursor: var(--lumo-clickable-cursor);
+      /* Default field border color */
+      --_input-border-color: var(--vaadin-input-field-border-color, var(--lumo-contrast-50pct));
     }
 
     /* Used for activation "halo" */
@@ -73,6 +75,10 @@ registerStyles(
       background-clip: content-box;
     }
 
+    :host([checked]) {
+      --vaadin-input-field-border-color: transparent;
+    }
+
     :host([checked]) [part='radio'] {
       background-color: var(--lumo-primary-color);
     }
@@ -101,12 +107,14 @@ registerStyles(
     }
 
     :host([focus-ring]) [part='radio'] {
-      box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
+      box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct),
+        inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
     }
 
     :host([disabled]) {
       pointer-events: none;
       color: var(--lumo-disabled-text-color);
+      --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
     }
 
     :host([disabled]) ::slotted(label) {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/radio-group",
-  "version": "24.0.5",
+  "version": "24.1.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -209,6 +209,28 @@
                 ]
               }
             },
+            {
+              "name": "accessible-name",
+              "description": "String used to label the component to screen reader users.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "accessible-name-ref",
+              "description": "Id of the element used as label of the component to screen reader users.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "value",
               "description": "The value of the radio group.",
@@ -307,6 +329,28 @@
                   ]
                 }
               },
+              {
+                "name": "accessibleName",
+                "description": "String used to label the component to screen reader users.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "accessibleNameRef",
+                "description": "Id of the element used as label of the component to screen reader users.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "value",
                 "description": "The value of the radio group.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/radio-group",
-  "version": "24.0.5",
+  "version": "24.1.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -124,6 +124,20 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".accessibleName",
+              "description": "String used to label the component to screen reader users.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".accessibleNameRef",
+              "description": "Id of the element used as label of the component to screen reader users.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".value",
               "description": "The value of the radio group.",