@vaadin/checkbox 25.3.0-alpha1 → 25.3.0-alpha10

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",
@@ -147,16 +161,6 @@
                 "package": "@vaadin/field-base/src/field-mixin.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "indeterminate",
-              "privacy": "public",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes",
-              "attribute": "indeterminate"
-            },
             {
               "kind": "field",
               "name": "invalid",
@@ -206,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"
             },
             {
@@ -216,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"
             },
             {
@@ -256,7 +260,6 @@
               },
               "description": "The value of the field.",
               "attribute": "value",
-              "default": "'on'",
               "inheritedFrom": {
                 "name": "InputMixin",
                 "package": "@vaadin/field-base/src/input-mixin.js"
@@ -264,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",
@@ -281,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",
@@ -348,14 +363,6 @@
                 "package": "@vaadin/field-base/src/field-mixin.js"
               }
             },
-            {
-              "name": "indeterminate",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes",
-              "fieldName": "indeterminate"
-            },
             {
               "name": "invalid",
               "type": {
@@ -397,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"
             },
             {
@@ -405,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"
             },
             {
@@ -494,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",
@@ -501,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",
@@ -515,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",
@@ -621,12 +642,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes",
-              "attribute": "indeterminate",
-              "inheritedFrom": {
-                "name": "CheckboxMixin",
-                "module": "src/vaadin-checkbox-mixin.js"
-              }
+              "description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox#indeterminate_state_checkboxes",
+              "attribute": "indeterminate"
             },
             {
               "kind": "field",
@@ -677,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",
@@ -691,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",
@@ -712,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",
@@ -741,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"
               }
             }
           ],
@@ -788,41 +795,25 @@
               "name": "validated"
             }
           ],
-          "mixins": [
-            {
-              "name": "CheckboxMixin",
-              "module": "src/vaadin-checkbox-mixin.js"
-            },
-            {
-              "name": "ElementMixin",
-              "package": "@vaadin/component-base/src/element-mixin.js"
-            },
-            {
-              "name": "ThemableMixin",
-              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
-            },
+          "attributes": [
             {
-              "name": "PolylitMixin",
-              "package": "@vaadin/component-base/src/polylit-mixin.js"
+              "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": "LumoInjectionMixin",
-              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "vaadin-checkbox",
-          "customElement": true,
-          "attributes": [
             {
               "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",
@@ -834,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",
@@ -906,12 +897,8 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes",
-              "fieldName": "indeterminate",
-              "inheritedFrom": {
-                "name": "CheckboxMixin",
-                "module": "src/vaadin-checkbox-mixin.js"
-              }
+              "description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox#indeterminate_state_checkboxes",
+              "fieldName": "indeterminate"
             },
             {
               "name": "invalid",
@@ -954,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",
@@ -966,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",
@@ -986,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",
@@ -1009,7 +991,35 @@
                 "package": "@vaadin/field-base/src/input-mixin.js"
               }
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "CheckboxMixin",
+              "module": "src/vaadin-checkbox-mixin.js"
+            },
+            {
+              "name": "ElementMixin",
+              "package": "@vaadin/component-base/src/element-mixin.js"
+            },
+            {
+              "name": "ThemableMixin",
+              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
+            },
+            {
+              "name": "PolylitMixin",
+              "package": "@vaadin/component-base/src/polylit-mixin.js"
+            },
+            {
+              "name": "LumoInjectionMixin",
+              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "vaadin-checkbox",
+          "customElement": true
         }
       ],
       "exports": [

package/package.json

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

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

@@ -20,13 +20,6 @@ const checkbox = css`
     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;
-  }
-
   :host([indeterminate]) [part='checkbox']::after {
     mask-image: var(--_vaadin-icon-minus);
   }

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

@@ -39,23 +39,14 @@ export declare function CheckboxMixin<T extends Constructor<HTMLElement>>(
 
 export declare class CheckboxMixinClass {
   /**
-   * True if the checkbox is in the indeterminate state which means
-   * it is not possible to say whether it is checked or unchecked.
-   * The state is reset once the user switches the checkbox by hand.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
-   */
-  indeterminate: boolean;
-
-  /**
-   * 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,21 +22,7 @@ export const CheckboxMixin = (superclass) =>
     static get properties() {
       return {
         /**
-         * True if the checkbox is in the indeterminate state which means
-         * it is not possible to say whether it is checked or unchecked.
-         * The state is reset once the user switches the checkbox by hand.
-         *
-         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
-         */
-        indeterminate: {
-          type: Boolean,
-          notify: true,
-          value: false,
-          reflectToAttribute: true,
-        },
-
-        /**
-         * The name of the checkbox.
+         * The name of the control, which is submitted with the form data.
          */
         name: {
           type: String,
@@ -43,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: {
@@ -60,11 +47,6 @@ export const CheckboxMixin = (superclass) =>
       return ['__readonlyChanged(readonly, inputElement)'];
     }
 
-    /** @override */
-    static get delegateProps() {
-      return [...super.delegateProps, 'indeterminate'];
-    }
-
     /** @override */
     static get delegateAttrs() {
       return [...super.delegateAttrs, 'name', 'invalid', 'required'];
@@ -77,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;
     }
 
@@ -118,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}
@@ -129,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;
       }
 
@@ -180,27 +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');
-      }
-    }
-
-    /**
-     * Override method inherited from `CheckedMixin` to reset
-     * `indeterminate` state checkbox is toggled by the user.
-     *
-     * @param {boolean} checked
-     * @protected
-     * @override
-     */
-    _toggleChecked(checked) {
-      if (this.indeterminate) {
-        this.indeterminate = false;
-      }
-
-      super._toggleChecked(checked);
+      setOrRemoveAttribute(inputElement, 'aria-readonly', readonly);
     }
 
     /**
@@ -233,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.d.ts

@@ -120,6 +120,15 @@ export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxCustomEve
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  */
 declare class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(HTMLElement))) {
+  /**
+   * True if the checkbox is in the indeterminate state which means
+   * it is not possible to say whether it is checked or unchecked.
+   * The state is reset once the user switches the checkbox by hand.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox#indeterminate_state_checkboxes
+   */
+  indeterminate: boolean;
+
   addEventListener<K extends keyof CheckboxEventMap>(
     type: K,
     listener: (this: Checkbox, ev: CheckboxEventMap[K]) => void,

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';
   }
@@ -96,6 +97,29 @@ export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolylitMi
     return checkboxStyles;
   }
 
+  static get properties() {
+    return {
+      /**
+       * True if the checkbox is in the indeterminate state which means
+       * it is not possible to say whether it is checked or unchecked.
+       * The state is reset once the user switches the checkbox by hand.
+       *
+       * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox#indeterminate_state_checkboxes
+       */
+      indeterminate: {
+        type: Boolean,
+        notify: true,
+        value: false,
+        reflectToAttribute: true,
+      },
+    };
+  }
+
+  /** @override */
+  static get delegateProps() {
+    return [...super.delegateProps, 'indeterminate'];
+  }
+
   /** @protected */
   render() {
     return html`
@@ -125,6 +149,24 @@ export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolylitMi
     this._tooltipController.setAriaTarget(this.inputElement);
     this.addController(this._tooltipController);
   }
+
+  /**
+   * Override method inherited from `CheckedMixin` to reset
+   * `indeterminate` when the checkbox is toggled by the user.
+   *
+   * @param {boolean} checked
+   * @protected
+   * @override
+   */
+  _toggleChecked(checked) {
+    if (this.indeterminate) {
+      this.indeterminate = false;
+    }
+
+    super._toggleChecked(checked);
+  }
 }
 
 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-alpha1",
+  "version": "25.3.0-alpha10",
   "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"
@@ -75,7 +84,7 @@
             },
             {
               "name": "indeterminate",
-              "description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes",
+              "description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox#indeterminate_state_checkboxes",
               "value": {
                 "type": [
                   "boolean"
@@ -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"
@@ -233,7 +240,7 @@
               },
               {
                 "name": "indeterminate",
-                "description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes",
+                "description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox#indeterminate_state_checkboxes",
                 "value": {
                   "type": [
                     "boolean"
@@ -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-alpha1",
+  "version": "25.3.0-alpha10",
   "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"
               }
@@ -70,7 +77,7 @@
             },
             {
               "name": "?indeterminate",
-              "description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes",
+              "description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox#indeterminate_state_checkboxes",
               "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"
               }