@vaadin/field-base 25.0.0-alpha15 → 25.0.0-alpha17

package/package.json

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

package/src/error-controller.js

@@ -97,7 +97,7 @@ export class ErrorController extends SlotChildObserveController {
    * Note: unlike with other controllers, this method is
    * called for both default and custom error message.
    *
-   * @param {Node | undefined} node
+   * @param {Node | undefined} errorNode
    * @protected
    * @override
    */

package/src/helper-controller.js

@@ -38,7 +38,6 @@ export class HelperController extends SlotChildObserveController {
    * Override method inherited from `SlotChildObserveController`
    * to create the default helper element lazily as needed.
    *
-   * @param {Node | undefined} node
    * @protected
    * @override
    */

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
@@ -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]) {

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'] {