@vaadin/checkbox 22.0.0-alpha6 → 22.0.0-beta1

package/package.json

@@ -1,10 +1,29 @@
 {
   "name": "@vaadin/checkbox",
-  "version": "22.0.0-alpha6",
+  "version": "22.0.0-beta1",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-checkbox",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/checkbox"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/web-components/issues"
+  },
   "main": "vaadin-checkbox.js",
   "module": "vaadin-checkbox.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/vaadin-control-state-mixin": "^22.0.0-alpha6",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
+    "@vaadin/component-base": "22.0.0-beta1",
+    "@vaadin/field-base": "22.0.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "22.0.0-beta1",
+    "@vaadin/vaadin-material-styles": "22.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "22.0.0-beta1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.0",
     "sinon": "^9.2.0"
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
+  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
 }

package/src/vaadin-checkbox.d.ts

@@ -1,11 +1,15 @@
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
+import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
-
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-
 /**
  * Fired when the `checked` property changes.
  */
@@ -16,95 +20,80 @@ export type CheckboxCheckedChangedEvent = CustomEvent<{ value: boolean }>;
  */
 export type CheckboxIndeterminateChangedEvent = CustomEvent<{ value: boolean }>;
 
-export interface CheckboxElementEventMap {
+export interface CheckboxCustomEventMap {
   'checked-changed': CheckboxCheckedChangedEvent;
 
   'indeterminate-changed': CheckboxIndeterminateChangedEvent;
 }
 
-export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxElementEventMap {}
+export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxCustomEventMap {}
 
 /**
- * `<vaadin-checkbox>` is a Web Component for customized checkboxes.
+ * `<vaadin-checkbox>` is an input field representing a binary choice.
  *
  * ```html
- * <vaadin-checkbox>
- *   Make my profile visible
- * </vaadin-checkbox>
+ * <vaadin-checkbox label="I accept the terms and conditions"></vaadin-checkbox>
  * ```
  *
  * ### Styling
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name         | Description
- * ------------------|----------------
- * `checkbox`        | The wrapper element for the native <input type="checkbox">
- * `label`           | The wrapper element in which the component's children, namely the label, is slotted
+ * Part name   | Description
+ * ------------|----------------
+ * `checkbox`  | The wrapper element that contains slotted `<input type="checkbox">`
  *
  * The following state attributes are available for styling:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|--------------
- * `active`     | Set when the checkbox is pressed down, either with mouse, touch or the keyboard. | `:host`
- * `disabled`   | Set when the checkbox is disabled. | `:host`
- * `focus-ring` | Set when the checkbox is focused using the keyboard. | `:host`
- * `focused`    | Set when the checkbox is focused. | `:host`
- * `indeterminate` | Set when the checkbox is in indeterminate mode. | `:host`
- * `checked` | Set when the checkbox is checked. | `:host`
- * `empty` | Set when there is no label provided. | `label`
+ * Attribute       | Description | Part name
+ * ----------------|-------------|--------------
+ * `active`        | Set when the checkbox is pressed down, either with mouse, touch or the keyboard. | `:host`
+ * `disabled`      | Set when the checkbox is disabled. | `:host`
+ * `focus-ring`    | Set when the checkbox is focused using the keyboard. | `:host`
+ * `focused`       | Set when the checkbox is focused. | `:host`
+ * `indeterminate` | Set when the checkbox is in the indeterminate state. | `:host`
+ * `checked`       | Set when the checkbox is checked. | `:host`
+ * `has-label`     | Set when the checkbox has a label. | `:host`
  *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
- * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
  * @fires {CustomEvent} indeterminate-changed - Fired when the `indeterminate` property changes.
  */
-declare class CheckboxElement extends ElementMixin(
-  ControlStateMixin(ThemableMixin(GestureEventListeners(HTMLElement)))
+declare class Checkbox extends SlotLabelMixin(
+  CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(HTMLElement)))))
 ) {
-  readonly focusElement: HTMLInputElement;
-
   /**
-   * Name of the element.
-   */
-  name: string;
-
-  /**
-   * True if the checkbox is checked.
-   */
-  checked: boolean;
-
-  /**
-   * Indeterminate state of the checkbox when it's neither checked nor unchecked, but undetermined.
+   * 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 value given to the data submitted with the checkbox's name to the server when the control is inside a form.
+   * The name of the checkbox.
    */
-  value: string | null | undefined;
-
-  _toggleChecked(): void;
+  name: string;
 
   addEventListener<K extends keyof CheckboxEventMap>(
     type: K,
-    listener: (this: CheckboxElement, ev: CheckboxEventMap[K]) => void,
+    listener: (this: Checkbox, ev: CheckboxEventMap[K]) => void,
     options?: boolean | AddEventListenerOptions
   ): void;
 
   removeEventListener<K extends keyof CheckboxEventMap>(
     type: K,
-    listener: (this: CheckboxElement, ev: CheckboxEventMap[K]) => void,
+    listener: (this: Checkbox, ev: CheckboxEventMap[K]) => void,
     options?: boolean | EventListenerOptions
   ): void;
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    'vaadin-checkbox': CheckboxElement;
+    'vaadin-checkbox': Checkbox;
   }
 }
 
-export { CheckboxElement };
+export { Checkbox };

package/src/vaadin-checkbox.js

@@ -4,54 +4,62 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
+import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
+import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
+import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
+import { InputController } from '@vaadin/field-base/src/input-controller.js';
+import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
 
 /**
- * `<vaadin-checkbox>` is a Web Component for customized checkboxes.
+ * `<vaadin-checkbox>` is an input field representing a binary choice.
  *
  * ```html
- * <vaadin-checkbox>
- *   Make my profile visible
- * </vaadin-checkbox>
+ * <vaadin-checkbox label="I accept the terms and conditions"></vaadin-checkbox>
  * ```
  *
  * ### Styling
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name         | Description
- * ------------------|----------------
- * `checkbox`        | The wrapper element for the native <input type="checkbox">
- * `label`           | The wrapper element in which the component's children, namely the label, is slotted
+ * Part name   | Description
+ * ------------|----------------
+ * `checkbox`  | The wrapper element that contains slotted <input type="checkbox">.
  *
  * The following state attributes are available for styling:
  *
- * Attribute    | Description | Part name
- * -------------|-------------|--------------
- * `active`     | Set when the checkbox is pressed down, either with mouse, touch or the keyboard. | `:host`
- * `disabled`   | Set when the checkbox is disabled. | `:host`
- * `focus-ring` | Set when the checkbox is focused using the keyboard. | `:host`
- * `focused`    | Set when the checkbox is focused. | `:host`
- * `indeterminate` | Set when the checkbox is in indeterminate mode. | `:host`
- * `checked` | Set when the checkbox is checked. | `:host`
- * `empty` | Set when there is no label provided. | `label`
+ * Attribute       | Description | Part name
+ * ----------------|-------------|--------------
+ * `active`        | Set when the checkbox is pressed down, either with mouse, touch or the keyboard. | `:host`
+ * `disabled`      | Set when the checkbox is disabled. | `:host`
+ * `focus-ring`    | Set when the checkbox is focused using the keyboard. | `:host`
+ * `focused`       | Set when the checkbox is focused. | `:host`
+ * `indeterminate` | Set when the checkbox is in the indeterminate state. | `:host`
+ * `checked`       | Set when the checkbox is checked. | `:host`
+ * `has-label`     | Set when the checkbox has a label. | `:host`
  *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
  *
- * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
  * @fires {CustomEvent} indeterminate-changed - Fired when the `indeterminate` property changes.
  *
  * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ControlStateMixin
  * @mixes ThemableMixin
- * @mixes GestureEventListeners
+ * @mixes ElementMixin
+ * @mixes ActiveMixin
+ * @mixes DelegateFocusMixin
+ * @mixes CheckedMixin
+ * @mixes SlotLabelMixin
  */
-class CheckboxElement extends ElementMixin(ControlStateMixin(ThemableMixin(GestureEventListeners(PolymerElement)))) {
+class Checkbox extends SlotLabelMixin(
+  CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(PolymerElement)))))
+) {
+  static get is() {
+    return 'vaadin-checkbox';
+  }
+
   static get template() {
     return html`
       <style>
@@ -63,19 +71,22 @@ class CheckboxElement extends ElementMixin(ControlStateMixin(ThemableMixin(Gestu
           display: none !important;
         }
 
-        label {
+        :host([disabled]) {
+          -webkit-tap-highlight-color: transparent;
+        }
+
+        .vaadin-checkbox-container {
           display: inline-flex;
           align-items: baseline;
-          outline: none;
         }
 
-        [part='checkbox'] {
+        .vaadin-checkbox-wrapper {
           position: relative;
-          display: inline-block;
           flex: none;
         }
 
-        input[type='checkbox'] {
+        /* visually hidden */
+        ::slotted(input) {
           position: absolute;
           top: 0;
           left: 0;
@@ -86,248 +97,146 @@ class CheckboxElement extends ElementMixin(ControlStateMixin(ThemableMixin(Gestu
           cursor: inherit;
           margin: 0;
         }
-
-        :host([disabled]) {
-          -webkit-tap-highlight-color: transparent;
-        }
       </style>
-
-      <label>
-        <span part="checkbox">
-          <input
-            type="checkbox"
-            checked="{{checked::change}}"
-            disabled$="[[disabled]]"
-            indeterminate="{{indeterminate::change}}"
-            role="presentation"
-            tabindex="-1"
-          />
-        </span>
-
-        <span part="label">
-          <slot></slot>
-        </span>
-      </label>
+      <div class="vaadin-checkbox-container">
+        <div class="vaadin-checkbox-wrapper">
+          <div part="checkbox"></div>
+          <slot name="input"></slot>
+        </div>
+
+        <slot name="label"></slot>
+
+        <div style="display: none !important">
+          <slot id="noop"></slot>
+        </div>
+      </div>
     `;
   }
 
-  static get is() {
-    return 'vaadin-checkbox';
-  }
-
   static get properties() {
     return {
       /**
-       * True if the checkbox is checked.
-       * @type {boolean}
-       */
-      checked: {
-        type: Boolean,
-        value: false,
-        notify: true,
-        observer: '_checkedChanged',
-        reflectToAttribute: true
-      },
-
-      /**
-       * Indeterminate state of the checkbox when it's neither checked nor unchecked, but undetermined.
+       * 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
+       *
        * @type {boolean}
        */
       indeterminate: {
         type: Boolean,
         notify: true,
-        observer: '_indeterminateChanged',
-        reflectToAttribute: true,
-        value: false
+        value: false,
+        reflectToAttribute: true
       },
 
       /**
-       * The value given to the data submitted with the checkbox's name to the server when the control is inside a form.
+       * The name of the checkbox.
+       *
+       * @type {string}
        */
-      value: {
+      name: {
         type: String,
-        value: 'on'
-      },
-
-      /** @private */
-      _nativeCheckbox: {
-        type: Object
+        value: ''
       }
     };
   }
 
-  constructor() {
-    super();
-    /**
-     * @type {string}
-     * Name of the element.
-     */
-    this.name;
-  }
-
-  get name() {
-    return this.checked ? this._storedName : '';
+  /** @override */
+  static get delegateProps() {
+    return [...super.delegateProps, 'indeterminate'];
   }
 
-  set name(name) {
-    this._storedName = name;
+  /** @override */
+  static get delegateAttrs() {
+    return [...super.delegateAttrs, 'name'];
   }
 
-  ready() {
-    super.ready();
-
-    this.setAttribute('role', 'checkbox');
-
-    this._nativeCheckbox = this.shadowRoot.querySelector('input[type="checkbox"]');
-
-    this.addEventListener('click', this._handleClick.bind(this));
-
-    this._addActiveListeners();
-
-    const attrName = this.getAttribute('name');
-    if (attrName) {
-      this.name = attrName;
-    }
+  constructor() {
+    super();
 
-    this.shadowRoot
-      .querySelector('[part~="label"]')
-      .querySelector('slot')
-      .addEventListener('slotchange', this._updateLabelAttribute.bind(this));
+    this._setType('checkbox');
 
-    this._updateLabelAttribute();
+    // 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';
   }
 
-  /** @private */
-  _updateLabelAttribute() {
-    const label = this.shadowRoot.querySelector('[part~="label"]');
-    const assignedNodes = label.firstElementChild.assignedNodes();
-    if (this._isAssignedNodesEmpty(assignedNodes)) {
-      label.setAttribute('empty', '');
-    } else {
-      label.removeAttribute('empty');
-    }
-  }
+  /** @protected */
+  ready() {
+    super.ready();
 
-  /** @private */
-  _isAssignedNodesEmpty(nodes) {
-    // The assigned nodes considered to be empty if there is no slotted content or only one empty text node
-    return (
-      nodes.length === 0 ||
-      (nodes.length == 1 && nodes[0].nodeType == Node.TEXT_NODE && nodes[0].textContent.trim() === '')
+    this.addController(
+      new InputController(this, (input) => {
+        this._setInputElement(input);
+        this._setFocusElement(input);
+        this.stateTarget = input;
+      })
     );
+    this.addController(new AriaLabelController(this, this.inputElement, this._labelNode));
   }
 
-  /** @private */
-  _checkedChanged(checked) {
-    if (this.indeterminate) {
-      this.setAttribute('aria-checked', 'mixed');
-    } else {
-      this.setAttribute('aria-checked', Boolean(checked));
-    }
-  }
-
-  /** @private */
-  _indeterminateChanged(indeterminate) {
-    if (indeterminate) {
-      this.setAttribute('aria-checked', 'mixed');
-    } else {
-      this.setAttribute('aria-checked', this.checked);
-    }
-  }
-
-  /** @private */
-  _addActiveListeners() {
-    // DOWN
-    this._addEventListenerToNode(this, 'down', (e) => {
-      if (this.__interactionsAllowed(e)) {
-        this.setAttribute('active', '');
-      }
-    });
-
-    // UP
-    this._addEventListenerToNode(this, 'up', () => this.removeAttribute('active'));
-
-    // KEYDOWN
-    this.addEventListener('keydown', (e) => {
-      if (this.__interactionsAllowed(e) && e.keyCode === 32) {
-        e.preventDefault();
-        this.setAttribute('active', '');
-      }
-    });
-
-    // KEYUP
-    this.addEventListener('keyup', (e) => {
-      if (this.__interactionsAllowed(e) && e.keyCode === 32) {
-        e.preventDefault();
-        this._toggleChecked();
-        this.removeAttribute('active');
-
-        if (this.indeterminate) {
-          this.indeterminate = false;
-        }
-      }
-    });
+  /**
+   * A reference to the default slot from which nodes are copied to the label node.
+   *
+   * @override
+   * @protected
+   * @type {HTMLSlotElement}
+   */
+  get _sourceSlot() {
+    return this.$.noop;
   }
 
   /**
-   * @return {!HTMLInputElement}
+   * Override __copyNodesToSlotTarget from SlotTargetMixin to show a warning.
+   * @override
    * @protected
-   */
-  get focusElement() {
-    return this.shadowRoot.querySelector('input');
+   * @param {!Array<!Node>} nodes
+   **/
+  __copyNodesToSlotTarget(nodes) {
+    super.__copyNodesToSlotTarget(nodes);
+
+    console.warn(
+      `WARNING: Since Vaadin 22, placing the label as a direct child of a <vaadin-checkbox> is deprecated.
+Please use <label slot="label"> wrapper or the label property instead.`
+    );
   }
 
   /**
-   * True if users' interactions (mouse or keyboard)
-   * should toggle the checkbox
+   * Extends the method from `ActiveMixin` in order to
+   * prevent setting the `active` attribute when interacting with a link inside the label.
+   *
+   * @param {Event} event
+   * @return {boolean}
+   * @protected
+   * @override
    */
-  __interactionsAllowed(e) {
-    if (this.disabled) {
-      return false;
-    }
-
-    // https://github.com/vaadin/vaadin-checkbox/issues/63
-    if (e.target.localName === 'a') {
+  _shouldSetActive(event) {
+    if (event.target.localName === 'a') {
       return false;
     }
 
-    return true;
-  }
-
-  /** @private */
-  _handleClick(e) {
-    if (this.__interactionsAllowed(e)) {
-      if (!this.indeterminate) {
-        if (e.composedPath()[0] !== this._nativeCheckbox) {
-          e.preventDefault();
-          this._toggleChecked();
-        }
-      } else {
-        /*
-         * Required for IE 11 and Edge.
-         * See issue here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7344418/
-         */
-        this.indeterminate = false;
-        e.preventDefault();
-        this._toggleChecked();
-      }
-    }
-  }
-
-  /** @protected */
-  _toggleChecked() {
-    this.checked = !this.checked;
-    this.dispatchEvent(new CustomEvent('change', { composed: false, bubbles: true }));
+    return super._shouldSetActive(event);
   }
 
   /**
-   * Fired when the user commits a value change.
+   * Extends the method from `CheckedMixin` in order to
+   * reset the indeterminate state once the user switches the checkbox.
    *
-   * @event change
+   * @param {boolean} checked
+   * @protected
+   * @override
    */
+  _toggleChecked(checked) {
+    if (this.indeterminate) {
+      this.indeterminate = false;
+    }
+
+    super._toggleChecked(checked);
+  }
 }
 
-customElements.define(CheckboxElement.is, CheckboxElement);
+customElements.define(Checkbox.is, Checkbox);
 
-export { CheckboxElement };
+export { Checkbox };

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

@@ -1,11 +1,20 @@
 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';
 
 registerStyles(
   'vaadin-checkbox',
   css`
     :host {
+      color: var(--lumo-body-text-color);
+      font-size: var(--lumo-font-size-m);
+      font-family: var(--lumo-font-family);
+      line-height: var(--lumo-line-height-s);
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
       -webkit-tap-highlight-color: transparent;
       -webkit-user-select: none;
       -moz-user-select: none;
@@ -14,21 +23,21 @@ registerStyles(
       outline: none;
     }
 
-    [part='label']:not([empty]) {
-      margin: 0.1875em 0.875em 0.1875em 0.375em;
+    :host([has-label]) ::slotted(label) {
+      padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);
     }
 
     [part='checkbox'] {
-      width: calc(1em + 2px);
-      height: calc(1em + 2px);
-      margin: 0.1875em;
+      width: calc(var(--lumo-size-m) / 2);
+      height: calc(var(--lumo-size-m) / 2);
+      margin: var(--lumo-space-xs);
       position: relative;
       border-radius: var(--lumo-border-radius-s);
       background-color: var(--lumo-contrast-20pct);
       transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s;
-      pointer-events: none;
       line-height: 1.2;
       cursor: var(--lumo-clickable-cursor);
+      flex: none;
     }
 
     :host([indeterminate]) [part='checkbox'],
@@ -44,6 +53,7 @@ registerStyles(
     /* Checkmark */
     [part='checkbox']::after {
       content: '';
+      pointer-events: none;
       display: inline-block;
       width: 0;
       height: 0;
@@ -80,7 +90,7 @@ registerStyles(
 
     /* Focus ring */
     :host([focus-ring]) [part='checkbox'] {
-      box-shadow: 0 0 0 3px var(--lumo-primary-color-50pct);
+      box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 3px var(--lumo-primary-color-50pct);
     }
 
     /* Disabled */
@@ -89,7 +99,7 @@ registerStyles(
       color: var(--lumo-disabled-text-color);
     }
 
-    :host([disabled]) [part='label'] ::slotted(*) {
+    :host([disabled]) ::slotted(label) {
       color: inherit;
     }
 
@@ -106,8 +116,8 @@ registerStyles(
     }
 
     /* RTL specific styles */
-    :host([dir='rtl']) [part='label']:not([empty]) {
-      margin: 0.1875em 0.375em 0.1875em 0.875em;
+    :host([dir='rtl'][has-label]) ::slotted(label) {
+      padding: var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-xs) var(--lumo-space-s);
     }
 
     /* Transition the checkmark if activated with the mouse (disabled for grid select-all this way) */
@@ -117,6 +127,7 @@ registerStyles(
 
     /* Used for activation "halo" */
     [part='checkbox']::before {
+      pointer-events: none;
       color: transparent;
       display: inline-block;
       width: 100%;

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

@@ -14,25 +14,18 @@ registerStyles(
       -webkit-tap-highlight-color: transparent;
     }
 
-    [part='label']:not([empty]) {
-      margin: 3px 12px 3px 6px;
-    }
-
-    [part='native-checkbox'] {
-      opacity: 0;
-      position: absolute;
+    :host([has-label]) ::slotted(label) {
+      padding: 3px 12px 3px 6px;
     }
 
     [part='checkbox'] {
       display: inline-block;
       width: 16px;
       height: 16px;
-      flex: none;
       margin: 4px;
       position: relative;
       border-radius: 2px;
       box-shadow: inset 0 0 0 2px var(--material-secondary-text-color);
-      pointer-events: none;
       line-height: 1.275;
       background-color: transparent;
     }
@@ -41,6 +34,7 @@ registerStyles(
     [part='checkbox']::before {
       /* Needed to align the checkbox nicely on the baseline */
       content: '\\2003';
+      pointer-events: none;
       display: inline-block;
       width: 100%;
       height: 100%;
@@ -55,6 +49,7 @@ registerStyles(
     /* Used for the checkmark */
     [part='checkbox']::after {
       content: '';
+      pointer-events: none;
       display: inline-block;
       width: 10px;
       height: 19px;
@@ -113,7 +108,7 @@ registerStyles(
       color: var(--material-disabled-text-color);
     }
 
-    :host([disabled]) ::slotted(*) {
+    :host([disabled]) ::slotted(label) {
       color: inherit;
     }
 
@@ -127,8 +122,8 @@ registerStyles(
     }
 
     /* RTL specific styles */
-    :host([dir='rtl']) [part='label']:not([empty]) {
-      margin: 3px 6px 3px 12px;
+    :host([dir='rtl'][has-label]) ::slotted(label) {
+      padding: 3px 6px 3px 12px;
     }
   `,
   { moduleId: 'material-checkbox' }