@vaadin/checkbox 24.5.0-alpha1 → 24.5.0-alpha11

package/README.md

@@ -53,7 +53,7 @@ import '@vaadin/checkbox/src/vaadin-checkbox.js';
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/checkbox",
-  "version": "24.5.0-alpha1",
+  "version": "24.5.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -37,22 +37,22 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@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",
+    "@vaadin/a11y-base": "24.5.0-alpha11",
+    "@vaadin/component-base": "24.5.0-alpha11",
+    "@vaadin/field-base": "24.5.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha11",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.6.0",
-    "sinon": "^13.0.2"
+    "@vaadin/chai-plugins": "24.5.0-alpha11",
+    "@vaadin/testing-helpers": "^1.0.0",
+    "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a"
+  "gitHead": "8426cea2803a10db518fc85752eeea4c5c755687"
 }

package/src/vaadin-checkbox-mixin.js

@@ -86,7 +86,7 @@ export const CheckboxMixin = (superclass) =>
 
     /** @override */
     static get delegateAttrs() {
-      return [...super.delegateAttrs, 'name', 'invalid'];
+      return [...super.delegateAttrs, 'name', 'invalid', 'required'];
     }
 
     constructor() {

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

@@ -27,6 +27,7 @@ registerStyles(
       --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
       --_selection-color: var(--vaadin-selection-color, var(--lumo-primary-color));
       --_invalid-background: var(--vaadin-input-field-invalid-background, var(--lumo-error-color-10pct));
+      --_disabled-checkmark-color: var(--vaadin-checkbox-disabled-checkmark-color, var(--lumo-contrast-30pct));
     }
 
     [part='label'] {
@@ -57,7 +58,9 @@ registerStyles(
       position: relative;
       border-radius: var(--vaadin-checkbox-border-radius, var(--lumo-border-radius-s));
       background: var(--vaadin-checkbox-background, var(--lumo-contrast-20pct));
-      transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), background-color 0.15s;
+      transition:
+        transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2),
+        background-color 0.15s;
       cursor: var(--lumo-clickable-cursor);
       /* Default field border color */
       --_input-border-color: var(--vaadin-input-field-border-color, var(--lumo-contrast-50pct));
@@ -128,12 +131,16 @@ registerStyles(
 
     /* Focus ring */
     :host([focus-ring]) [part='checkbox'] {
-      box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color),
+      box-shadow:
+        0 0 0 1px var(--lumo-base-color),
+        0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color),
         inset 0 0 0 var(--_input-border-width, 0) var(--_input-border-color);
     }
 
     :host([focus-ring][readonly]:not([checked]):not([indeterminate])) [part='checkbox'] {
-      box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
+      box-shadow:
+        0 0 0 1px var(--lumo-base-color),
+        0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
     }
 
     /* Disabled */
@@ -147,11 +154,11 @@ registerStyles(
     }
 
     :host([disabled]) [part='checkbox'] {
-      background-color: var(--lumo-contrast-10pct);
+      background-color: var(--vaadin-checkbox-disabled-background, var(--lumo-contrast-10pct));
     }
 
     :host([disabled]) [part='checkbox']::after {
-      color: var(--lumo-contrast-30pct);
+      color: var(--_disabled-checkmark-color);
     }
 
     :host([disabled]) [part='label'],
@@ -161,7 +168,7 @@ registerStyles(
     }
 
     :host([indeterminate][disabled]) [part='checkbox']::after {
-      background-color: var(--lumo-contrast-30pct);
+      background-color: var(--_disabled-checkmark-color);
     }
 
     :host([readonly][checked]) [part='checkbox'],
@@ -180,7 +187,9 @@ registerStyles(
       background-color: inherit;
       transform: scale(1.4);
       opacity: 0;
-      transition: transform 0.1s, opacity 0.8s;
+      transition:
+        transform 0.1s,
+        opacity 0.8s;
     }
 
     /* Hover */

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

@@ -45,7 +45,9 @@ registerStyles(
       background-color: var(--material-disabled-text-color);
       transform: scale(0);
       opacity: 0;
-      transition: transform 0s 0.8s, opacity 0.8s;
+      transition:
+        transform 0s 0.8s,
+        opacity 0.8s;
       will-change: transform, opacity;
     }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/checkbox",
-  "version": "24.5.0-alpha1",
+  "version": "24.5.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.5.0-alpha1",
+  "version": "24.5.0-alpha11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {