@vaadin/checkbox 24.4.0-dev.b3e1d14600 → 24.5.0-alpha1

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-dev.b3e1d14600",
+  "version": "24.5.0-alpha1",
   "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-dev.b3e1d14600",
-    "@vaadin/component-base": "24.4.0-dev.b3e1d14600",
-    "@vaadin/field-base": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-material-styles": "24.4.0-dev.b3e1d14600",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-dev.b3e1d14600",
+    "@vaadin/a11y-base": "24.5.0-alpha1",
+    "@vaadin/component-base": "24.5.0-alpha1",
+    "@vaadin/field-base": "24.5.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "502d4f5b03f770a83d270d98078cde230254dd0e"
+  "gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a"
 }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
@@ -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

@@ -1,13 +1,13 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * 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 { 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.d.ts

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

package/src/vaadin-checkbox-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -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

@@ -1,15 +1,11 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * 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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
@@ -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.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 export * from './vaadin-checkbox.js';

package/src/vaadin-lit-checkbox.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, LitElement } from 'lit';
@@ -17,7 +17,7 @@ import { checkboxStyles } from './vaadin-checkbox-styles.js';
  *
  * ## Disclaimer
  *
- * This component is an experiment not intended for publishing to npm.
+ * This component is an experiment and not yet a part of Vaadin platform.
  * There is no ETA regarding specific Vaadin version where it'll land.
  * Feel free to try this code in your apps as per Apache 2.0 license.
  */
@@ -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.d.ts

@@ -0,0 +1,6 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/font-icons.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';