@vaadin/checkbox-group 22.0.0-alpha5 → 22.0.0-alpha9

package/package.json

@@ -1,10 +1,29 @@
 {
   "name": "@vaadin/checkbox-group",
-  "version": "22.0.0-alpha5",
+  "version": "22.0.0-alpha9",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-checkbox-group",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/checkbox-group"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/web-components/issues"
+  },
   "main": "vaadin-checkbox-group.js",
   "module": "vaadin-checkbox-group.js",
-  "repository": "vaadin/web-components",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
     "Vaadin",
     "checkbox",
@@ -12,33 +31,18 @@
     "web-component",
     "polymer"
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/web-components/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "^22.0.0-alpha5",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha5",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha5"
+    "@vaadin/checkbox": "22.0.0-alpha9",
+    "@vaadin/component-base": "22.0.0-alpha9",
+    "@vaadin/vaadin-lumo-styles": "22.0.0-alpha9",
+    "@vaadin/vaadin-material-styles": "22.0.0-alpha9",
+    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha9"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.2.1",
+    "@vaadin/testing-helpers": "^0.3.0",
     "sinon": "^9.2.0"
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "012f658db6f81375be8889f63ee15e3f660fe9ec"
+  "gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
 }

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

@@ -1,9 +1,14 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-import { DirMixin } from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';
-
-import { CheckboxElement } from '@vaadin/checkbox/src/vaadin-checkbox.js';
-
 /**
  * Fired when the `invalid` property changes.
  */
@@ -14,16 +19,16 @@ export type CheckboxGroupInvalidChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type CheckboxGroupValueChangedEvent = CustomEvent<{ value: Array<string> }>;
 
-export interface CheckboxGroupElementEventMap {
+export interface CheckboxGroupCustomEventMap {
   'invalid-changed': CheckboxGroupInvalidChangedEvent;
 
   'value-changed': CheckboxGroupValueChangedEvent;
 }
 
-export interface CheckboxGroupEventMap extends HTMLElementEventMap, CheckboxGroupElementEventMap {}
+export interface CheckboxGroupEventMap extends HTMLElementEventMap, CheckboxGroupCustomEventMap {}
 
 /**
- * `<vaadin-checkbox-group>` is a Polymer element for grouping vaadin-checkboxes.
+ * `<vaadin-checkbox-group>` is a web component that allows the user to choose several items from a group of binary choices.
  *
  * ```html
  * <vaadin-checkbox-group label="Preferred language of contact:">
@@ -37,105 +42,57 @@ export interface CheckboxGroupEventMap extends HTMLElementEventMap, CheckboxGrou
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name | Description
- * ----------------|----------------
- * `label` | The label element
- * `group-field` | The element that wraps checkboxes
- * `error-message` | The error message element
+ * Part name            | Description
+ * ---------------------|----------------
+ * `label`              | The slotted label element wrapper
+ * `group-field`        | The checkbox elements 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 | Part name
- * -----------|-------------|------------
- * `disabled`   | Set when the checkbox group and its children are disabled. | :host
- * `focused` | Set when the checkbox group contains focus | :host
- * `has-label` | Set when the element has a label | :host
- * `has-value` | Set when the element has a value | :host
- * `has-helper` | Set when the element has helper text or slot | :host
- * `has-error-message` | Set when the element has an error message, regardless if the field is valid or not | :host
- * `required` | Set when the element is required | :host
- * `invalid` | Set when the element is invalid | :host
+ * Attribute           | Description                               | Part name
+ * --------------------|-------------------------------------------|------------
+ * `disabled`          | Set when the element is disabled          | :host
+ * `invalid`           | Set when the element is invalid           | :host
+ * `focused`           | Set when the element is focused           | :host
+ * `has-label`         | Set when the element has a label          | :host
+ * `has-value`         | Set when the element has a value          | :host
+ * `has-helper`        | Set when the element has helper text      | :host
+ * `has-error-message` | Set when the element has an error message | :host
  *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class CheckboxGroupElement extends ThemableMixin(DirMixin(HTMLElement)) {
+declare class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(DirMixin(ThemableMixin(HTMLElement))))) {
   /**
-   * The current disabled state of the checkbox group. True if group and all internal checkboxes are disabled.
-   */
-  disabled: boolean | null | undefined;
-
-  /**
-   * String used for the label element.
-   */
-  label: string | null | undefined;
-
-  /**
-   * Value of the checkbox group.
+   * The value of the checkbox group.
    * Note: toggling the checkboxes modifies the value by creating new
    * array each time, to override Polymer dirty-checking for arrays.
    * You can still use Polymer array mutation methods to update the value.
    */
   value: string[];
 
-  /**
-   * Error to show when the input value is invalid.
-   * @attr {string} error-message
-   */
-  errorMessage: string | null | undefined;
-
-  /**
-   * String used for the helper text.
-   * @attr {string} helper-text
-   */
-  helperText: string | null;
-
-  /**
-   * Specifies that the user must fill in a value.
-   */
-  required: boolean | null | undefined;
-
-  /**
-   * This property is set to true when the control value is invalid.
-   */
-  invalid: boolean;
-
-  /**
-   * Returns true if `value` is valid.
-   *
-   * @returns True if the value is valid.
-   */
-  validate(): boolean;
-
-  _addCheckboxToValue(value: string): void;
-
-  _removeCheckboxFromValue(value: string): void;
-
-  _changeSelectedCheckbox(checkbox: CheckboxElement | null): void;
-
-  _containsFocus(): boolean;
-
-  _setFocused(focused: boolean): void;
-
   addEventListener<K extends keyof CheckboxGroupEventMap>(
     type: K,
-    listener: (this: CheckboxGroupElement, ev: CheckboxGroupEventMap[K]) => void,
+    listener: (this: CheckboxGroup, ev: CheckboxGroupEventMap[K]) => void,
     options?: boolean | AddEventListenerOptions
   ): void;
 
   removeEventListener<K extends keyof CheckboxGroupEventMap>(
     type: K,
-    listener: (this: CheckboxGroupElement, ev: CheckboxGroupEventMap[K]) => void,
+    listener: (this: CheckboxGroup, ev: CheckboxGroupEventMap[K]) => void,
     options?: boolean | EventListenerOptions
   ): void;
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    'vaadin-checkbox-group': CheckboxGroupElement;
+    'vaadin-checkbox-group': CheckboxGroup;
   }
 }
 
-export { CheckboxGroupElement };
+export { CheckboxGroup };

package/src/vaadin-checkbox-group.js

@@ -5,12 +5,15 @@
  */
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { DirMixin } from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';
-import { CheckboxElement } from '@vaadin/checkbox/src/vaadin-checkbox.js';
+import { Checkbox } from '@vaadin/checkbox/src/vaadin-checkbox.js';
 
 /**
- * `<vaadin-checkbox-group>` is a Polymer element for grouping vaadin-checkboxes.
+ * `<vaadin-checkbox-group>` is a web component that allows the user to choose several items from a group of binary choices.
  *
  * ```html
  * <vaadin-checkbox-group label="Preferred language of contact:">
@@ -24,24 +27,25 @@ import { CheckboxElement } from '@vaadin/checkbox/src/vaadin-checkbox.js';
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name | Description
- * ----------------|----------------
- * `label` | The label element
- * `group-field` | The element that wraps checkboxes
- * `error-message` | The error message element
+ * Part name            | Description
+ * ---------------------|----------------
+ * `label`              | The slotted label element wrapper
+ * `group-field`        | The checkbox elements 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 | Part name
- * -----------|-------------|------------
- * `disabled`   | Set when the checkbox group and its children are disabled. | :host
- * `focused` | Set when the checkbox group contains focus | :host
- * `has-label` | Set when the element has a label | :host
- * `has-value` | Set when the element has a value | :host
- * `has-helper` | Set when the element has helper text or slot | :host
- * `has-error-message` | Set when the element has an error message, regardless if the field is valid or not | :host
- * `required` | Set when the element is required | :host
- * `invalid` | Set when the element is invalid | :host
+ * Attribute           | Description                               | Part name
+ * --------------------|-------------------------------------------|------------
+ * `disabled`          | Set when the element is disabled          | :host
+ * `invalid`           | Set when the element is invalid           | :host
+ * `focused`           | Set when the element is focused           | :host
+ * `has-label`         | Set when the element has a label          | :host
+ * `has-value`         | Set when the element has a value          | :host
+ * `has-helper`        | Set when the element has helper text      | :host
+ * `has-error-message` | Set when the element has an error message | :host
  *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
@@ -51,9 +55,15 @@ import { CheckboxElement } from '@vaadin/checkbox/src/vaadin-checkbox.js';
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes DirMixin
- * @element vaadin-checkbox-group
+ * @mixes DisabledMixin
+ * @mixes FocusMixin
+ * @mixes FieldMixin
  */
-class CheckboxGroupElement extends ThemableMixin(DirMixin(PolymerElement)) {
+class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(DirMixin(ThemableMixin(PolymerElement))))) {
+  static get is() {
+    return 'vaadin-checkbox-group';
+  }
+
   static get template() {
     return html`
       <style>
@@ -76,62 +86,36 @@ class CheckboxGroupElement extends ThemableMixin(DirMixin(PolymerElement)) {
           flex-direction: column;
         }
 
-        [part='label']:empty {
+        :host(:not([has-label])) [part='label'] {
           display: none;
         }
       </style>
 
       <div class="vaadin-group-field-container">
-        <label part="label">[[label]]</label>
+        <div part="label">
+          <slot name="label"></slot>
+          <span part="required-indicator" aria-hidden="true"></span>
+        </div>
 
         <div part="group-field">
-          <slot id="slot"></slot>
+          <slot></slot>
         </div>
 
-        <div
-          part="helper-text"
-          aria-live="assertive"
-          aria-hidden$="[[_getHelperTextAriaHidden(helperText, _hasSlottedHelper)]]"
-        >
-          <slot name="helper">[[helperText]]</slot>
+        <div part="helper-text">
+          <slot name="helper"></slot>
         </div>
 
-        <div
-          part="error-message"
-          aria-live="assertive"
-          aria-hidden$="[[_getErrorMessageAriaHidden(invalid, errorMessage)]]"
-          >[[errorMessage]]</div
-        >
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </div>
       </div>
     `;
   }
 
-  static get is() {
-    return 'vaadin-checkbox-group';
-  }
-
   static get properties() {
     return {
       /**
-       * The current disabled state of the checkbox group. True if group and all internal checkboxes are disabled.
-       */
-      disabled: {
-        type: Boolean,
-        reflectToAttribute: true,
-        observer: '_disabledChanged'
-      },
-
-      /**
-       * String used for the label element.
-       */
-      label: {
-        type: String,
-        value: '',
-        observer: '_labelChanged'
-      },
-
-      /**
-       * Value of the checkbox group.
+       * The value of the checkbox group.
        * Note: toggling the checkboxes modifies the value by creating new
        * array each time, to override Polymer dirty-checking for arrays.
        * You can still use Polymer array mutation methods to update the value.
@@ -141,269 +125,241 @@ class CheckboxGroupElement extends ThemableMixin(DirMixin(PolymerElement)) {
         type: Array,
         value: () => [],
         notify: true
-      },
-
-      /**
-       * Error to show when the input value is invalid.
-       * @attr {string} error-message
-       */
-      errorMessage: {
-        type: String,
-        value: '',
-        observer: '_errorMessageChanged'
-      },
-
-      /**
-       * String used for the helper text.
-       * @attr {string} helper-text
-       * @type {string | null}
-       */
-      helperText: {
-        type: String,
-        value: '',
-        observer: '_helperTextChanged'
-      },
-
-      /**
-       * Specifies that the user must fill in a value.
-       */
-      required: {
-        type: Boolean,
-        reflectToAttribute: true
-      },
-
-      /**
-       * This property is set to true when the control value is invalid.
-       * @type {boolean}
-       */
-      invalid: {
-        type: Boolean,
-        reflectToAttribute: true,
-        notify: true,
-        value: false
-      },
-
-      /** @private */
-      _hasSlottedHelper: Boolean
+      }
     };
   }
 
   static get observers() {
-    return ['_updateValue(value, value.splices)'];
+    return ['__valueChanged(value, value.splices)'];
   }
 
-  ready() {
-    super.ready();
+  constructor() {
+    super();
 
-    this.addEventListener('focusin', () => this._setFocused(this._containsFocus()));
-
-    this.addEventListener('focusout', (e) => {
-      // validate when stepping out of the checkbox group
-      if (
-        !this._checkboxes.some(
-          (checkbox) => e.relatedTarget === checkbox || checkbox.shadowRoot.contains(e.relatedTarget)
-        )
-      ) {
-        this.validate();
-        this._setFocused(false);
-      }
-    });
+    this.__registerCheckbox = this.__registerCheckbox.bind(this);
+    this.__unregisterCheckbox = this.__unregisterCheckbox.bind(this);
+    this.__onCheckboxCheckedChanged = this.__onCheckboxCheckedChanged.bind(this);
+  }
 
-    const checkedChangedListener = (e) => {
-      this._changeSelectedCheckbox(e.target);
-    };
+  ready() {
+    super.ready();
 
-    this._observer = new FlattenedNodesObserver(this, (info) => {
-      const addedCheckboxes = this._filterCheckboxes(info.addedNodes);
+    this.ariaTarget = this;
 
-      addedCheckboxes.forEach((checkbox) => {
-        checkbox.addEventListener('checked-changed', checkedChangedListener);
-        if (this.disabled) {
-          checkbox.disabled = true;
-        }
-        if (checkbox.checked) {
-          this._addCheckboxToValue(checkbox.value);
-        } else if (this.value.indexOf(checkbox.value) > -1) {
-          checkbox.checked = true;
-        }
-      });
+    // See https://github.com/vaadin/vaadin-web-components/issues/94
+    this.setAttribute('role', 'group');
 
-      this._filterCheckboxes(info.removedNodes).forEach((checkbox) => {
-        checkbox.removeEventListener('checked-changed', checkedChangedListener);
-        if (checkbox.checked) {
-          this._removeCheckboxFromValue(checkbox.value);
-        }
-      });
+    this._observer = new FlattenedNodesObserver(this, ({ addedNodes, removedNodes }) => {
+      const addedCheckboxes = this.__filterCheckboxes(addedNodes);
+      const removedCheckboxes = this.__filterCheckboxes(removedNodes);
 
-      this._setOrToggleHasHelperAttribute();
+      addedCheckboxes.forEach(this.__registerCheckbox);
+      removedCheckboxes.forEach(this.__unregisterCheckbox);
 
-      const hasValue = (checkbox) => {
-        const { value } = checkbox;
-        return checkbox.hasAttribute('value') || (value && value !== 'on');
-      };
-      if (!addedCheckboxes.every(hasValue)) {
-        console.warn('Please add value attribute to all checkboxes in checkbox group');
-      }
+      this.__warnOfCheckboxesWithoutValue(addedCheckboxes);
     });
   }
 
   /**
-   * Returns true if `value` is valid.
-   *
-   * @return {boolean} True if the value is valid.
+   * @return {string}
+   * @override
+   * @protected
    */
-  validate() {
-    this.invalid = this.required && this.value.length === 0;
-    return !this.invalid;
+  get _ariaAttr() {
+    return 'aria-labelledby';
   }
 
-  /** @private */
-  get _checkboxes() {
-    return this._filterCheckboxes(this.querySelectorAll('*'));
+  /**
+   * Override method inherited from `ValidateMixin`
+   * to validate the value array.
+   *
+   * @override
+   * @return {boolean}
+   */
+  checkValidity() {
+    return !this.required || this.value.length > 0;
   }
 
-  /** @private */
-  _filterCheckboxes(nodes) {
-    return Array.from(nodes).filter((child) => child instanceof CheckboxElement);
+  /**
+   * @param {!Array<!Node>} nodes
+   * @return {!Array<!Checkbox>}
+   * @private
+   */
+  __filterCheckboxes(nodes) {
+    return nodes.filter((child) => child instanceof Checkbox);
   }
 
-  /** @private */
-  _disabledChanged(disabled) {
-    this.setAttribute('aria-disabled', disabled);
-
-    this._checkboxes.forEach((checkbox) => (checkbox.disabled = disabled));
+  /**
+   * A collection of the checkboxes.
+   *
+   * @return {!Array<!Checkbox>}
+   * @private
+   */
+  get __checkboxes() {
+    return this.__filterCheckboxes([...this.children]);
   }
 
   /**
-   * @param {string} value
-   * @protected
+   * @param {!Array<!Checkbox>} checkboxes
+   * @private
    */
-  _addCheckboxToValue(value) {
-    if (this.value.indexOf(value) === -1) {
-      this.value = this.value.concat(value);
+  __warnOfCheckboxesWithoutValue(checkboxes) {
+    const hasCheckboxesWithoutValue = checkboxes.some((checkbox) => {
+      const { value } = checkbox;
+
+      return !checkbox.hasAttribute('value') && (!value || value === 'on');
+    });
+
+    if (hasCheckboxesWithoutValue) {
+      console.warn('Please provide the value attribute to all the checkboxes inside the checkbox group.');
     }
   }
 
   /**
-   * @param {string} value
-   * @protected
+   * Registers the checkbox after adding it to the group.
+   *
+   * @param {!Checkbox} checkbox
+   * @private
    */
-  _removeCheckboxFromValue(value) {
-    this.value = this.value.filter((v) => v !== value);
+  __registerCheckbox(checkbox) {
+    checkbox.addEventListener('checked-changed', this.__onCheckboxCheckedChanged);
+
+    if (this.disabled) {
+      checkbox.disabled = true;
+    }
+
+    if (checkbox.checked) {
+      this.__addCheckboxToValue(checkbox.value);
+    } else if (this.value.includes(checkbox.value)) {
+      checkbox.checked = true;
+    }
   }
 
   /**
-   * @param {CheckboxElement} checkbox
-   * @protected
+   * Unregisters the checkbox before removing it from the group.
+   *
+   * @param {!Checkbox} checkbox
+   * @private
    */
-  _changeSelectedCheckbox(checkbox) {
-    if (this._updatingValue) {
-      return;
-    }
+  __unregisterCheckbox(checkbox) {
+    checkbox.removeEventListener('checked-changed', this.__onCheckboxCheckedChanged);
 
     if (checkbox.checked) {
-      this._addCheckboxToValue(checkbox.value);
-    } else {
-      this._removeCheckboxFromValue(checkbox.value);
+      this.__removeCheckboxFromValue(checkbox.value);
     }
   }
 
-  /** @private */
-  _updateValue(value) {
-    // setting initial value to empty array, skip validation
-    if (value.length === 0 && this._oldValue === undefined) {
+  /**
+   * Override method inherited from `DisabledMixin`
+   * to propagate the `disabled` property to the checkboxes.
+   *
+   * @param {boolean} newValue
+   * @param {boolean} oldValue
+   * @override
+   * @protected
+   */
+  _disabledChanged(newValue, oldValue) {
+    super._disabledChanged(newValue, oldValue);
+
+    // Prevent updating the `disabled` property for the checkboxes at initialization.
+    // Otherwise, the checkboxes may end up enabled regardless the `disabled` attribute
+    // intentionally added by the user on some of them.
+    if (!newValue && oldValue === undefined) {
       return;
     }
 
-    if (value.length) {
-      this.setAttribute('has-value', '');
-    } else {
-      this.removeAttribute('has-value');
+    if (oldValue !== newValue) {
+      this.__checkboxes.forEach((checkbox) => {
+        checkbox.disabled = newValue;
+      });
     }
-
-    this._oldValue = value;
-    // set a flag to avoid updating loop
-    this._updatingValue = true;
-    // reflect the value array to checkboxes
-    this._checkboxes.forEach((checkbox) => {
-      checkbox.checked = value.indexOf(checkbox.value) > -1;
-    });
-    this._updatingValue = false;
-
-    this.validate();
   }
 
-  /** @private */
-  _labelChanged(label) {
-    this._setOrToggleAttribute('has-label', !!label);
+  /**
+   * @param {string} value
+   * @private
+   */
+  __addCheckboxToValue(value) {
+    if (!this.value.includes(value)) {
+      this.value = [...this.value, value];
+    }
   }
 
-  /** @private */
-  _errorMessageChanged(errorMessage) {
-    this._setOrToggleAttribute('has-error-message', !!errorMessage);
+  /**
+   * @param {string} value
+   * @private
+   */
+  __removeCheckboxFromValue(value) {
+    if (this.value.includes(value)) {
+      this.value = this.value.filter((v) => v !== value);
+    }
   }
 
-  /** @private */
-  _helperTextChanged(helperText) {
-    this._setOrToggleAttribute('has-helper', !!helperText);
+  /**
+   * @param {!CustomEvent} event
+   * @private
+   */
+  __onCheckboxCheckedChanged(event) {
+    const checkbox = event.target;
+
+    if (checkbox.checked) {
+      this.__addCheckboxToValue(checkbox.value);
+    } else {
+      this.__removeCheckboxFromValue(checkbox.value);
+    }
   }
 
-  /** @private */
-  _setOrToggleAttribute(name, value) {
-    if (!name) {
+  /**
+   * @param {string | null | undefined} value
+   * @private
+   */
+  __valueChanged(value) {
+    // setting initial value to empty array, skip validation
+    if (value.length === 0 && this.__oldValue === undefined) {
       return;
     }
 
-    if (value) {
-      this.setAttribute(name, typeof value === 'boolean' ? '' : value);
-    } else {
-      this.removeAttribute(name);
-    }
-  }
+    this.__oldValue = value;
+
+    this.toggleAttribute('has-value', value.length > 0);
+
+    this.__checkboxes.forEach((checkbox) => {
+      checkbox.checked = value.includes(checkbox.value);
+    });
 
-  /** @private */
-  _getErrorMessageAriaHidden(invalid, errorMessage) {
-    return (!errorMessage || !invalid).toString();
+    this.validate();
   }
 
   /**
+   * Override method inherited from `FocusMixin`
+   * to prevent removing the `focused` attribute
+   * when focus moves between checkboxes inside the group.
+   *
+   * @param {!FocusEvent} event
    * @return {boolean}
    * @protected
    */
-  _containsFocus() {
-    const activeElement = this.getRootNode().activeElement;
-    return this.contains(activeElement);
+  _shouldRemoveFocus(event) {
+    return !this.contains(event.relatedTarget);
   }
 
   /**
+   * Override method inherited from `FocusMixin`
+   * to run validation when the group loses focus.
+   *
    * @param {boolean} focused
+   * @override
    * @protected
    */
   _setFocused(focused) {
-    if (focused) {
-      this.setAttribute('focused', '');
-    } else {
-      this.removeAttribute('focused');
-    }
-  }
-
-  /** @private */
-  _setOrToggleHasHelperAttribute() {
-    const slottedNodes = this.shadowRoot.querySelector(`[name="helper"]`).assignedNodes();
-    // Only has slotted helper if not a text node
-    // Text nodes are added by the helperText prop and not the helper slot
-    // The filter is added due to shady DOM triggering this slotchange event on helperText prop change
-    this._hasSlottedHelper = slottedNodes.filter((node) => node.nodeType !== 3).length > 0;
+    super._setFocused(focused);
 
-    this._setOrToggleAttribute('has-helper', this._hasSlottedHelper ? 'slotted' : !!this.helperText);
-  }
-
-  /** @private */
-  _getHelperTextAriaHidden(helperText, hasSlottedHelper) {
-    return (!(helperText || hasSlottedHelper)).toString();
+    if (!focused) {
+      this.validate();
+    }
   }
 }
 
-customElements.define(CheckboxGroupElement.is, CheckboxGroupElement);
+customElements.define(CheckboxGroup.is, CheckboxGroup);
 
-export { CheckboxGroupElement };
+export { CheckboxGroup };

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

@@ -1,5 +1,10 @@
 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-lumo-styles/color.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';
+import { helper } from '@vaadin/vaadin-lumo-styles/mixins/helper.js';
 import { requiredField } from '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
 
 const checkboxGroup = css`
@@ -14,7 +19,8 @@ const checkboxGroup = css`
   }
 
   :host::before {
-    height: var(--lumo-size-m);
+    /* Effective height of vaadin-checkbox */
+    height: var(--lumo-size-s);
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
@@ -25,10 +31,6 @@ const checkboxGroup = css`
     flex-direction: column;
   }
 
-  [part='label'] {
-    padding-bottom: 0.7em;
-  }
-
   :host([disabled]) [part='label'] {
     color: var(--lumo-disabled-text-color);
     -webkit-text-fill-color: var(--lumo-disabled-text-color);
@@ -39,55 +41,10 @@ const checkboxGroup = css`
   }
 
   :host(:hover:not([disabled]):not([focused])) [part='label'],
-  :host(:hover:not([disabled]):not([focused])) [part='helper-text'],
-  :host(:hover:not([disabled]):not([focused])) [part='helper-text'] ::slotted(*) {
+  :host(:hover:not([disabled]):not([focused])) [part='helper-text'] {
     color: var(--lumo-body-text-color);
   }
 
-  :host([has-helper]) [part='helper-text']::before {
-    content: '';
-    display: block;
-    height: 0.4em;
-  }
-
-  [part='helper-text'],
-  [part='helper-text'] ::slotted(*) {
-    display: block;
-    color: var(--lumo-secondary-text-color);
-    font-size: var(--lumo-font-size-xs);
-    line-height: var(--lumo-line-height-xs);
-    margin-left: calc(var(--lumo-border-radius-m) / 4);
-    transition: color 0.2s;
-  }
-
-  /* helper-text position */
-  :host([has-helper][theme~='helper-above-field']) [part='helper-text']::before {
-    display: none;
-  }
-
-  :host([has-helper][theme~='helper-above-field']) [part='helper-text']::after {
-    content: '';
-    display: block;
-    height: 0.4em;
-  }
-
-  :host([has-helper][theme~='helper-above-field']) [part='label'] {
-    order: 0;
-    padding-bottom: 0.4em;
-  }
-
-  :host([has-helper][theme~='helper-above-field']) [part='helper-text'] {
-    order: 1;
-  }
-
-  :host([has-helper][theme~='helper-above-field']) [part='group-field'] {
-    order: 2;
-  }
-
-  :host([has-helper][theme~='helper-above-field']) [part='error-message'] {
-    order: 3;
-  }
-
   /* Touch device adjustment */
   @media (pointer: coarse) {
     :host(:hover:not([disabled]):not([focused])) [part='label'] {
@@ -96,6 +53,6 @@ const checkboxGroup = css`
   }
 `;
 
-registerStyles('vaadin-checkbox-group', [requiredField, checkboxGroup], {
+registerStyles('vaadin-checkbox-group', [requiredField, helper, checkboxGroup], {
   moduleId: 'lumo-checkbox-group'
 });

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

@@ -1,5 +1,6 @@
 import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '@vaadin/vaadin-material-styles/color.js';
+import { helper } from '@vaadin/vaadin-material-styles/mixins/helper.js';
 import { requiredField } from '@vaadin/vaadin-material-styles/mixins/required-field.js';
 
 const checkboxGroup = css`
@@ -25,15 +26,6 @@ const checkboxGroup = css`
     padding-top: 24px;
   }
 
-  [part='label']:empty {
-    display: none;
-  }
-
-  [part='label']:empty::before {
-    content: '\\00a0';
-    position: absolute;
-  }
-
   :host([theme~='vertical']) [part='group-field'] {
     display: flex;
     flex-direction: column;
@@ -47,26 +39,8 @@ const checkboxGroup = css`
   :host([focused]:not([invalid])) [part='label'] {
     color: var(--material-primary-text-color);
   }
-
-  /* According to material theme guidelines, helper text should be hidden when error message is set and input is invalid */
-  :host([has-helper][invalid][has-error-message]) [part='helper-text'] {
-    display: none;
-  }
-
-  :host([has-helper]) [part='helper-text']::before {
-    content: '';
-    display: block;
-    height: 6px;
-  }
-
-  [part='helper-text'],
-  [part='helper-text'] ::slotted(*) {
-    font-size: 0.75rem;
-    line-height: 1;
-    color: var(--material-secondary-text-color);
-  }
 `;
 
-registerStyles('vaadin-checkbox-group', [requiredField, checkboxGroup], {
+registerStyles('vaadin-checkbox-group', [requiredField, helper, checkboxGroup], {
   moduleId: 'material-checkbox-group'
 });