@vaadin/checkbox 24.0.0-alpha1 → 24.0.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/checkbox",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -36,11 +36,11 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha1",
-    "@vaadin/field-base": "24.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
+    "@vaadin/component-base": "24.0.0-alpha11",
+    "@vaadin/field-base": "24.0.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -51,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "641b3d96ceeb3e503a093682ebe686afdd8c3a68"
 }

package/src/vaadin-checkbox.d.ts

@@ -1,13 +1,13 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 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 { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-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 { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 

package/src/vaadin-checkbox.js

@@ -1,19 +1,18 @@
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 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';
 import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-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 { LabelMixin } from '@vaadin/field-base/src/label-mixin.js';
 import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
-import { SlotTargetController } from '@vaadin/field-base/src/slot-target-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -85,35 +84,42 @@ class Checkbox extends LabelMixin(
           align-items: baseline;
         }
 
-        .vaadin-checkbox-wrapper {
-          position: relative;
-          height: 100%;
+        [part='checkbox'],
+        ::slotted(input),
+        ::slotted(label) {
+          grid-row: 1;
+        }
+
+        [part='checkbox'],
+        ::slotted(input) {
+          grid-column: 1;
+        }
+
+        [part='checkbox'] {
+          width: var(--vaadin-checkbox-size, 1em);
+          height: var(--vaadin-checkbox-size, 1em);
+        }
+
+        [part='checkbox']::before {
+          display: block;
+          content: '\\202F';
+          line-height: var(--vaadin-checkbox-size, 1em);
+          contain: paint;
         }
 
         /* visually hidden */
         ::slotted(input) {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          width: 100%;
-          height: 100%;
           opacity: 0;
           cursor: inherit;
           margin: 0;
+          align-self: stretch;
+          -webkit-appearance: none;
         }
       </style>
       <div class="vaadin-checkbox-container">
-        <div class="vaadin-checkbox-wrapper">
-          <div part="checkbox"></div>
-          <slot name="input"></slot>
-        </div>
-
+        <div part="checkbox"></div>
+        <slot name="input"></slot>
         <slot name="label"></slot>
-
-        <div style="display: none !important">
-          <slot id="noop"></slot>
-        </div>
       </div>
       <slot name="tooltip"></slot>
     `;
@@ -182,25 +188,10 @@ class Checkbox extends LabelMixin(
       }),
     );
     this.addController(new LabelledInputController(this.inputElement, this._labelController));
-    this.addController(
-      new SlotTargetController(
-        this.$.noop,
-        () => this._labelController.node,
-        () => this.__warnDeprecated(),
-      ),
-    );
     this._tooltipController = new TooltipController(this);
     this.addController(this._tooltipController);
   }
 
-  /** @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.`,
-    );
-  }
-
   /**
    * Extends the method from `ActiveMixin` in order to
    * prevent setting the `active` attribute when interacting with a link inside the label.

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

@@ -22,23 +22,23 @@ registerStyles(
       user-select: none;
       cursor: default;
       outline: none;
+      --_checkbox-size: var(--vaadin-checkbox-size, calc(var(--lumo-size-m) / 2));
     }
 
     :host([has-label]) ::slotted(label) {
-      padding: var(--lumo-space-xs) var(--lumo-space-s) var(--lumo-space-xs) var(--lumo-space-xs);
+      padding-block: var(--lumo-space-xs);
+      padding-inline: var(--lumo-space-xs) var(--lumo-space-s);
     }
 
     [part='checkbox'] {
-      width: calc(var(--lumo-size-m) / 2);
-      height: calc(var(--lumo-size-m) / 2);
+      width: var(--_checkbox-size);
+      height: var(--_checkbox-size);
       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;
-      line-height: 1.2;
       cursor: var(--lumo-clickable-cursor);
-      flex: none;
     }
 
     :host([indeterminate]) [part='checkbox'],
@@ -46,18 +46,13 @@ registerStyles(
       background-color: var(--lumo-primary-color);
     }
 
-    /* Needed to align the checkbox nicely on the baseline */
-    [part='checkbox']::before {
-      content: '\\2003';
-    }
-
     /* Checkmark */
     [part='checkbox']::after {
       pointer-events: none;
       font-family: 'lumo-icons';
       content: var(--lumo-icons-checkmark);
       color: var(--lumo-primary-contrast-color);
-      font-size: calc(var(--lumo-size-m) / 2 + 2px);
+      font-size: calc(var(--_checkbox-size) + 2px);
       line-height: 1;
       position: absolute;
       top: -1px;
@@ -119,9 +114,9 @@ registerStyles(
     [part='checkbox']::before {
       pointer-events: none;
       color: transparent;
-      display: inline-block;
       width: 100%;
       height: 100%;
+      line-height: var(--_checkbox-size);
       border-radius: inherit;
       background-color: inherit;
       transform: scale(1.4);

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

@@ -12,6 +12,7 @@ registerStyles(
       user-select: none;
       outline: none;
       -webkit-tap-highlight-color: transparent;
+      --_checkbox-size: var(--vaadin-checkbox-size, 16px);
     }
 
     :host([has-label]) ::slotted(label) {
@@ -19,25 +20,21 @@ registerStyles(
     }
 
     [part='checkbox'] {
-      display: inline-block;
-      width: 16px;
-      height: 16px;
+      width: var(--_checkbox-size);
+      height: var(--_checkbox-size);
       margin: 4px;
       position: relative;
       border-radius: 2px;
       box-shadow: inset 0 0 0 2px var(--material-secondary-text-color);
-      line-height: 1.275;
       background-color: transparent;
     }
 
     /* Used for the ripple */
     [part='checkbox']::before {
-      /* Needed to align the checkbox nicely on the baseline */
-      content: '\\2003';
       pointer-events: none;
-      display: inline-block;
       width: 100%;
       height: 100%;
+      line-height: var(--_checkbox-size);
       border-radius: 50%;
       background-color: var(--material-disabled-text-color);
       transform: scale(0);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/checkbox",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/checkbox",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {