@vaadin/checkbox 24.4.0-alpha9 → 24.4.0-beta1

package/README.md

@@ -5,7 +5,6 @@ An input field representing a binary choice.
 [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/checkbox)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/checkbox)](https://www.npmjs.com/package/@vaadin/checkbox)
-[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
 <vaadin-checkbox label="Checked" checked></vaadin-checkbox>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/checkbox",
-  "version": "24.4.0-alpha9",
+  "version": "24.4.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,12 +37,12 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.4.0-alpha9",
-    "@vaadin/component-base": "24.4.0-alpha9",
-    "@vaadin/field-base": "24.4.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.4.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha9",
+    "@vaadin/a11y-base": "24.4.0-beta1",
+    "@vaadin/component-base": "24.4.0-beta1",
+    "@vaadin/field-base": "24.4.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.4.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "effb81abe3c6283a6ec620cc0cee56069af58226"
+  "gitHead": "504787f741d677467ae93ca7cd31d84489366a9c"
 }

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

@@ -12,8 +12,10 @@ import type { KeyboardMixinClass } from '@vaadin/a11y-base/src/keyboard-mixin.js
 import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
 import type { CheckedMixinClass } from '@vaadin/field-base/src/checked-mixin.js';
+import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
 import type { InputMixinClass } from '@vaadin/field-base/src/input-mixin.js';
 import type { LabelMixinClass } from '@vaadin/field-base/src/label-mixin.js';
+import type { ValidateMixinClass } from '@vaadin/field-base/src/validate-mixin.js';
 
 /**
  * A mixin providing common checkbox functionality.
@@ -27,10 +29,12 @@ export declare function CheckboxMixin<T extends Constructor<HTMLElement>>(
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
+  Constructor<FieldMixinClass> &
   Constructor<FocusMixinClass> &
   Constructor<InputMixinClass> &
   Constructor<KeyboardMixinClass> &
   Constructor<LabelMixinClass> &
+  Constructor<ValidateMixinClass> &
   T;
 
 export declare class CheckboxMixinClass {
@@ -47,4 +51,12 @@ export declare class CheckboxMixinClass {
    * The name of the checkbox.
    */
   name: string;
+
+  /**
+   * When true, the user cannot modify the value of the checkbox.
+   * The difference between `disabled` and `readonly` is that the
+   * read-only checkbox 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

@@ -6,8 +6,8 @@
 import { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
 import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
+import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
-import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 
 /**
@@ -17,10 +17,10 @@ import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-c
  * @mixes ActiveMixin
  * @mixes CheckedMixin
  * @mixes DelegateFocusMixin
- * @mixes LabelMixin
+ * @mixes FieldMixin
  */
 export const CheckboxMixin = (superclass) =>
-  class CheckboxMixinClass extends LabelMixin(CheckedMixin(DelegateFocusMixin(ActiveMixin(superclass)))) {
+  class CheckboxMixinClass extends FieldMixin(CheckedMixin(DelegateFocusMixin(ActiveMixin(superclass)))) {
     static get properties() {
       return {
         /**
@@ -49,6 +49,18 @@ export const CheckboxMixin = (superclass) =>
           value: '',
         },
 
+        /**
+         * When true, the user cannot modify the value of the checkbox.
+         * The difference between `disabled` and `readonly` is that the
+         * read-only checkbox remains focusable, is announced by screen
+         * readers and its value can be submitted as part of the form.
+         */
+        readonly: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
         /**
          * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
          *
@@ -63,6 +75,10 @@ export const CheckboxMixin = (superclass) =>
       };
     }
 
+    static get observers() {
+      return ['__readonlyChanged(readonly, inputElement)'];
+    }
+
     /** @override */
     static get delegateProps() {
       return [...super.delegateProps, 'indeterminate'];
@@ -70,7 +86,7 @@ export const CheckboxMixin = (superclass) =>
 
     /** @override */
     static get delegateAttrs() {
-      return [...super.delegateAttrs, 'name'];
+      return [...super.delegateAttrs, 'name', 'invalid'];
     }
 
     constructor() {
@@ -78,6 +94,8 @@ export const CheckboxMixin = (superclass) =>
 
       this._setType('checkbox');
 
+      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
       this.value = 'on';
@@ -96,11 +114,14 @@ export const CheckboxMixin = (superclass) =>
         }),
       );
       this.addController(new LabelledInputController(this.inputElement, this._labelController));
+
+      this._createMethodObserver('_checkedChanged(checked)');
     }
 
     /**
-     * Override method inherited from `ActiveMixin` to prevent setting
-     * `active` attribute when clicking a link placed inside the label.
+     * 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.
      *
      * @param {Event} event
      * @return {boolean}
@@ -108,13 +129,64 @@ export const CheckboxMixin = (superclass) =>
      * @override
      */
     _shouldSetActive(event) {
-      if (event.target.localName === 'a') {
+      if (
+        this.readonly ||
+        event.target.localName === 'a' ||
+        event.target === this._helperNode ||
+        event.target === this._errorNode
+      ) {
         return false;
       }
 
       return super._shouldSetActive(event);
     }
 
+    /**
+     * Override method inherited from `InputMixin`.
+     * @param {!HTMLElement} input
+     * @protected
+     * @override
+     */
+    _addInputListeners(input) {
+      super._addInputListeners(input);
+
+      input.addEventListener('click', this._boundOnInputClick);
+    }
+
+    /**
+     * Override method inherited from `InputMixin`.
+     * @param {!HTMLElement} input
+     * @protected
+     * @override
+     */
+    _removeInputListeners(input) {
+      super._removeInputListeners(input);
+
+      input.removeEventListener('click', this._boundOnInputClick);
+    }
+
+    /** @private */
+    _onInputClick(event) {
+      // Prevent native checkbox checked change
+      if (this.readonly) {
+        event.preventDefault();
+      }
+    }
+
+    /** @private */
+    __readonlyChanged(readonly, inputElement) {
+      if (!inputElement) {
+        return;
+      }
+
+      // 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.
@@ -131,6 +203,58 @@ export const CheckboxMixin = (superclass) =>
       super._toggleChecked(checked);
     }
 
+    /**
+     * @override
+     * @return {boolean}
+     */
+    checkValidity() {
+      return !this.required || !!this.checked;
+    }
+
+    /**
+     * Override method inherited from `FocusMixin` to validate on blur.
+     * @param {boolean} focused
+     * @protected
+     */
+    _setFocused(focused) {
+      super._setFocused(focused);
+
+      // Do not validate when focusout is caused by document
+      // losing focus, which happens on browser tab switch.
+      if (!focused && document.hasFocus()) {
+        this.validate();
+      }
+    }
+
+    /** @private */
+    _checkedChanged(checked) {
+      if (checked || this.__oldChecked) {
+        this.validate();
+      }
+
+      this.__oldChecked = checked;
+    }
+
+    /**
+     * Override an observer from `FieldMixin`
+     * to validate when required is removed.
+     *
+     * @protected
+     * @override
+     */
+    _requiredChanged(required) {
+      super._requiredChanged(required);
+
+      if (required === false) {
+        this.validate();
+      }
+    }
+
+    /** @private */
+    _onRequiredIndicatorClick() {
+      this._labelNode.click();
+    }
+
     /**
      * Fired when the checkbox is checked or unchecked by the user.
      *

package/src/vaadin-checkbox-styles.js

@@ -26,7 +26,7 @@ export const checkboxStyles = css`
 
   [part='checkbox'],
   ::slotted(input),
-  ::slotted(label) {
+  [part='label'] {
     grid-row: 1;
   }
 
@@ -35,6 +35,16 @@ export const checkboxStyles = css`
     grid-column: 1;
   }
 
+  [part='helper-text'],
+  [part='error-message'] {
+    grid-column: 2;
+  }
+
+  :host(:not([has-helper])) [part='helper-text'],
+  :host(:not([has-error-message])) [part='error-message'] {
+    display: none;
+  }
+
   [part='checkbox'] {
     width: var(--vaadin-checkbox-size, 1em);
     height: var(--vaadin-checkbox-size, 1em);

package/src/vaadin-checkbox.d.ts

@@ -3,13 +3,9 @@
  * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';
-import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
-import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { CheckboxMixin } from './vaadin-checkbox-mixin.js';
 
 /**
  * Fired when the checkbox is checked or unchecked by the user.
@@ -28,10 +24,24 @@ export type CheckboxCheckedChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type CheckboxIndeterminateChangedEvent = CustomEvent<{ value: boolean }>;
 
+/**
+ * Fired when the `invalid` property changes.
+ */
+export type CheckboxInvalidChangedEvent = CustomEvent<{ value: boolean }>;
+
+/**
+ * Fired whenever the checkbox is validated.
+ */
+export type CheckboxValidatedEvent = CustomEvent<{ valid: boolean }>;
+
 export interface CheckboxCustomEventMap {
   'checked-changed': CheckboxCheckedChangedEvent;
 
   'indeterminate-changed': CheckboxIndeterminateChangedEvent;
+
+  'invalid-changed': CheckboxInvalidChangedEvent;
+
+  validated: CheckboxValidatedEvent;
 }
 
 export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxCustomEventMap {
@@ -49,21 +59,29 @@ export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxCustomEve
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name   | Description
- * ------------|-------------
- * `checkbox`  | The element representing a stylable custom checkbox.
+ * Part name            | Description
+ * ---------------------|-------------
+ * `checkbox`           | The element representing a stylable custom checkbox
+ * `label`              | The slotted label element wrapper
+ * `helper-text`        | The slotted helper text element wrapper
+ * `error-message`      | The slotted error message element wrapper
+ * `required-indicator` | The `required` state indicator element
  *
  * The following state attributes are available for styling:
  *
- * Attribute       | Description
- * ----------------|-------------
- * `active`        | Set when the checkbox is activated with mouse, touch or the keyboard.
- * `checked`       | Set when the checkbox is checked.
- * `disabled`      | Set when the checkbox is disabled.
- * `focus-ring`    | Set when the checkbox is focused using the keyboard.
- * `focused`       | Set when the checkbox is focused.
- * `indeterminate` | Set when the checkbox is in the indeterminate state.
- * `has-label`     | Set when the checkbox has a label.
+ * Attribute            | Description
+ * ---------------------|-------------
+ * `active`             | Set when the checkbox is activated with mouse, touch or the keyboard.
+ * `checked`            | Set when the checkbox is checked.
+ * `disabled`           | Set when the checkbox is disabled.
+ * `readonly`           | Set when the checkbox is readonly.
+ * `focus-ring`         | Set when the checkbox is focused using the keyboard.
+ * `focused`            | Set when the checkbox is focused.
+ * `indeterminate`      | Set when the checkbox is in the indeterminate state.
+ * `invalid`            | Set when the checkbox is invalid.
+ * `has-label`          | Set when the checkbox has a label.
+ * `has-helper`         | Set when the checkbox has helper text.
+ * `has-error-message`  | Set when the checkbox has an error message.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
@@ -71,23 +89,7 @@ export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxCustomEve
  * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
  * @fires {CustomEvent} indeterminate-changed - Fired when the `indeterminate` property changes.
  */
-declare class Checkbox extends LabelMixin(
-  CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(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/Element/input/checkbox#Indeterminate_state_checkboxes
-   */
-  indeterminate: boolean;
-
-  /**
-   * The name of the checkbox.
-   */
-  name: string;
-
+declare class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   addEventListener<K extends keyof CheckboxEventMap>(
     type: K,
     listener: (this: Checkbox, ev: CheckboxEventMap[K]) => void,

package/src/vaadin-checkbox.js

@@ -24,21 +24,29 @@ registerStyles('vaadin-checkbox', checkboxStyles, { moduleId: 'vaadin-checkbox-s
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name   | Description
- * ------------|-------------
- * `checkbox`  | The element representing a stylable custom checkbox.
+ * Part name            | Description
+ * ---------------------|-------------
+ * `checkbox`           | The element representing a stylable custom checkbox
+ * `label`              | The slotted label element wrapper
+ * `helper-text`        | The slotted helper text element wrapper
+ * `error-message`      | The slotted error message element wrapper
+ * `required-indicator` | The `required` state indicator element
  *
  * The following state attributes are available for styling:
  *
- * Attribute       | Description
- * ----------------|-------------
- * `active`        | Set when the checkbox is activated with mouse, touch or the keyboard.
- * `checked`       | Set when the checkbox is checked.
- * `disabled`      | Set when the checkbox is disabled.
- * `focus-ring`    | Set when the checkbox is focused using the keyboard.
- * `focused`       | Set when the checkbox is focused.
- * `indeterminate` | Set when the checkbox is in the indeterminate state.
- * `has-label`     | Set when the checkbox has a label.
+ * Attribute            | Description
+ * ---------------------|-------------
+ * `active`             | Set when the checkbox is activated with mouse, touch or the keyboard.
+ * `checked`            | Set when the checkbox is checked.
+ * `disabled`           | Set when the checkbox is disabled.
+ * `readonly`           | Set when the checkbox is readonly.
+ * `focus-ring`         | Set when the checkbox is focused using the keyboard.
+ * `focused`            | Set when the checkbox is focused.
+ * `indeterminate`      | Set when the checkbox is in the indeterminate state.
+ * `invalid`            | Set when the checkbox is invalid.
+ * `has-label`          | Set when the checkbox has a label.
+ * `has-helper`         | Set when the checkbox has helper text.
+ * `has-error-message`  | Set when the checkbox has an error message.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
@@ -62,7 +70,16 @@ export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolymerEl
       <div class="vaadin-checkbox-container">
         <div part="checkbox" aria-hidden="true"></div>
         <slot name="input"></slot>
-        <slot name="label"></slot>
+        <div part="label">
+          <slot name="label"></slot>
+          <div part="required-indicator" on-click="_onRequiredIndicatorClick"></div>
+        </div>
+        <div part="helper-text">
+          <slot name="helper"></slot>
+        </div>
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </div>
       </div>
       <slot name="tooltip"></slot>
     `;

package/src/vaadin-lit-checkbox.js

@@ -36,7 +36,16 @@ export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolylitMi
       <div class="vaadin-checkbox-container">
         <div part="checkbox" aria-hidden="true"></div>
         <slot name="input"></slot>
-        <slot name="label"></slot>
+        <div part="label">
+          <slot name="label"></slot>
+          <div part="required-indicator" @click="${this._onRequiredIndicatorClick}"></div>
+        </div>
+        <div part="helper-text">
+          <slot name="helper"></slot>
+        </div>
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </div>
       </div>
       <slot name="tooltip"></slot>
     `;

package/theme/lumo/vaadin-checkbox-styles.js

@@ -26,6 +26,13 @@ registerStyles(
       --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
       --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
       --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
+      --_invalid-background: var(--vaadin-input-field-invalid-background, var(--lumo-error-color-10pct));
+    }
+
+    [part='label'] {
+      display: flex;
+      position: relative;
+      max-width: max-content;
     }
 
     :host([has-label]) ::slotted(label) {
@@ -35,6 +42,14 @@ registerStyles(
       );
     }
 
+    :host([dir='rtl'][has-label]) ::slotted(label) {
+      padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
+    }
+
+    :host([has-label][required]) ::slotted(label) {
+      padding-inline-end: var(--lumo-space-m);
+    }
+
     [part='checkbox'] {
       width: var(--_checkbox-size);
       height: var(--_checkbox-size);
@@ -77,6 +92,27 @@ registerStyles(
       opacity: 1;
     }
 
+    :host([readonly]:not([checked]):not([indeterminate])) {
+      color: var(--lumo-secondary-text-color);
+    }
+
+    :host([readonly]:not([checked]):not([indeterminate])) [part='checkbox'] {
+      background: transparent;
+      box-shadow: none;
+    }
+
+    :host([readonly]:not([checked]):not([indeterminate])) [part='checkbox']::after {
+      content: '';
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      border-radius: inherit;
+      top: 0;
+      left: 0;
+      opacity: 1;
+      border: var(--vaadin-input-field-readonly-border, 1px dashed var(--lumo-contrast-50pct));
+    }
+
     /* Indeterminate checkmark */
     :host([indeterminate]) [part='checkbox']::after {
       content: var(--vaadin-checkbox-checkmark-char-indeterminate, '');
@@ -96,10 +132,13 @@ registerStyles(
         inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
     }
 
+    :host([focus-ring][readonly]:not([checked]):not([indeterminate])) [part='checkbox'] {
+      box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
+    }
+
     /* Disabled */
     :host([disabled]) {
       pointer-events: none;
-      color: var(--lumo-disabled-text-color);
       --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
     }
 
@@ -115,13 +154,19 @@ registerStyles(
       color: var(--lumo-contrast-30pct);
     }
 
+    :host([disabled]) [part='label'],
+    :host([disabled]) [part='helper-text'] {
+      color: var(--lumo-disabled-text-color);
+      -webkit-text-fill-color: var(--lumo-disabled-text-color);
+    }
+
     :host([indeterminate][disabled]) [part='checkbox']::after {
       background-color: var(--lumo-contrast-30pct);
     }
 
-    /* RTL specific styles */
-    :host([dir='rtl'][has-label]) ::slotted(label) {
-      padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
+    :host([readonly][checked]) [part='checkbox'],
+    :host([readonly][indeterminate]) [part='checkbox'] {
+      background-color: var(--vaadin-checkbox-readonly-checked-background, var(--lumo-contrast-70pct));
     }
 
     /* Used for activation "halo" */
@@ -139,13 +184,14 @@ registerStyles(
     }
 
     /* Hover */
-    :host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part='checkbox'] {
+    :host(:not([checked]):not([indeterminate]):not([disabled]):not([readonly]):not([invalid]):hover) [part='checkbox'] {
       background: var(--vaadin-checkbox-background-hover, var(--lumo-contrast-30pct));
     }
 
     /* Disable hover for touch devices */
     @media (pointer: coarse) {
-      :host(:not([checked]):not([indeterminate]):not([disabled]):hover) [part='checkbox'] {
+      /* prettier-ignore */
+      :host(:not([checked]):not([indeterminate]):not([disabled]):not([readonly]):not([invalid]):hover) [part='checkbox'] {
         background: var(--vaadin-checkbox-background, var(--lumo-contrast-20pct));
       }
     }
@@ -165,6 +211,94 @@ registerStyles(
       transform: scale(0);
       opacity: 0.4;
     }
+
+    /* Required */
+    :host([required]) [part='required-indicator'] {
+      position: absolute;
+      top: var(--lumo-space-xs);
+      right: var(--lumo-space-xs);
+    }
+
+    :host([required][dir='rtl']) [part='required-indicator'] {
+      right: auto;
+      left: var(--lumo-space-xs);
+    }
+
+    :host([required]) [part='required-indicator']::after {
+      content: var(--lumo-required-field-indicator, '\\2022');
+      transition: opacity 0.2s;
+      color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
+      width: 1em;
+      text-align: center;
+    }
+
+    /* Invalid */
+    :host([invalid]) {
+      --vaadin-input-field-border-color: var(--lumo-error-color);
+    }
+
+    :host([invalid]) [part='checkbox'] {
+      background: var(--_invalid-background);
+      background-image: linear-gradient(var(--_invalid-background) 0%, var(--_invalid-background) 100%);
+    }
+
+    :host([invalid]:hover) [part='checkbox'] {
+      background-image: linear-gradient(var(--_invalid-background) 0%, var(--_invalid-background) 100%),
+        linear-gradient(var(--_invalid-background) 0%, var(--_invalid-background) 100%);
+    }
+
+    :host([invalid][focus-ring]) {
+      --_focus-ring-color: var(--lumo-error-color-50pct);
+    }
+
+    :host([invalid]) [part='required-indicator']::after {
+      color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
+    }
+
+    /* Error message */
+    [part='error-message'] {
+      font-size: var(--vaadin-input-field-error-font-size, var(--lumo-font-size-xs));
+      line-height: var(--lumo-line-height-xs);
+      font-weight: var(--vaadin-input-field-error-font-weight, 400);
+      color: var(--vaadin-input-field-error-color, var(--lumo-error-text-color));
+      will-change: max-height;
+      transition: 0.4s max-height;
+      max-height: 5em;
+      padding-inline-start: var(--lumo-space-xs);
+    }
+
+    :host([has-error-message]) [part='error-message']::after,
+    :host([has-helper]) [part='helper-text']::after {
+      content: '';
+      display: block;
+      height: 0.4em;
+    }
+
+    :host(:not([invalid])) [part='error-message'] {
+      max-height: 0;
+      overflow: hidden;
+    }
+
+    /* Helper */
+    [part='helper-text'] {
+      display: block;
+      color: var(--vaadin-input-field-helper-color, var(--lumo-secondary-text-color));
+      font-size: var(--vaadin-input-field-helper-font-size, var(--lumo-font-size-xs));
+      line-height: var(--lumo-line-height-xs);
+      font-weight: var(--vaadin-input-field-helper-font-weight, 400);
+      margin-left: calc(var(--lumo-border-radius-m) / 4);
+      transition: color 0.2s;
+      padding-inline-start: var(--lumo-space-xs);
+    }
+
+    :host(:hover:not([readonly])) [part='helper-text'] {
+      color: var(--lumo-body-text-color);
+    }
+
+    :host([has-error-message]) ::slotted(label),
+    :host([has-helper]) ::slotted(label) {
+      padding-bottom: 0;
+    }
   `,
   { moduleId: 'lumo-checkbox' },
 );

package/theme/material/vaadin-checkbox-styles.js

@@ -15,6 +15,12 @@ registerStyles(
       --_checkbox-size: var(--vaadin-checkbox-size, 16px);
     }
 
+    [part='label'] {
+      display: flex;
+      position: relative;
+      max-width: max-content;
+    }
+
     :host([has-label]) ::slotted(label) {
       padding: 3px 12px 3px 6px;
     }
@@ -118,10 +124,62 @@ registerStyles(
       background-color: var(--material-disabled-color);
     }
 
+    :host([readonly][checked]) [part='checkbox'],
+    :host([readonly][indeterminate]) [part='checkbox'],
+    :host([readonly]) [part='checkbox']::before {
+      background-color: var(--material-secondary-text-color);
+    }
+
     /* RTL specific styles */
     :host([dir='rtl'][has-label]) ::slotted(label) {
       padding: 3px 6px 3px 12px;
     }
+
+    /* Required */
+    :host([required]) [part='required-indicator'] {
+      position: absolute;
+      top: 3px;
+      right: 2px;
+    }
+
+    :host([dir='rtl'][required]) [part='required-indicator'] {
+      right: auto;
+      left: 2px;
+    }
+
+    :host([required]:not([disabled])) [part='required-indicator'] {
+      color: var(--material-secondary-text-color);
+    }
+
+    :host([required]) [part='required-indicator']::after {
+      content: '*';
+    }
+
+    :host([invalid]) [part='required-indicator']::after {
+      color: var(--material-error-text-color);
+    }
+
+    [part='error-message'],
+    [part='helper-text'] {
+      font-size: 0.75em;
+      line-height: 1;
+      padding-left: 6px;
+    }
+
+    [part='error-message'] {
+      color: var(--material-error-text-color);
+    }
+
+    [part='helper-text'] {
+      color: var(--material-secondary-text-color);
+    }
+
+    :host([has-error-message]) [part='error-message']::before,
+    :host([has-helper]) [part='helper-text']::before {
+      content: '';
+      display: block;
+      height: 6px;
+    }
   `,
   { moduleId: 'material-checkbox' },
 );

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/checkbox",
-  "version": "24.4.0-alpha9",
+  "version": "24.4.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "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\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`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`has-label`     | Set when the checkbox has a label.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "disabled",
@@ -63,6 +63,72 @@
                 ]
               }
             },
+            {
+              "name": "invalid",
+              "description": "Set to true when the field is invalid.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "required",
+              "description": "Specifies that the user must fill in a value.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "error-message",
+              "description": "Error to show when the field is invalid.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "helper-text",
+              "description": "String used for the helper text.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "accessible-name",
+              "description": "String used to label the component to screen reader users.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "accessible-name-ref",
+              "description": "Id of the element used as label of the component to screen reader users.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "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",
@@ -81,6 +147,17 @@
                 ]
               }
             },
+            {
+              "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.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -148,6 +225,72 @@
                   ]
                 }
               },
+              {
+                "name": "invalid",
+                "description": "Set to true when the field is invalid.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "required",
+                "description": "Specifies that the user must fill in a value.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "errorMessage",
+                "description": "Error to show when the field is invalid.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "helperText",
+                "description": "String used for the helper text.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "accessibleName",
+                "description": "String used to label the component to screen reader users.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "accessibleNameRef",
+                "description": "Id of the element used as label of the component to screen reader users.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "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",
@@ -165,9 +308,24 @@
                     "string"
                   ]
                 }
+              },
+              {
+                "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.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [
+              {
+                "name": "validated",
+                "description": "Fired whenever the field is validated."
+              },
               {
                 "name": "change",
                 "description": "Fired when the checkbox is checked or unchecked by the user."
@@ -180,6 +338,10 @@
                 "name": "checked-changed",
                 "description": "Fired when the `checked` property changes."
               },
+              {
+                "name": "invalid-changed",
+                "description": "Fired when the `invalid` property changes."
+              },
               {
                 "name": "indeterminate-changed",
                 "description": "Fired when the `indeterminate` property changes."

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/checkbox",
-  "version": "24.4.0-alpha9",
+  "version": "24.4.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "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\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`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`has-label`     | Set when the checkbox has a label.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -40,6 +40,20 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "?invalid",
+              "description": "Set to true when the field is invalid.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?required",
+              "description": "Specifies that the user must fill in a value.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "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",
@@ -47,6 +61,13 @@
                 "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.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".value",
               "description": "The value of the field.",
@@ -61,6 +82,34 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".errorMessage",
+              "description": "Error to show when the field is invalid.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".helperText",
+              "description": "String used for the helper text.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".accessibleName",
+              "description": "String used to label the component to screen reader users.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".accessibleNameRef",
+              "description": "Id of the element used as label of the component to screen reader users.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".name",
               "description": "The name of the checkbox.",
@@ -68,6 +117,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "@validated",
+              "description": "Fired whenever the field is validated.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@change",
               "description": "Fired when the checkbox is checked or unchecked by the user.",
@@ -89,6 +145,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "@invalid-changed",
+              "description": "Fired when the `invalid` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@indeterminate-changed",
               "description": "Fired when the `indeterminate` property changes.",