@vaadin/field-base 25.0.0-alpha16 → 25.0.0-alpha18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "25.0.0-alpha16",
+  "version": "25.0.0-alpha18",
   "publishConfig": {
     "access": "public"
   },
@@ -31,15 +31,15 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha16",
-    "@vaadin/component-base": "25.0.0-alpha16",
+    "@vaadin/a11y-base": "25.0.0-alpha18",
+    "@vaadin/component-base": "25.0.0-alpha18",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha16",
-    "@vaadin/test-runner-commands": "25.0.0-alpha16",
+    "@vaadin/chai-plugins": "25.0.0-alpha18",
+    "@vaadin/test-runner-commands": "25.0.0-alpha18",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "sinon": "^21.0.0"
   },
-  "gitHead": "4b316158a4a4f702f032bc9940fc82f0faa840f4"
+  "gitHead": "cb5cafb5687a117ebead1b81e2116991cec13abe"
 }

package/src/input-control-mixin.js

@@ -115,14 +115,14 @@ export const InputControlMixin = (superclass) =>
 
           /* Override built-in autofill styles */
           ${tag} > input[slot='input']:autofill {
-            -webkit-text-fill-color: var(--vaadin-input-field-autofill-color, black);
-            background-clip: text;
+            -webkit-text-fill-color: var(--vaadin-input-field-autofill-color, black) !important;
+            background-clip: text !important;
           }
 
-          ${tag}:has(> input[slot='input']:autofill) {
-            --vaadin-input-field-background: var(--vaadin-input-field-autofill-background, lightyellow);
-            --vaadin-input-field-value-color: var(--vaadin-input-field-autofill-color, black);
-            --vaadin-input-field-button-color: var(--vaadin-input-field-autofill-color, black);
+          ${tag}:has(> input[slot='input']:autofill)::part(input-field) {
+            --vaadin-input-field-background: var(--vaadin-input-field-autofill-background, lightyellow) !important;
+            --vaadin-input-field-value-color: var(--vaadin-input-field-autofill-color, black) !important;
+            --vaadin-input-field-button-color: var(--vaadin-input-field-autofill-color, black) !important;
           }
         `,
       ];

package/src/styles/checkable-base-styles.js

@@ -11,7 +11,7 @@ export const checkable = (part, propName = part) => css`
   :host {
     align-items: center;
     display: inline-grid;
-    gap: var(--vaadin-${unsafeCSS(propName)}-gap, 0.25lh var(--vaadin-gap-s));
+    gap: var(--vaadin-${unsafeCSS(propName)}-gap, var(--vaadin-gap-xs) var(--vaadin-gap-s));
     grid-template-columns: auto 1fr;
     /*
       Using minmax(auto, max-content) works around a Safari 17 issue where placing a checkbox
@@ -84,7 +84,7 @@ export const checkable = (part, propName = part) => css`
     background: var(--vaadin-${unsafeCSS(propName)}-background, var(--vaadin-background-color));
     border-color: var(--vaadin-${unsafeCSS(propName)}-border-color, var(--vaadin-input-field-border-color, var(--vaadin-border-color)));
     border-radius: var(--vaadin-${unsafeCSS(propName)}-border-radius, var(--vaadin-radius-s));
-    border-style: solid;
+    border-style: var(--_border-style, solid);
     --_border-width: var(--vaadin-${unsafeCSS(propName)}-border-width, var(--vaadin-input-field-border-width, 1px));
     border-width: var(--_border-width);
     box-sizing: border-box;
@@ -97,7 +97,7 @@ export const checkable = (part, propName = part) => css`
   :host(:is([checked], [indeterminate])) {
     --vaadin-${unsafeCSS(propName)}-background: var(--vaadin-color);
     --vaadin-${unsafeCSS(propName)}-border-color: transparent;
-    --vaadin-${unsafeCSS(propName)}-color: var(--vaadin-background-color);
+    --vaadin-${unsafeCSS(propName)}-color: oklch(from var(--vaadin-${unsafeCSS(propName)}-background) clamp(0, (0.62 - l) * 1000, 1) 0 0);
   }
 
   :host([disabled]) {
@@ -136,19 +136,27 @@ export const checkable = (part, propName = part) => css`
 
   @media (forced-colors: active) {
     :host(:is([checked], [indeterminate])) {
-      --vaadin-${unsafeCSS(propName)}-border-color: CanvasText;
+      --vaadin-${unsafeCSS(propName)}-border-color: CanvasText !important;
+    }
+
+    :host(:is([checked], [indeterminate])) [part='${unsafeCSS(part)}'] {
+      background: SelectedItem !important;
+    }
+
+    :host(:is([checked], [indeterminate])) [part='${unsafeCSS(part)}']::after {
+      background: SelectedItemText !important;
     }
 
     :host([readonly]) [part='${unsafeCSS(part)}']::after {
-      background: CanvasText;
+      background: CanvasText !important;
     }
 
     :host([disabled]) {
-      --vaadin-${unsafeCSS(propName)}-border-color: GrayText;
+      --vaadin-${unsafeCSS(propName)}-border-color: GrayText !important;
     }
 
     :host([disabled]) [part='${unsafeCSS(part)}']::after {
-      background: GrayText;
+      background: GrayText !important;
     }
   }
 `;

package/src/styles/container-base-styles.js

@@ -10,7 +10,7 @@ export const container = css`
   [class$='container'] {
     display: flex;
     flex-direction: column;
-    gap: var(--vaadin-input-field-container-gap, var(--vaadin-gap-s));
+    gap: var(--vaadin-input-field-container-gap, var(--vaadin-gap-xs));
     min-width: 100%;
     max-width: 100%;
     width: var(--vaadin-field-default-width, 12em);

package/src/styles/group-base-styles.js

@@ -9,6 +9,7 @@ import { css, unsafeCSS } from 'lit';
 export const group = (name = 'checkbox') => css`
   :host {
     width: fit-content;
+    gap: var(--vaadin-${unsafeCSS(name)}-group-gap, var(--vaadin-gap-xs));
   }
 
   .vaadin-group-field-container {
@@ -19,11 +20,10 @@ export const group = (name = 'checkbox') => css`
   [part='group-field'] {
     display: flex;
     flex-direction: column;
-    gap: var(--vaadin-${unsafeCSS(name)}-group-gap, var(--vaadin-gap-s));
   }
 
   [part='group-field'] {
-    gap: 0.5lh 1.5em;
+    gap: var(--vaadin-gap-xs) var(--vaadin-gap-xl);
   }
 
   :host([theme~='horizontal']) [part='group-field'] {