@vaadin/checkbox 25.3.0-dev.3a3c2d7d2a → 25.3.0-rc1

package/custom-elements.json

@@ -26,6 +26,20 @@
           "description": "A mixin providing common checkbox functionality.",
           "name": "CheckboxMixin",
           "members": [
+            {
+              "kind": "field",
+              "name": "accessibleDescriptionRef",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
+              "attribute": "accessible-description-ref",
+              "inheritedFrom": {
+                "name": "FieldMixin",
+                "package": "@vaadin/field-base/src/field-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "accessibleName",
@@ -33,7 +47,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "String used to label the component to screen reader users.",
+              "description": "String used to label the component for screen reader users.",
               "attribute": "accessible-name",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -47,7 +61,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Id of the element used as label of the component to screen reader users.",
+              "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
               "attribute": "accessible-name-ref",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -196,7 +210,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "The name of the checkbox.",
+              "description": "The name of the control, which is submitted with the form data.",
               "attribute": "name"
             },
             {
@@ -206,7 +220,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, the user cannot modify the value of the checkbox.\nThe difference between `disabled` and `readonly` is that the\nread-only checkbox remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
+              "description": "When true, the user cannot modify the value of the control.\nThe difference between `disabled` and `readonly` is that the\nread-only element remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
               "attribute": "readonly"
             },
             {
@@ -246,7 +260,6 @@
               },
               "description": "The value of the field.",
               "attribute": "value",
-              "default": "'on'",
               "inheritedFrom": {
                 "name": "InputMixin",
                 "package": "@vaadin/field-base/src/input-mixin.js"
@@ -254,12 +267,24 @@
             }
           ],
           "attributes": [
+            {
+              "name": "accessible-description-ref",
+              "type": {
+                "text": "string"
+              },
+              "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
+              "fieldName": "accessibleDescriptionRef",
+              "inheritedFrom": {
+                "name": "FieldMixin",
+                "package": "@vaadin/field-base/src/field-mixin.js"
+              }
+            },
             {
               "name": "accessible-name",
               "type": {
                 "text": "string"
               },
-              "description": "String used to label the component to screen reader users.",
+              "description": "String used to label the component for screen reader users.",
               "fieldName": "accessibleName",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -271,7 +296,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Id of the element used as label of the component to screen reader users.",
+              "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
               "fieldName": "accessibleNameRef",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -379,7 +404,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "The name of the checkbox.",
+              "description": "The name of the control, which is submitted with the form data.",
               "fieldName": "name"
             },
             {
@@ -387,7 +412,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, the user cannot modify the value of the checkbox.\nThe difference between `disabled` and `readonly` is that the\nread-only checkbox remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
+              "description": "When true, the user cannot modify the value of the control.\nThe difference between `disabled` and `readonly` is that the\nread-only element remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
               "fieldName": "readonly"
             },
             {
@@ -476,6 +501,20 @@
           "description": "`<vaadin-checkbox>` is an input field representing a binary choice.\n\n```html\n<vaadin-checkbox label=\"I accept the terms and conditions\"></vaadin-checkbox>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|-------------\n`checkbox`           | The element representing a stylable custom checkbox\n`label`              | The slotted label element wrapper\n`helper-text`        | The slotted helper text element wrapper\n`error-message`      | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|-------------\n`active`             | Set when the checkbox is activated with mouse, touch or the keyboard.\n`checked`            | Set when the checkbox is checked.\n`disabled`           | Set when the checkbox is disabled.\n`readonly`           | Set when the checkbox is readonly.\n`focus-ring`         | Set when the checkbox is focused using the keyboard.\n`focused`            | Set when the checkbox is focused.\n`indeterminate`      | Set when the checkbox is in the indeterminate state.\n`invalid`            | Set when the checkbox is invalid.\n`has-label`          | Set when the checkbox has a label.\n`has-helper`         | Set when the checkbox has helper text.\n`has-error-message`  | Set when the checkbox has an error message.\n`has-tooltip`        | Set when the checkbox has a slotted tooltip.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                |\n:--------------------------------------------------|\n| `--vaadin-checkbox-background`                   |\n| `--vaadin-checkbox-border-color`                 |\n| `--vaadin-checkbox-border-radius`                |\n| `--vaadin-checkbox-border-width`                 |\n| `--vaadin-checkbox-gap`                          |\n| `--vaadin-checkbox-label-color`                  |\n| `--vaadin-checkbox-label-font-size`              |\n| `--vaadin-checkbox-label-font-weight`            |\n| `--vaadin-checkbox-label-line-height`            |\n| `--vaadin-checkbox-marker-color`                 |\n| `--vaadin-checkbox-marker-size`                  |\n| `--vaadin-checkbox-size`                         |\n| `--vaadin-input-field-error-color`               |\n| `--vaadin-input-field-error-font-size`           |\n| `--vaadin-input-field-error-font-weight`         |\n| `--vaadin-input-field-error-line-height`         |\n| `--vaadin-input-field-helper-color`              |\n| `--vaadin-input-field-helper-font-size`          |\n| `--vaadin-input-field-helper-font-weight`        |\n| `--vaadin-input-field-helper-line-height`        |\n| `--vaadin-input-field-required-indicator`        |\n| `--vaadin-input-field-required-indicator-color`  |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "name": "Checkbox",
           "members": [
+            {
+              "kind": "field",
+              "name": "accessibleDescriptionRef",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
+              "attribute": "accessible-description-ref",
+              "inheritedFrom": {
+                "name": "FieldMixin",
+                "package": "@vaadin/field-base/src/field-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "accessibleName",
@@ -483,7 +522,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "String used to label the component to screen reader users.",
+              "description": "String used to label the component for screen reader users.",
               "attribute": "accessible-name",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -497,7 +536,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Id of the element used as label of the component to screen reader users.",
+              "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
               "attribute": "accessible-name-ref",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -655,7 +694,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "The name of the checkbox.",
+              "description": "The name of the control, which is submitted with the form data.",
               "attribute": "name",
               "inheritedFrom": {
                 "name": "CheckboxMixin",
@@ -669,7 +708,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, the user cannot modify the value of the checkbox.\nThe difference between `disabled` and `readonly` is that the\nread-only checkbox remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
+              "description": "When true, the user cannot modify the value of the control.\nThe difference between `disabled` and `readonly` is that the\nread-only element remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
               "attribute": "readonly",
               "inheritedFrom": {
                 "name": "CheckboxMixin",
@@ -690,18 +729,6 @@
                 "package": "@vaadin/field-base/src/validate-mixin.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "tabindex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "inheritedFrom": {
-                "name": "CheckboxMixin",
-                "module": "src/vaadin-checkbox-mixin.js"
-              }
-            },
             {
               "kind": "method",
               "name": "validate",
@@ -719,13 +746,15 @@
             {
               "kind": "field",
               "name": "value",
+              "privacy": "public",
               "type": {
                 "text": "string"
               },
-              "default": "'on'",
+              "description": "The value of the field.",
+              "attribute": "value",
               "inheritedFrom": {
-                "name": "CheckboxMixin",
-                "module": "src/vaadin-checkbox-mixin.js"
+                "name": "InputMixin",
+                "package": "@vaadin/field-base/src/input-mixin.js"
               }
             }
           ],
@@ -767,12 +796,24 @@
             }
           ],
           "attributes": [
+            {
+              "name": "accessible-description-ref",
+              "type": {
+                "text": "string"
+              },
+              "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
+              "fieldName": "accessibleDescriptionRef",
+              "inheritedFrom": {
+                "name": "FieldMixin",
+                "package": "@vaadin/field-base/src/field-mixin.js"
+              }
+            },
             {
               "name": "accessible-name",
               "type": {
                 "text": "string"
               },
-              "description": "String used to label the component to screen reader users.",
+              "description": "String used to label the component for screen reader users.",
               "fieldName": "accessibleName",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -784,7 +825,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Id of the element used as label of the component to screen reader users.",
+              "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
               "fieldName": "accessibleNameRef",
               "inheritedFrom": {
                 "name": "FieldMixin",
@@ -900,7 +941,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "The name of the checkbox.",
+              "description": "The name of the control, which is submitted with the form data.",
               "fieldName": "name",
               "inheritedFrom": {
                 "name": "CheckboxMixin",
@@ -912,7 +953,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "When true, the user cannot modify the value of the checkbox.\nThe difference between `disabled` and `readonly` is that the\nread-only checkbox remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
+              "description": "When true, the user cannot modify the value of the control.\nThe difference between `disabled` and `readonly` is that the\nread-only element remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
               "fieldName": "readonly",
               "inheritedFrom": {
                 "name": "CheckboxMixin",
@@ -932,16 +973,11 @@
               }
             },
             {
-              "name": "tabindex",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "description": "Indicates whether the element can be focused and where it participates in sequential keyboard navigation.",
-              "fieldName": "tabindex",
-              "inheritedFrom": {
-                "name": "TabindexMixin",
-                "package": "@vaadin/a11y-base/src/tabindex-mixin.js"
-              }
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
             },
             {
               "name": "value",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/checkbox",
-  "version": "25.3.0-dev.3a3c2d7d2a",
+  "version": "25.3.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,18 +35,18 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/component-base": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/field-base": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/a11y-base": "25.3.0-rc1",
+    "@vaadin/component-base": "25.3.0-rc1",
+    "@vaadin/field-base": "25.3.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-rc1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/chai-plugins": "25.3.0-dev.3a3c2d7d2a",
-    "@vaadin/test-runner-commands": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/aura": "25.3.0-rc1",
+    "@vaadin/chai-plugins": "25.3.0-rc1",
+    "@vaadin/test-runner-commands": "25.3.0-rc1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-dev.3a3c2d7d2a",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-rc1",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ac506ca7800c23e05da55863c56bcedf12812d37"
+  "gitHead": "d4809590b2f61bd607e376ab3dec84f4bfb059a7"
 }

package/src/styles/vaadin-checkbox-base-styles.js

@@ -10,21 +10,14 @@ import { field } from '@vaadin/field-base/src/styles/field-base-styles.js';
 
 const checkbox = css`
   [part='checkbox'] {
-    color: var(--vaadin-checkbox-checkmark-color, var(--_color));
+    color: var(--vaadin-checkbox-checkmark-color, var(--_marker-color));
   }
 
   [part='checkbox']::after {
     inset: 0;
     mask: var(--_vaadin-icon-checkmark) 50% /
       var(--vaadin-checkbox-checkmark-size, var(--vaadin-checkbox-marker-size, 100%)) no-repeat;
-    filter: var(--vaadin-checkbox-checkmark-color, var(--_filter));
-  }
-
-  :host([readonly]) {
-    --vaadin-checkbox-background: transparent;
-    --vaadin-checkbox-border-color: var(--vaadin-border-color);
-    --vaadin-checkbox-marker-color: var(--vaadin-text-color);
-    --_border-style: dashed;
+    filter: var(--vaadin-checkbox-checkmark-color, var(--_marker-filter));
   }
 
   :host([indeterminate]) [part='checkbox']::after {

package/src/vaadin-checkbox-mixin.d.ts

@@ -39,14 +39,14 @@ export declare function CheckboxMixin<T extends Constructor<HTMLElement>>(
 
 export declare class CheckboxMixinClass {
   /**
-   * The name of the checkbox.
+   * The name of the control, which is submitted with the form data.
    */
   name: string;
 
   /**
-   * When true, the user cannot modify the value of the checkbox.
+   * When true, the user cannot modify the value of the control.
    * The difference between `disabled` and `readonly` is that the
-   * read-only checkbox remains focusable, is announced by screen
+   * read-only element remains focusable, is announced by screen
    * readers and its value can be submitted as part of the form.
    */
   readonly: boolean;

package/src/vaadin-checkbox-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 { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
@@ -21,7 +22,7 @@ export const CheckboxMixin = (superclass) =>
     static get properties() {
       return {
         /**
-         * The name of the checkbox.
+         * The name of the control, which is submitted with the form data.
          */
         name: {
           type: String,
@@ -29,9 +30,9 @@ export const CheckboxMixin = (superclass) =>
         },
 
         /**
-         * When true, the user cannot modify the value of the checkbox.
+         * When true, the user cannot modify the value of the control.
          * The difference between `disabled` and `readonly` is that the
-         * read-only checkbox remains focusable, is announced by screen
+         * read-only element remains focusable, is announced by screen
          * readers and its value can be submitted as part of the form.
          */
         readonly: {
@@ -58,12 +59,18 @@ export const CheckboxMixin = (superclass) =>
 
       this._boundOnInputClick = this._onInputClick.bind(this);
 
-      // Set the string "on" as the default value for the checkbox following the HTML specification:
-      // https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
+      /**
+       * Set the string "on" as the default value for the checkbox following the HTML specification:
+       * https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
+       * @internal to not document it in CEM
+       */
       this.value = 'on';
 
-      // Set tabindex to 0 by default to not lose focus on click in Safari
-      // See https://github.com/vaadin/web-components/pull/6780
+      /**
+       * Set tabindex to 0 by default to not lose focus on click in Safari
+       * See https://github.com/vaadin/web-components/pull/6780
+       * @internal to not document it in CEM
+       */
       this.tabindex = 0;
     }
 
@@ -99,10 +106,19 @@ export const CheckboxMixin = (superclass) =>
       this._createPropertyObserver('checked', '_checkedChanged');
     }
 
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      // Validate when the required constraint is removed.
+      if (props.has('required') && this.required === false) {
+        this._requestValidation();
+      }
+    }
+
     /**
-     * Override method inherited from `ActiveMixin` to prevent setting `active`
-     * attribute when readonly, or when clicking a link placed inside the label,
-     * or when clicking slotted helper or error message element.
+     * Override method inherited from `ActiveMixin` to only set the `active`
+     * attribute for clicks that actually toggle the checked state.
      *
      * @param {Event} event
      * @return {boolean}
@@ -110,12 +126,14 @@ export const CheckboxMixin = (superclass) =>
      * @override
      */
     _shouldSetActive(event) {
-      if (
-        this.readonly ||
-        event.target.localName === 'a' ||
-        event.target === this._helperNode ||
-        event.target === this._errorNode
-      ) {
+      const [target] = event.composedPath();
+
+      const togglesChecked =
+        target === this.inputElement ||
+        target.part.contains('required-indicator') ||
+        (this._labelNode.contains(target) && !target.closest('a'));
+
+      if (this.readonly || !togglesChecked) {
         return false;
       }
 
@@ -161,11 +179,7 @@ export const CheckboxMixin = (superclass) =>
       }
 
       // Use aria-readonly since native checkbox doesn't support readonly
-      if (readonly) {
-        inputElement.setAttribute('aria-readonly', 'true');
-      } else {
-        inputElement.removeAttribute('aria-readonly');
-      }
+      setOrRemoveAttribute(inputElement, 'aria-readonly', readonly);
     }
 
     /**
@@ -198,21 +212,6 @@ export const CheckboxMixin = (superclass) =>
       }
     }
 
-    /**
-     * Override an observer from `FieldMixin`
-     * to validate when required is removed.
-     *
-     * @protected
-     * @override
-     */
-    _requiredChanged(required) {
-      super._requiredChanged(required);
-
-      if (required === false) {
-        this._requestValidation();
-      }
-    }
-
     /** @private */
     _onRequiredIndicatorClick() {
       this._labelNode.click();

package/src/vaadin-checkbox.js

@@ -84,10 +84,11 @@ import { CheckboxMixin } from './vaadin-checkbox-mixin.js';
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-checkbox
  * @extends HTMLElement
  */
-export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
+class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-checkbox';
   }
@@ -167,3 +168,5 @@ export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolylitMi
 }
 
 defineCustomElement(Checkbox);
+
+export { Checkbox };

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/checkbox",
-  "version": "25.3.0-dev.3a3c2d7d2a",
+  "version": "25.3.0-rc1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -10,9 +10,18 @@
           "name": "vaadin-checkbox",
           "description": "`<vaadin-checkbox>` is an input field representing a binary choice.\n\n```html\n<vaadin-checkbox label=\"I accept the terms and conditions\"></vaadin-checkbox>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|-------------\n`checkbox`           | The element representing a stylable custom checkbox\n`label`              | The slotted label element wrapper\n`helper-text`        | The slotted helper text element wrapper\n`error-message`      | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|-------------\n`active`             | Set when the checkbox is activated with mouse, touch or the keyboard.\n`checked`            | Set when the checkbox is checked.\n`disabled`           | Set when the checkbox is disabled.\n`readonly`           | Set when the checkbox is readonly.\n`focus-ring`         | Set when the checkbox is focused using the keyboard.\n`focused`            | Set when the checkbox is focused.\n`indeterminate`      | Set when the checkbox is in the indeterminate state.\n`invalid`            | Set when the checkbox is invalid.\n`has-label`          | Set when the checkbox has a label.\n`has-helper`         | Set when the checkbox has helper text.\n`has-error-message`  | Set when the checkbox has an error message.\n`has-tooltip`        | Set when the checkbox has a slotted tooltip.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                |\n:--------------------------------------------------|\n| `--vaadin-checkbox-background`                   |\n| `--vaadin-checkbox-border-color`                 |\n| `--vaadin-checkbox-border-radius`                |\n| `--vaadin-checkbox-border-width`                 |\n| `--vaadin-checkbox-gap`                          |\n| `--vaadin-checkbox-label-color`                  |\n| `--vaadin-checkbox-label-font-size`              |\n| `--vaadin-checkbox-label-font-weight`            |\n| `--vaadin-checkbox-label-line-height`            |\n| `--vaadin-checkbox-marker-color`                 |\n| `--vaadin-checkbox-marker-size`                  |\n| `--vaadin-checkbox-size`                         |\n| `--vaadin-input-field-error-color`               |\n| `--vaadin-input-field-error-font-size`           |\n| `--vaadin-input-field-error-font-weight`         |\n| `--vaadin-input-field-error-line-height`         |\n| `--vaadin-input-field-helper-color`              |\n| `--vaadin-input-field-helper-font-size`          |\n| `--vaadin-input-field-helper-font-weight`        |\n| `--vaadin-input-field-helper-line-height`        |\n| `--vaadin-input-field-required-indicator`        |\n| `--vaadin-input-field-required-indicator-color`  |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
+            {
+              "name": "accessible-description-ref",
+              "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
             {
               "name": "accessible-name",
-              "description": "String used to label the component to screen reader users.",
+              "description": "String used to label the component for screen reader users.",
               "value": {
                 "type": [
                   "string"
@@ -21,7 +30,7 @@
             },
             {
               "name": "accessible-name-ref",
-              "description": "Id of the element used as label of the component to screen reader users.",
+              "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
               "value": {
                 "type": [
                   "string"
@@ -111,7 +120,7 @@
             },
             {
               "name": "name",
-              "description": "The name of the checkbox.",
+              "description": "The name of the control, which is submitted with the form data.",
               "value": {
                 "type": [
                   "string"
@@ -120,7 +129,7 @@
             },
             {
               "name": "readonly",
-              "description": "When true, the user cannot modify the value of the checkbox.\nThe difference between `disabled` and `readonly` is that the\nread-only checkbox remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
+              "description": "When true, the user cannot modify the value of the control.\nThe difference between `disabled` and `readonly` is that the\nread-only element remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
               "value": {
                 "type": [
                   "boolean"
@@ -136,23 +145,12 @@
                 ]
               }
             },
-            {
-              "name": "tabindex",
-              "description": "Indicates whether the element can be focused and where it participates in sequential keyboard navigation.",
-              "value": {
-                "type": [
-                  "number"
-                ]
-              }
-            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             },
@@ -168,9 +166,18 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessibleDescriptionRef",
+                "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
               {
                 "name": "accessibleName",
-                "description": "String used to label the component to screen reader users.",
+                "description": "String used to label the component for screen reader users.",
                 "value": {
                   "type": [
                     "string"
@@ -179,7 +186,7 @@
               },
               {
                 "name": "accessibleNameRef",
-                "description": "Id of the element used as label of the component to screen reader users.",
+                "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
                 "value": {
                   "type": [
                     "string"
@@ -269,7 +276,7 @@
               },
               {
                 "name": "name",
-                "description": "The name of the checkbox.",
+                "description": "The name of the control, which is submitted with the form data.",
                 "value": {
                   "type": [
                     "string"
@@ -278,7 +285,7 @@
               },
               {
                 "name": "readonly",
-                "description": "When true, the user cannot modify the value of the checkbox.\nThe difference between `disabled` and `readonly` is that the\nread-only checkbox remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
+                "description": "When true, the user cannot modify the value of the control.\nThe difference between `disabled` and `readonly` is that the\nread-only element remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
                 "value": {
                   "type": [
                     "boolean"
@@ -294,18 +301,9 @@
                   ]
                 }
               },
-              {
-                "name": "tabindex",
-                "description": "",
-                "value": {
-                  "type": [
-                    "number"
-                  ]
-                }
-              },
               {
                 "name": "value",
-                "description": "",
+                "description": "The value of the field.",
                 "value": {
                   "type": [
                     "string"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/checkbox",
-  "version": "25.3.0-dev.3a3c2d7d2a",
+  "version": "25.3.0-rc1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -19,16 +19,23 @@
           "description": "`<vaadin-checkbox>` is an input field representing a binary choice.\n\n```html\n<vaadin-checkbox label=\"I accept the terms and conditions\"></vaadin-checkbox>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name            | Description\n---------------------|-------------\n`checkbox`           | The element representing a stylable custom checkbox\n`label`              | The slotted label element wrapper\n`helper-text`        | The slotted helper text element wrapper\n`error-message`      | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|-------------\n`active`             | Set when the checkbox is activated with mouse, touch or the keyboard.\n`checked`            | Set when the checkbox is checked.\n`disabled`           | Set when the checkbox is disabled.\n`readonly`           | Set when the checkbox is readonly.\n`focus-ring`         | Set when the checkbox is focused using the keyboard.\n`focused`            | Set when the checkbox is focused.\n`indeterminate`      | Set when the checkbox is in the indeterminate state.\n`invalid`            | Set when the checkbox is invalid.\n`has-label`          | Set when the checkbox has a label.\n`has-helper`         | Set when the checkbox has helper text.\n`has-error-message`  | Set when the checkbox has an error message.\n`has-tooltip`        | Set when the checkbox has a slotted tooltip.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                                |\n:--------------------------------------------------|\n| `--vaadin-checkbox-background`                   |\n| `--vaadin-checkbox-border-color`                 |\n| `--vaadin-checkbox-border-radius`                |\n| `--vaadin-checkbox-border-width`                 |\n| `--vaadin-checkbox-gap`                          |\n| `--vaadin-checkbox-label-color`                  |\n| `--vaadin-checkbox-label-font-size`              |\n| `--vaadin-checkbox-label-font-weight`            |\n| `--vaadin-checkbox-label-line-height`            |\n| `--vaadin-checkbox-marker-color`                 |\n| `--vaadin-checkbox-marker-size`                  |\n| `--vaadin-checkbox-size`                         |\n| `--vaadin-input-field-error-color`               |\n| `--vaadin-input-field-error-font-size`           |\n| `--vaadin-input-field-error-font-weight`         |\n| `--vaadin-input-field-error-line-height`         |\n| `--vaadin-input-field-helper-color`              |\n| `--vaadin-input-field-helper-font-size`          |\n| `--vaadin-input-field-helper-font-weight`        |\n| `--vaadin-input-field-helper-line-height`        |\n| `--vaadin-input-field-required-indicator`        |\n| `--vaadin-input-field-required-indicator-color`  |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
+            {
+              "name": ".accessibleDescriptionRef",
+              "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".accessibleName",
-              "description": "String used to label the component to screen reader users.",
+              "description": "String used to label the component for screen reader users.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".accessibleNameRef",
-              "description": "Id of the element used as label of the component to screen reader users.",
+              "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
               "value": {
                 "kind": "expression"
               }
@@ -98,14 +105,14 @@
             },
             {
               "name": ".name",
-              "description": "The name of the checkbox.",
+              "description": "The name of the control, which is submitted with the form data.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": "?readonly",
-              "description": "When true, the user cannot modify the value of the checkbox.\nThe difference between `disabled` and `readonly` is that the\nread-only checkbox remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
+              "description": "When true, the user cannot modify the value of the control.\nThe difference between `disabled` and `readonly` is that the\nread-only element remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
               "value": {
                 "kind": "expression"
               }
@@ -117,16 +124,9 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": ".tabindex",
-              "description": "",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": ".value",
-              "description": "",
+              "description": "The value of the field.",
               "value": {
                 "kind": "expression"
               }