@vaadin/radio-group 24.2.3 → 24.3.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/radio-group",
-  "version": "24.2.3",
+  "version": "24.3.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,10 @@
   "type": "module",
   "files": [
     "src",
+    "!src/vaadin-lit-radio-button.d.ts",
+    "!src/vaadin-lit-radio-button.js",
+    "!src/vaadin-lit-radio-group.d.ts",
+    "!src/vaadin-lit-radio-group.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -37,22 +41,23 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.2.3",
-    "@vaadin/component-base": "~24.2.3",
-    "@vaadin/field-base": "~24.2.3",
-    "@vaadin/vaadin-lumo-styles": "~24.2.3",
-    "@vaadin/vaadin-material-styles": "~24.2.3",
-    "@vaadin/vaadin-themable-mixin": "~24.2.3"
+    "@vaadin/a11y-base": "24.3.0-alpha10",
+    "@vaadin/component-base": "24.3.0-alpha10",
+    "@vaadin/field-base": "24.3.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.5.0",
+    "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "72e557e765e72559e9c6a525e257d185ad186dc5"
+  "gitHead": "0271523d93fe5df0425ff64206886614f3c6f401"
 }

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

@@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ActiveMixinClass } from '@vaadin/a11y-base/src/active-mixin.js';
+import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
+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 { 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';
+
+/**
+ * Fired when the `checked` property changes.
+ */
+export type RadioButtonCheckedChangedEvent = CustomEvent<{ value: boolean }>;
+
+export interface RadioButtonCustomEventMap {
+  'checked-changed': RadioButtonCheckedChangedEvent;
+}
+
+export interface RadioButtonEventMap extends HTMLElementEventMap, RadioButtonCustomEventMap {}
+
+/**
+ * A mixin providing common radio-button functionality.
+ */
+export declare function RadioButtonMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ActiveMixinClass> &
+  Constructor<CheckedMixinClass> &
+  Constructor<DelegateFocusMixinClass> &
+  Constructor<DelegateStateMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<InputMixinClass> &
+  Constructor<KeyboardMixinClass> &
+  Constructor<LabelMixinClass> &
+  Constructor<RadioButtonMixinClass> &
+  T;
+
+export declare class RadioButtonMixinClass {
+  /**
+   * The name of the radio button.
+   */
+  name: string;
+}

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

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * 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/a11y-base/src/active-mixin.js';
+import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-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';
+import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
+
+/**
+ * A mixin providing common radio-button functionality.
+ *
+ * @polymerMixin
+ * @mixes ActiveMixin
+ * @mixes CheckedMixin
+ * @mixes DelegateFocusMixin
+ * @mixes LabelMixin
+ */
+export const RadioButtonMixin = (superclass) =>
+  class RadioButtonMixinClass extends LabelMixin(CheckedMixin(DelegateFocusMixin(ActiveMixin(superclass)))) {
+    static get properties() {
+      return {
+        /**
+         * The name of the radio button.
+         *
+         * @type {string}
+         */
+        name: {
+          type: String,
+          value: '',
+        },
+      };
+    }
+
+    /** @override */
+    static get delegateAttrs() {
+      return [...super.delegateAttrs, 'name'];
+    }
+
+    constructor() {
+      super();
+
+      this._setType('radio');
+
+      // Set the string "on" as the default value for the radio button following the HTML specification:
+      // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
+      this.value = 'on';
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.addController(
+        new InputController(this, (input) => {
+          this._setInputElement(input);
+          this._setFocusElement(input);
+          this.stateTarget = input;
+          this.ariaTarget = input;
+        }),
+      );
+      this.addController(new LabelledInputController(this.inputElement, this._labelController));
+    }
+  };

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const radioButtonStyles: CSSResult;

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

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export const radioButtonStyles = css`
+  :host {
+    display: inline-block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([disabled]) {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .vaadin-radio-button-container {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: baseline;
+  }
+
+  [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);
+    --_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 {
+    display: block;
+    content: '\\202F';
+    line-height: var(--vaadin-radio-button-size, 1em);
+    contain: paint;
+  }
+
+  /* visually hidden */
+  ::slotted(input) {
+    opacity: 0;
+    cursor: inherit;
+    margin: 0;
+    align-self: stretch;
+    -webkit-appearance: none;
+    width: initial;
+    height: initial;
+  }
+
+  @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;
+    }
+  }
+`;

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

@@ -3,24 +3,12 @@
  * 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/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 { 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';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { type RadioButtonEventMap, RadioButtonMixin } from './vaadin-radio-button-mixin.js';
 
-/**
- * Fired when the `checked` property changes.
- */
-export type RadioButtonCheckedChangedEvent = CustomEvent<{ value: boolean }>;
-
-export interface RadioButtonCustomEventMap {
-  'checked-changed': RadioButtonCheckedChangedEvent;
-}
-
-export interface RadioButtonEventMap extends HTMLElementEventMap, RadioButtonCustomEventMap {}
+export * from './vaadin-radio-button-mixin.js';
 
 /**
  * `<vaadin-radio-button>` is a web component representing a choice in a radio group.
@@ -57,14 +45,7 @@ export interface RadioButtonEventMap extends HTMLElementEventMap, RadioButtonCus
  *
  * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
  */
-declare class RadioButton extends LabelMixin(
-  CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))))),
-) {
-  /**
-   * The name of the radio button.
-   */
-  name: string;
-
+declare class RadioButton extends RadioButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {
   addEventListener<K extends keyof RadioButtonEventMap>(
     type: K,
     listener: (this: RadioButton, ev: RadioButtonEventMap[K]) => void,

package/src/vaadin-radio-button.js

@@ -4,16 +4,14 @@
  * 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/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 { defineCustomElement } from '@vaadin/component-base/src/define.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';
-import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
-import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { RadioButtonMixin } from './vaadin-radio-button-mixin.js';
+import { radioButtonStyles } from './vaadin-radio-button-styles.js';
+
+registerStyles('vaadin-radio-button', radioButtonStyles, { moduleId: 'vaadin-radio-button-styles' });
 
 /**
  * `<vaadin-radio-button>` is a web component representing a choice in a radio group.
@@ -52,91 +50,17 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * @customElement
  * @extends HTMLElement
- * @mixes ControllerMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
- * @mixes ActiveMixin
- * @mixes CheckedMixin
- * @mixes LabelMixin
+ * @mixes RadioButtonMixin
  */
-class RadioButton extends LabelMixin(
-  CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))))),
-) {
+class RadioButton extends RadioButtonMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-radio-button';
   }
 
   static get template() {
     return html`
-      <style>
-        :host {
-          display: inline-block;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        :host([disabled]) {
-          -webkit-tap-highlight-color: transparent;
-        }
-
-        .vaadin-radio-button-container {
-          display: grid;
-          grid-template-columns: auto 1fr;
-          align-items: baseline;
-        }
-
-        [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);
-          --_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 {
-          display: block;
-          content: '\\202F';
-          line-height: var(--vaadin-radio-button-size, 1em);
-          contain: paint;
-        }
-
-        /* visually hidden */
-        ::slotted(input) {
-          opacity: 0;
-          cursor: inherit;
-          margin: 0;
-          align-self: stretch;
-          -webkit-appearance: none;
-          width: initial;
-          height: initial;
-        }
-
-        @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>
         <slot name="input"></slot>
@@ -144,50 +68,6 @@ class RadioButton extends LabelMixin(
       </div>
     `;
   }
-
-  static get properties() {
-    return {
-      /**
-       * The name of the radio button.
-       *
-       * @type {string}
-       */
-      name: {
-        type: String,
-        value: '',
-      },
-    };
-  }
-
-  /** @override */
-  static get delegateAttrs() {
-    return [...super.delegateAttrs, 'name'];
-  }
-
-  constructor() {
-    super();
-
-    this._setType('radio');
-
-    // Set the string "on" as the default value for the radio button following the HTML specification:
-    // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
-    this.value = 'on';
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.addController(
-      new InputController(this, (input) => {
-        this._setInputElement(input);
-        this._setFocusElement(input);
-        this.stateTarget = input;
-        this.ariaTarget = input;
-      }),
-    );
-    this.addController(new LabelledInputController(this.inputElement, this._labelController));
-  }
 }
 
 defineCustomElement(RadioButton);

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

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+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 { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
+import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
+import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
+
+/**
+ * Fired when the `invalid` property changes.
+ */
+export type RadioGroupInvalidChangedEvent = CustomEvent<{ value: boolean }>;
+
+/**
+ * Fired when the `value` property changes.
+ */
+export type RadioGroupValueChangedEvent = CustomEvent<{ value: string }>;
+
+/**
+ * Fired whenever the field is validated.
+ */
+export type RadioGroupValidatedEvent = CustomEvent<{ valid: boolean }>;
+
+export interface RadioGroupCustomEventMap {
+  'invalid-changed': RadioGroupInvalidChangedEvent;
+
+  'value-changed': RadioGroupValueChangedEvent;
+
+  validated: RadioGroupValidatedEvent;
+}
+
+export interface RadioGroupEventMap extends HTMLElementEventMap, RadioGroupCustomEventMap {}
+
+/**
+ * A mixin providing common radio-group functionality.
+ */
+export declare function RadioGroupMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ControllerMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FieldMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<KeyboardMixinClass> &
+  Constructor<LabelMixinClass> &
+  Constructor<RadioGroupMixinClass> &
+  Constructor<ValidateMixinClass> &
+  T;
+
+export declare class RadioGroupMixinClass {
+  /**
+   * The value of the radio group.
+   */
+  value: string | null | undefined;
+
+  /**
+   * When present, the user cannot modify the value of the radio group.
+   * The property works similarly to the `disabled` property.
+   * While the `disabled` property disables all the radio buttons inside the group,
+   * the `readonly` property disables only unchecked ones.
+   */
+  readonly: boolean;
+}