@vaadin/checkbox 23.0.0-alpha5 → 23.0.0-beta4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/checkbox",
-  "version": "23.0.0-alpha5",
+  "version": "23.0.0-beta4",
   "publishConfig": {
     "access": "public"
   },
@@ -34,16 +34,16 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.0.0-alpha5",
-    "@vaadin/field-base": "23.0.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha5",
-    "@vaadin/vaadin-material-styles": "23.0.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha5"
+    "@vaadin/component-base": "23.0.0-beta4",
+    "@vaadin/field-base": "23.0.0-beta4",
+    "@vaadin/vaadin-lumo-styles": "23.0.0-beta4",
+    "@vaadin/vaadin-material-styles": "23.0.0-beta4",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-beta4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.0"
   },
-  "gitHead": "74f9294964eb8552d96578c14af6ad214f5257bc"
+  "gitHead": "d0b447f1c31ca4256a5e26f2dcd27784447ff79b"
 }

package/src/vaadin-checkbox.d.ts

@@ -8,7 +8,7 @@ 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 { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
-import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js';
+import { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -61,7 +61,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 SlotLabelMixin(
+declare class Checkbox extends LabelMixin(
   CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement))))))
 ) {
   /**

package/src/vaadin-checkbox.js

@@ -10,8 +10,9 @@ 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 { 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';
-import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js';
+import { SlotTargetController } from '@vaadin/field-base/src/slot-target-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -53,9 +54,9 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes ActiveMixin
  * @mixes DelegateFocusMixin
  * @mixes CheckedMixin
- * @mixes SlotLabelMixin
+ * @mixes LabelMixin
  */
-class Checkbox extends SlotLabelMixin(
+class Checkbox extends LabelMixin(
   CheckedMixin(DelegateFocusMixin(ActiveMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))))))
 ) {
   static get is() {
@@ -78,13 +79,14 @@ class Checkbox extends SlotLabelMixin(
         }
 
         .vaadin-checkbox-container {
-          display: inline-flex;
+          display: grid;
+          grid-template-columns: auto 1fr;
           align-items: baseline;
         }
 
         .vaadin-checkbox-wrapper {
           position: relative;
-          flex: none;
+          height: 100%;
         }
 
         /* visually hidden */
@@ -178,29 +180,18 @@ class Checkbox extends SlotLabelMixin(
       });
       this.addController(this._inputController);
       this.addController(new LabelledInputController(this.inputElement, this._labelController));
+      this.addController(
+        new SlotTargetController(
+          this.$.noop,
+          () => this._labelController.node,
+          () => this.__warnDeprecated()
+        )
+      );
     }
   }
 
-  /**
-   * A reference to the default slot from which nodes are copied to the label node.
-   *
-   * @override
-   * @protected
-   * @type {HTMLSlotElement}
-   */
-  get _sourceSlot() {
-    return this.$.noop;
-  }
-
-  /**
-   * Override __copyNodesToSlotTarget from SlotTargetMixin to show a warning.
-   * @override
-   * @protected
-   * @param {!Array<!Node>} nodes
-   **/
-  __copyNodesToSlotTarget(nodes) {
-    super.__copyNodesToSlotTarget(nodes);
-
+  /** @private */
+  __warnDeprecated() {
     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.`

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

@@ -1,4 +1,5 @@
 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';
@@ -52,31 +53,26 @@ registerStyles(
 
     /* Checkmark */
     [part='checkbox']::after {
-      content: '';
       pointer-events: none;
-      display: inline-block;
-      width: 0;
-      height: 0;
-      border: 0 solid var(--lumo-primary-contrast-color);
-      border-width: 0.1875em 0 0 0.1875em;
-      box-sizing: border-box;
-      transform-origin: 0 0;
+      font-family: 'lumo-icons';
+      content: var(--lumo-icons-checkmark);
+      color: var(--lumo-primary-contrast-color);
+      font-size: calc(var(--lumo-size-m) / 2 + 2px);
+      line-height: 1;
       position: absolute;
-      top: 0.8125em;
-      left: 0.5em;
-      transform: scale(0.55) rotate(-135deg);
+      top: -1px;
+      left: -1px;
+      contain: content;
       opacity: 0;
     }
 
     :host([checked]) [part='checkbox']::after {
       opacity: 1;
-      width: 0.625em;
-      height: 1.0625em;
     }
 
     /* Indeterminate checkmark */
     :host([indeterminate]) [part='checkbox']::after {
-      transform: none;
+      content: '';
       opacity: 1;
       top: 45%;
       height: 10%;
@@ -85,7 +81,6 @@ registerStyles(
       width: auto;
       border: 0;
       background-color: var(--lumo-primary-contrast-color);
-      transition: opacity 0.25s;
     }
 
     /* Focus ring */
@@ -108,7 +103,7 @@ registerStyles(
     }
 
     :host([disabled]) [part='checkbox']::after {
-      border-color: var(--lumo-contrast-30pct);
+      color: var(--lumo-contrast-30pct);
     }
 
     :host([indeterminate][disabled]) [part='checkbox']::after {
@@ -120,11 +115,6 @@ registerStyles(
       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) */
-    :host(:hover) [part='checkbox']::after {
-      transition: width 0.1s, height 0.25s;
-    }
-
     /* Used for activation "halo" */
     [part='checkbox']::before {
       pointer-events: none;